We have mapped out the user’s journey, and found a way to articulate our challenges and insights as opportunities. It’s time to shift our perspective to build mode and focus on the product or solution.
In this chapter, we learn to draw user flows — a task-focused user journey within our product; (2) think through our product’s conceptual model, and (3) corresponding information architecture. Then as we put pen to paper, mouse to screen, we go through a few (4) time-tested principles for interface design.
The product or solution you are building is no doubt complex, and full of variables worth testing. So what is it that you want to prototype? Maybe you've already pinpointed a key interaction with the user. An intent-rich moment when key decisions are made and preferences shaped. Maybe it's the user’s first interaction with your solution, or something that triggers a change in their behaviour, or even the point at which they felt motivated enough to recommend your product to a friend.
Let's draw out that interaction. Think of a task that needs to be accomplished, a 'job to be done', or short term goal, and list out the very specific actions, corresponding tool used and time taken for that micro-journey. Then find what's not working about it — where the user experiences most friction or frustration — and now you know what needs to be prototyped for testing.
Alternately, if the product is at a more mature stage, and we’re looking to fix or better a moment that lives entirely within the universe of our solution’s digital experience, we can directly dive into the language of user flows. This acts as a precursor to your wireframes or low-fidelity prototypes.
A commonly used tool in product development, the user flow (or interaction flow, task flow) is a step-by-step visual mapping process, outlining what a user does to finish a task or complete a goal through your product or experience.
User Flows can be thought of as something like the set of directions that Google Maps dictates to you as you’re driving. Except instead of outlining the route on a road, a User Flow diagrams outlines how users moves around your product.
Typically, the visual key to a userflow diagram is as follows —
rectangle = step/ page; diamond = decision; arrow = branch; oval = start or end
Now that we have a robust understanding of our users’ journeys — both as a high-level scenario and as specific task workflows, we put on our product-centric glasses, and take a fresh look at our solution through the lens of it’s conceptual model and information architecture. As my professor would say, we have to think about models before screens.
When you say, “I know how to use the oven,” or “I know how to use Excel,” you are referring to a conceptual model. The design of a digital product almost always starts with its conceptual model. This gives the team a high-level understanding of the tasks people will do with it, the elements and actions required for them to complete those tasks, and the sequence they need to happen in. Users need to have an accurate conceptual model of a tool or product in order to be able to use it effectively. As an example of a conceptual model Johnson + Henderson describe an alarm clock.
The clock stores the current time of day, continually updating it to track the passage of time. It displays the current time constantly. Users can set the current time. Users can set an alarm at a specified time, or no alarm. When an alarm is set and the current time equals the set alarm time, the alarm is triggered. Users can turn off an alarm.
“For people to use a product successfully, they must have the same mental model as that of the designer. But the designer only talks to the user via the product itself, so the entire communication must take place through the ‘system image’: the information conveyed by the physical product itself.” - Don Norman
This brings us to the design of information.
Information Architecture is the practice of organising, structuring, and labelling information to make it easier to find and understand. A definition I like is organizing stuff, so it’s easy to find. It is the backbone to creating effective digital products. Even though the information architecture itself necessarily visible in the interface, it definitely impacts the User Experience (UX). The intuition or feeling that they’re consuming content in a connected and coherent way adds up to a a UX that matches the user’s needs and expectations.
Sometimes the terms information architecture and navigation are used interchangeably. Although navigation is just a part of IA, and doesn’t quite accommodate the full scope of your product functionality, it is the translation of your thinking and the most visible part of the system of information organization. It’s helpful to rely on existing navigation patterns when considering the pathways of information.
Think about roles and permissions of a user at this stage — “who” is doing the navigating and what places do they have access to navigate between. For example, many service oriented products have a logged in vs. logged out experience. Sometimes there’s a difference in access based on subscriptions. C.R.U.D (Create, Read, Update, Delete) is a simple framework for considering the entire lifecycle of core objects in the context of roles and permissions.
Two common techniques to test your iA are card sorting and tree testing. Seeing how prospective users categorize information into groups helps the you understand users’ mental models. Be cognizant of choice overload. When presenting your users with choices, keep in mind —
Hick's Law - The time to make a decision increases with the number and complexity of choices. Miller’s Law - The number of objects an average human can hold in working memory is 7 ±2.
Equipped with more clarity around the functional components of our product, we can begin to sketch specific wireframes or low-fidelity prototypes to test part of the product for usability.
Visibility of System Status, Error Prevention
Programmers know how difficult it can be to locate the source of an error in an interface which lacks immediate feedback; they have to resort to tools such as breakpoints and stepping to understand how the state of the system changes with each action specified in their code. The real difference between command-line UIs and modern GUI designs is not the presence of colourful icons — It’s visibility of system status.
Even when the system does not have a screen (voice-only devices for instance), a minimum feedback that the command was heard is essential. Amazon’s Echo displays a ring of light on the device, and a ting sound, to indicate that it is currently listening or working on the command.
Other examples include a swish sound in digital wallets to indicate processed payment or whoosh sound to convey a sent message or email. Progress bars on a survey that indicate where you are, and even the slightest vibration you feel while typing on your phone are examples of immediate feedback that increase trust in a product. It also allows users to quickly identify the source of error and fix them as soon as they were made.
It is not only about anticipating errors but also failing gracefully. Error messages are often overlooked or are added at the last minute without any thoughtful presentation or wording. They are the last tool to get users to stay in your application. Vague 404 pages or failed form submissions that don’t clearly explain what caused the failure are both types of oversights that will confuse and frustrate users. Use error messages to your advantage. Make them noticeable and make sure any part of your system where user action is required is equipped with proper error handling notices. Read more about failing gracefully and Don Norman's 3-part system here.
i. The Gulf of Execution — when users do not know what action to take. It is the space between what they want to do and what the system presents as possible. If you’ve ever hovered over a page unsure which button to click, or abandoned a form because it was unclear where to start, you’ve been inside the gulf.
ii. The Gulf of Evaluation — after the action. Did it work? Did the system respond? Is the outcome visible, trustworthy, and interpretable? If the interface does not make the result legible, the user remains stuck, even if their action was technically successful.
YOU ≠ USER. It’s easy to get caught up in the development of a product and see it so often that we take many parts of it for granted. This heuristic reminds us to use familiar language, and leverage your users’ interactions with existing objects.
Skeuomorphic web design may seem overdone, but its basic principle — to create an interaction that mimics one from the physical world — relies on people’s existing knowledge and helps them easily learn an interface, with no need for training.
Our past experiences influence our visual perception. Jakob’s Law dictates that users prefer your site or product to work and behave the same way as all the other sites they already know. As users are spending more time on digital products that are not yours, they develop ingrained expectations and mental models of how things should work.
User Control and Freedom
Making it easy for a user to back out of a process or undo an action, brings a sense of freedom and confidence. Exits allow users to remain in control of the system and avoid getting stuck and feeling frustrated.
Flexibility and Efficiency of Use
For the long term effectiveness of your solution, it’s important to think about the flexibility and efficiency of use of your product. While new users rely heavily on step-by-step tooltips or clearly labeled menus, more-experienced users learn keyboard shortcuts or touchscreen gestures to complete the same task.
Beyond simply structuring functionality to allow for open-ended approaches, another way that we can allow users flexibility in how they perform tasks is to enable expert users to customize the interface to suit their unique (and often dynamically changing) needs.
In the context of user goals and expectations, take note of two additional behavioural patterns —
Digital interfaces are also subject to a type of recency bias called the Serial Position Effect which states that users have a propensity to best remember the first and last items in a series.
In practice this means that positioning key actions on the far left and right within elements such as navigation can increase recall. Placing the least important items in the middle of lists can be helpful because these items tend to be stored less frequently in long-term and working memory. This is applicable to surveys and dashboards as well.
