heuristic evaluation for games usability principles for video game design

Visual Design Heuristics

A heuristic lens to evaluate the digital interfaces and judge their compliance with recognized visual design principles.

Why do we need visual design heuristics?

Firstly, evaluating the visual designs of a digital product is always subjective, and ambiguity is the word that comes to my mind. Secondly, visual design is more than a decorative work, as it has to deal with consistency, accessibility, scalability and much more. In light of such facts, the heuristics defined below will help to objectively analyse the visual design aspects of a digital product, and thereby create a roadmap for potential improvements.

#1. Consistency and standards

Ambiguity around the usage of varying elements, content, scenarios or behaviour must be tackled. Analyse if the system under review has defined guidelines around typography, spacing, grid system, component variations, templates etc. Additionally, evaluate the level of adherence to their own design system. Read through the list of aspects used to evaluate the product in terms of consistency and standard.

Typography
• Font styling: letter spacing, line height, weight
• Text alignment: Left, centre, or right
•️ Casing: Upper, lower, or sentence

Call to action & loaders
• Variation and states
•️ Size

Margin
•️ Column grid system or varying breakpoints
•️ Horizontal spacing
•️ Padding in and around components

Form field
•️ Variation and states
•️ Size
•️ Hints and errors

Spacing
•️ Spacing guidelines
•️ Vertical spacing
•️ Between component and sections

Catalogue of other components and modules
•️ Variation and states
•️ Size

Iconography, illustration and brand language
•️ Visual styling, properties, and attributes
•️ Colour

#2. Visual hierarchy

Evaluate the page layouts across the system under review and judge the design maturity in terms of intentional scaling and proportion of elements. Naturally, analyse the eye movement are smoothly flowing throughout the length of the design and without unwanted disruptions. Read through the list of aspects used to evaluate the product in terms of visual hierarchy.

3D elements by Samuel Briskar & Ade Hidayat

Typographic hierarchy
• Emphasize information with higher significance.
•️ The title does not have to be bigger than the body. It's about setting a hierarchy for the eyes to follow.

Component hierarchy
•️ Emphasize the primary component
•️ Using colour or size

Decision-making hierarchy
•️ Emphasize the primary trigger point
•️ Using colour, imagery and size

Module hierarchy
•️ Emphasize module with higher significance
•️ Using imagery and colour

Depth perception
• Minimalist or flat design
•️ Differentiate interactive elements from the non-interactive bits.

#3. Balance

Analyse the level of optical balance (rather than mathematical/numerical) within the component level and complex module structures in the product under review. Balance refers to the quality of an aesthetically pleasing layout due to the proportion and distribution of design elements. Read through the list of aspects used to evaluate the product in terms of balance.

Hunting
️️•️ Identify components, modules, and sections with an unbalanced layout.
•️ It's optical and not mathematical balance.

Call to Action
White space is like the supporting cast whose duty is to make that the star of the show stands out more by not standing out so much themselves.

#4. Contract

Assess the ease with which users can distinguish design elements in terms of functions, expected behaviour, disparity, legibility etc. Read through the list of aspects used to evaluate the product in terms of contrast.

Legibility
The ease with which users can read.

Segmentation
️️️• Visually grouping elements and content with background differentiators or spacing.
️️️️• This quality must be analysed on page-level.
• Clean column and row structure to differentiate contents with text-heavy components.

Disparity
• Visible or understandable boundaries around interactive components.
• Distinguishable component state: default, selected, active, passive, or disabled.

#5. Aesthetic

Objectively gauge the design elements and their attributes. Make a note of all subjective perceptions and study the brand's adherence to its visual collaterals, application of typography, sense of cohesiveness, and overall styling of the design system. Read through the list of aspects used to evaluate the product in terms of aesthetics.

Imagery
• Brand cohesiveness
• Image quality
• Visual tone

Module size
• A module should neither be too big nor too small.
• Optimized components

Clutter
• Identify excess elements without any additional value.
• Information overload
•️ Identify redundant elements and content.

Diversion
•️ Attention-grabbing elements that deviate users from the primary user flow.
•️ Annoying pop-ups and advertisements

White space
White space is like the supporting cast whose duty is to make that the star of the show stands out more by not standing out so much themselves.

Pattern evaluation
•️ Trend evaluation
•️ Brand language
•️ Iconography
•️️ Fair usage: Using a conventional element for an unfamiliar function or feature.

#6. Visual response

Inspect the interactive elements and wait-time reactions in the product, and additionally, judge whether these aspects meet user expectations and further educates them to hint at the potential response. Read through the list of aspects used to evaluate the visual response of the product.

Hover or on-tap states
Inform the user that a component or module is interactive when the user hovers, clicks, or taps on the above-mentioned elements.

Loaders and shimmers
•️️ Use loaders to indicate a wait time
•️️ Users must understand that the page is not frozen.
•️️ Using shimming loaders with fun facts to tackle boredom gives them extra points.

Active, passive, and disabled states
•️️ Inform user that a specific selection is active
•️️ Distinguish the active components from the inactive or passive components.
•️️ Distinguish disabled and non-interactive components from the interactive bits.

#7. Responsiveness

All digital products are accessed through a myriad of platforms such as desktop machines, tablets, mobile phones, kiosks etc. Examine the aspects such as seamless experience, adaptation, and optimization of design systems across the different channels. Read through the list of aspects used to evaluate the responsive quality of the product.

Adaptive design approach
Fluid layout: The content must be visible and accessible on any device size.

Breakpoints
•️️ Identify when the change in structure happens.
•️️ Evaluate how the designs modify with changing breakpoints.

Change in the selection area
Reducing or expanding the selection or interactive area with the change in screen size and resolution.

Scalability
Reducing or expanding the element size with the change in screen size and resolution.

#8. Click Area

Investigate the interactive space around clickable elements. To illustrate, people use mobile applications using there fingers and gestures, and for the same reason, a minimum click area must be established for all interactive components. A standard click area range acceptable on all mobile platforms is 40px * 40px and above.

Component size
The size of an interactive component with accessibility and clickability in mind.

Enhanced click area
Enhancing the clickable area around elements with a visible boundary or container.

#9. Design enhancers

A good product becomes great when it's users truly feel that they are cared for. Learn from the products that push their digital experiences to the next level by creating an emotional bond between the product and the users. Read through the list of aspects used to evaluate the enhancers used in the product.

Personalization & digital identity
•️️ Flexibility and customization capabilities of the product.
•️️ Avatars & contexts that consider social aspects like gender neutrality, diversity, inclusivity, etc.

Suggestive visuals
•️️️ Use of engaging illustration, imagery, or animation for empty states.
•️️️ Reduce user frustration with interactive and comical error screens: 404 pages, app down for maintenance, unable to load, etc.

Dark mode
•️️️ Availability of the feature
•️️️️️ Accessibility maturity of dark mode
•️️ Does dark mode adhere to brand guidelines

#10. Reading pattern

Most people do not read the textual content presented in digital spaces, rather they scan for the information they need. That is to say, they inherently seek to be energy-efficient and choose the shortest route to reach their goal. Read through the list of aspects used to evaluate the ease with which users can scan for the necessary information.

Antidote implementation for enhanced reading
•️️ Include the most important points in the first two paragraphs on the page.
•️ Use headings and subheadings. Ensure they look more important, and are more visible.
•️ Visually group small amounts of related content.
•️ Bold important words and phrases.
•️ Use bullets and numbers to call out items in a list or process.
•️ Cut unnecessary content.

Adaptive design approach
F-shaped, layer-cake, spotted pattern, marking pattern, bypassing pattern, or commitment pattern.