An Introduction to User Experience

(UX) Process
Processes, Tools and Techniques
Presentation by,
Khalil Laghari, PhD
Senior UX Advisor, MHA
Follow me at Twitter : https://twitter.com/Laghari_UX
For questions and queries, Contact me at :khalil.laghari@gmail.com
UX Tea advocates for the end user
1
 Outline
• Introduction
• User Centered Process (UCD)
– UX Strategy
– UX Design
– UX Testing
• UX Tools & Techniques
2
Introduction- User Experience
Technology-Centric User-Centric
Function
& Feature
Testing Usability
Quality of UX
Service
(QoS)
3
User Experience (UX)
Is it useful?
• Useful
Value
• Utility
Is it easy to use?
• Effectiveness
• Efficiency
Usability
• Satisfaction
Is it fun and engaging?
• Impression: Look &
Feel
Desirability • Preference
• Engagement
• Emotions
4
 Definitions
• Usability: The extent to which a product can be used by
specified users to achieve specified goals with effectiveness,
efficiency and satisfaction i a spe ified o te t of use.
- ISO 9241-11
• User Experience: UX o ers all attitudinal and
eha ioural aspe ts of user’s i tera tio ith a product in a
particular context settings. It includes factors like usability,
desira ilit , useful ess a d e otio al e gage e t.
5
 User Centred Process (UCD)
UCD is a process in which the needs, wants, and limitations of end
users of a product, or service are given extensive attention at each
stage of the product development. [1]
Strategy and
Planning
Summative
Design
Testing
Formative
Implementation
Testing
6
 UCD Principles
1. Focus on users, their goals, tasks, and
environments
– Optimize the product considering user goals, needs,
tasks in a specific context, rather than forcing the users to
ha ge their eha iour to a o odate the produ t.
2. Test early and often
– On-going UX testing process where users are involved
throughout design and development.
3. Iterative Design
– Product designed, modified and tested repeatedly.
7
UCD- Strategy & Planning
Strategy and
Planning
Summative
Design
Testing
Formative
Implementation
Testing
8
UCD- Strategy & Planning
Business
Requirements
Research
End-User
needs, and Requirement
goals Document
( Strategy and
Competitive Planning
Deliverable)
Benchmarking
Audit
Website
Performance
Review
9
 Strategy & Planning
Project Goals UX Techniques
User Needs, goals and requirements Interviews, Surveys, Contextual inquiry,
and Focus groups
Business Requirements and scope UX Strategy Survey, Stakeholder
Interviews,
Audit: Website UX performance review Expert Review, Usability Review, First
impression test, and web analytic
Audit: Competitive benchmarking Expert Review, Usability Review, First
( Internal and External) impression test, and web analytic
10
 UCD- Design
Strategy and
Planning
Validation Design
Testing
Formative
Implementation
Testing
11
 UX Design Process
•Persona •Epic
•User Models •User Stories
User Goals, Needs & Functionality &
Painpoints Features
Mental/Conceptual
Layout, visual &
Model and Task
Interaction design
flows
•Wire-framing
•Prototyping •Scenario
•Graphic Design •Use Cases
•User flows
1. Understand users by deconstructing user personas, user stories &
tasks flows
2. Ensure that design process is driven based on data from people
who will visit your website versus the opinions of stakeholders. 12
 UX Design Process
Personas are fictional archetypal users who might use your product,
User stories, scenarios, task analysis and user flow help map out
how they might use your product.
13
Iterative Design- Wireframing to
Prototyping
Paper Parallel Design
Visual Design
prototype Wireframes
Approved Interactive
Prototype Prototype
1. Build multiple prototypes (parallel design) and evaluate them,
without much expense
2. More iteration- More testing – More refined prototypes
- Keep the parts of the design that work, and redesign the parts that
do ’t.
14
 UCD- Testing
Strategy and
Planning
Validation Design
Testing
Formative
Implementation Testing
15
 Why Testing
• User-centered analysis helps get more profitable products to
market . – Smashing Magazine
• Better products
• Cheaper to fix problems
• Ease of use is a common requirement
16
 Design - Test
Change in Design $- Cost of Change
High Risk
Low Risk
Paper Wireframe Prototype Final Product
Prototype
17
Cost of Change at different stages
18
 A Landscape of User Research Methods
• UX Research Method
– Behavioural
– Attitudinal
• Design Phase
– Wireframe and Prototype
– Website
• Test Areas
– Visual design, UI, Multimedia, Navigation, and Interaction design
• Context:
– In-Lab, Remote, In-field
– Desktop, Tablet, Mobile
• Protocol
– Moderated or Unmoderated
• Data Type
– Qualitative or Quantitative or both
19
 Quan
Eye Tracking
SAM Emotion Assessment
A/B Testing
Online Cardsorting UX Survey
Web Analytic
Usability Evaluation
Generative User Needfinding Surveys Evaluative
Task Analysis
Stakeholder Interview Heuristic Review
Impression Test
Brainstorming Workshops Cognitive Walkthrough
Triading
Contextual Inquiry Usability Task Observation
Qual 20
 User Experience (UX) and Usability Testing
• Basic • Visual • Visual
Interaction Design • Interaction
Wireframe Design Prototype Website
• Interaction • Engagement
• Navigation Design • BAT
-Impression Test
-Preference Test
-Impression Test -A/B Testing
-Usability Analysis -Preference Test -Eye tracking
- Heuristic Review -Eye tracking -Usability Analysis
-Cognitive Walkthrough -Usability Analysis - Heuristic Review
-Card-sorting - Heuristic Review -Cognitive Walkthrough
-Tree Test -Cognitive Walkthrough -Web Analytic
-Web Surveys
-Performance
- Accessibility
21
22
UX Test Methods Visual & UI Design Navigation & Interaction Design
Organization
Heuristic Review
Cognitive
Walkthrough
Usability Testing
Eye tracking
Card Sorting
Tree Testing
First Impression
Test
Preference Test
A/B Test
First Click Test
Eye Tracking
Predictive Software
Surveys * 23
Yes May be
Web Tests
Performance (Page load) Web Performance Tests
Content In-Page Surveys, Legibility
Test
Web Site Accessibility W3C Web Accessibility,
BAT Broken Link Checker
Campaigns ( Email, Email and QR Analytic,
Newsletter, Multimedia (Scrolls, Hits, Heatmaps)
Promos) A/B, Eye tracking,
Intercept surveys
Resources
https://developers.google.com/s
peed/pagespeed/
http://www.webpagetest.org/
http://read-able.com/
http://achecker.ca/checker/index.
php
http://www.checkmycolours.com
/
http://validator.w3.org/checklink
24
 Usability Testing
• Discount Usability Engineering
– Expert Review, Cognitive Walkthough
• Usability Testing
– User testing
• Task Analysis, Observation, Think Aloud
25
 Expert Review
• Other names: Formal/Informal Heuristic Evaluation,
Usability Review, Benchmarking review
• Definition: Assessment of website, software and
mobile Apps based on usability rule of thumbs or
best practices
• Benefits: Fast, low cost, can be effective in some
applications
• Limitation: No actual user data, statistical validity is
very limited.
• Sample Size: 1-5 Evaluator
26
 Expert Review
• Checklists
– 10 Usability Heuristic of Jacob Nielson:
http://www.nngroup.com/articles/ten-usability-heuristics/
– Shneiderman's "Eight Golden Rules of Interface
Desig :
http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGol
denRules.html
– W3C Accessibility Review
– Others
27
 Cognitive Walk through
• Performed by evaluators in the early stages of
design
• 1-5 Evaluator
• Task oriented testing : At each step in a task
procedure, the evaluator(s) checks following four cognitive
factors. [2]
Goal
Locatability
Validation
Feedback Recognisability
28
 Usability Testing
• Resource Requirements – Lab Test
– Testing Devices: Desktop, Laptop, Tablet, Mobile
– Software: Morae, Audio-Video Recorder, Screen
Capture, Camera/Cam,
– Mobile: UX Record, TryMyUI
– Lab Space, Test Support Assistant
– Subject Recruitment + Money for Honorarium
• Sample size 5-50
– Data Refinement, Analysis and Reporting
29
 Usability Test
Modes: Task Analysis, Guerrilla usability, Think Aloud, Observation, Surveys
Process: See following Diagram
Note: Pilot test before running session with end-users
Start Pre-Test Prep Test Survey Task 1-n
Data Refine,
SUS, NP, Post
End Analyze & Task 1-n
Survey
Report
30
 Define IA – Card Sorting
• Definition: is a popular method for improving
the organization of content on websites and
software.
• Methodology:
– Sample Size: 10 Users (+/- 27% MoE), 30 U (+/-
17%), 93 (+/- 10%) [3]
– Tools: Index Cards, Audio Recorder, Video
Recorder (optional), Markers
– Test Time : 30-min to 2 hours per subject
– Methodology: Inexpensive, but time taking
– Open vs. Closed Card sort, Tree Test 31
 Define IA – Card Sorting
• Data Analysis
– Analyze qualitative information based on user
comments.
– Category Analysis, Item wise analysis, Cluster
Analysis
• Online Solutions: UserZoom and Optimal
Workshop.
• Others: UXSort
32
33
 UX- Desirability Testing
• A collection of research methods intended to
assess the target audie e’s e otio al
response to a design or stimulus.
• First Impression Test Aka 5-sec Test
– Helps u dersta d people’s first i pressio s of
your designs
• Preference Test: It is a basic version of A/B
Test.
34
 UX- Desirability Testing
• Emotion Testing: E aluate user’s emotional
experience with a product. Based on SAM
questionnaire.
• First Click Test: It examines what a test
participant would click on first on the interface
in order to complete their intended task.
– A participant who clicks down the right path on the first
click will complete their task successfully 87% of the time.
[4]
35
 UX- Desirability Testing
• A/B testing: is comparing two versions of a
web page to see which one performs better.
[vwo.com]
36
 Triading
• Process: Present three different concepts or
idea to participants, and ask them to identify
how two of them are different from the third
and why.
• By repeating this process across multiple
participants, researchers can see trends that
define audience segments or personas.
37
 Eye Tracking
• Goal: Test Visual Hierarchy, Scannability, And
attention
• Lab
– Eye Tracking Toolkit ( SMI, Tobi)
• Predictive Eye Tracking Analytic
38
 Physiological and Neurological UX
tools
• Track neuro-physiological
changes in order to detect a
particular emotional response.
• EEG : Brain Activity
• Electro-dermal Activity: Sweat, Excitement,
as well as attention, habituation, and
cognitive effort Me in EEG Lab
• Blood Volume Pressure: Arousal, Excitement
• Respiration: Valence or Arousal
• For detail, read [5]
– http://www.academia.edu/3489417/Neurophysiological_Expe
rimental_Facility_for_Quality_of_Experience_QoE_Assessment 39
 Data Analysis
• Once you have gathered your data, use it to:
– Evaluate the usability/UX of your website
– Recommend improvements
– Implement the recommendations
– Re-test the site to measure the effectiveness of
your changes.
40
• Quantitative Methods: Descriptive Statistics,
Inferential methods, and machine learning
• Tools: Excel, R, SPSS, Matlab
• Qualitative Methods: CCA Framework,
Grounded Theory
• Nvivo, R, Excel
41
 UCD- Recap
• Strategy and Planning
– Business Vision, goals, objectives, Image (feeling), Challenges and constraints
• Techniques: Survey, Stakeholder Interviews
– User/Audience analysis
• Techniques: Field studies, contextual inquiry
• Profiles (details, facts, figures)
– Audit
• Website Audit
• Competitive Analysis
• Design
– Personas/Characterizations (made up "person" with name, etc.)
– Conceptual/Mental model, metaphors, design concepts
– Task/Purpose analysis
• Scenario, Task List, Use cases, Task or workflows
– Information architecture analysis and Navigation design
• Content Organization
• Hierarchy, Web relationships, Card-sorting
– Paper prototypes, Wireframes
– Detailed design
– Mockups, Functional online prototypes
42
 Recap- UCD
• Testing and Evaluation (iterate back to Design)
– Heuristic evaluation
– Design walkthoughs ("cognitive walkthroughs")
– Usability testing - paper, low fidelity - high fidelity;
informal – formal
– Eye Tracking
• Implementation and Deployment
– Post Launch usability benchmarking studies
– Web Analytic
43
 References
1. https://en.wikipedia.org/wiki/User-centered_design
2. http://www.pages.drexel.edu/~zwz22/CognWalk.htm
3. http://www.measuringu.com/blog/card-sorting-ia.php
4. http://www.measuringu.com/blog/first-click.php
5. http://www.academia.edu/3489417/Neurophysiological_Experimental_Facility_f
or_Quality_of_Experience_QoE_Assessment
44
 Thank you for your time
Presentation by,
Khalil Laghari, PhD
Senior UX Advisor, MHA
Follow me at Twitter : https://twitter.com/Laghari_UX
For questions and queries, contact me at: khalil.laghari@gmail.com
Fo us o Users, all else ill follo - Google
45