Everything the user looks at costs them a second of their life. What are we providing in return for that second?

All of the commentary below can be summed up with this one question. If we're providing something they need, that's a fair trade. If we're providing something they don't need, or not providing anything at all, that's not a fair trade. This is the most important thing there is to know about user experience.

The purpose of the screen is the star

Every screen should have one main purpose, which is supported by just about everything on the page.

  • Is the purpose clear and obvious? Ideally it should be stated in big letters at the top of the screen.
  • Do the elements in the places of importance on the page support the purpose directly?
  • What's the reasoning behind the elements on the page that don't support the purpose directly (other than navigation)?
  • What is the value to the user being provided by decorative elements and animations? In other words, what does the user gain from the presence and styling of these elements? These things can definitely provide value, but we should be able to articulate how. If we can't articulate how value is being provided, then it probably isn't. And if it isn't, then it's actively subtracting value from everything around it.
  • It's good to periodically evaluate if the content of one screen is better split into additional screens. Real estate on an established screen is expensive, but new screens are free.

Messaging

  • It's clear and obvious what information is being asked for by the system or provided to the user
  • The screen informs the user why the information is being requested or presented.
  • At no time does the system provide any information that is misleading, inaccurate to any degree, or incorrect.
  • The copy is light on jargon, no UAs (unexplained acronyms), grammatically correct, and aimed at or below the appropriate reading level.

Logical hierarchy

The elements on the page should have a predictable structure which contains appropriate hierarchies that flow down and to the right like so:

  • Page structure > page content
  • Most important > least important
  • Parents > children
  • The thing I interact with first > the thing I interact with second
  • Heading > list item

The choice of heading styles in a page hierarchy should follow the natural structure of the content. We should never break the natural hierarchy in order to promote elements that we want to give prominence.

I talk more about hierarchy in this post: How to structure a hierarchy.

Example

I once worked on a project which had a page of structured information which instructed developer users how to install the product. There was also information about migrating between versions as well as some information about getting started for a completely different persona. In this design, the elements that were at heading level 2 appeared in the side navigation.

The project stakeholders wanted to break the hierarchy of headings in order to give more prominence to the information about migrating and also have it appear in the side navigation despite not being at heading level 2.

I was unhappy about breaking the natural hierarchy of the content as well as causing the navigation to be inconsistent and unpredictable. Instead, I suggested that we take the information relevant to the other persona and move it to a new page. This change automatically caused the section on Migration to be promoted to heading 2 while also providing a better experience across multiple user personas.

User flows

  • No dead ends - user can always escape if they wind up somewhere they didn't intend to be
  • Ability to recover from mistakes
  • The order of the flow that the designer is presenting has a tangible relationship with the task at hand. If users are already accustomed to how something works in the real world, we should try to mimic that as much as possible, unless we have a good reason not to.
  • We're not asking user to provide information twice.
  • We're not asking the user to remember things from previous steps or look them up manually when we could remind them instead.
  • We're not asking user to provide information we could retrieve through database relationships.
  • We have evaluated the number of clicks and mouse movements and can't find any opportunities to reduce them.
  • Based on what I know about the persona, it makes sense to me that the user can provide everything we're asking to provide and understand everything we're asking them to understand.
  • Appropriate cognitive load based on what I know about the persona. If I don't feel I know enough about the persona I will ask for information. Note that I used the word "Appropriate" and not "Low". Especially in enterprise UX, sometimes the tasks being completed by users require a high cognitive load. We can try to make it as easy as possible, but "as possible" should be understood and defined, not wished away. At the same time, it's possible to design something that has such a high cognitive load that no human being could be reasonably expected to understand it. Obviously, that should be avoided.

Navigation

Consistent, complete, and accurate

  • No dead ends (again). User can get to anywhere from anywhere.
  • Every screen contains something that lets user know where they are now and where they can go next.
  • That "something" should be the same across the app. If it's not, there should be a valid reason. For example in ecommerce, we might want to remove the navigation to force user to complete the checkout flow. It's not my favorite thing, but I understand why it's done.
  • No surprises. Best practice is that the words that I click on in the navigation should be the words that appear at the top of the screen of the page I landed on. If they're different, then I need to remember that when I click on "X" it actually takes me to "Y", when I already have so much on my mind. As a user, the structure of the app isn't something I should need to even think about.

Tailored to the user and the natural structure of the information, not an arbitrary belief or an interest in lazy shortcuts

We are not manipulating the natural, logical structure of the information within the app to "simplify" the navigation. This will make it hard or impossible for the user to understand and remember what they're doing.

If the content/functionality/whatever of the app seems to want to live on 50 different screens, then we need to first evaluate if we can continue to organize the information. Maybe that means splitting the app into different apps. Or maybe we haven't organized the information to its natural conclusion. If neither of those work, then we need to come up with the best way for the user to navigate 50 different screens, and then test it with users.

What we won't do is come up with an arbitrary limit on the number of screens and start cramming things together until we hit that limit. My rule #1 is that every screen must have 1 clear purpose, and everything on the screen must support that purpose. Otherwise it takes the user precious seconds of their life to figure out what they're doing, and that creates a poor experience, as well as providing a poor impression of your company.

User-generated lists

  • A user-generated list must have a heading that is inline with the established page hierarchy
  • Affordances to create, read, update, and delete items are present and appropriate for the situation.
  • It's polite to provide the ability to search the list/narrow it down - we can't assume the list will always have the small number of items we chose for dummy data
  • Sufficient screen real estate to grow or a plan to handle very long lists: pagination, scrolling, lazy-loading, physically limiting the number of items that can be added, etc. "User probably won't do that" isn't a plan.

Alignment with established standards and internal consistency

  • Elements that are in our design system reflect our design system.
  • Elements that aren't in our design system line up with some other established pattern.
  • In addition to conforming to established patterns in looks, do they also conform in behavior? Do the buttons act like buttons? Do the checkmarks act like checkmarks? Do the tables contain table content and act like tables? 
  • If there are elements that are neither in the design system nor any other established pattern, what's the designer's reasoning? What is the value that's being provided to the user in exchange for asking them to learn something new? The value might be very high, so don't assume.
  • Do I see anything that could present concerns for accessibility? How is the experience of a user who is using a keyboard and/or screen reader? How is the contrast? (There are too many accessibility things to list here, obviously.)
  • The same icons and color choices always mean the same thing both within just this interface and any larger context that exists. We're not asking the user to figure out different meanings for the same things in different contexts.
  • Things that are clickable look clickable. Things that are movable look movable.

Dummy data

  • It's better to make design options with lots of different examples of what the data will actually look like than to just sprinkle Lorem Ipsums and John Smiths everywhere. I like mockaroo for this.
  • Designs should accurately reflect what will happen to the data as the user moves through the flow to get a sense of what the user will really be seeing.

Traditional design guidelines

Usability

You might notice that there are many similarities between this list and Jakob Nielsen's 10 Usability Heuristics for User Interface Design. That's because I first learned about this list in UX school and it has never let me down. In my experience, if a design violates one of those heuristics, it probably isn't going to do well.

Visual design

I evaluate a visual design looking for:

  • White space: Elements have sufficient white space around them and white space is balanced and even.
  • Contrast and hierarchy: As user, I can tell which elements are which without too much squinting
  • Gestalt: The screen feels like a purposeful, confident whole.
  • Similarity: As a user, I can tell which items are similar by which other items they're located nearest to.

This article is a comprehensive list: Usability.gov's Visual Design Basics.