Experiences such as those provided by Disney’s Magic band or apps like Move rarely need to be even

launched. The Disney Magic Band is just one example of how user experience design is about a lot more
than a user interface.

https://www.shopify.com/partners/blog/81091910-the-user-experience-delusion

1
2
3
Defined by International Organization for Standardization as:
A person’s perceptions and responses resulting from the use and or anticipated use of a product, system
or service. https://www.iso.org/obp/ui/#iso:std:iso:9241:-210:ed-1:v1:en

Morville
Useful
As practitioners, we must have the courage and creativity to ask whether our products and systems are
useful, define innovative solutions that are more useful.
Usable
Ease of use remains vital, usability is necessary but not sufficient.
Desirable
Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity,
brand, and other elements of emotional design.
Findable
We must strive to design navigable applications and sites and locatable objects, so users can find what
they need.
Accessible
Products should be accessible to people with disabilities (more than 10% of the population). Today, it’s
good business and the ethical thing to do. Eventually, it will become the law.
Credible
Design elements that influence whether users trust and believe what we tell them.
Valuable
It must contribute to the bottom line and improve customer satisfaction by helping them do their job,
more efficiently and effectively.

http://semanticstudios.com/user_experience_design/

There’s a video
https://www.nngroup.com/articles/definition-user-experience/

4
Image: http://solidstuff.co.za/blog/user-experience-vs-design/

5
Major difference but depending on the role of the designer, there may be some UI issues that the UX
designer handles, but the reverse isn’t necessarily correct or possible. There are also some
responsibilities that are known to be managed by both roles. For example both need to care about the
overall customer experience.

Image recreated based on: http://mediatemple.net/blog/tips/how-to-use-customer-feedback-to-improve-

user-experience/

6
7
Learnability – How easy is it for users to accomplish basic tasks the first time they encounter the
design?
Efficiency – Once users have learned the design, how quickly can they perform tasks?
Memorability – When users return to the design after a period of not using it, how easily can they re-
establish proficiency?
Errors – How many errors do users make, how severe are those errors and how easily can they recover
from the errors?
Satisfaction – How pleasant is it to use the design?

Image recreated based on: https://www.pinterest.com/pin/215328425904880229/

8
DISABILITIES
Visual – visual with no sound or alternative text, charts relying purely on colour
Auditory – Video with no close captioning/subtitles
Physical – mobility/dexterity – e.g. precision selection, drag n drop
Cognitive – reduced capacity to learn, pay attention: not breaking down content sufficiently, expecting
users to remember where to find tools etc.

Accessibility and the UK Law

There are ethical and commercial justifications for this, but there is also a legal reason: if your website
does not meet certain design standards, then you could be sued for discrimination.

The Equality Act 2010 (EQA) which came into force in October 2010, replacing the Disability
Discrimination Act 1995 (DDA) in England, Scotland and Wales, was introduced with the intention of
dealing with the issue of disability discrimination.

While it is at your discretion whether you choose to conform to WCAG 1.0, WCAG 2.0, or to both; it is the
W3C's recommendation that any new and updated content on websites comply with WCAG 2.0.

http://www.out-law.com/en/topics/tmt--sourcing/e-commerce/disabled-access-to-websites-under-uk-law/

9
Image: http://www.universaldesignstyle.com/bad-design-style-case-68/

10
11
How you perceive objects
How you remember facts and why you forget other information
How you learn language

Image: https://www.psychologytoday.com/blog/the-athletes-way/201403/eight-habits-improve-cognitive-
function

12
Mental models are the images in a user’s mind that inform their expectation of a certain interaction or
system.

Image recreated based on: https://www.safaribooksonline.com/library/view/mapping-

experiences/9781491923528/ch12.html

13
By learning the user’s mental model, interaction designers can create systems that feel intuitive.

Adapted image: https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-

interaction/mental-models

14
Interface metaphors make use of known actions to lead users to new actions. For example, the trash
icon on most computers resembles a physical trash can, in order to alert a user to the expected action.

Trash: https://www.lowmanio.co.uk/blog/entries/hci-metaphors---the-windows-recycle-bin/
Folder: https://silichronic.wordpress.com/2013/09/26/ios7_metaphor/
Search: http://www.iconarchive.com/tag/search

15
Affordances are things that are not only designed to do something, but that are designed to look like
they are designed to do something. A button that looks like a physical object you can push, for example,
is an affordance designed so that someone unfamiliar with the button will still understand how to interact
with it.

Image: https://www.quora.com/What-are-examples-of-affordances

16
Source: http://www.designprinciplesftw.com/collections/20-guiding-principles-for-experience-design

17
18
Design thinking
The design-thinking ideology asserts that a hands-on, user-centric approach to problem solving can lead
to innovation, and innovation can lead to differentiation and a competitive advantage.
Understand – Explore - Materialise

1. User Research -- Specify the context of use: Identify the people who will use the product, what they
will use it for, and under what conditions they will use it.
2. Analysis – Identify the user requirements, user goals that must be met for the product to be
successful and where these align with or affect the business requirements
3. Design – This part of the process may be done in stages, building from a rough concept to a complete
design.
4. Prototype -- design to facilitate user feedback
5. User testing – Evaluation through usability testing with actual users - is as integral as quality testing is
to good software development.

Image recreated based on: http://visual.ly/ux-design-process-1

19
Questions answered by research methods across the landscape

Behavioural vs. Attitudinal feedback

What people say versus what people do

Qualitative vs. Quantitative feedback

Qualitative generates data about behaviors or attitudes based on observing users directly – the what and
the why
Quantitative studies, the data about the behavior or attitudes are gathered indirectly, through a
measurement – the what not the why

Qualitative methods are much better suited for answering questions about why or how to fix a problem
Whereas Quantitative methods do a much better job answering how many and how much types of
questions.

Context of product use during research: not using, natural, scripted or a combination of both

Source: https://www.nngroup.com/articles/which-ux-research-methods/

20
Product development:
Strategise: Consider new ideas and opportunities for the future.

STRATEGISE
User interviews structured or semi-structured, one-on-one interviews help researchers learn about
users’ attitudes and beliefs surrounding a website or application, and specific tasks that it supports.
Field Studies researchers meet with and study participants in their natural environment, where they
would most likely encounter the product or service in question.
Surveys are a good way to collect quantitative data for user opinions about an application or website.
Diary Studies are a form of longitudinal research (research that takes place over a long period of time
with the same participants). Typically, users self-report their activities at regular intervals to create a log
of their activities, thoughts, and frustrations.

Table: https://www.nngroup.com/articles/which-ux-research-methods/
Image: http://userfocus.co.uk/resources/omnigraffle.html

21
What
A persona is a representation of a type of customer.

Why
Personas answer the question, “Who are we designing for?” and they help to align strategy and goals to
specific user groups.

When
Early, before you get into product requirements.

How
Some of this can be through desk research, but for the most accurate personas you need to interview
real users or potential users. This has little value if it is made up. Ideally several users in the same role or
with the same goals are interviewed to provide an archetype of that user. . In addition to a typical day as
this person you identify their frustrations, challenges, motivations.

22
What
Customer Journey mapping is a strategic process of capturing and communicating complex customer
interactions.
It may focus on a particular part of the story or give an overview of the entire experience. What it always
does is identify key interactions that the customer has with the organization. It talks about the user’s
feelings, motivations and questions for each of these touchpoints.
It often provides a sense of the customer’s greater motivation. What do they wish to achieve, and what
are their expectations of the organization?

Why
The activity of mapping builds knowledge and consensus across the product development team,
A customer journey map helps to identify gaps, points in the customer experience that are disjointed or
painful. These might be:
- gaps between devices, when a user moves from one device to another;
- Gaps between finding information and doing something with the information
- gaps between departments, where the user might get frustrated.
- gaps between channels (for example, where the experience of going from social media to the website
could be better).

When
Early, this is part of the preliminary research that helps you understand the use cases and context of
use.

How
There are two types of research: analytical and anecdotal. typically appears as some type of infographic.

Image: http://uxmastery.com/ux-marks-the-spot-mapping-the-user-experience/

23
What
An empathy map is a collaborative tool teams can use to gain a deeper insight into their customers.
Much like a user persona, an empathy map can represent a group of users, such as a customer
segment.

Why
Empathy maps can be used whenever you find a need to immerse yourself in a user’s environment,
elaborating on the user persona. Before you get into product requirements.

When
Early, before you get into product requirements.

How
Assemble your team and have them bring any personas, data, or insights about the target of your
empathy map. Print template on a large piece of paper or whiteboard. Hand each team member sticky
notes and a marker. Each person should write down their thoughts on stickies. Ideally everyone would
add at least one sticky to every section.

This version is adapted from the traditional because participants always struggle with what is being
asked by the usual segments of Hear, Say/Do, See, Think/Feel.

Tasks. What tasks are users trying to complete? What questions do they need answered?
Feelings. How is the user feeling about the experience? What matters to them?
Influences. What people, things or places may influence how the user acts?
Pain points. What pain points might the user be experiencing that they hope to overcome?
Overall Goal. What is the users ultimate goal? What are they trying to achieve?

Image recreated based on: Ref: https://boagworld.com/usability/adapting-empathy-maps-for-ux-design/

24
What
A storyboard is a graphic organizer in the form of illustrations or images displayed in sequence for the
purpose of pre-visualizing a scenario

When
Early on when you are exploring, understanding the problem, sharing knowledge and generating ideas.

Why
By understanding the fundamentals of the story and deconstructing it to the building blocks, we can
present it in a more powerful and convincing way. Win over stakeholders through improved
understanding of the challenges. Clients tend not to be conceptual thinkers like us; they need us to
connect the dots.

It helps see the triggers that occur, the channels that are used, the process that is followed and decisions
that have to be made along the way. More than that, the action of sketching out role-play tests our
concepts, lets us experiment at little or no cost, allows for fluid team-based brainstorming, reveals more
ideas, and scrutinises them for authenticity.

How
Start from the character with the goal in the particular context and walk him through the inciting moment,
struggles and crisis, to the final changed state.
1. Who is is involved?
2. What is the environment in which the story takes place?
3. What are the tasks being accomplished?

Image: https://kathybateman.files.wordpress.com/2013/08/mary-jos-story.jpeg

25
Product development:
Execute: Research in this phase is mainly formative and helps you reduce the risk of execution.

EXECUTE
Participatory design exercises engage stakeholders and end users in the process of solving a design
problem.
Card sorting is a useful tool to determine how users categorize the information that will appear on a
website.
Usability testing is the best way to understand how real users experience your website or application.
Unlike interviews or focus groups that attempt to get users to accurately self-report their own behaviour
or preferences, a well-designed user test measures actual performance on mission-critical tasks.

Table: https://www.nngroup.com/articles/which-ux-research-methods/
Image: http://userfocus.co.uk/resources/omnigraffle.html

26
What
Usability testing is a technique used in user-cantered interaction design to evaluate a product or feature
by testing it on users. Empirical evidence is the most valuable in user-centred design, since it gives direct
input on how real users use the system.
Why
You want people to use your product - financial benefits
Link the utility aspect to the user experience of an application. The goal is not just about provide a quick
solution, you want to make users love your solution.
Doing user tests will also help you identify issues early on. It ensures a more promising result and makes
all your resources well worth its spend.
When
All stages. If an existing design you want to ’baseline’ it find out what the current issues.
Formative: If a new development, you want to test before development starts building.- validate the
design with users before investing time to build it.
Summative: At the end of the build for an understanding of the full user experience – you should never
rely on only summative testing. Testing should be an on-going activity.
How
You will need a prototype that is ready for testing. This can be paper, click-though or fully interactive.
A script is created – treat as a scientific experiment – all participants receive the same information.
Always aim for at least 5 users. There is a diminishing return for testing with more than 5 users
(https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/)

The feedback can tell you how intuitive a design is, whether it’s in-line with the participants current
workflow, whether it is enough or if there are steps missing. These insights can help refine the feature
ahead of development. Although you should re-test an iterated design to ensure you improved the deign.

Image: http://blog.marksweep.com/
Content: http://altitudelabs.com/blog/user-testing-why-is-it-important/

27
Product development:
Assess: At some point, the product or service will be available for use by enough users so that you can
begin measuring how well you are doing. This is typically summative in nature.

ASSESS
A/B Testing a method of scientifically testing different designs on a site by randomly assigning groups of
users to interact with each of the different designs and measuring the effect of these assignments on
user behaviour.
Focus groups are best utilized as an evaluative tool, rather than a generative one. A Moderator
facilitates a small group of 4 to 8 participants, by showing them or demonstrating a product or concept.

Table: https://www.nngroup.com/articles/which-ux-research-methods/
Image: http://userfocus.co.uk/resources/omnigraffle.html

28
Image: http://userfocus.co.uk/resources/omnigraffle.html

29
30
31
32
What
A heuristic evaluation is a usability inspection method for software that helps to identify usability
problems in the user interface (UI) design.

When
Can be during the development process, but generally you are reviewing an existing application, site and
using the review as a way of improving the existing product.

Why
The product has not been successfully adopted, the product has received a lot of negative feedback
including usability issues.

How
It specifically involves one or more practitioners examining the interface and judging its compliance with
recognised usability principles. Can be page by page or typically following one or more recognised user
journeys.

Image: http://laraveldaily.com/checklist-8-things-launching-laravel-project-live/

33
Image: http://fxgallery.com/child-file-income-tax-return.html

34
41
42
43
44