UX & UCD

User Experience Design (UX)

User experience design (UX) is about designing for people first: building a well-organized, cohesive and compelling user experience. It focuses the design lens on the user-interface itself, and the role of user interaction in satisfying a customer’s expectations.

Building a consistent visual and behavioural experience provides a number of benefits¹.

• Users will learn your application faster if the user interface is familiar.
• User can accomplish their tasks more quickly, since the interface is consistent with other applications they’ve used.
• Users with special needs will find your product more accessible.
• Your application will be easier to document and explain.

Apple’s Human Interface Guidelines

Apple has published a series of Human Interface Design principles which characterize a compelling, useful and efficient user interface. First published with the MacIntosh in 1983, these have been refined over the years, but still reflect underlying design principles:

1. Metaphor. Take advantage of people’s knowledge of the world by using metaphors to convey concepts and features of your application. Use metaphors that represent concrete, familiar ideas, and make the metaphors obvious, so that users can apply a set of expectations to the computer environment. For example, graphicsl operating systems often use the metaphor of file folders for storing documents.
2. Reflect the User’s Mental Model. The user already has a mental model that describes the task your software is enabling. This model arises from a combination of real-world experiences, experience with other software, and with computers in general. For example, users have real-world experience writing and mailing letters and most users have used email applications to write and send email. An email application that ignores the user’s mental model and does not meet at least some of the user’s expectations would be difficult and even unpleasant to use.
3. Explicit and Implied Actions. Most operations involve the manipulation of an object using an action. In the first step of this manipulation, the user sees the desired object onscreen. In the second step, the user selects or designates that object. In the final step, the user performs an action, either using a menu command or by direct manipulation of the object with the mouse or other device. Explicit actions are obvious and clear from user actions (e.g. a menu command). Implied actions arise from interaction with objects (e.g. dragging a graphic into a window to import it). The user’s mental model and expectations should drive your choice of action.
4. Direct Manipulation. Direct manipulation is an example of an implied action that allows users to feel that they are controlling the objects represented by the computer. According to this principle, an onscreen object should remain visible while a user performs an action on it, and the impact of the action should be immediately visible. e.g. selecting text with the mouse; dragging a graphic between windows to move it.
5. User Control. Allow the user to initiate and control actions. Provide users with capabilities, but let them remain in control.
6. Feedback and Communication. Keep users informed about what’s happening by providing appropriate feedback and enabling communication with your application. Look for ways to communicate state!
7. Consistency. Consistency in the interface allows users to transfer their knowledge and skills from one application to another. Use the standard elements of the interface to ensure consistency within your application and to benefit from consistency across applications. When uncertain, look at what previous applications have done.
8. Modelessness. As much as possible, allow users to do whatever they want at all times. Avoid using modes that lock them into one operation and prevent them from working on anything else until that operation is completed.

User-Centred Design (UCD)

“I walk around the world and encounter new objects all the time. How do I know how to use them?” — Don Norman

In the mid 1980s, while on sabbatical at the Applied Psychology Unit at Cambridge University, Don Norman found himself puzzled by the light switches he encountered. Why light switches? As the story goes, the switches moved in the opposite direction to what he expected (“up” denoting “on” by North American convention, while at Cambridge they worked in the opposite direction ). This led him to consider the “perceived affordance” between user and item being used; the visual “hints” that suggest how something should be used. In other words, “how we [manage] in a world of tens of thousands of objects.”

These ponderings eventually led to the publication of his book, The Design of Everyday Things in 1988 [Norman 1988, 2013]. In this book, Norman presents case studies of objects we interact with everyday, from door handles to computers and phones. He shows what good and bad design look like across a wide spectrum of devices, inviting us to think about all the daily “user experiences” we take for granted. He wasn’t thinking about software explicitly, but his insights apply equally well to that domain.

For Norman, the two most important characteristics of good design are discoverability – the ability of a user to determine the purpose of an object – and understanding – figuring out how it works and how to use it. From Norman’s perspective, good design should make these characteristics obvious and intuitive.

Norman illustrates what he considers the fundamental principles of interaction:

• Affordances: cues that allow a person to figure out what an object does without any instructions. e.g. a door with a “pull” handle (formally called “perceived affordance”, which positions then as properties of the perceiver, as much as the object itself).
• Signifiers: visible signs or sounds that communicate meaning. They indicate what is happening, or what can be done. e.g. a door that says “push” on it.
• Mapping: the relationship between two sets of things that conveys associated meaning. e.g. grouping controls and putting them next to the thing that you want to manipulate.
• Feedback: the result of an action, communicated to a user. e.g. a button changing color when depressed; a walk indicator that lights up when the walk button is activated.
• Conceptual models: simplifed explanations of how something works; related to mental models that people automatically form when working with an object to help them explain and predict its behaviour.

“Good” design is about getting these characteristics “right” to reduce the friction between the user’s intention and the outcome of interacting with an object. In order for something to be useful, it needs to serve a clear purpose for some user, and it should be intuitive to use (in other words, designed using the principles he specified).

So how do we know when we have things “right”? We talk to users! We iterate on our designs, collect feedback and made revisions until we get the best design that we can. Norman’s insights kick-started a shift towards designing for users, and directly led to the emergence of UCD and modern UX.

User-Centered Design (UCD) is design process that was developed in parallel to the Agile models that we have discussed. It focuses on addressing the needs of users first, to ensure that we’re building a high-quality solution and solving the correct problem for our users. UCD uses a mixture of investigative tools (e.g. interviewing) and generative methods (e.g. brainstorming) to design systems based on user needs, and collect feedback through the process².

The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother.

Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features.

In order to achieve high-quality user experience in a company’s offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.

– Don Norman and Jakob Nielsen

UCD Principles

1. Understand and address the core problems. Ensuring that we solve the core, root issues, not just the problem as presented.
2. Be people-centred. We are designing software for people. A well-engineered solution that nobody uses is a failure.
3. Use an Activity-Centred Approach. Design must focus upon the entire activity under consideration, not just isolated components. Most complications result from the interdependencies of multiple parts.
4. Use Rapid Iterations of Prototyping and Testing. Continually test and refine our solution, and get feedback to ensure that it truly meets the needs of users.

UCD is frequently mistaken for UX (User Experience). They are related but not identical. User-Centred Design is the process of considering users through planning design and development of a product. It’s a set of steps and methods that we can use to ensure that we are designing for users. User Experience (UX) is the conceptualization of a user’s full experience with a product. It’s concerned with the users perceptions of the entire solution.

This course is primarily concerned with design and implementation, so we’ll utilize UCD in our design³.

Collecting Feedback with Prototypes

It’s possible that a large feature may take multiple iterations to complete. In cases like this, you may want to elicit feedback on the feature before completing it. We can do this by building a low-effort prototype which demonstrates some degree of functionality, without being complete.

A prototype is a mockup of a system, intended to demonstrate some functionality. A prototype is NOT an “early version” of release software, but an early demonstration of functionality intended to elicit feedback from users.

The value in a prototype is (a) that is represents a lower commitment (time, cost) than building the feature outright, and (b) because of this, can be discarded or modified as needed.

Prototypes make sense for high-effort features. For simple features that don’t require feedback, or ones that can be implemented in a single sprint, it may not be worth the effort.

Low-fidelity prototypes are simple, low-tech, and represent a minimal investment of time and effort. They are shown to users to elicit early feedback on layout, navigation and other high-level features. Low-fidelity prorotypes are often sketches on paper, or non-interactive wireframe diagrams.

High-fidelity prototypes represent a more significant effort and are intended to be close to the final product. They are suitable for demonstrating complex functionality. High-fidelity prototypes may include interactive screen mockups that demonstrate the expected interaction. Commercial products exist for this purpose e.g. balsamiq.

Popular wireframe and prototyping tools

• Balsamiq: wireframes only
• Figma: wireframes and interactive prototypes, encourages collaboration
• Miro: Multi-purpose collaboration tool, includes wireframes
• Sketch: wireframes and interactive prototypes.