Kingdom of Saudi Arabia

Ministry of Higher Education

Al-Imam Muhammad Ibn Saud Islamic University
College of Computer and Information Sciences

Chapter 7

UX in Practice
UX: A Practical Perspective
UCD, and UX Tools & Techniques
UX

3
UX
UX Vs. Usability (Revisited)
• Usability:
Refers to “The extent to which a product can be used by
specified users to achieve specified goals with
effectiveness, efficiency and satisfaction”

• User Experience:
• “person's perceptions and responses resulting from the use
and/or anticipated use of a product, system or service.” ISO
Refers to “all attitudinal and behavioral aspects of user’s
interaction with a product in a particular context settings. It
includes factors like usability, desirability Usefulness and
Emotional engagement.”
User Centered Design
(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.

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
behavior 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.
UCD: Strategy and Planning

8
UCD: Strategy and Planning
(Cont.)

9
UCD: Strategy and Planning
(Cont.)

10
UCD: Strategy and Planning
(Cont.)
Expert review: Multiple experts analyze independently the test
product seeking to identify the majority of its usability problems.

Usability review:

11
UCD: Strategy and Planning
(Cont.)
First impression test:

• 5-seconds Test: helps assess a landing page. "would you like to view further or
exit?" and see how many users exit from the landing page.

• Picking Adjectives: involves asking users to describe the product in 4-5 words
or adjectives.

Web analytic: is the process of analyzing the behavior of visitors to a

website.

12
UCD: Design Process

13
UX Design Process (Cont.)

Understand users
14
 UX Design Process (Cont.)

• Understand users
by deconstructing
e.g., user personas
and user models.

• Personas are
fictional users who
might use your
product.

• Ensure that design

process is driven
based on data from
people who will
visit your website
versus the opinions
of stakeholders.
15
UX Design Process (Cont.)

16
UX Design Process (Cont.)

17
 UX Design Process (Cont.):
Functionalities and Features

epics: large bodies

of work that can be
broken down into a
number of smaller
tasks (called stories).

user stories: short

requirements or
requests written from
the perspective of an
end user.

18
UX Design Process (Cont.):
Functionalities and Features

19
 UX Design Process (Cont.):
Conceptual Model and Task Flow

Scenarios: Scenarios
are specific sequences
of actions and
interactions between
users and the system.
They help to
understand how a
system is used in
various situations.

20
UX Design Process (Cont.):
Layout, visual and interactive design

Iterative Design: Wireframing to Prototyping

• Build multiple prototypes (parallel design) and evaluate

them, without much expense.
• More iteration- More testing – More refined
prototypes
• Keep the parts of the design that work, and redesign the
21
Building Prototypes
• In increasing order of complexity:

1. Verbal Prototypes: textual description of choices and results.

2. Paper Prototypes:

a) Low-Fidelity: hand-drawn sketches.

b) High-Fidelity: more elaborate printouts.

c) Interactive Sketches: interactive composition of hand-drawn

sketches.

3. Working Prototypes: interactive, skeleton implementation.

4. Then, throw prototypes away and implement final design.

22
Building Prototypes
• Verbal Prototype
• Simple textual description of choices and results.

• Paper prototype:
• Paper prototypes simulate screen and dialogue elements on paper.

• Low-Fidelity Paper Prototypes

• Firsthand-drawn sketches (lo-fi), later perhaps more
elaborate printouts (hi-fi).
• Early usability feedback with throwaway designs:
maximum feedback for minimum effort!

23
Building Prototypes

24
Building Prototypes
Paper prototype of IICM on Air.

25
Building Prototypes
Paper prototype for a customer information terminal.

26
Building Prototypes
Paper prototype for a customer information terminal.

27
Building Prototypes
Paper prototype for a customer information terminal.

28
Building Prototypes
• High-Fidelity Paper Prototypes
• Elaborate screen designs created with drawing editors such as
Adobe Illustrator or Corel Draw.
• Printed out in color.
• The often look too much like a finished design, and not enough
like a prototype.
• Users tend to comment on the choice of fonts and colors, rather
than the flow through the application.

• Interactive Sketches
• Scan in hand-drawn interface sketches.
• Assemble interactive prototype with clickable elements (say with
Macromedia Director).
• Retains throwaway, casual look to encourage criticism and
discussion.

29
Building Prototypes
• An interactive sketch made in Shockwave. Screen designs sketches
are scanned and assembled into an interactive prototype with
Macromedia Director.

30
Prototyping Tools
• DENIM; An Informal Tool For Early-Stage Web Site and UI Design;

http://dub.washington.edu/denim/
• Axure; http://axure.com/

• Balsamiq Mockups; http://balsamiq.com/

• Microsoft Expression SketchFlow;

• http://www.microsoft.com/expression/products/

Sketchflow_Overview.aspx
• HotGloo http://hotgloo.com/

31
Prototype
Running through a DENIM prototype

32
Wireframe
• A wireframe of a Facebook Group page, modeled using Balsamiq
Mockups.

33
Storyboard
A storyboard of individual page wireframes modeled using DENIM.

34
Working Prototypes
• Working Prototypes
• Simple algorithms: ignore special cases.
• Fake data: similar data, images instead of video, etc.
• Wizard of Oz: human expert operating behind the scenes to
simulate interface responses.

• Dimensions of Working Prototypes

• Working prototypes cut down on either the number of features, or
the depth of functionality of features:
• Vertical Prototype: in-depth functionality for a few selected
features.
• Horizontal Prototype: full interface features, but no
underlying functionality.
• Scenario Prototype: only features and functionality along the
specific scenarios or paths through the interface which are to be
evaluated.
35
Working Prototypes

36
Building Prototypes
• Working prototype of IICM on Air.

37
UCD: Testing

38
UCD: Testing (Cont.)
• Why testing?
• User-centered analysis helps get more profitable
products to market.
• Better products.
• Cheaper to fix problems.
• Ease of use is a common requirement.

39
UCD: Testing (Cont.)
Cost of Change at different stages:

40
UCD: Testing (Cont.)
User Research Methods:
• UX Research Method
– Behavioral: is when you directly observe a person and their actions.
– Attitudinal: refers to asking people to self-report their opinions in
things
• 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
41
UCD: Testing (Cont.)

42
UCD: Testing (Cont.)
• User Experience (UX) and Usability Testing

43
UCD: Testing (Cont.)
User Experience (UX) and Usability Testing

44
UCD: Testing (Cont.):
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

45
UCD: Testing (Cont.):
Expert Review (Cont.)

• 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/schneidermanGoldenRules.html

• W3C Accessibility Review

• Others

46
Define IA – Card Sorting

• Definition: is a popular method for improving the organization of content on

websites and software.

Methodology:
• Sample Size: 10 Users.
• Tools: Index Cards, Audio Recorder, Video Recorder (optional), Markers.
• Test Time : 30-min to 2 hours per subject.
• Methodology: Inexpensive, but time taking

47
Card Sorting

48
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.

• Emotion Testing: Evaluate user’s emotional experience with a product. Based on

SAM (Self-Assessment Manikin) 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.

49
UX- Desirability Testing

50
UX- Desirability Testing
• A/B testing: is comparing two versions of a web page to see which one performs
better.
• Present different content to different variants (user groups), gather their reactions
and user behaviour and use the results to build product or marketing strategies in
the future.

51
Eye Tracking

•Goal: Test Visual Hierarchy, Scan ability, and attention.

• Lab: Eye Tracking Toolkit ( SMI, Tobi).

52
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.
• Blood Volume Pressure: Arousal, Excitement.
• Respiration: Valence or Arousal.

53
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.

54
Guidelines
• Still talking about guidance for how to achieve goals.

• These are more prescriptive (do’s & don’ts).

• Are guidelines enough? Lead to problems?

• Too specific, incomplete. Don’t generalize to all situations.

• But… Capture experience and best practices.

• Similar to design principles, except more prescriptive.

• Used mainly as the basis for evaluating systems.

• Provide a framework for heuristic evaluation

55
For Your References
Usability Heuristics principles for Design
(Nielsen 2001)
• Visibility of system status.
• Match between system and the real world.
• User control and freedom.
• Consistency and standards.
• Help users recognize, diagnose and recover from errors.
• Error prevention.
• Recognition rather than recall.
• Flexibility and efficiency of use.
• Aesthetic and minimalist design.
• Help and documentation.

•Nielsen’s site:
http://www.useit.com/papers/heuristic/heuristic_list.html

56
For Your References (Cont.)
Shneiderman’s Eight Golden Rules of Design:
1.Strive for consistency.
2.Cater to universal usability.
3.Offer informative feedback.
4.Design dialogs to yield closure.
5.Prevent errors.
6.Permit easy reversal of actions.
7.Support internal locus of control.
8.Reduce short-term memory load.

57
References and Reading
Materials

Paper Prototypes: Still Our Favorite; User Interface Engineering,

2000. http://www.uie.com/articles/paper_prototyping/

Matthew Klee; Five Paper Prototyping Tips; User Interface Engineering,

2000. http://www.uie.com/articles/prototyping_tips/

The Design of Everyday Things: Revised and Expanded Edition by Don

Norman, ISBN: 9780465050659

58