The way you evaluate the design of a new product vs. one you've been working on for a while is not the same.
When your eyes land on a user interface for the first time, you're likely missing:
- Context about the users and their goals
- Context about the industry
- Context about the technical constraints
But you still have enough visual information to provide useful feedback.
Over the last 13 years, I've been asked to give meaningful feedback on first-look user interfaces.
Today I'm going to share with you the 10-minute checklist I use to identify quick wins.
You can download the condensed printable version here.
1. Space, Size, and Separation
Some of the quickest wins for improving an interface come from fixing an inconsistent use of spacing and sizing. These issues are easiest to identify and fix. These issues can be broken into 6 sub-categories:
1.1 Do you use an obvious vertical rhythm?
- Spacing between titles and body content
- Spacing between content card padding and inner elements
- Spacing between sections and sub-sections
1.2 Do you use a consistent grid?
- If you use a grid, great
- If you don't, let's start using a 4 or 8-point grid for all content
1.3 Do your components use a consistent box model?
- Using standard padding to clear the area inside of an element (before the border)
- Using standard margin to clear the area outside of an element (after the border)
1.4 Do your components scale relatively or independently?
- Do elements grow or shrink relative to the size of their containers or not?
- Each option is not necessary wrong, but we want them to be consistent
1.5 Do you use borders appropriately?
- Borders appear on input fields, tables, content cards, buttons
- Border overload is what we want to reduce - how often are bordered buttons being used inside of a bordered content card inside of a bordered wrapper? Your goal is to avoid too much noise often created by too many borders.
1.6 Do you create depth consistently?
- Are you using a fixed number of shadow variations?
- Has the z-index across elements like modals, popups and drop-downs been implemented correctly so that they're not appearing behind other elements when they need to be accessed?
2. Visual Hierarchy
Similar to space and size, the visual hierarchy of content and heuristics is easy to quickly evaluate. While there are a number of more complex ways to explore hierarchy, you can scan a few obvious problem areas right away.
2.1 Do you provide visual weight to headlines and display text?
- Visual weight can come in the form of size, darker contrasts or actual font weight - but it should be noticeably different for headlines and display text relative to its body content
2.2 Is your content F-pattern or Z-pattern scannable?
- When scanning your eyes across the page, are you able to digest what the content is about using the tried-and-true F and Z-shape patterns? (reverse these patterns for RTL reading languages)
- Look for obvious anchor points, and if they don't exist (or are hard to identify) work to make them more obvious
3. Information Architecture
Probably the more complex of these categories, information architecture benefits most from a deep understanding of the problem space. But even then, there are a few areas we can evaluate without needing much context.
3.1 Do you separate your navigation types?
- Navigation types come in 3 flavors: system, product, and context
- System navigation includes things global settings, account management and help
- Product navigation includes entry points to your features
- Context navigation is specific to the active feature or page you are looking at
3.2 Do you provide a natural breadcrumb?
- If your navigation includes sub-pages, a breadcrumb or a visual affordance for moving back or forward a level should be obvious and available
3.3 Do you use progressive disclosure appropriately?
- Is like-content grouped correctly?
- Are multiple groups of like-content competing for attention? If so, consider providing a high-level trigger for each group, and hiding the rest of its content behind that trigger
- Does the user have the ability to explore like-content on request, or are we force-feeding them every available piece of content on the page? Our goal should be the former
3.4 Do you appropriately label affordances?
- Text labels reign supreme - are they being used to indicate navigations and form fields?
- Are icons and images using obvious labels? Or at the very least, are tooltips provided as labels in a timely manner?
4. Type
Type is the easiest rabbit hole to fall into - but it's a trap! Unless you're evaluating a long-form landing page with lots of copy, type can usually elevate a mediocre UI with only a couple of rules.
4.1 Do you use 2 or less typefaces with at least 3 weights?
- Most products can get away with one strong typeface, but in some cases, two typefaces gives marketing a little room for creativity - more than that and we're trading stylish noise for negative benefit
- 3 weights gives us an opportunity to differentiate between body content, labels and headlines
4.2 Do you use a consistent type scale?
- Are considerations made for the H1-H6, paragraph, label and other HTML type-related tags?
- Are they applied consistently or is custom styling being applied?
5. Content
Often overlooked, content can make an otherwise well-designed interface look a bit wonky. It's also a relatively easy issue to address with only a few visual tweaks.
5.1 Do you limit copy to 2-3 sentences?
- Similar to vertical rhythm, sentence and character sizes can dictate the overall flow of a layout
- Using too many sentences likely means we also haven't landed on a marketing voice yet
5.2 Do you use a consistent title or sentence case?
- "This is Title Case" and "This is sentence case" - each are fine to use, but use each consistently
5.3 Do call-to-actions use VBU (verb + benefit + urgency)?
- Examples include "Get your free newsletter now" or "Signup for analytics today"
- This is typically an evaluation I make for landing page conversion-rate optimization more-so than non-essential button language
6. Color
Accessibility requires a deeper dive into how an interface is constructed (e.g. how well it performs against screen readers, keyboard tabbing, etc). However, color is one of the easiest accessibility fixes. It's also a factor when improving the heuristics throughout an interface.
6.1 Do you violate WCAG 2.0 AA contrast ratios?
- This is an easy win to make - simply use tools like Stark or refer directly to WCAG's guidelines to determine if your foreground and background colors meet the 4.5:1 contrast ratios (these change slightly depending on the size of elements, like text)
6.2 Do you have a color that tells me where I can go?
- Does a separate palette exist for heuristics like buttons and hyperlinks?
6.3 Do you have a color that tells me where I’m at?
- Does a separate palette exist for things like highlight an active tab or hovering over an active table row?
7. Interactions
It's tough to limit the interactions bucket to 5 sub-categories. But for the sake of evaluating an interface, these are the most worthwhile starting points before we get too deep into the psychology of UX.
7.1 Do you have consistent empty states?
- If a table, search page, notifications dropdown or any similar component has no content, has this "empty state" been considered?
7.2 Do you execute animations within 450ms?
- Psychology says that we typically expect motion from A-to-B context to complete in less than 450ms - this is our max threshold, though I generally skew closer to 200-250ms
7.3 Do you provide appropriate system messages for all possible paths?
- Do system messages exist for things like error handling or error prevention (e.g. password requirements)?
7.4 Do you require double opt-in for destructive actions?
- Destructive actions, like deleting essential data, should not be easy to perform by accident - are failsafes in place?
7.5 Do you use primary and secondary buttons consistently?
- Whatever our primary, secondary and tertiary actions are, do we style them consistently throughout each workflow?
Stay tuned for my 10-minute UX evaluation cheatsheet, where I introduce you to the psychological principles I evaluate when identifying quick-wins for user experience.
