UX Principles
UX Principles
Visibility of system status (S) The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world
Match between system and the real world (L) conventions, making information appear in a natural and logical order.
(Read full article on the match between the system and the real world.)
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an
User control and freedom (S) extended dialogue. Support undo and redo.
Consistency and standards (L) Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or
check for them and present users with a confirmation option before they commit to the action.
How?
taking your card
-apply good defaults and suggestions
Error prevention (S) first from an
- Applying constraints: e.g. forcing functions; Lock-in: keeping an operation active e.g. save before quit; Interlocks: ensuring proper sequence of steps; Lock-out: ATM
prevents from starting an action;
- Making the target of the actions stand out (prevents deleting the wrong item)
- Clearly distinguish between reversible & ireversible actions;
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue
Recognition rather than recall (S) to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
(Read full article on recognition vs. recall in UX.)
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and
Flexibility and efficiency of use (E) experienced users. Allow users to tailor frequent actions.
Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of
information and diminishes their relative visibility.
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
How?
Help users recognize, diagnose, and recover from
errors (S) - 'Undo' possibility
- autosave progress; provide ways of saving progress
- communicate what happened & what the user can do to fix it
-help resuming by maintaining the context -> contextualised handling
Help and documentation (L) Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be
easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
Principle Description
The principle of visibility suggests that usability and learnability are improved when the user can easily see what commands and options are available.
Visibility Controls should be made clearly visible, rather than hidden, and should be placed where users would expect them to be.
-> Functionality which does not have a visual representation can be hard to discover and find. For example, keyboard shortcuts save time for expert users, but when a keyboard shortcut is the
only way to activate a command, then a new user will have no way of discovering it, except by accident, or by reading the reference documentation.
Affordance An affordance is a visual attribute of an object or a control that gives the user clues as to how the object or control can be used or operated.
Design conventions are another means of providing affordance cues (e.g. underlined blue text -> textual link)
There is a relationship, or mapping, between a control and its effects. You should always aim to make these mappings as clear and explicit as possible.
Mapping - Use descriptive labels or icons on buttons and menu items
- Use controls consistently: similar controls should have similar behavior and effects.
- Controls should be positioned in logical ways that match real-world objects or general conventions.
The principle of feedback suggests that you should give users confirmation that an action has been performed successfully (or unsuccessfully).
Feedback - Activational feedback is evidence that the control was activated successfully: a button was pressed, a menu option was selected, or a slider was moved to a new position.
- Behavioral feedback is evidence that the activation or adjustment of the control has now had some effect in the system; some action has been performed with some result.
Constraints Constraints, or restrictions, prevent invalid data from being entered and prevent invalid actions from being performed.
e.g. Word processors disable the “Copy” and “Cut” commands when no text is currently selected.
Principle Description
Adding features for novices, such as explanations, and features for experts, such as shortcuts and faster pacing, enriches the interface design and
Shortcuts improves perceived quality.
Offer informative feedback. For every user action, there should be an interface feedback.
Feedback Tell them why they’re waiting. Tell them that you’re working. Tell them you heard them and offer the next step along their path.
As much as possible, design the interface so that users cannot make serious errors;
- If users make an error, the interface should offer simple, constructive, and specific instructions for recovery. (e.g. users should not have to
Simple error handling retype an entire name-address form if they enter an invalid zip code but rather should be guided to repair only the faulty part)
- Erroneous actions should leave the interface state unchanged, or the interface should give instructions about restoring the state.
Experienced users strongly desire the sense that they are in charge of the interface and that the interface responds to their actions. They don’t
Keep user in control want surprises or changes in familiar behavior, and they are annoyed by tedious data-entry sequences, difficulty in obtaining necessary
information, and inability to produce their desired result.
Humans’ limited capacity for information processing in short-term memory requires that designers avoid interfaces in which users must
Reduce short-term memory load remember information from one display and then use that information on another display.
The rule of thumb is that people can remember “seven plus or minus two chunks” of information
Principle Description
Stay out of people's way - Don’t interrupt or give users
obstacles; make obvious pathways offering an easy ride. When someone is trying to get something done, they're on a mission. Don't interrupt them unnecessarily, don't set up obstacles for them to overcome, just pave
the road for an easy ride. Your designs should have intentional and obvious paths, and should allow people to complete tasks quickly and freely.
Provide strong information scent People don't like to guess. When they click around your site or product, they aren't doing so haphazardly; they're trying to follow their nose. If what they find when
they get there isn't close to what they predicted, chances are they're going to give up and go elsewhere. Make sure that you use clear language and properly set
expectations so that you don't lead people down the wrong path.
Provide signposts and cues
Never let people get lost. Signposts are one of the most important elements of any experience, especially one on the web where there are an infinite number of
paths leading in all directions. The design should keep people aware of where they are within the overall experience at all times in a consistent and clear fashion. If
you show them where they came from and where they're going, they'll have the confidence to sit back and relax and enjoy the ride.
Make a good first impression You don't get a second chance! Designing a digital experience is really no different than establishing a set of rules for how to conduct yourself in a relationship. You
want to make people feel comfortable when you first meet them, you want to set clear expectations about what you can and can't offer, you want to ease them
into the process, you want to be attractive and appealing and strong and sensible. Ultimately you want to ensure that they can see themselves with you for a long
time.
Anticipation Bring to the user all the information and tools needed for each step of the process
Color blindness Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who cannot
see the colors presented.
1. Levels of consistency:
- Top level consistency: platform consistency & in-house consistency (maintain a general look & feel across your products/ services
- Consistency across a suite of products: general look & feel across your products/ services
- The overall look & feel
- Small visible structures, such as icons, symbols, buttons, scroll bars
- Invisible structures
- Interpretation of user behavior
2. Induced inconsistency:
Consistency - Make objects that act differently look different.
3. Continuity
- Over time, strive for continuity, not consistency (You come out with a completely re-worked area of your product or even a completely new product, it
is important that people instantly recognize that something big has changed. Otherwise, they will jump into trying to use it exactly the way they always
have and it just isn’t going to work. Our goal is continuity, where there is a thread that weaves through our various products and releases, guiding our
users, but not tying us to the past.).
4. Consistency with user expectation:
- It doesn’t matter how fine a logical argument you can put together for how something should work. If users expect it to work a different way, you will
be facing an uphill and often unwinnable battle to change those expectations
- Avoid only testing for learnability: You end up knowing everything about the initial learning curve and nothing about either the long-term curve or the
end-state level of productivity
Protect users’ work Ensure that users never lose their work
Visible navigation Most users cannot and will not build elaborate mental maps and will become lost or tired if expected to do so.
Automate unwanted workload: Eliminate mental calculations, estimations, comparisons, and any unnecessary thinking, to free cognitive resources for high-level tasks.
Reduce uncertainty: Display data in a manner that is clear and obvious to reduce decision time and error.
Fuse data: Bring together lower level data into a higher level summation to reduce cognitive load.
Present new information with New information should be presented within familiar frameworks (e.g., schemas, metaphors, everyday terms) so that information is easier to
meaningful aids to interpretation: absorb.
Limit data-driven tasks: Use color and graphics, for example, to reduce the time spent assimilating raw data.
Principle 10 was devised by the first two authors to resolve the possible conflict between Principles 6 and 8, that is, in order to be
Practice judicious redundancy:
consistent, it is sometimes necessary to include more information than may be needed at a given time.
Principle Description
User Control The interface will allow the user to perceive that they are in control and will allow appropriate control.
Human Limitations The interface will not overload the user’s cognitive, visual, auditory, tactile, or motor limits.
Modal Integrity The interface will fit individual tasks within whatever modality is being used: auditory, visual, or motor/kinesthetic.
Accommodation The interface will fit the way each user group works and thinks.
Linguistic Clarity The interface will communicate as efficiently as possible.
Aesthetic Integrity The interface will have an attractive and appropriate design.
Simplicity The interface will present elements simply
Predictability The interface will behave in a manner such that users can accurately predict what will happen next
Interpretation The interface will make reasonable guesses about what the user is trying to do.
Accuracy The interface will be free from errors
Technical Clarity The interface will have the highest possible fidelity.
Flexibility The interface will allow the user to adjust the design for custom use.
Fulfillment The interface will provide a satisfying user experience.
Cultural Propriety The interface will match the user’s social customs and expectations.
Suitable Tempo The interface will operate at a tempo suitable to the user.
Consistency The interface will be consistent.
User Support The interface will provide additional assistance as needed or requested.
Precision The interface will allow the users to perform a task exactly.
Forgiveness The interface will make actions recoverable.
Responsiveness The interface will inform users about the results of their actions and the interface’s status.
Principle Description Examples
ATTENTION
As humans, we are cognitively lazy. We like to get the maximum benefit for minimum return. We prefer to use products and services that
give us better return on the information we give it.
Tunneling Guiding users through a process or experience provides opportunities to persuade along the way
Tunnel users through a decision-making process by removing all unnecessary functions that can possibly distract their attention from
completing the process.
Isolation effect Items that stand out from their peers are more memorable
We remember things that stand out. This is the reason why CTA (Call-to-Action) buttons stand out and look different from the rest of the
actions buttons on the same page.
Information grouped into familiar, manageable units is more easily processed and remembered.
Group information into a limited number of units or chunks, so that information is easier to process and recall.
COMPREHENSION
By chunking information into small bits we seek to accommodate the limits of our short-term memory. The goal of chunking is to aid When you enter a phone number into
processing of information. your iPhone, the phone number is
Chunking automatically chunked into smaller bits
Recent research suggests that the magic limit is 4+/- whereas older literature suggests up to 7 +-2 of information that makes it easier for
the user to read and remember.
We are better at recognizing things previously experienced than we are at recalling them from memory When signing up for pinterest, the
Instead of asking users to recall data from their memory: Recognition over recall pattern is used to
Recognition over recall ask for the user's interests (presents a list
- present a list of items which each represent a certain category of data.
- complementing or replacing empty form fields with defined, random, and intelligent choices to choose or rate of common interests)
- Use visual imagery, auto-complete, and multiple-choice options.
Sequencing It is easier to take action when complex activities are broken down into smaller and more manageable tasks.
Break down complex tasks into small and easily completed actions, and set expectations as to how many steps are left before the entire
sequence has been completed.
Pattern Recognition Even when there is no pattern, we seek ways to organize and simplify complex information
Use to enable users to organize or label information – to make a game of arranging things
We have a tendency to recall the first and the last items in a series best. Present important items at the beginning and end of a list to
maximize recall and the likelihood that users will remember those items when the time comes to make a decision. replacing hamburger menu with top/
Serial Positioning effect Use when: bottom navigation: placing the most
- considering how to order items in a list (menu items, list of features, etc.) important actions to the right/ left
- users remembering specific options is of importance to your design.
- Primacy effect - If the decision is to be made at a later time, present your preferred item at the beginning of the list. Initial items on a list
are stored in long-term memory more efficiently than items later in the list.
- Recency effect: We tend to favor the last candidate presented to us. The last few items are still in working memory and are readily
available. The recency effect further disappears when people think about other matters for thirty seconds after the last item in the list is
presented.
GESTALT PRINCIPLES Objects that are near, or proximate to each other, tend to be grouped together. To put it in simpler terms, our brain can easily associate
objects close to each other, better than it does objects that are spaced far apart. This clustering occurs because humans have a natural
Law of proximity - tendency to organise and group things together.
Group related objects near each other
To aid in that learning process, and to motivate interaction, don’t force people to jump back and forth around disparate areas in order to
carry out a single task.
COGNITION
Hick’s Law describes that the time it takes for a person to make a decision depends on the choices available to him or her. So if the number
of choices increases, the time to make a decision increases logarithmically.
We are more likely to make a decision when there are fewer options to choose from
Every time you make it easier for users to think, they are more likely to make a decision.
Simplify decision paths and present the more complex choices first.
Limited Choice (Hick`s Law) GOAL: reduce complexity; don`t oversimplify (balance)
"Be choosy about choosing"
How to apply:
- use card sorting to define categories
- divide the process into manageable chunks (Progressive disclosure)
- hide the options only for expert users/ edge cases
-make the most important options stand out
We desire collecting all pieces of a set more the closer it is to being complete.
Completing a set of logically grouped tasks or items allows for achievable goals and small successes. Consider how you can have multiple
Set Completion levels of sets and what kind of things or information suggests logically grouped sets and set completion. This principle also applies to other
things left incomplete such as puzzles, pictures, or sentences.
Cognitive load refers to the total amount of mental effort being used in a person’s working memory. To put it simply, it is the amount of
thought you need to exercise in order to complete a specific task.
Cognitive load
One of the reasons we use design patterns is because they’re something we’re programmed to do by default – so it’s easier for the users
to recognise and learn something new if they can discern it into a pattern from something they already understand.
An effective design allows people to focus on the task at hand without having their attention diverted to less critical tasks. Design for tasks
Limit distractions to be carried out consecutively instead of concurrently in order to keep people in the moment.
SIZE: An element will appear more hierarchical if it is larger than other elements in a design. We naturally look first at the largest element
in a design. If there are five windows on the front of a building, and one is twice the size of the others, our attention will focus on the
biggest window first.
Create a visual hierarchy that matches the SHAPE: An element can also appear more hierarchical if it is different than other elements in a design. We naturally look first at the
user’s needs irregular shape in a design. If there are five of the same windows and one door on the front of a building, our attention will focus on the
door first.
PLACEMENT: Last but not least, we can place elements in more hierarchical positions. Within a circle, the center is the most hierarchical.
The end of an axis is naturally more hierarchical than points along the line.
Never let people get lost. Signposts are one of the most important elements of any experience, especially one on the web where there are
Provide signposts and cues an infinite number of paths leading in all directions. The design should keep people aware of where they are within the overall experience
at all times in a consistent and clear fashion. If you show them where they came from and where they’re going, they’ll have the
confidence to sit back and relax and enjoy the ride.
Providing preselected or predetermined options is one of the ways to minimize decisions and increase efficiency. But choose wisely: if you
Use appropriate defaults assign the defaults to the wrong options (meaning that the majority of people are forced to change the selection), you’ll end up creating
more stress and processing time.
Disclose the information progressively -> only show the info needed at a given moment! Show more uplon user request/ action
-> The key is knowing what are the common & infrequent tasks/ functions.
Benefits:
- reduced cognitive load learn more/ continue reading
Progressive disclosure - reduced noise/ decluttered UI expandable texts
- prioritized functions dropdown menus
- increased efficiency advanced options/ search
- less errors oboarding: user guided, hints are
Staged disclosure (sequencing interactions) -> present in Form Design ( instead of showing the whole form, the fields dinamically appear triggered by the user
based on what option the user selects tooltips
instructional overlay
Empty state means that at a certain point of the user flow, there is no data to display
1st impression is the most important -> empty states are a part of a good onboarding.
Main functions:
- Teach the users: how to use the app; where is the user; what actions/ conditions are required to have data there (with sample data &/
Empty state/ Blank state written explanations)
- delight the users: give your app personality; surprise the users in a positive way
- drive the users: show the benefits of using; use simple, clear, motivational copy; show the next step: how to get started;
The time to acquire a target is a function of the distance to and the size of the target
-> selecting a UI element can be faster, if the size of the target element is increased, or the distance is decreased. (It doesn`t mean that
you should make each target larger, or place everything closer to each other)
Zeigarnik effect:
Progress & Perceived performance - users unconsciously have a strong motivation to finish the task (task tension) -> desire for completion;
Goal gradient effect:
- tendancy to approach a goal increases with proximity to the goal
Goal visualization effect:
- people near their goal, being able to visualize the finish increases the effort they exert to reach it;
Progress indicator/ bar:
- Expectations: what the completed steps are; where the user is in the process; what steps are left;