Contenu connexe Similaire à UX Basics (20) UX Basics1. 1© Creative IT, Inc. All rights reserved.© Creative IT, Inc. All rights reserved.
UX Basics
Kabir Malkani
October 2019
2. 2© Creative IT, Inc. All rights reserved.
Interbrand – Best
Global Brands 2019
Across all sectors
3. 3© Creative IT, Inc. All rights reserved.
Interbrand – Best Global Brands 2019
Technology and Business Services
4. 4© Creative IT, Inc. All rights reserved.
Spot the difference!
Designing the product Designing the experience
5. 5© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
6. 6© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Utility – It meets my needs
7. 7© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Usability – I am able to use the product easily
8. 8© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Desirability – I like the way the product looks and feels
9. 9© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Brand Experience – My overall feeling about the brand/product is good!
A positive UX leads to advocacy
10. 10© Creative IT, Inc. All rights reserved.
Relationship between UI, Usability and UX
13. 13© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#1 Provide context
Ensure people are contextually aware of
where they are within their journey.
Think ‘breadcrumbs’.
15. 15© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#2 Be human
Eliminate confusion. Think human
interaction.
17. 17© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#3 Make it discoverable
Score “delight” points by being intuitive
19. 19© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#4 Make it easy
Familiarize yourself with common
widgets, patterns, metaphors and
gestures.
20. 20© Creative IT, Inc. All rights reserved.
WTF!?
Fundamental Design
Principles
21. 21© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#5 Keep it simple!
Avoid clutter and confusion. Intuitiveness
leads to discovery.
23. 23© Creative IT, Inc. All rights reserved.
UI UXUI can influence UX…
Layout
Visual Design
Branding
Colors
Typography
Interaction
Information
Wireframes / Prototypes
User Research
Scenarios
…but good UI does not necessarily mean good UX
24. 24© Creative IT, Inc. All rights reserved.
Surface
Visual Design
Skeleton
Interface Design
Navigation Design
Information Design
Structure
Interaction Design
Information Architecture
Scope
Functional Specs
Content Requirements
Strategy
User Needs
Site Objectives
Jesse James Garrett’s Layers of User Experience Model
The sum of a person’s
emotions and behaviors
when interacting with a
product, system or service
27. 27© Creative IT, Inc. All rights reserved.
The UX Process
Step #1 Product Definition
1. Stakeholder Interviews
2. Create Value Proposition
3. Concept Sketching / Rough Mockup
4. Project Kickoff Meeting / Metrics
28. 28© Creative IT, Inc. All rights reserved.
The UX Process
Step #1 Product Definition >
Stakeholder Interviews
29. 29© Creative IT, Inc. All rights reserved.
The UX Process
Step #2 Product Research
1. User Needs / Individual In-depth Interviews (IDI)
2. Competitive Research
30. 30© Creative IT, Inc. All rights reserved.
The UX Process
Step #2 Product Research >
User Interviews
Topics covered:
1. Background (such as ethnographic data)
2. The use of technology in general
3. The use of the product
4. The user’s main objectives and motivations
5. The user’s pain points
Hint: Include a mix of qualitative and
quantitative questions
31. 31© Creative IT, Inc. All rights reserved.
The UX Process
Step #3 Analysis
1. Create Hypothetical Personas
2. Create Experience Maps / Customer Journey
32. 32© Creative IT, Inc. All rights reserved.
The UX Process
Step #3 Analysis > Personas
33. 33© Creative IT, Inc. All rights reserved.
UX Process
Step #4 Design
1. Sketching
2. Wireframing
3. Prototyping
4. Design Specifications
34. 34© Creative IT, Inc. All rights reserved.
Sketching
Wireframing
Prototyping
The UX Process
Step #2 Product Research >
Sketching, Wireframing,
Prototyping
35. 35© Creative IT, Inc. All rights reserved.
UX Process
Step #5 Validation
1. Internal Checks
2. User Testing Sessions
3. Metrics Analysis
4. User Feedback (Post Launch)
36. 36© Creative IT, Inc. All rights reserved.
User Testing
Step #5 Validation Methods
Usability Testing
a. Moderated
b. Unmoderated (URUT)
2. Focus Groups 3. Beta Testing 4. A/B Testing 5. Surveys
37. 37© Creative IT, Inc. All rights reserved.
Best Practices
• Keep physical constraints in mind
• Put yourself in the place of a “visitor”. Focus on user goals
• Be consistent with colors and typography and actions
• Familiarize yourself with gestures and widgets
• Pay attention to feedback (from everyone) and strive to constantly
improve your product.
• Reduce loading time
• Provide sensory feedback for completed actions
• Use feedback from users to constantly improve your product
• Instill a “Wow” factor or an emotional connect with the users
39. 39© Creative IT, Inc. All rights reserved.
Killing two birds
with one stone
does not always
give desirable
results
40. 40© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy
41. 41© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy
42. 42© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy
43. 43© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy
47. 47© Creative IT, Inc. All rights reserved.
Provide easy
access to the most
important things!
48. 48© Creative IT, Inc. All rights reserved.
Provide easy
access to the most
important things!
49. 49© Creative IT, Inc. All rights reserved.
Don’t show more
than the user
desires to see.
50. 50© Creative IT, Inc. All rights reserved.
Don’t show more
than the user
desires to see.
51. 51© Creative IT, Inc. All rights reserved.
Think of social,
cultural and
linguistic
symbolism
54. 54© Creative IT, Inc. All rights reserved.
“Design is not just what it
looks like and feels like.
Design is how it works.”
Steve Jobs
“A user interface is like a joke.
If you have to explain it, it’s
not that good”.
Martin Leblanc
“Any product that needs a
manual to work is broken.”
Elon Musk
Thank you!