Game UX Style Guide: Why Do You Need One?

Editor’s Note: this post was originally published by Om Tandon, Director of User Experience at Digit. With over 14 years experience, Om specializes in UX design, UI design and User Interaction, and has previously worked at Gameloft and June Software. 

Is it just me or are UX playbooks, UX pattern libraries, UX style guides not talked about enough? Or incorporated as often as UI style guides or brand style guides? Are these just buzzwords or do they really not matter? Or is there some kernel of truth and real benefit of creating them, be it in games or enterprise softwares and apps?

Before we start talking about the HOW, it is inherently important to ask WHY. Why do you even need a UX playbook, pattern library or style guide in first place?

The origins

Style guides have been around for a long long while. Origin of style guides date back to advertising and branding times, when it became essential to come up with a set of rules around consistent brand representation as well as to distinguish products between the competition.

“A style guide is a document that provides guidelines for the way your brand should be presented from both a graphic and language perspective. The purpose of a style guide is to make sure that multiple contributors create in a clear and cohesive way that reflects the corporate style and ensures brand consistency with everything from design to writing.” – Online Definition

Skype brand style guide

Example: Skype’s brand style guide calls out the correct & incorrect ways of using the logo.

Going back to the definition, here are a couple of things which immediately jump out and the why style guides are so important:

1. Consistency across documents, screens and digital media in terms of brand and visual representation.
2. Cohesiveness: All designers speaking the same language even if a change of guard happens, new designers can onboard quickly.
3. Guidelines act as a rulebook to bring people back to original vision and make a case with multiple stakeholders.

These reasons are quite compelling as great brands tend to be around for a really long time. There could be multiple people handling how the brand is used across print advertising, video ads, day to day stationery items and so on, so every brand normally has a unique image that all their staff should follow.

A unique voice, and to a great degree an underlying tone or attitude, should resonate with the end users of the product. There has to be certain rules to make sure whenever the brand appears in front of the public, those guidelines are followed so that the brand does not loose its voice and identity.

UI style guide

With UI design becoming mainstay of digital products, many products and UI designers maintain the best practices of having a UI style guide. This normally dictates and harmonizes the UI of the entire game or app; right from colors, buttons, UI elements, font styles through to iconography and more.

Example: A UI style guide, detailing colors, buttons and font usage rules

Is the same true for UX? I can say with conviction that:

90% of the studios worldwide do not invest in a dedicated UX style guide

[bctt tweet=”90% of the studios worldwide do not invest in a dedicated UX style guide – Find out more on why your project need a UX style guide by @omatterix” username=”GameAnalytics”]

UX style guide: the missing link?

With UX gaining immense traction as a design discipline and getting embedded in the design and pre-production process, do you ever wonder if there should be a style guide exclusive to UX? To ensure consistency of UX principles, should rules be put in place that a project follows so multiple designers over time share and speak the same UX vision & language?

In context of games, UX style guides need to become even more apparent compared to when we see game design disciplines having dedicated guideline documents.

Game feature pre-production depends heavily on the following design disciplines:

• Game Designers
• UX Designers
• UI Designers
• Art

From the image above, it is quite obvious how each traditional design discipline creates and maintains its own dedicated manual. This is basically a set of guidelines that act as a map to keep coming back to as the project becomes more extensive, but still keeps the original vision in place.

With games now moving towards more of “Games as a Service” (GaaS) model, many games will have shelf lives of over 6+ years; enough time for influx and outflux of core design team members.

As new people join a company, style guides help with onboarding and explain why certain design choices were made. Did they have a reason behind them? Were they just adhoc? Or was it because XYZ game (top grossing) do it so we should follow it too?

If reasons mentioned above resonate with you and you understand why a UX style guide might be needed, then the next question is HOW do you build one? There are plenty of templates around if you are looking for a UI or brand style guide, as these have been around for a while.

As an example, a UI style guide or pattern library may have the following components: color, font, iconography, buttons, UI elements etc. Basically, all of the elements that form the basis of strong visual design.

As far as UX style guide goes, there aren’t many templates around, as different companies may choose to include different topics based on how they approach UX.

How do you build a UX style guide?

One way to approach a UX Style guide is to include what I call “UX Foundation Blocks” for your project, especially if you are starting to work on a new game from scratch. Based on best prevailing UX practices, this should be a living and breathing document requiring updates when and as needed.

[bctt tweet=”One way to approach a UX style guide is to include “UX Foundation Blocks” for your project, especially if you are starting to work on a new game from scratch. Read more on UX style guides by @omatterix ” username=”GameAnalytics”]

1. Introduction & usage:

While this may sound obvious, it’s good to define the following with some example definitions:

1) What is the purpose of this document?

To have a set of UX guidelines that are specific to a project, as well as establish the UX vision. This is so the UX design works across the length and breadth of the project consistently and cohesively, and among different team members.

2) How to use it and who should use it?

It should be used as a reference manual by all designers on the team to ensure features and UX design work adheres to defined principles. It should be circulated among the stakeholder group and creative teams for broader understanding of the product.

3) When and how should it be used?

New team members should use the UX style guide to understand the underlying UX vision, as well as best practices used for making your case against product, GD or other stakeholders if there is a conflict of interest with the UX design.

2. Product fit:

UX style guides should include an indication of what is the market fit for your game, as well as which genre it clearly belongs to or overlaps with. This is a high level exercise of roughly defining the target audience and competitive games your product is going against.

Since there are tons of demographics based on quantitative and qualitative data that exist for casual, mid-core and hard-core games, knowing the product fit early acts as a pointer for your design team to draw comparisons and aid research of similar games and player segments that your game is targeting.

Your game may not fit neatly into just any one genre as there is a greater emphasis nowadays on widening the funnels, with a mix and mash of game mechanics as well as maturing pool of players. As one of my articles on maturing players covered it here, your game’s product fit might overlap.

Product fit should clearly reflect which genres it is trying to bridge so UX and UI norms can account for learning, interaction and behavioral patterns of those genre of players. Example: when conducting a play test for a game that is cross genre, you don’t just want casual players, but mid-core players as well.

It could have additional details, like if it’s IP based or if it has cross genre funnel. This exercise, done with key stakeholders (Product, GD, UX, Art), is very effective in setting high level vision and gives clues for the next section of the UX style guide.

3. Target demographics:

Since any form of UX inception begins with knowing where your target audience fits (see product fit chart above), it now makes more sense to add a few personas of your designated target audience and the method by which you collect that data.

This is handy as 2-3 years down the line when you are looking at the above information, you would know if you need to update the personas based on changing player habits.

4. Heuristics and core principles:

This is one of the most important sections of the style guide. While the elements above are mainly dictated by the market and player base, here you have an opportunity to pick and choose the best practices and cardinal rules of your UX. You can look at existing trends to define which core principles you or your team would like to include, as well as define the core heuristics of your game.

In the “Phone First & Tactile” example for a mobile game, the UX principle calls for keeping the interaction and form factor pertinent and responsive to mobile and tablet devices, while also laying emphasis on keeping the perceived affordance of CTA’s visually tactile rather than flat. This could be from an insight based on demographics, or simply to distinguish CTAs clearly from other content on your content heavy screens.

“Don’t make me think” is a renowned UX principle where we do not want players to be overwhelmed either by the information or choices in front of them. We want to make sure the next primary action is clear to them, whereby showing good and bad examples of principles in practice will aid thought process.

Bullet points in the slide above call for logical grouping of UI in a functional manner. For example, aggregating social actions in one part of the screen or combat related in another will thereby divide CTAs and information into primary, secondary & tertiary buckets. By doing this, the complexity can be hidden behind tooltips, info buttons and is also available on request; not upfront.

“Leverage Muscle Memory” calls for creating and using extensively familiar form factors and interaction patterns so players don’t have to keep relearning an interface every time a new feature comes up. This also helps keep the development costs low. UX designers usually have a widget pattern library they can keep reusing for developing new features, so that this familiarity and limited use of widgets is embedded into the design process before it reaches UI or dev teams.

Based on the complexity of a project, it is a good idea to restrict this number to 5-6 flexible widgets. Of course there will be always room for bespoke widgets if they’re needed by the game mechanics, but holistically the entire game will be built on top of limited number of widgets that avoid form factor fluctuations and extensive learning on users part.

5. Information architecture (IA):

Information Architecture and screen flows can definitely find a place in your UX style guide as it can give you an holistic birds eye view of your project at a glance. Above is an example of IA of a relatively simple casual game. But as mid-core and hard-core games can be way more complex with more and more features getting added over time, you might want to consider adding it as a link to the document.

6. Red routes:

Red routes traditionally refer to fast travel routes. This works by not allowing vehicles to stop when driving on this particular route, so to avoid traffic jams but also allow fast commuting. Applied to UX, red routes are simply data driven or design driven maps that account for actions users most frequently or are likely to take when using your product. The table above shows a breakdown of actions players are likely to take based on their frequency in an hypothetical game.

Red routes are handy to reduce load times between frequent actions and features, and can be an easy access to enter & exit these loops. So the dev focus can be on reducing load times and making transition faster among red route loops. This is done by shifting load times to more less frequently used areas of the game, which will result in a more seamless experience for the player.

Rarely used features or actions might also need refreshing information on how to use the feature. Based on data, it can also help design solutions direct players to go to some features, like store or social help (include more prominent callouts or daily free items etc.), to optimize metrics.

7. UX writing:

UX writing is the new cool kid on the block, trickling its way into game UX. Hype apart, UX writing is very effective and important to UX as language and content can be riddled with all sort of friction and subjective opinions. It’s also worth investing into presenting your information in an effective manner, so this can be comprehended by a majority of your player base as well as working well in translations. In addition, it also can include rules regarding rounding of digits, truncating string lengths, terminology exercises which facilitate players assimilation of info thereby avoiding too much work on their part.

Determine the tone of your narrative. Handling error states effectively with players facing quality are other benefits.

Conclusion

Different companies with different gaming projects and different UX teams might have their own take on the UX style guide. This could be based on the complexity of the game they are building, or the UX principles and foundation blocks they believe work well with their intended target audience based on data they have. Point being, there are many ways to skin a cat, above is one template example.

1. UX style guides help create a shared UX vision across the entire product pipeline and stakeholder group.
2. UX style guides help keep the UX vision and its practice in design consistent and cohesive among design team members, and also helps onboard new UX designers over the products shelf life.
3. It helps in solving design conflicts between game designers, PM’s and UX when features or complexity contrary to the guide arise, reminding stakeholders about core UX pillars they have signed off on when the style guide was created. A feature or product task is detrimental to existing products user experience or against the core UX vision.

[bctt tweet=”By adopting a UX style guide for your project, you will able to keep the UX vision and its practice consistent among design team members – Read more on why you may need a UX style guide by @omatterix ” username=”GameAnalytics”]

If you liked this post, you can check out my other articles and Game UX deconstructs here. Feel free to follow or connect with me for my future articles.

Update (September,7)

Talk about validation! :D, Just days after this article was released, an NN Group podcast advocating for need of UX style guides! And pattern libraries for a holistic design system.