How to Evaluate Designs with Visual Heuristics

Designers are often exposed to design critiques and feedback from our clients and teammates. In my experience, most of these design critiques are destined to go south if we do not know how to properly evaluate a design from an objective point of view.

We can easily change the way we evaluate designs with the help of Visual Heuristics.

Visual Heuristics is a method to find design issues in a user interface (UI) following basic design principles. These principles will not only help us create visually aesthetic designs but also back them up with solid arguments.

Visual Heuristic Design Principles

In order to successfully evaluate designs with a visual heuristic, you need to understand each principle and create a set of questions or statements to validate your designs with each one of them.

Alignment

Alignment helps you create order in your designs by ensuring the elements have a pleasing connection with each other. It will eliminate the messiness when elements are randomly placed.

You can use these questions to make sure your design has the right alignment,

1. Are the elements of the design ordered accordingly to similar sibling elements?
2. Does the design create the perception that there is an equal distribution?. (This does not always imply that there is symmetry.)

Hierarchy

Hierarchy helps you add visual weight to the most important elements in your designs, allowing the information to be easy to scan and to find.

You can use these questions to make sure your design has the right hierarchy,

1. Does your design focus on having one element as the focal point and others being its subordinate?
2. Does your design visually establish the main message as the focal point?
3. Is typography large enough and easy to read?

Contrast

Contrast happens when two design elements are in opposition to each other, like black and white, thick and thin, etc. Contrast creates a hierarchy that helps guide the user’s eyes to the most important parts of your design and helps to add visual interest.

You can use these questions to make sure your design has the right contrast,

1. Does it draw emphasis out to the most important elements of the design?
2. Helps guide the user’s eyes to the most important parts of your design
3. Is white space an important part of your layout strategy?
4. Is contrast applied correctly, not making the user struggle with the elements of the design?

Color

Color helps create conventions for expected interactions and it’s responsible for establishing the personality of the design.

You can use these questions to make sure you are using color in your design correctly,

1. Is color consistent between the elements of the design?
2. Are combinations used to differentiate items, create depth, add emphasis, and/or help organize information?
3. Do the selected colors correspond to common expectation about color codes?

Balance & Rhythm

Balance and rhythm helps you distribute the elements of your design. The position of the elements and the interval between those will determine whether your design is balanced or not.
A big black box in your right corner could sink your design to that side. Compensating for that “weight” or moving it to another position will balance your design.

You can use these questions to make sure you are using balance & rhythm in your design correctly,

1. Does it add stability and help distribute the elements evenly throughout your design?
2. Does spacing offer an appearance that is professional and attractive instead of being jumbled up and messy?

Affordance

Affordance refers to an attribute of an object that allows people to know how to use it. Having good affordance means that the elements of your design will give you a clue of how to perform an action.

You can use these questions to make sure you are using the right affordance in your design,

1. Are hints by language or physical appearance of the object given by the design?
2. Does it show mental shortcuts and patterns in the design? (A great example would be a logo that’s at the top left corner of a webpage being clickable.)

What’s Next?

Know that you know the basics of Visual heuristics you can go the extra mile and add as many design principles as you want. Just don’t forget to create the questions for each of the new principles you add. Here you’ll find a template with the principles explained above, feel free to update it as you see fit. Visual Heuristic Template

Let me know if you have any questions or if there’s anything I can help you with.

Drop me a line at mmedina@nearsoft.com with any questions you might have.

Originally published at https://ux.nearsoft.com on July 30, 2019.