Design principles

Some high-level guidance for designing effectively and inclusively.

1. Understand your users

Get to know your users deeply through user inspection methods like usability testing, card sorting, user interviews, qualitative interviews, quantitative research, surveys, and other methods. Focus on task completion and start with the end state in mind. 

2. Validate your assumptions

Early stage designs are hypotheses that must be proven out via usability inspection methods. Validate these hypotheses early and often (at low-fidelity if possible) so that big changes can be made quickly.

3. Every part of a design must have meaning

Every line, button, box, color, section, symbol, and whitespace is instrumental to the user experience. If it is meaningless, remove it, as every element adds to cognitive load. For example, lines of text, margins, and padding create their own visual separation, so there is usually no need to separate text blocks using horizontal rules.

4. Define the visual hierarchy

Know the user’s primary, secondary, and tertiary goals of any given experience. Employ a clear visual hierarchy of the elements that follows these levels of purpose.

5. Consistency is key

The key to designing experiences that are easy to use is to promote recognition over recall. Intuitive interface design needs no explanation as users know what to do immediately. Knowing what to do makes users feel confident, smart, and makes it easy to act.

• Elements should function the same within every context. If there is a web standard that exists, use it without fear.
• Blocks are groups of elements that serve a cohesive purpose. All elements need to be part of a block. Even if there is only one element present, it can be a block. Blocks are spaced consistently from one another.
• Layouts are collections of blocks that form patterns and have a designated direction/hierarchy that lends itself to smooth interaction. Left-to-right, top-to-bottom. Follow existing patterns such as print and web page layout and web form design standards.
• Workflows are a series of layouts (sometimes pages, sometimes not) that a user will see in succession while performing a task or tasks. Consider how separate workflows can be made consistent.
• Systems are all of the workflows within a given experience. If you have treated each element, block, layout, and workflow consistently, so will be the entire system.

6. Innovate, but don’t reinvent the wheel

The time users spend interacting with our products is limited and extremely valuable. Best to not waste it teaching them a brand new way to interact. Take advantage of web standards as well as design patterns from product experiences that are widely used.

7. Don’t pander 

Treat users as intelligent people who don’t need over-labeled interfaces, instructions on how to operate an interface, or information that is obvious or redundant.

8. Provide control 

A user should be able to move freely within an experience. They need to know where they are currently and be able to quickly take the first step toward where they want to go – even if that place is “away from here.”

9. Help users avoid errors

A well-written error message that helps the user get back on track is nice. Preventing that error from happening in the first place is nicer.