Is it just me or are UX Playbooks, UX Pattern Libraries, UX Style guides not talked about enough and 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?

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 Styleguide

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 thing which immediately jump out and the why style guides are so important:

These reasons were quiet compelling as brands tend to be around for a really long time and there could be multiple people handling how the brand is used across print advertising, video ads, day to day stationary items and so on. Every brand had a unique image that it projects onto its customers. A unique voice, and to a great degree an underlying tone or attitude, that resonates 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 rules are followed so that the brand does not loose it’s voice & 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 which dictates and harmonizes the UI of the entire game or the app; right from colors, to buttons, to UI elements, font styles to iconography etc.

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

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

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 for exactly the reasons mentioned above to ensure consistency of UX principles, consistent rules that a project follows as well as to ensure multiple designers over time to share and speak the same UX vision & language?

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

From the image above, it is quiet obvious how each traditional design discipline creates and maintains its own dedicated manual which is basically a set of guidelines that act as a map to keep coming back to as the project becomes more extensive but still keeping 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 outflx of core design team members.

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

Example a UI style guide or pattern library may have following components: Color, Font, Iconography, Buttons, UI Elements, all the elements that form the basis of strong visual design.

HOW to build a UX Styleguide?

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 or a new project, based on best prevailing UX practices, a living and breathing document needing updates as needed.

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 so UX design works across the length and breadth of the project consistently and cohesively among team members. To establish the UX vision of the project.

2) How to use it and who all should be using it?

It should be used as a reference manual by all designers on the team to ensure feature 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 to use it?

It should be used to onboard new team members to understand the underlying UX vision and best practices used for making your case against product, GD or other stakeholders if there is a conflict of interest or justifying player facing values.

2.      Product Fit :

UX style guide should include an indication of what is the market fit for your game, 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 quantitative and qualitative data that exist for casual, mid-core and hard-core games, knowing the product fit early acts as pointer for your design team to draw comparisons and aid research of similar games and players pool 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 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 as well.

It could have additional details like 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 your target audience which product fit chart (above) to help figure out, it now makes more sense to add a few personas of your designated target audience and the method by which you collected that data.

This is handy. 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 and it would also be clear if someone did just desk research then may be a different technique or study can be applied.

4.      Heuristics and Core Principles :

This is one of the most important section 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, cardinal rules of UX and look at existing trends and defining which core principles you or your team would like to include to define the core heuristics of your game.

"Phone First & Tactile" example for a mobile game, the UX principle above 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 if you know your game genre will have 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 but want to ensure 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 thereby dividing, CTAs and information into primary, secondary & tertiary buckets so the complexity can be hidden behind tooltips, info buttons and 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 imbibed in to design process before it reaches UI or dev teams.

Based on complexity of 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 a 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.      IA :

Information Architecture and screen flows can definitely find a place in your UX style guide. It gives 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, if it's too extensive it can also be included as an link to the document.

6.      Red Routes

Red routes traditionally refer to the fast travel routes which allowed fast commuting by not allowing vehicles to stop when driving on this route to avoid traffic jams and ensure steady smooth and 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 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, an easy access to enter & exit these loops. So the dev focus can be on reducing load times and make transition faster among red route loops by shifting load times to more less frequently used areas of the game resulting in more seamless experiences for players.

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 directing players go to some features like store or social help features (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 it's 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. Presenting information in an effective manner which can be comprehended by a majority of your player base and works well in translations is well investing into. 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 player 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 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 guide helps keep the UX vision and it's practice in design consistent and cohesive among design team members, 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 and a feature or product ask is detrimental to existing products user experience or against the core UX vision.

Let me know in comments what other reasons or sections would be good to have in a UX style guide. Have fun creating one!

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