UX Design Fundamental

1. User EXperience Design
Lanh Le - March 2015

2. Agenda
● What - UX Definition
● How - UX Measurement Methods
● When - UX Everyday
● Lean UX Process

3. What is
Usability / UI / UCD / UX

4. What is Usability?
Usability relates to how easily, efficiently and satisfactorily a product is
used by a person to achieve their goals within a specified context of use

5. What is UCD?
User Centered
Design
Found what she is
looking
Get what she
found
She feel happy
Let’s help her

6. What is User EXperience Design?
Coined a mid-1990’s by Don Norman, bridge the gap between Customer and Business.

7. What is UX?
Dr. Donald Norman Jakob Nielsen Steve Krug

8. What is UX?
by JAKOB NIELSEN and DON NORMAN
“User experience" encompasses all aspects of the end-user's interaction
with the company, its services, and its products”
A discipline that encompasses all interactions and events, physical and
digital, between users/customers and a product, service or organisation

9. What is UX?
UX everywhere around us

10. What is UX?
Interact
ProductUser

11. What is UX?

12. What is UX?
Can it be done?
User want or need?
Does it make
business sense?

13. Ideas
Prototyping
Measurement

14. Visual Design Interface Design
Icons
Fonts
Graphics
Art
HTML/JS/CSS
Optimization
Input
Output
Usability
Web Standard
Information
Architecture
Interview
skillPrototyping
User
Testing
Interaction
Design
Content
Strategy
Personas
Workflow/
Sitemap
Accessibility
SEO
Knowledge
Eye
tracking
Storyboard
User Research
UI

15. A UI without UX is like a painter slapping paint onto
canvas without thought; while UX without UI is like
the frame of a sculpture with no paper mache on it...
Source: Internet
Good Product: Good UI UX+

16. Good UX:
■ Solve User’s Problem
■ Save User’s Time
■ Save User’s Effort
I am your user
I am a king

17. Checkpoints
● Clear call for action
● There is a search bar
● Search is available on every page
● Consistency
● Personalized features for homepage
● Registering provides value to users
● Logged in user's name is displayed on the site
● Major changes to the site are announced on the homepage.
● Navigation is consistent on every page.
● Pages don't refresh automatically
● Important commands are displayed as buttons, not links
● Alt attributes are provided for non-text elements
● Content is readable without a style sheet
● There is a site description in the window title
● Links, buttons and checkboxes are easily clickable
● Accessible navigation with a keyboard
● Related information is grouped together clearly.
Accessibility
Content
Usability
● Important content is displayed first.
● Links are descriptive. There are no "click here" links.
● Company location and contact information
● There is a site description in the window title
● Site's URL is memorable.
● Content is written with common language
● First impression (homepage)
● Images and videos are relevant and meaningful
● Alt attributes are provided for non-text elements
Images

19. UX without User Research is not UX

20. UX Measurement Methods
Page views
Most view pages
User flow
Browsers/OS
Test Methods
Focus Group
A/B Testing
Click test
User Flow
User Testing
Survey
Online Feedback
Demographics
Age
Gender
Geography
Online Tracking
tools
Mouse Flow
HeapAnalytics
Optimizely
Exit monitor
Crazy Egg
Labs
Design Phase
Production
Questionnaire
Location

21. UX Measurement Methods
■ Usefulness: is the product useful, with a clear purpose?
■ Usability: is the product easy to use—navigating within and interacting with—and requiring little
need for guidance?
■ Learnability: is the product simple to master quickly with minimal instruction
required?
■ Aesthetics: is the visual appearance of the product and its design appealing to
the user?
■ Emotions: are the emotional feelings evoked in response to the product and the
brand positive, and do they have a lasting impact on the user and their willingness
to use the product?
There are several factors that affect the overall experience a user has with a product:
by JAKOB NIELSEN on January 4, 2012

22. UX Measurement Methods
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation
10 Usability Heuristics for UI Design
By JAKOB NIELSEN on January 1. 1995

23. 1. What is the website do (your product/services)? - Clear MESSAGE of the site
2. What is the main task we want to user do? Where to start? - Clear CALL TO ACTION
3. Is your image present the meaning of your product? - Use MEANING & EMOTIONAL IMAGES
4. What is the featured product? - Show featured product (if any) or special offer
5. What is our main product categories? - Provide product categories
5 Evaluate Homepage Guidelines
WHO IS OUR AUDIENCE?
Define PERSONAS - primary user and secondary user
Buy Our ServicesEncourage User Explore
The Site
Satisfy (Users)
Get Revenue
(Business)

24. Clear Message
Meaning Image
Emotional Image
Call To Action
Main categories

25. Clear Call to Action
Clear Message
Meaning Image
Special offer

26. Clear Message
Meaning Image
Emotional Image
Main categories
Call To Action

27. 1. Involving your user any time
2. Test as much as you can
3. Analyst and Learn from the result
4. Fix fast and deliver fast.
Advices

28. When should we do User Testing?
Every phase of design
- Before Design
- Design In progress
- After Design

29. Steve Krug
“Testing One better than Nothing”

30. Thank you!