As a UX designer, sometimes I am asked how I critique a design. How do I assess what is good and what is not? One technique that I use is to look at the Principles and their associated Pitfalls.

What are Principles & Pitfalls?

In this context, Principles describe the basic rules of good User Interface (UI) design. The good attributes for which we should aim. Pitfalls are the common UI design problems. If you reduce the number of pitfalls, you improve the User Experience (UX).

Why use them?

Looking at the principles and pitfalls of a UI design helps explain why problems exist – rather than simply identifying the problem. They also facilitate communication through a common language and can help predict user performance and satisfaction. It can help us design better solutions for the user.

How to use them

Firstly, identify a user task to test then walk through how they would complete that task. Identify any potential issues in the experience and the principles affected. Identify and note specific pitfalls relating to that principle. You can even cross-validate your results by having someone else perform these steps using the same tasks. Finally, record and discuss results with the team.

The 9 principles and their related pitfalls

Principle 1: Understandable

When the UI is understood, the user knows what they can do.

Pitfall: Invisible elements

Cues (label, icon, affordance or prompt) that might indicate how to achieve a given goal are missing, leaving the user with insufficient prior learning to overcome the absence.

For example, to activate the Charms control panel, Microsoft Windows 8 required users to swipe, from right to left, along the right-hand edge of the screen. Newcomers often failed to discover this invisible control.

Pitfall: Effectively invisible elements

A provided cue is not noticed or perhaps slow to be noticed. It may be outside the central field of vision for the user, or they do not expect to see it.

Beware of effectively invisible elements.

When using Google Chrome to download content, the indicator to show that the download has started appears in the bottom left corner of the screen. This cue often goes unnoticed because the attention is elsewhere.

Pitfall: Distraction

Something in the UI appears suddenly or changes rapidly, distracting the user from their goal.

iPhone notifications can pop up over the top of an app such as Google Maps, obscuring the directions when the user is driving. It unnecessarily causes the user to be interrupted and draws their attention away from the task at hand.

Pitfall: Incomprehensible element

A cue critical to achieving a goal is noticed but not understood and so therefore disregarded.

Some years ago, the navigation app Waze used a silhouette of their logo for search. It was subsequently replaced by a much more familiar and easily understood magnifying glass icon.

Pitfall: Inviting dead end

When an incorrectly understood cue is considered a way to achieve a goal. It looks right, but it is wrong.

Example of inviting dead end by Google on iOS.

When trying to open Google Drive on a mobile phone, it is easy to open the Google Home app by mistake, especially if in close proximity. Instead of accessing your files, you might see settings for your devices. It is due to both the app icons having a very similar appearance and application of colours.

Pitfall: Poor grouping

A critical relationship between two or more cues is not obvious.

Example of poor grouping on lift call buttons.

Some Otis lifts have buttons and icons that can be perceived as grouped in two different ways (vertically or horizontally), changing the meaning.

Pitfall: Memory challenge

The user is required to remember information that is easy to forget.

In the past, to gain access, American Express users had to remember not only the answer to their security question but also the security question itself.

Pitfall: Ambiguous feedback

The user does not see, notice or comprehend needed feedback. If an error message does not explain what is wrong to the user in terms they understand, it is unclear what they should do to resolve it or how they might avoid this issue in the future.

Principle 2: Physically effortless

When a user can do things quickly and comfortably. Any physical challenge or accidental activation is minimal. Accessibility should also be a key consideration here.

Pitfall: Physical challenge

The user knows what action is required, but performing the action requires physical effort, is difficult, or is impossible.

A physical challenge on the iPhone contacts list.

The contacts list on an iPhone has letters on the right for navigating alphabetically that are so small that it can be difficult to tap the correct one.

Pitfall: Accidental activation

The physical actions of a user result in an unintended outcome.

When scrolling with the iPhone, it can be easy to accidentally activate the control centre menu overlay by scrolling up from the bottom edge of the screen.

Principle 3: Timely

The user does not want to wait. Nobody likes to wait a long time for things to happen.

Pitfall: Slow or no response

The user is prevented from achieving a goal promptly because of actual or perceived poor system performance or because the design intentionally prevents the user from advancing or backing out.

When activating the Super-bright LED Flashlight app on an Android phone, it can actually take a few seconds for the light to turn on.

Principle 4: Efficient

Efficiency is when the user takes fewer steps or are not required to process large amounts of information to complete their task.

Pitfall: Unnecessary navigation

When the UI is being used as intended, the amount of navigation needed (actual or perceived) to achieve a goal is still too high.

There was a trend for Hamburger menus on larger screens. But it is often better to replace Hamburgers on larger screens in favour of a flatter hierarchy that increases efficiency.

Pitfall: System amnesia

The system re-prompts the user for information previously gathered or otherwise has failed to leverage it. If supplied, there should be no reason to ask for it again. Perhaps except for password validation.

Pitfall: Information overload

Information presented to the user can be understood, but there is too much of it. It can lead to Analysis Paralysis or even TLDR (too long; didn't read).

Pitfall: Bad prediction

The user must correct or work around a system's incorrect prediction or inaccurate interpretation of their intent.

Mobile phones automatically correct typing errors when a user is writing a text message. However, sometimes this isn't what the user wanted, and the user must then take action to prevent the change as continuing to type will automatically accept the recommended correction. It can end up taking more effort and time to fix than if there had been no prediction at all.

Principle 5: Forgiving

Users will make mistakes, so a way is provided for them to undo their actions.

Pitfall: Irreversible action

The user is unable to undo an incorrect action they have taken.

In an iOS version of Concur's travel app, if a user clicks the reserve button, it reserves a flight. But it also purchases it unbeknown to the user!

Principle 6: Discreet

Data belonging to a user is not overshared or divulged.

Pitfall: Unwanted disclosure

The behaviour or data of a user is made public in a way they had not intended, leading to potential harm, irritation or embarrassment.

Users who linked their Facebook profile to their Ticketmaster account would unknowingly show all other Ticketmaster customers where they are sitting.

Principle 7: Protective

Data does not get lost through the action or inaction of the user.

Pitfall: Data loss

The user can lose their work through some action or inaction on their part.

Remember unexpected Windows system shutdowns that could cause you to lose any unsaved work?

Principle 8: Habituating

The user can quickly become a master of the interface.

Pitfall: Ambiguous Home

There is no single place that the user can return at any time to begin a new task or get reorientated. There are multiple competing Homes.

When Windows 8 introduced a new Start Screen to launch apps, it created an unclear relationship between the Start Screen and the desktop. It also contributed to the reputation of the operating system as having a confusing interface.

Pitfall: Gratuitous redundancy

The user is shown multiple cues for the same action, at a single level or a directly nested level, of the UI.

In Microsoft PowerPoint 2007, there are three different ways to add a comment to a slide deck. This redundancy introduces decisions for the user and contributes to two other issues; unnecessary navigation and information overload.

Pitfall: Variable outcome

The same user action results in a different outcome depending on where they are in the UI.

The print button on the Intermec PC43 printer has an overwhelming number of different functions. Such as setting the command language, restoring defaults and advancing the paper. If the user cannot remember the state of the button, unexpected results can occur.

Pitfall: Inconsistent elements

A cue has a different visual appearance or location elsewhere in the UI.

Example of an inconsistent user experience.

Looking at the British Gas website, some older pages use an older brand styling, and some use the newer Nucleus design system. Elements or components like buttons can have a different appearance between these pages that can cause a visually incoherent experience for the user.

Principle 9: Aesthetic

The user finds the interface attractive and compelling.

Pitfall: Unattractive appearance

The system has an unpleasant aesthetic or not following its design language.

The UI of the iPhone may generally be considered a beautiful design. However, some apps designed for the device appear cluttered with poor label placement and colour choice, polluting the overall aesthetic.

Anything else?

There may be other principles and pitfalls we have not mentioned here that you may have come across. If so, we'd be eager to hear from you in the interest of constant improvement.