A cheatsheet to evaluate UI design

4 simple steps to break down designs and catalyse thinking

Whether you’re evaluating your design proposals or giving feedback to a colleague during a design critique or an informal conversation, you may find this actionable cheat sheet valuable. It’s quick to digest and its questions are intended to deconstruct a design and evaluate it thoroughly.

The cheat sheet is based on established design principles and in my experience in design critiques. I created it to help me assess my own designs but you can also find it useful to help you guide part of your design process.

Deconstructing designs

Design feedback can be quite generic or focused on a specif lens (Information architecture, UI, etc). However, ideally, you will deconstruct a design by adopting each of the ‘lenses’ presented bellow. You’ll adopt one at a time and question the design from that perspective and then do the same for the others. Those lenses are closely intertwined so at the end, you should have come up with a thorough analysis of the design as an all.

1. Problem Space

To design is to solve problems. Its essence lies in digging deep in user needs and business goals to come up with creative solutions that provide utility and delight. To solve a problem we first need to fully understand it and maintain a clear vision of it during the design process.

Do we know…:

• the problem that we’re trying to solve?
• the users (their needs, goals, limitations and context of use?)
• the constraints of the project?

2. Information Architecture

Each element on the page has to be positioned, styled, sized, or otherwise distinguished in accordance with its specific importance.

Ask yourself:

• Considering the users and business goals previously identified, what are the most important things to solve in this design problem?(simply identify ing them will help you on the next questions)
• Does the visual hierarchy of the different elements on the screen reflect those goals? (Efficacy)

Hierarchy is conveyed by contrast between elements

• Is the contrast between elements conveyed in the most efficient way by making good use of colour, size, position, style, actionable elements(Efficiency)
• Does the way elements are positioned (in relation to each other) encourage a sense of relation between them? Does that perceived relation reflect the real logic relation those elements have?(Law of Proximity: Objects that are near, or proximate to each other, tend to be grouped together)

3. UI Design

Ask yourself:

• Are elements that are logically connected also visually connected? Does the opposite happen? Visual cues that connect elements together can be a common background between elements (borders, lines, colour background ->Law of Common Region) or through the use of the same shapes, colours or size (Gestalt principle of similarity)
• Does the UI guide the attention of the user to where he/she’s trying to go? Is the design simple(does it not contain excessive colours, imagery, design flourishes, or layouts that don’t add value?)but at the same time clear(makes use of visual cues to direct the user towards his/hers goal)?
• Are the key actions and important information visually distinctive from the rest?(Isolation effect)
• What is the minimum amount of UI that will allow the content to be found and effectively communicate to the user? (Occam’s Razor principle)
• Is the design aesthetically pleasing?Aesthetically refined design tends to increase users’ tolerance to minor usability issues (Aesthetic Usability Effect)

4. Design Patterns

Making use of patterns means using solutions that are already ‘known’ to be effective in solving a particular problem. The likelihood of success is higher. — see Jakob’s law

Ask yourself:

• What are the components you see in the design (menus, search, text fields, dividers)? What are the common patterns for them? (check Material Design guidelines, Mobbin.design, etc to identify established patterns)

There are many design patterns established by the industry, you can check my list of favourite ones in an upcoming Medium post.

This cheat sheet is a work in progress where I’m constantly adding new things and refining them.

👋 Let’s be friends! Connect with me on LinkedIn and follow me on Medium for more Design-related articles!