The Usability Checklist for Visual Design !

November is home to the World Usability Day! An occasion that can’t go without mentioning Nielsen’s 10 Usability Heuristics

Created by @the-ux-evangelist — Icons credit goes to Oliver and Freepik from www.flaticon.com

We are dedicating this article for a quick checklist on usability guidelines for visual design.

Note:

When we talk about Visual design in this context, we are referring to the following elements of visual design: color, shape, hierarchy, space and typography.

The Nielsen Heuristics in Visual Design:

Visibility of system status

• Using Color (or lack of thereof) is a strong visual queue to indicate status change and progress. Color is very useful when you want to visually attract attention.

Step by Step checkout visualization of state on amazon

• Use Motion to indicate progress. (That’s how progress bars were born)

Progress bar on Canva.com when downloading designs

• Use Icon/visualization to identify a change of state. You want to use an icon and visualization to show change but not necessary when you want to draw attention to it, as color and motion would work better in that case . For example you can use icon variations to indicate on/off.

Android quick settings: Guess what is on and what’s off

Match between system and the real world

We got so used to using metaphors used in icons we forgot that someone thought of them as a way to make a concept easier to users.

• Use descriptive Icons and visuals to help users easily interpret and identify elements
• Use colors that genuinely reflect the system (red for urgent matters for example)

Consistency and standards

Consistency, consistency and consistency…. It’s the mark of a detailed thought through design. The key to achieving consistency is to actually have rules and guidelines that govern design. Use visual elements variations consistently!

• Consistency in the Colors used
• Consistency in fonts, font sizes and style hierarchy (more on that next)
• Consistency in elements’ sizes
• Consistency in spacing

Airbnb was so generous to share their visual design guide with the world, just to show us how it’s done!

Building a Visual Language

Useful Tool Alert! Frontify is an awesome tool to use to easily define your visual design guide https://frontify.com/styleguide

Recognition rather than recall

• Visual Hierarchy. A great part of your design language is achieved through building a visual hierarchy. That’s not just about how you structure text but also how you define action. Action Button hierarchy helps users identify impact and importance of actions.

Wordpress Editor shows Action and Button hierarchy. Links are used for secondary actions and buttons convey primary actions. Color variations are used to communicate action impact within a specific hierarchy.

• Ensure that all information needed to complete a task is visible and accessible when completing the task.

The 2 shoes are identical in name and size, an image makes it easier to identify which is which! Shoping cart from namshi.com

Aesthetic and minimalist design

• Use color theory to paint your designs, More on that here

Color Theory for Designers, Part 1: The Meaning of Color - Smashing Magazine

• Use readable font size and styling. For example, IT’S DIFFICULT TO READ TEXT THAT IS WRITTEN IN UPPER CASE LETTERS. IN FACT YOU ARE PROBABLY SHOUTING AS YOU READ THIS, BECAUSE UPPERCASE INDICATES SHOUTING WHILE TEXTING. SO JUST LIKE READING THIS IS ANNOYING, USING ALL CAPS TEXT FOR LONG TEXT IS ANNOYING TO YOUR USERS TOO. YOU ARE FINE WITH ALL CAPS IN SHORT TITLES THOUGH!

Note how the design used ALL CAPS in Primary action (START A CAMPAIGN) that you will probably read in a tone of excitement. While on campaign cards, categories (TECHNOLOGY) are in all caps, you will find that them being all caps and grey makes sure you don’t read them first, you actually only read them when you look for them, a technique that makes sure that design is not cluttered with repetitive/sometimes redundant information.

• If your design is heavy on images, use neutral colors in the rest of the design.

Images are leading the design, a minimalist design covers everything else!

• Make sure you preserve aspect ratio when resizing images

Zara doesn’t stretch images on their website, you shouldn’t either!

• Give your elements some space, make sure you use space to visually separate items. More on that here

Design Principles: Space And The Figure-Ground Relationship - Smashing Magazine

Error prevention

Help your users do the right action and guide them through it.

• Use visual indicators for positive and negative feedback.

Twitter Signup Tells you when you’ve got something right or wrong

Help

Users may not read long documentation and guide manuals, but they sure do appreciate informative tips when needed.

• Use tooltip icon to indicate helpful information

Airbnb tooltips there to explain terminology used on website

• Use font hierarchy to provide help text in secondary context

Amazon Checkout help and documentation

Usability is not just for a day, but for everyday!

Keep the checklist at hand, download the pdf version here

UsabilityChecklist.pdf

Further Readings:

• Examples of 10 Nielsen Usability Heuristics

• Visual Design Hierarchy and Usability Example

Visual Design and Usability Yellow Brick Road | UX Magazine

In Webkeyz every day is a usability day . Have a Usable Day Everyone !