USER EXPERIENCE
Module 1
UX
Introductions
MODULE !
1
User Experience
USER EXPERIENCE
1. Intro to UI & UX 4. Basic principles of UI & UX
2. What is Product designing? 5. 5 Stages of Design Process
3. Basic Design Process • Empathise
• Problem solving • Define
• User Research • Ideate
• Paper Sketching • Prototype
• Low-fidelity wireframes • Test
• High-fidelity wireframes 6. What is the difference between UI & UX?
• Prototyping 7. Standardised UI/UX process flow
• Visual design(UI) 8. Basic Industry Standards to be followed
• User Testing
MODULE !
2
USER EXPERIENCE
Design is not
what it looks
like and feels
like. It is how it
works
MODULE !
Steve Jobs
3
User Experience
USER EXPERIENCE
User experience
design is not just
about attracting
your visitors
It is about engaging,
acquiring and
retaining them!
MODULE !
4
USER EXPERIENCE MODULE !
5
Shopping Experience
USER EXPERIENCE MODULE !
6
User Experience – Telecom websites
USER EXPERIENCE
MODULE !
7
Packaging Experience
USER EXPERIENCE
8
USER EXPERIENCE
9
TV Remote Controls
USER EXPERIENCE
10
USER EXPERIENCE
Bi-lingual phones
11
Water Taps
12
USER EXPERIENCE
USER EXPERIENCE
Do these designs make
you feel
uncomfortable?
13
14
USER EXPERIENCE
15
USER EXPERIENCE
16
USER EXPERIENCE
17
USER EXPERIENCE
MTNL Mumbai Login page
USER EXPERIENCE
18
19
19
USER EXPERIENCE
Vodafone Login page
USER EXPERIENCE
20
21
21
USER EXPERIENCE
British Telecom UK ‘s Telecom service Provider
USER EXPERIENCE
22
23
23
USER EXPERIENCE
BSNL India Telecom service Provider
USER EXPERIENCE
24
25
25
USER EXPERIENCE
26
USER EXPERIENCE
27
27
USER EXPERIENCE
28
USER EXPERIENCE
29
29
USER EXPERIENCE
30
USER EXPERIENCE
31
USER EXPERIENCE
32
32
USER EXPERIENCE
33
USER EXPERIENCE
34
34
USER EXPERIENCE
WHAT IS UX?
35
USER EXPERIENCE
USER EXPERIENCE
WHAT IS UX?
What do you feel? Which one feels right for you?
36
37
USER EXPERIENCE
38
USER EXPERIENCE
WHAT IS UX?
39
USER EXPERIENCE
USER EXPERIENCE
WHAT IS UX?
Why is TiVo Remote so much
better designed than
standard remote?
Peanut shaped to fit in hand
Logical layout and color-coded,
distinctive buttons
Easy to locate buttons
40
41
USER EXPERIENCE
42
USER EXPERIENCE
43
USER EXPERIENCE
USER EXPERIENCE
WHAT IS UX?
“User experience encompasses all aspects of
the end-user’s interaction with the company,
its services, and its products.”
- Don Norman, Cognitive Scientist & User Experience Architect
44
USER EXPERIENCE
WHAT IS UX?
Don Norman (Father of user
experience) invented the term
user experience design because
he thought human interface
and usability were too narrow.
45
USER EXPERIENCE
WHAT IS UX?
Finding the right Balance
of User needs, Business
goals and Technology
constraints
46
USER EXPERIENCE
UX QUOTES BY DON NORMAN
47
USER EXPERIENCE
Goals of Usability Attributes of Usability
• Effective to use Attributes should be measurable
• Efficient to use Example Attributes include :
• Safe to use • Time to complete a task
• Have good utility • % of task completed
• Easy to learn • Number or % of errors made
• Easy to remember how • % of users who like the design
to use
• No. of times user asks for
help/gets lost
48
How to arrive at a good design using Usability
USER EXPERIENCE
1) What matters: Don’t make any assumptions
2) How do we respond: Try to respond to the design in the large
at first
3) How do we respond: Then try alternatives for design in the
small.
4) How are we doing: Prototype those designs and test them
5) The form (How the product looks?)
6) The content (What it communicates?)
7) The behavior of the software/website
49
USER EXPERIENCE
WHAT IS UI
UX design refers to user experience design
UI design refers to the user interface design. They have a close
relationship in product design but serve different roles.
In terms of functionality, UI is how things look, UX is how things work.
UX is a process, while UI is a deliverable
50
USER EXPERIENCE
DIFFERENCE BETWEEN UI/UX
51
USER EXPERIENCE
DIFFERENCE BETWEEN UI/UX
52
UX Design
USER EXPERIENCE
• Usable
• Equitable
• Enjoyable
• Useful
53
UX Design
USER EXPERIENCE
• Is the product easy to use?
• Is the product Equitable?
• Does the product delight the user?
• Does it solve the user’s problem?
54
Assignment 1
USER EXPERIENCE
Take any product. It could be a water bottle to an oven. Put your name
here on this sheet along with the product you are going to select for
this first assignment.
https://docs.google.com/spreadsheets/d/1DO-vtPC5b-KwVB5VwSw52
yvT-uS1Et0awBLZATTuaF4/edit?usp=sharing
• Analyze the 4 UX Principles with the product which you have taken.
• Submit it through the ICP portal.
55 55
USER EXPERIENCE
UX DESIGN PROCESS
56
USER EXPERIENCE
UX DESIGNER SKILLS
Empathy: the ability to understand why people
behave the way they do. This is perhaps the most
important attribute in the field. Putting yourself in
other people’s shoes is essential to working in UX
design, and it is something you might have to learn
when you are just starting out. Contrary to popular
belief, it does not come naturally to everyone!
Curiosity: the desire to know why people behave
the way they do.
Clarity of expression: the ability to express
complicated concepts clearly to those with little or
no prior knowledge in the field.
57
USER EXPERIENCE
UX AND UI SKILLS
58
Basic Principles of UX for usable products
USER EXPERIENCE
59
USER EXPERIENCE
UX DESIGN PROCESS
Problem solving
Do not define
the problem immediately. Listen
to your users.
Define the “real” problem. After
you have gathered enough
information, you can now
define what the real problem is.
60
USER EXPERIENCE
User Research
UX Research is about finding insights to guide successful designs.
User research is integral to the UX design process.
It is every UX designer’s starting point for a UX design project.
It focuses on understanding user behaviors, needs, and
motivations through observation techniques, task analysis and
other feedback methodologies.
61
62
USER EXPERIENCE
USER EXPERIENCE
User Flow
• A user flow diagram is a
simple chart outlining
the steps that a user has
to take with your
product or service in
order to meet a goal.
• In contrast to the
customer journey map,
the user flow diagram
considers only what
happens with your
product.
63
Sitemaps
64
USER EXPERIENCE
USER EXPERIENCE
• Sitemaps, also known as Information Architecture show the
hierarchy and navigation structure of a website or an application.
• They serve to show how the content will be organized into “screens”
or sections, and how the user may transition from one section of
your service to another.
65
USER EXPERIENCE
Wireframes
• A wireframe is used to lay out content and functionality on a page
which takes into account user needs and user journeys.
• Wireframing is a way to design a website service at the structural
level.
• It's like an architectural blueprint; you need to see it in
two-dimensional black and white diagrams before you understand
how to build the actual house.
66
Wireframes
67
USER EXPERIENCE
USER EXPERIENCE
UX DESIGN PROCESS- LOW FI PROTOTYPE
Low-fidelity (lo-fi) prototyping is a quick and easy way to translate high-level design
concepts into tangible and testable artifacts. The first and most important role of lo-fi
prototypes is to check and test functionality rather than the visual appearance of the
product.
Low-Fidelity Prototype:
•Paper-based
•No user interactions
•Ranges from hand-drawn mockups to printouts
•Quickest to create
•Ideal for early visualization/alternative design solutions
•Promotes innovation and improvements through rapid iterations
•Rough sketches make real users and stakeholders feel at ease when suggesting changes
68
USER EXPERIENCE
Prototypes
• Prototypes are quick and
easy tests of design solutions.
• Prototypes are tangible
product rather than abstract
ideas.
• Prototypes are often used in
the final, testing phase in
order to determine how users
behave with the prototype.
69
USER EXPERIENCE
USER EXPERIENCE PROTOTYPING
The goal of a prototype is
to test the flow of a design
solution and gather
feedback on it from both
internal and external
parties before constructing
the final product.
The state of a prototype is
fluid as the team revises
the design iteratively
based on user feedback.
70
USER EXPERIENCE
UX DESIGN PROCESS- PAPER PROTOTYPE
71
USER EXPERIENCE
UX DESIGN PROCESS- HI FIDELITY PROTOTYPE
72
USER EXPERIENCE
UX DESIGN PROCESS- HI FIDELITY PROTOTYPE
73
USER EXPERIENCE
USER TESTING
User testing is the process
through which the interface
and functions of a website,
app, product, or service are
tested by real users who
perform specific tasks in
realistic conditions.
The purpose of this process is
to evaluate the usability of
that website or app and to
decide whether the product is
ready to be launched for real
users.
74
USER EXPERIENCE
VISUAL DESIGN
Visual design focuses on
the aesthetics of a site/app
and its related materials by
strategically implementing
images, colors, fonts, and
other elements.
A successful visual
design does not take away
from the content on the
page or function.
75
Visual Design
USER EXPERIENCE
Facebook branding
76
77
USER EXPERIENCE
78
USER EXPERIENCE
79
USER EXPERIENCE
80
USER EXPERIENCE
81
USER EXPERIENCE
82
USER EXPERIENCE
USER EXPERIENCE
ROI OF UX DESIGN
Good Design is a Good Business!
Greater Productivity
Reduced redundancy in workflows
Lowered development cost
Lower maintenance cost
Reduced support and training cost
Increased sales or customer visits
Increased brand loyalty
83
UX BOOKS
84
USER EXPERIENCE
USER EXPERIENCE
Project Management – Tools used
• Asana / Jira
• Figjam / Miro
• Notion
• Asset hand off
• Developer Handoff
85
USER EXPERIENCE
Portfolio
• Importance of having a Behance portfolio
• Simple steps to create portfolio
• Portfolio examples. Click here
86
USER EXPERIENCE
Assignments
1. Visit Ads – Video, Print ads, Magazines Coverpage – National
Geographic.
2. Mall, hotel remote controls – take these experiences
3. Usability, Enjoyability, Equity (accessible), Usefulness (Submission
project)
87
USER EXPERIENCE
Thank You
[email protected]
www.itlh.in
+91
MODULE !
88
