Clear design should…
Above all, be useful. Get the user's job done and get out of the way as fast as possible. But also while at it, it should…
Be unambiguous.
Only one possible interpretation should exist for every design element.
Be predictable.
Design elements should help people accurately and consistently predict what happens when they interact with your product.
Be helpful.
Design should help people answer all these questions:
Where am I?
How did I get here?
What can I do here and how do I do it?
Where can I go from here?
Be accessible.
Design elements should adhere to AAA or AA accessibility standards because it makes design better overall for everyone
Be aesthetic.
As a whole, the functionality of the product should be well executed. After that's achieved, there's no excuse to not make the product aesthetically beautiful
Be honest.
As a whole, the product should be free of jargon and should only promise what what it can achieve for the end user. No less, no more.
Some useful heuristics
I think of these every now and again. Not too hard, and not too often.
Name | Description | Example or usage |
|---|---|---|
Anchoring bias | People rely heavily on the first piece of information they see | Explain the value your product provides in one sentence, not what your product does |
Progressive disclosure | One bit of info at a time, as needed | Start simple, increase complexity as you go along |
No walls of text | People https://www.nngroup.com/articles/how-users-read-on-the-web/ on the web, they scan for keywords that stand out. | Don't hide critical information, surface it with highlights. |
Peak/end Fallacy | People tend to remember the peak (positive or negative) of an experience and its end. | Memory is unreliable. We remember how something started, the strongest emotion we felt, and how it ended. Excellent design accounts for this |
Confirmation bias | People find evidence that confirms what they think | |
Feedforward | When people are able to predict the outcome before they take action | Call it what users call it. Buttons hide actions that exist behind them. Views (screens) hide outcomes that are possible |
Pseudo-set Framing | Tasks that are part of a group are more tempting to complete | Complete profile. Create community. Increase reputation. |
Spotlight Effect | People erroneously believe that they're being noticed more than they are | Everyone is thinking about themselves most of the time. Design for that or around that |
Goal Gradient Effect | Motivation increases as people get closer to their goal | Progress bars work |
Von Restorff Effect | People remember things that stand out | When multiple similar objects are present, the one that differs from the rest is most likely to be remembered. Especially useful in guiding the user through a specific flow - make important info stand out (like CTAs) |
Social proof | People adapt their behavior based on what others do | |
Familiarity bias | People prefer things they already know | |
People prefer to avoid losses | People prefer to avoid losses than win equivalent gains | |
Reciprocity effect | People feel the need to reciprocate when they receive something | Give value before asking for value |
Survey Bias | People tend to skew answers towards what’s socially acceptable | Also, users change their behavior when observed |
Priming | People remember the previous step/info which sets expectations | |
Cognitive load | Amount of effort required to complete something | Just-in-time complexity reveals help people move through even complicated context |
Pareto Distribution | For many events, 80% of the effects come from 20% of the causes. | 20% of platform users typically generate 80% revenue |
Hick's Law | The time it takes to make a decision increases with the number and complexity of choices | Just try picking one of these to use |
Miller's Law | People only keep 7 (+or - 2) items in their working memory | Shorter sentences are easier to recall. 5 or less nav items are easier to learn/remember. Text containers should have max-width: 680px with font-size: 16-21px (NOTE: ideal font-size for maximum legibility is 21px) |
Proximity Effect | Elements that are close together are usually considered related | Group settings by their function to help people configure them faster |
Feedback Loop | When people take action, they expect feedback to communicate to them what happened | Empty states, error states, success state, loading states are all opportunities to show people that they are in control |
Occam's Razor | Among competing guesses, the one with the fewest assumptions should be selected | Especially useful in user research. Start with behaviors that you have the fewest number of assumptions on |
Tesler's Law | Certain amount of complexity cannot be avoided | Simplicity for its own sake passes decision making to the end user (which increases friction) |
Jacob's Law | People spend most of their time on other websites/apps | Don't re-invent common interactions like signup/login - your product should feel similar to others |
Doherty Threshold | Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other. | Apps/websites have to respond to users within 400-900ms, otherwise they might not be used |
Serial Positioning Effect | People tend to remember the first and last items in a series. | |
Zeigarnik Effect | People tend to remember and come back to unfinished tasks | Especially useful in onboarding users to complex products that have a steep learning curve |
Fitt's Law | The larger something is, the easier it is to hit | The amount of time required for a person to move a pointer (e.g., mouse cursor) to a target area depends on the distance to the target divided by the size of the target |
