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 :[email protected]

“UX Team 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 in a specified context of use.”
- ISO 9241-11
• User Experience:“UX covers all attitudinal and
behavioural aspects of user’s interaction with a product in a
particular context settings. It includes factors like usability,
desirability, usefulness and emotional engagement.”

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
change their behaviour to accommodate the product.”
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
don’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 Resources
Performance (Page load) Web Performance Tests https://developers.google.com/s
peed/pagespeed/
http://www.webpagetest.org/

Content In-Page Surveys, Legibility http://read-able.com/

Test
Web Site Accessibility W3C Web Accessibility, http://achecker.ca/checker/index.
php

http://www.checkmycolours.com
/

BAT Broken Link Checker http://validator.w3.org/checklink

Campaigns ( Email, Email and QR Analytic,

Newsletter, Multimedia (Scrolls, Hits, Heatmaps)
Promos) A/B, Eye tracking,
Intercept surveys

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
Design“:
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 audience’s emotional
response to a design or stimulus.
• First Impression Test Aka 5-sec Test
– Helps understand people’s first impressions of
your designs
• Preference Test: It is a basic version of A/B
Test.

34
 UX- Desirability Testing
• Emotion Testing: Evaluate 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: [email protected]

“Focus on Users, all else will follow”- Google

45