y

nl
O
se
U
tre
Session 2

en
C
Introduction to User
h
Experience Design
ec
pt
rA
Fo
 y
Learning Objectives

nl
O
In this session, you will learn to:

se
 Define User Experience (UX) and User Experience Design
 Describe the difference between UI and UX

U
 Describe the different elements of UX Design

tre
 Explain the significance of UX
 List and explain the principles of User Experience Design

en
 Describe the best practices in User Experience Design

C
h
ec
pt
rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 2 of 21

© Aptech Limited
 y
Definition of UX and UX Design

nl
O
User Experience:

se
 It is the overall experience and satisfaction a user has when
interacting with a product such as a Website or computer

U
application.

tre
User Experience Design:
 It is the process of understanding the needs of a user and

en
intuitively addressing those needs by improving the product’s
information architecture, interaction design, and visual design.
C
h
ec
pt
rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 3 of 21

© Aptech Limited
 y
Difference Between UI and UX 1-3

nl
O
User Interface (UI):

se
 It is simply a collection of elements such as text fields,
buttons, search field, layout, and links by which a user

U
and a computer system interacts.

tre
 It does not address details such as how the
user remembers the system, responds to the system

en
and re-uses it.
User Experience (UX):
C
 It is the overall experience of using the interface - how
h
it makes the user feel while interfacing with a system.
ec

 It answers the ‘why’ questions behind the design layout

and user interaction.
pt

 It focuses on identifying the users who will utilize the

rA

system and determining how exactly to meet their

needs.
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 4 of 21

© Aptech Limited
 y
Difference Between UI and UX 2-3

nl
O
User Interface (UI) User Experience (UX)

se
It is a means by which a user can

U
interact with the system. It serves as a It is the experience resulting from using
point of interaction between user and a system. It is the interaction itself.

tre
the system.

en
UX is the big picture that includes the
UI is only a component of the overall
entire process from concept to
UX.
C completion.
UX is subjective in nature and
h
UI is tangible and can be defined easily.
sometimes difficult to measure.
ec

It focuses on the visual design (look It focuses on human behavior and try to
pt

and feel) and the interaction design obtain a better understanding of what
rA

(how it works) of the system. the user wants to use.

Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 5 of 21

© Aptech Limited
 y
Difference Between UI and UX 3-3

nl
O
User Interface (UI) User Experience (UX)

se
It requires creative and convergent
It requires creative and critical design.

U
design.
It focuses on the presentation of the It focuses on the context and provides

tre
content so that it becomes easier for users with the solution to their
the user to obtain information. problems.

en
The UX determines the future use of the
UI is the determining factor of the UX.

C
The UI process involves determining
system.
h
the initial requirements and objectives UX design begins with a thorough
ec

for the system, organizing the understanding of the users - what

information space and selecting and
pt

drives them and what their limitations

applying colors and style of the UI are.
rA

elements.
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 6 of 21

© Aptech Limited
 y
Elements of User Experience Design 1-3

nl
O
The critical elements of a good User Experience Design are
as follows:

se
Collecting user perceptions and experiences
to improve product design.

U
tre
User
Research

en
Graphic treatment of Structuring and
interface elements, that organizing information

C
Visual Information
is the ‘look’ in ‘look-and- Design Architecture within the product to
feel’ of the system. User facilitate understanding.
h
Experience
Design
ec

(UXD)
pt
rA

Making a pleasant and

Designing the product to Interaction non-frustrating
Usability
achieve end goal. Design experience for the users.
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 7 of 21

© Aptech Limited
 y
Elements of User Experience Design 2-3

nl
O
Visual Design

se
 It represents the aesthetics of a Website and its
associated components.

U
 It utilizes the visual elements to deliver a clear message

tre
to the users and thus, improve their experience with the
system.

en
Usability
 It is about how easily a product can be used by specified
C
users to accomplish their goals.
h
 It is a combination of various factors including
ec

effectiveness, efficiency of use, engagement, error

tolerance, and ease of learning.
pt
rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 8 of 21

© Aptech Limited
 y
Elements of User Experience Design 3-3

nl
O
Information Architecture

se
 It focuses on organizing, structuring, and labelling
content in an effective and sustainable way, so that the

U
users can find the relevant information and complete
their tasks easily.

tre
Interaction Design

en
 It is a user-centric approach of designing an interactive
system focused around end-users- their goals,
C
experiences, what they need and how they expect the
h
system to work.
ec

User Research
 It focuses on understanding user needs, behaviors,
pt

expectations, and motivations through one-on-one

rA

interviews, research, surveys, user observation, and

other feedback methodologies.
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 9 of 21

© Aptech Limited
 y
Significance of User Experience

nl
O
 A good user experience helps the user to easily navigate
the site and understand how to use it.

se
 A useful, pleasurable, comprehensive, desirable, and

U
quick UX develops an interaction-rich experience that
drives the users back to the site.

tre
 Without an effective user experience, products such as

en
Websites, apps, or software are likely to fail.

C
h
ec
pt
rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 10 of 21

© Aptech Limited
 y
Principles of User Experience Design 1-8

nl
O
The key principles for creating engaging user experiences
are as follows:

se
U
Familiarity Clarity Recoverability

tre
en
Responsiveness
and Feedback C Simplicity Content Delivery
h
ec
pt
rA

Delight
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 11 of 21

© Aptech Limited
 y
Principles of User Experience Design 2-8

nl
O
Familiarity

se
 A user should be able to
recognize the UI components

U
and view the interaction as
similar to the ones they have

tre
interacted before.

en
C
h
Example to Demonstrate Familiarity Principle
ec
Image courtesy: http://www.8164.org/familiarity-
learnability/
pt
rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 12 of 21

© Aptech Limited
 y
Principles of User Experience Design 3-8

nl
O
Clarity

se
 It focuses on arranging various
elements on the Web page to

U
maximize the user’s chance of
using the site effectively.

tre
 A clear design provides answer

en
to three basic questions:
 What is it?

 What can I do here? C

h
 Why should I do it/how it is Example to Demonstrate Clarity Principle
ec

Image courtesy: http://conversionxl.com/5-principles-

useful for me? of-persuasive-web-design/
pt
rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 13 of 21

© Aptech Limited
 y
Principles of User Experience Design 4-8

nl
O
Recoverability

se
 It emphasizes that the user
actions should be

U
reversible.

tre
 When a user makes a
mistake, the design should

en
guide the users about how
to proceed further.
C
 A user should never be left
h
at a 'dead-end' in the
ec

website or app, where their Example to Demonstrate Recoverability

Principle
next step is not clear and
pt

Image courtesy: thetrainline.com

they have to figure out
rA

what to do next.
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 14 of 21

© Aptech Limited
 y
Principles of User Experience Design 5-8

nl
O
Responsiveness and Feedback

se
 The user interface design
should be quick and there

U
should be no lag time in
loading.

tre
 It should provide helpful

en
information to the user about
the task in hand.
 The user interface shouldC
h
provide appropriate and timely
ec

feedback to specify that the Example to Demonstrate

action is happening and Responsiveness and Feedback Principle
pt

Image courtesy: http://www.makemytrip.com/

whether it is successful or
rA

unsuccessful.
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 15 of 21

© Aptech Limited
 y
Principles of User Experience Design 6-8

nl
O
Simplicity

se
 The design should be simple to
understand and simple to use.

U
 It should include only the

tre
elements that are most important
for communication.

en
 It should also make common
tasks simple to do and provide
good shortcuts that are C
h
meaningfully related to longer
ec

procedures. Example to Demonstrate Simplicity

Principle
pt

Image Courtesy: http://www.apple.com/watch/

rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 16 of 21

© Aptech Limited
 y
Principles of User Experience Design 7-8

nl
O
Content Delivery

se
 The UI should provide a well-
timed and relevant content to the

U
users.

tre
 This helps to tangibly increase the
user’s satisfaction.

en
C
h
Example to Demonstrate “Content
ec
Delivery” Principle

Image Courtesy: https://www.amazon.com

pt
rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 17 of 21

© Aptech Limited
 y
Principles of User Experience Design 8-8

nl
O
Delight

se
 The UI design should be intuitive,
simple, and attractive to delight the

U
user and make an emotional
connect with them.

tre
 It should provide fantastic attention

en
to detail.
 The fonts, color palette, graphics,
C
and animation should be used
h
wisely to provide a better and more Example to Demonstrate “Delight”
ec

usable experience. Principle

Image Courtesy: https://yourkarma.com/
pt
rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 18 of 21

© Aptech Limited
 y
Best Practices in Use Experience Design

nl
O
Best practices for designing and creating amazing user
experiences are as follows:

se
U
Connect the goals Create emotive design

tre
Take inputs Take advantage of web typography
Design collaboratively Improve readability

Build personas
Create paper prototypes
Research UI patterns
h
Use tabs effectively
ec
en
Use simple and familiar language
C Anticipate errors
Keep Menus and Navigation Simple
Highlight real-time changes

Reduce clutter Test and Optimize Usability

pt
rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 19 of 21

© Aptech Limited
 y
Summary 1-2

nl
O
 User Experience is the overall experience and
satisfaction a user has when interacting with a product

se
such as a Website or computer application.

U
 User experience design is the process of understanding
the needs of a user and intuitively addressing those

tre
needs by improving the product’s (such as, Website or

en
computer application) information architecture,
interaction design, and visual design.

C
 UI and UX are often used interchangeably but these are
two separate entities with completely different
h
ec

meanings.
pt
rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 20 of 21

© Aptech Limited
 y
Summary 2-2

nl
O
 The critical elements of a good User Experience Design
are Visual design, Usability, Information architecture,

se
Interaction design, and User research.

U
 The key principles for creating engaging user
experiences include Familiarity, Clarity, Recoverability,

tre
Responsiveness and Feedback, Simplicity, Content

en
Delivery, and Delight.

C
h
ec
pt
rA
Fo

UI and UX for Responsive Web Design / Introduction to User Experience Design / 21 of 21

© Aptech Limited