Introducing You to

The User Experience Designing

(UX, UXD, UED or XD)
Unit III :User Experience
Design Process and Research
Definition of User Experience (UX), UI and UX, 7 Laws of UX design, Elements
of UX design. Conceptualization and Ideation
User Experience Research: Conducting research, UX research best practices
and methods, Empathy Mapping, Qualitative and Quantitative User Research,
Behavioral and Attitudinal User Research, Card Sorting and Tress testing
methods for User Research, Data gathering Methods and Sources
Sketching the UX. Designing, Ideating, & Information Architecture,
Prototyping, 5 Visual Design principles in UX design and its benefits,
Development, Design Documentation.
The effects of good UED design
Flows in UX design, Integrating User Context in Design Process using Task
Flows, User Flows, User Experience Metrics – HEART Framework
User Experience : The UX Design Process:
Everything You Need to Know
User Experience : The UX Design Process:
Everything You Need to Know
 User Experience : The UX Design Process:
Everything You Need to Know

The UX design process

consists of five key
phases: product
definition, research,
analysis, design, and
validation. Image credit
Nick Babich.
User Experience
User Experience
→ Explaining the term “user experience”.
→ What is the aim of UX design?
→ How UX design relates to graphic design?
→ Examples explaining main UX design principles.
User Experience (UX) is the quality of experience a
person has when interacting with a specific design.
This can range from a specific artifact such as a cup, toy
or website, up to larger, integrated experiences such as
a museum or an airport.
User Experience Design is the process of
enhancing user satisfaction by improving
the usability, accessibility, and pleasure
provided in the interaction between the
user and the product.

- wikipedia
To create a valuable design.
Goal of UX
Websites with good UX

• smooth to use and offered such interesting content

• the site was easy to navigate
• Along with the names of the categories, subcategories
consist of little images to offer easier navigation.
• the language they used throughout the website.
Improving the design of your interface, understanding, and
working on what your users would want to see is a great
way to improve the UX of your product.
Starbucks uses smart personalization in their mobile app for online ordering
by understanding users’ purchase histories and patterns.. Therefore, it is
easier to pick what one wants from a list of previously ordered items than
from a full menu. Starbucks app gives the “Featured” tab to see if there is
anything new and recent orders in “Recent” tab.
Bad UX : Arngren e-commerce website makes it almost
impossible for users to look for a product and this, of
course, does not make a good user experience.
User Experience
User experience (UX) is made of all the interactions a user has
with a product or service. It is the personal, internal experience
customers go through when using a product’s interface.
At the end of the day, it is the customers’ needs and feedback that
push products towards improvement and innovation.
the better the experience you’re offering, the more likely
customers will choose you over your competitors: UX can be a
differentiator in a crowded marketplace.
User Experience
Many aspects matter in websites user experience but here is a selection we
made with the top 5:
◦ Navigation through the site must be fast and logical. Customers don’t
have time to wait or to think too much where to click next. Find those
broken links and fix them!
◦ Update contents frequently. Nothing is worse than finding out
outdated info.
◦ Mobile optimization is mandatory. The migration from desktop to
mobile is going fast and not all websites are keeping up.
◦ Use images. All text websites are boring and ineffective.
◦ Test. Every now and then you should test your website. Make A/B tests,
or use heat maps but make sure you’re keeping the user and her
needs at the core.
 UI Deign and User Experience
The main difference to bear in mind is this: UX design is all about the overall feel of
the experience, while UI design is all about how the product's interfaces look and
function
Lets Clear the Most Common

Misconceptions
About User Experience Designing
1. User experience
design is NOT
User interface design.
User Experience and Usability
User experience and usability have become synonymous, but these two
fields are clearly distinct.
UX addresses how a user feels when using a system, while usability is
about the user-friendliness and efficiency of the interface.
Usability is big part of the user experience and plays a major role in
experiences that are effective and pleasant, but then human factors
science, psychology, information architecture and user-centered design
principles also play major roles.
2. User experience
design is NOT
A step in the process.
3. User experience design is NOT
Just about technology.
“User experience design is not limited to the
confines of the computer. It doesn't even need a
screen... User experience is any interaction with
any product, any artifact, any system.”
4. User experience design is
NOT
Just about usability.
“While usability is important, its focus on
efficiency and effectiveness seems to blur the
other important factors in UX, which include
learnability and visceral and behavioral
emotional responses to the products and
services we use.”
5. User experience design is
NOT
Just about the user.
6. User experience design is
NOT
Expensive.
7. User experience design is
NOT
Easy.
8. User experience design is NOT
the role of one person or
department.
“User experience isn’t just the responsibility of a
department or a person. That compartmentalist view
of UX is evidence that it is not part of the
organizational culture and hints to teams not having
a common goal or vision for the experience they
should deliver collectively.”
9. User experience design is
NOT
A single discipline.
“User experience may not even be a community just
yet. At best, it’s a common awareness, a thread that
ties together people from different disciplines who
care about good design, and who realize that
today’s increasingly complex design challenges
require the synthesis of different varieties of design
expertise.”
10. User experience design is
NOT
A choice.
User experience design is
NOT...
1. User interface design It is the system
2. A step in the process It is the process
3. Just about technology It is about behavior
4. Just about usability It is about value
5. Just about the user It is about context
6. Expensive It is flexible
7. Easy It is a balancing act
8. The role of one person or dept It is a culture
9. A single discipline It is a collaboration
10. A choice It is a means of survival
UX Design Rules
7 Laws of UX design,

5 Elements of UX design.
7 Laws of UX
The collection of laws or design standards that designers
must take into account when thinking and improving the
user experience.
1. Fitts’ Law
2. Hick’s Law
3. Jakob’s Law
4. Miller’s Law
5. Parkinson's Law
6. Tellers Law
7. Law of Pragnanz
1. Fitts Law
Fitts' law states that the amount of time required for a
person to move a pointer (e.g., mouse cursor) to a target
area is a function of the distance to the target divided by
the size of the target.
Fast movements + small targets results in more errors.
Fitts Law
Law influenced the making of
◦ interactive buttons large (especially on finger-operated mobile
devices)—
◦ smaller buttons are more difficult (and time-consuming) to click.
◦ the distance between a user’s task/attention area and the task-
related button should be kept as short as possible

Fitts’ Law is the basis for predicting user behavior on a

website. Employing Fitts’ Law allows you to begin
your design process with the end in mind.
2. Hicks Law
“The time it takes to make a decision increases as the
number of options increases”
For example , which is better?
◦ A single form with 20 options to complete
◦ A step-by-step form with 4 stages and 5 options per
stage.
Obviously second
Hicks Law
Hicks Law
To successfully implement Hick’s Law into your design,
try these tips:
◦ Break up long processes into steps. Each step should
have a clear purpose for the user to follow.
◦ Categorize choices to make them easier to search for
and identify.
◦ Use progressive disclosure to reveal additional
information when needed.
3. Jakob’s Law
Jakob’s Law was coined by Jakob Nielsen, and states the
idea that since users spend time on other sites or
applications, they have an expectation that your site or
app will function in the same way.
designers need to focus on using patterns and
conventions that their users are accustom to.
3. Jakob’s Law
This can be in areas such as workflows, page navigation, structure,
and placement of common elements.
This prevents users from feeling overwhelmed by learning a new
mental model or process

Eg. Location and icon for search bar and search option
4. Millers Law
Miller’s Law was formulated by George A. Miller, an American
psychologist who was one of the founders of cognitive psychology,
and it states that the average person can only keep seven (plus or
minus two) items in their working memory.
More than that and they could be overwhelmed.
Millers Law
UX designers can focus on chunking, to make them more cohesive
and memorable.
When items are grouped in this way, the brain has more capacity
for short term memory.
eg
0987654321 or 098–765–4321
5. Parkinson’s Law
Law states : People will keep working on a task until their allotted
time is reached.
A UX designer can apply this to creating more efficient interfaces
that help users complete a task in a timely manner.
For example, if you design an e-Commerce website you can
autofill some data for customers during checkout. By doing that
you will save time.
6. Tesler’s Law
Also known as The Law of Conservation of Complexity,
states that for any system there is a certain amount of
complexity which cannot be reduced.
◦ All processes have a core of complexity that cannot be designed
away and therefore must be assumed by either the system or
the user.
◦ Ensure as much as possible of the burden is lifted from users by
dealing with inherent complexity during design and
development.
◦ Take care not to simplify interfaces to the point of abstraction.
7. Law of Prägnanz
Law of simplicity
“Law of simplicity”, which states that users perceive complex forms in
the simplest way because it is the interpretation that requires less
mental effort.

it is easier to understand and assimilate a square than an octagon. And

it requires less mental intensity to obtain an appreciation of what that is
and what it is for.

Why is the “Add to cart” button not a cart, but a square?.

UX Design Elements
Everything from visual aesthetics to interactions and
emotional connections must feel real to create an engaging
and holistic experience that keeps users happy.
User experience is first and foremost about feelings.

A good UX encompasses all the elements that together make

up an interface, including visual design, text, layout, brand,
sound, and interaction.
Given by Jesse James Garrett
UX Design Elements
An interface that has a personality and evokes emotions through
the use of colours, graphic elements, typography and other
elements, helps to create a harmonious relationship with the user.
Creating a meaningful, delightful overall experience is at the heart
of holistic UX , besides “usability”.
A predictable UX means that all aspects of the interaction design
set accurate expectations about what happens after a user taps,
swipes or clicks on something before it actually happens.
Predictability makes people feel more comfortable, gives them a
sense of control
5 elements of UX
There are five dependent layers,
each level builds on the level
before it, and they start with
abstract level towards concrete
one(from bottom to top).
i. Strategy
The reason for the product, application or the site, why
we create it, who are we doing this for, why people are
willing to use it, why they need it.
The goal here is to define the user needs and business
objectives.
This could be done through Strategic Research Process,
where you interview users, and all stakeholders in
addition to review the competing products or companies.
ii. Scope
Defines the functional , features and content requirements. The
requirements should fulfill and be aligned with the strategic goals.
Functional Requirements It’s the requirements about the functions, or
features in the product, how features work with each other, and how they
interrelate with each other.
Content Requirements It’s the information we need in order to provide the
value. Information like text, images, audio, videos, …etc.
Functional Vs Content requirements
The feature is having a media player for songs, while the content is the audio
files for these songs.
iii. Structure
Defines how user interact with the product, how system behave when
user interact, how it’s organized, prioritized, and how much of it.
Structure is split into two components,
1. Interaction Design Given the functional requirements, It defines
how user can interact with the product, and how the system
behaves in response to the user interactions.
2. Information Architecture Given the content requirements, It
defines the arrangement of content elements, how they are
organized, to facilitate human understanding.
Structure
Good Interaction design
1. helps people to accomplish their goals.
2. effectively communicates interactivity and what user can do.
3. informs user about state changes while they interact.
4. prevents user error or mistakes, like the system asks user to confirm
potentially harmful action(i.e. deletion).
Good Information Architecture
1. organizes, categorizes, and prioritizes the information based on user
needs and business objectives.
2. makes it easy to understand and move through information
presented.
3. flexible to accommodate growth and adapt to change.
4. appropriate for the audience.
structure
 iv. Skeleton
Skeleton determines the visual form on the screen, presentation and
arrangement of all elements
Also how the user moves through the information, and how information is
presented to make it effective, clear, obvious.
Wireframes are widely used to create a visual format, which is a static
Skeleton is split into three components
1. Interface Design presenting and arranging interface elements to enable
users to interact with the functionality of the system.
2. Navigation Design how to navigate through the information using the
interface.
3. Information Design defines the presentation of information in a way that
facilitates understanding.
Skeleton
So, the Skeleton should answer these questions:
•What visual form of all things that will be presented on screen
•How interactions will be presented and arranged
•How will users move around the site, or application
•How content will be presented clearly
Skeleton
(wireframe)
v. Surface
It’s the sum total of all the work and decisions made. It
determines how does the product will look like, and choosing the
right layout, typography, colors, …etc.
In Surface, we are dealing with _Visual Design (Sensory Design),
It’s concerned about the visual appearance of content, controls,
which gives a clue of what user can do, and how to interact with
them.
It should make things easier to understand, increase cognitive
ability to absorb what users see on the screen.
Surface - Visual design
How UX elements work
together?
Each layer is dependent on the other layers below it.
Any decision or choice in a layer, will affect future decisions in
the next layers.
◦ Strategy, which is the foundation of any successful UX.
◦ Scope when user & business needs is translated to requirements
◦ Structure when we define the ways of interaction with the system
functionality, the system response, and how information is
organized.
◦ Skeleton - Sketching each screen of the system (i.e. using
wireframes) to present the areas of interactions and structure and
how information will be presented clearly.
◦ Surface, we take all the work and decisions we have made into the
final visual presentation.
User Centered Design Process
https://www.interaction-design.org/literature/topics/user-centered-
design