Good design requires understanding how people think. Not in abstract terms, but mechanically. What drives decisions. What creates habits. What makes one action feel safe and another feel risky.
We have mapped out the userās journey, and made sense of our research insights. Itās time to shift our perspective to build mode and focus on product.
In this chapter, we draw (1) user flows ā a focused user journey within our product or service (2) the productās conceptual model, (3) it's corresponding information architecture; and then before we put pen to paper, pointer to pixel, we (4) look into some time-tested principles of designing for screens.
We are no longer just using computers; We are using computers to use the world ā interact with people, resources, communities and ecosystems.Don Norman, a leading cognitive scientist and usability expert
The product or solution you are building is no doubt complex, and full of variables worth testing. So what is it that you need to prototype?
Maybe you've already pinpointed a key interaction with the user. An intent-rich moment when 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 a point of friction that you've identified.
Let's look at how user flows can help us walk through the user's experience within the universe of our solution, and reveal product specific insights, to develop better prototypes for testing.
User flow(chart)s
When to use this? Diagramming the user flow can help gauge the completeness of the path a user chooses. The flow can also reveal how many steps they chose to complete a task and what pathways they decide to take when interacting with your product or service.
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 user-flow diagram is as follows ā
rectangle = step/ page; diamond = decision; arrow = branch; oval = start or end
At this stage of journey mapping, a common error in articulating users goals is phrasing need statements as such ā 'As a user, I need to be able to filter the messages by type so that I can find the message I'm looking for' as opposed toĀ 'As a user I need to find messages so that I can respond to them quickly.' The latter is preferred as the more holistic or human-centred way to describe what the user's intentions.
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.
Conceptual Models
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
Information Architecture is the practice of organising, structuring, and labelling information to make it easier to find and understand. A definition I like is organising 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.
Broadly, when weāre talking about information architecture of a digital product, weāre talking about
Organization (Structure) > Labels (Taxonomy) > Navigation (Way Finding) > Search
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.
Heuristic Principles
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.
A navigation pattern that takes into account visibility of status is using Breadcrumbs. Having a hierarchical trail of where the current page lives in an architecture is good for supporting bottom-up experiences like landing on a product page from an external search result. These are intended to supplement other navigational components, such as a global navigation bar that stretches across the top of every page or a local navigation bar that is often found on the left hand side.
In the chapter about user Goals and Journeys, we briefly looked at the gulf of execution and evaluation, which is worth a revisit at this point
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 hovered over a page unsure which button to click, or abandoned a form because it was unclear where to start, youāve been here.
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.
A beautiful article on the power of metaphors to rewire our minds.
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.
NNG suggests that your product support undos and redos, always show a clear way to exit the current interaction and make exits clearly labeled and easily discoverable.
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 ā
The goal-gradient effect
The tendency to approach a goal increases with proximity to the goal. Useful to know when designing for behaviour change, weāve all fallen prey to incentives built around this rule, when cafes or donut stores reward you with a āfree coffeeā rewarded after X purchases.
This also speaks to our tendency to remember uncompleted or interrupted tasks better than completed tasks (Zeigarnik Effect). Provide a clear indication of progress in order to motivate users to complete tasks. This trick is very well applied by tv shows. The episode ends, but the story doesnāt, thus you get stuck in a cliffhanger.
Fittās Law
The time to acquire a target is a function of the distance to and size of the target. A target is the specific region within a user interface element where a user clicks, touches, or taps to trigger an action. As per the WCAG 2.5.5 guidelines, a target with a minimum size of 44 by 44 pixels is recommended. On a physical keyboard, buttons that are most used (Enter, Esc, Space, Shift) are larger and closer to the userās fingers than the rest of the buttons. This is an application of Fittās Law in a tangible product.
Itās also why we often see application menus (for mouse-driven screens) on the edges of the screen ā screen edges act as natural walls for the cursor, enabling the user to reach that area very easily. On touchscreen devices though, it actually takes longer to hit targets placed around the edges.
While we only scratched the surface of usability, read about all 10 in more detail here.
Biases
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.