UX principles: the reasons behind a design decision

UX principles are well-tested ideas about how people see, think and act, and they turn “I like it” into a reason anyone can check. When a design choice rests on a named principle, a review stops being a contest of taste and becomes a conversation about the user.

A design system is full of these choices. Why the primary button is larger, why the delete dialog asks for the name, why the form labels sit close to their fields. This part collects the principles that come up most often, so you can recognise them in your own work and name them when you explain it.

Nielsen’s ten usability heuristics

Jakob Nielsen published these ten rules of thumb in the 1990s, and Nielsen Norman Group still maintains them. They are broad on purpose: a checklist for reviewing any interface, not a recipe for building one.

The Laws of UX

Jon Yablonski’s Laws of UX gathers findings from psychology and human–computer interaction into short, memorable rules. These are the ones a design system meets most often:

• Fitts’s Law. The larger and closer a target, the faster it is to hit. Make the primary action large and easy to reach; keep destructive actions smaller and further away.
• Hick’s Law. The more choices there are, the longer a decision takes. Cut options, and hide rare ones behind progressive disclosure.
• Jakob’s Law. People spend most of their time on other products, so they expect yours to work the same way. Break a convention only when there is a strong reason.
• Miller’s Law. Working memory holds only a handful of items at once. Group information into chunks, the way a phone number is written in groups of digits.
• Tesler’s Law. Every task has some complexity that cannot be removed, only moved. A good system takes it on so the user doesn’t have to.
• Doherty Threshold. People stay in flow when a system responds in under about 400 milliseconds. When it can’t, show a skeleton or update the screen optimistically.
• Peak–End Rule. People judge an experience mostly by its most intense moment and by how it ends. A clear, satisfying success state is worth the effort.
• Von Restorff Effect. The item that looks different is the one people remember. Make the primary call to action stand out, but if everything stands out, nothing does.
• Serial Position Effect. People remember the first and last items in a list best. Put the most important navigation items at the start or the end.
• Zeigarnik Effect. Unfinished tasks stay on people’s minds. A setup checklist or a completion bar uses this to bring them back.

Gestalt: how the eye groups things

Gestalt psychology describes how people see separate elements as groups. Spacing, borders and colour in a design system are mostly tools for applying these principles on purpose.

Mental models, affordances and signifiers

A mental model is what a person believes about how a system works. When the design matches that belief, the product feels easy; when it doesn’t, people make mistakes and blame themselves. A folder, a cart and a trash can all borrow a mental model people already have.

Don Norman, in The Design of Everyday Things, separates two ideas that are often confused:

• Affordance is what an object lets you do. A button can be pressed; a field can be typed into.
• Signifier is the visible clue that tells you so. The button’s shape and fill, a link’s underline, the pointer cursor, the placeholder in an empty field.

Flat design often removes signifiers for the sake of a clean look, and then users can’t tell what is clickable. In a design system, signifiers belong to the component: every interactive element needs a look that says it can be used, and states that answer when it is.

Two more terms from Norman complete the picture. Feedback is the response after an action: a pressed state, a spinner, a toast. Mapping is how clearly a control relates to its result, such as a slider that moves in the same direction as the value it changes.

Cognitive load

Cognitive load is the mental effort a task demands. Part of it is intrinsic: configuring a database cluster is hard, whatever the interface. The rest is extraneous: effort caused by the design itself, such as unclear labels, inconsistent layouts or information scattered across screens. A designer can’t remove intrinsic load, but reducing extraneous load is most of the job.

Naming the principle

The habit worth building is to attach a principle to each decision when you present it. Compare “I made the button bigger” with “the primary action is the largest target on the screen, following Fitts’s Law, and the destructive one sits apart from it”. The second invites a useful discussion; the first invites an opinion.

Next in the series

Principles explain why a screen works. Part 7 moves to how a screen comes to exist: mapping user flows, choosing the right wireframe fidelity, and designing every state a screen can be in, from empty to error.