Notes 1

Official (Closed) - Non Sensitive
SLIDESMANIA.COM
UX Common Test
Revision
WEEK 8
DESIGNING USER EXPERIENCE 2023 | School of ICT

Common Test
Revision
03
2
SLIDESMANIA.COM
CT Format
q Section A – 10 MCQs
q Section B – Short-Answered Questions
q Section C – Case Study
q To bring along:
○ Pencil + Pen
○ Ruler
○ Eraser
3
SLIDESMANIA.COM
Section A Example
4
SLIDESMANIA.COM
Section B Example
(short excerpt)
5
SLIDESMANIA.COM
Section C Example
(short excerpt)
6
SLIDESMANIA.COM
Important
Topics
The following slides contain important topics that you will be tested on during the Common Test.
However, do note that questions are not only limited to what is being brought up within this deck of
slides. You should familiarise yourselves with ALL learning materials learnt over the past weeks.
SLIDESMANIA.COM
User Experience (UX)
● User experience focuses on ● UX best practices promote

having a deep understanding improving the quality of the
of users, what they need, what user’s interaction with and
they value, their abilities, and perceptions of your product and
also their limitations any related services
8
SLIDESMANIA.COM
UI vs. UX roles
User Experience (UX) UI Developer / Designer Application Developer

Designer • Design • Back-End / Server-side
• Research Development
• HTML/CSS/JS
• JS/PHP/C#/Ruby /
• Design • Testing PYTHON etc.
• Testing • Testing
HUMAN Focused TECHNOLOGY Focused

SLIDESMANIA.COM
Different roles
Image Source: crayondata (Accessed April 2022)

SLIDESMANIA.COM
Framework for OBVIOUS Design
Know What to Know What Makes Know the Best

Build It Great Ways to
Implement It
11
SLIDESMANIA.COM
Framework for
OBVIOUS Design
q Purpose of application
q Needs & desires of people using it
q Product’s scope - What to build and what NOT to build
q App that serves a good job of fulfilling the need of
Know What to
users will be desirable
Build
12
SLIDESMANIA.COM
Framework for
OBVIOUS Design
q Example: Drag-and-drop interactions cannot

make a web application great. Why?
q Badly designed application tells you at every
opportunity just how bad it is.
Know What
q How about for Good design?
Makes It Great
13
SLIDESMANIA.COM
Framework for
OBVIOUS Design
q Best way to do something usually changes over time

q Technology ( jQuery, CSS3 and HTML5 etc) pushes
interaction limits
q Interaction element
Know the Best
Ways to Implement q Enables usability
It
q Creates x-factor
14
SLIDESMANIA.COM
What is a User Persona?

q A fictional representative of your ideal
customer or user of your product
q Based on facts, hard data, and user

research
q To design based on the needs,

motivations, and observed behavior
Source: DUX Class of Oct 2021

patterns of your core target audience
SLIDESMANIA.COM
UXD Lifecycle
UNDERSTAND ANALYSE
q Requirement Gathering q Personas
q User Needs Analysis q User Journeys
q Content Audit
q Competitive Analysis
q Card Sorting
q Contextual Enquiry q Sitemap
q Focus Groups UNDERSTAND ANALYSE q Information Architecture
VALIDATE DESIGN
q User Flows
q Rapid Prototyping
q Wireframes
q Usability Testing q Creative & Visual Design
q Analytics q Interaction Design
VALIDATE DESIGN
Image Source: National University Singapore <Digital User Experience Design>

SLIDESMANIA.COM
The 5 Planes
Builds from Bottom to Top
q LOWEST PLANE – only concerned about how
our product will fit into our strategy (while
meeting users’ needs)
q HIGHEST PLANE – only concerned about the
detailed appearance of the product
q Each plane is dependent on the plane below
it; ripple effect
Image Source: The Elements of User Experience by Jesse James Garrett

SLIDESMANIA.COM
The 5 Planes
Series of Web pages, made up of images and text. Examples: clickable
images, illustrations, photographs of products and logo
Placement of buttons, controls, photos and blocks of text in the most

optimized way for maximum effect and efficiency
Defines how users get to a certain page and where they could go when
they are finished. To decide on the Information Architecture
Defines the way in which the various features and functions of the site fit
together
Not only about what people running the site wants, but what users want to
get out of the site as well
Image Source: The Elements of User Experience by Jesse James Garrett

SLIDESMANIA.COM
SLIDESMANIA.COM
How We Use
Digital Products
20
SLIDESMANIA.COM
FACT OF LIFE #1
We don’t read pages
We SCAN them
SLIDESMANIA.COM
FACT OF LIFE #2
We don’t make optimal choices.
We SATISFICE.
SLIDESMANIA.COM
FACT OF LIFE #3
We don’t figure out how things work
We MUDDLE
THROUGH
SLIDESMANIA.COM
The
Design Brief
q As a UX Designer, you need to understand the Design Brief.
q Ask questions and explore the Design Brief to define the problem.
SLIDESMANIA.COM
The Design Brief

What are included in the Design Brief?
Problem Description Project Scope User Description
Project Goals & Outcomes Background Information Success Metrics
Project Approach - Timing,

Resources, Budget
SLIDESMANIA.COM
Meet the team!

Account Manager aka Suits UX Designer
Deal with clients Does wireframes, interactions, research
about the users & audience
Creative Leads UX Researcher

Give Creative Direction Heavy research into metrics, create new
methods of interactions and research
about users
Graphic / Visual Designer UX Developer

Does Photoshop/Illustrator/graphic tools Plan, design, and develop using code
and make our design better and visual design tools
Image Source: freepik (Accessed: May 2022)

The Design Thinking Process
Image Source: UX Planet (Accessed: Oct 2022)

SLIDESMANIA.COM
Context Clarifier
A tool to help you:
q unpack the project’s context

q uncover the untold truths about the project
q identify the potential problems early
q identify who are the key people to be involved in the project
28
SLIDESMANIA.COM
Context Clarifier Context + Objectives Constraints /

Q1 … Challenges
Steps to run a Context Clarifier: Q1 …
Q2 …
Q2 …
1. Divide a flipchart paper into 4 Q3 …
Q3 …
quadrants, write the topics
2. Starting with the first quadrant, ask
each person in the room to write their
questions on Post-its
Scope of work / People Vision of Success
3. Stick the Post-its on the relevant involved
Q1 …
Q1 …
quadrant Q2 …
Q2 …
4. When all is completed, read out the Q3 …
Q3 …
Post-its and discuss with the group
29
SLIDESMANIA.COM
Context Clarifier
Context + Objectives Constraints / Challenges
Uncover the background to Identify the Constraints /
Each section of the Context Clarifier your project from the Challenges for the project, that
perspective of the Product
has a purpose. Owner, Stakeholders and
may include Budgets,
Timeline and things you can or
other Team Members. can’t do.
Scope of work / People

involved
Who are the people you’ll be
working with? Vision of Success
Who are the decision makers? Identify the measure of
Who are potential blockers / success - for the Product
advocates? Owner, Stakeholders,
Leaders?
How would the team work
together?
Identify communication
channel
30
SLIDESMANIA.COM
Understanding the Users

Methods
01 02 03 04 05
Personas Empathy Contextual Focus Analytics*
Maps Enquiry* Groups*
SLIDESMANIA.COM
System Usability Scale (SUS)
A survey measuring user’s perception of usability, a quantitative

measure.
10 questions assessing 3 elements: Effectiveness, Efficiency,

Satisfaction
Use at the beginning and end of a project. Work well with a low
number of users.
https://www.usability.gov/how-to-and-tools/methods/system-
usability-scale.html
Official (Closed) - Non Senssitivee
SLIDES
SMANIA..COM
What is Rapid Prototyping?
3 1 Rapid prototyping is simply a three steps

cycle process with as much repetition
as we need.
REFINE & ITERATE PROTOTYPE
To develop a successful product or an app,

PROTOTYPING we first create a prototype and keep
improving on it till the time we get what we
expect.
An idea has no value unless it can be

communicated and the value of a prototype
is the vision of what the final outcome
would be.
2 Eventually, the goal of effective rapid

prototyping is to convince oneself and
others of an idea.
REVIEW
Official (Closed) - Non Senssitivee
SLIDES
SMANIA..COM
STEP 1 - PROTOTYPE STEP 2 - REVIEW STEP 3 –

• Gather requirements • Share prototypes with client & REFINE & ITERATE
• Wireframes / Mockups stakeholders
• Consider UX standards & best • Refinement of key areas
• Discuss expectations • Iterate prototyping process
practices • Gather feedback • Whole process will require
multiple iterations until prototype
is finalized.
SLIDESMANIA.COM
SLIDESMANIA.COM
Focuses on understanding user behaviors,

needs, and motivations through
observation techniques, task analysis and
other feedback methodologies.
Image Source: VectorStock (Accessed: May 2022)

SLIDESMANIA.COM
What is User RESEARCH?

q Process of understanding the impact of design on an audience
q Type of user research you can or should perform will depend on the type of site,
system or app you are developing, your timeline, and your environment
SLIDESMANIA.COM
Challenges of User Research
Often seen as Difficulty in Difficulty in Not enough

‘unglamorous’ researching for visualising time allowed
by designers something that research
is totally novel findings
SLIDESMANIA.COM
Why is User Research important?
A research makes a
Helps us understand
design better and our
people’s lives in a
goal is to create
better way to
products that people
transform their needs
want to use
into products
SLIDESMANIA.COM
Research Methods
Quantitative Research Qualitative Research

gives you answers on how often, gives a deep understanding of
how many, how much, how long – how people perceive their world.
to measure / validate assumptions.
SLIDESMANIA.COM
Research Methods: Quantitative
q PROS
objectives, results can be
Measurable
analyzed quickly using Excel
Numerical, / statistical software.
statistical,
mathematical Finding can be
presented in
numbers, q CONS
graphs,
infographics hard to uncover the “why”.
SLIDESMANIA.COM
Research Methods: Qualitative

q Qualitative Research
q A measure of quality – people’s thoughts, feelings, ideas,
perceptions.
q Gives you the how and the why.
q Interactive & subjective.
q Can include photos, drawings, sketches, video/sound
recordings of what is said or done.
q Can gain great insights from smaller sample sizes.
Image Source: UX Collective (Accessed: May 2022)

SLIDESMANIA.COM
Framing your Questions

Be clear, simple, Ask one question Use open-ended
neutral. at a time. questions.
Create follow-up
Build in probing questions to help Avoid leading
questions (Tell me the user elaborate questions.
more about..) on a thought.
Avoid blaming
questions.
SLIDESMANIA.COM
Why Design Prototypes?
44
Image Source: Justinmind (Accessed: May 2022)
SLIDESMANIA.COM
Low-Fidelity
Prototypes
q Screen layouts
q Simple element outlines
q Sizing, spacing and positioning of
elements
q Basic clickability and navigation
between screens

SLIDESMANIA.COM
High-Fidelity
Prototypes
q Interaction
q Advanced UI design
q Real content
q Data visualization

SLIDESMANIA.COM
What is
Affinity
Mapping?
A method to gain a complete picture of the
research process.
It will reveal trends, themes, and areas of

opportunity for discovery and improvement.
Image Source: conceptboard (Accessed: May 2022)

SLIDESMANIA.COM
3 Major Steps to Affinity Mapping:
Write down Place the sticky Refine the groups

individual notes on a wall, and label them.
observations on a grouping similar
sticky note. items together.
Image Source: conceptboard (Accessed: May 2022)

SLIDESMANIA.COM
Connected Devices
Consider the hours we spend with devices
every day:
q interacting with our smartphones

q working on our laptops
q engaging with our tablets
q watching shows on television
q playing with our video game consoles
q tracking steps on our fitness
wristbands
SLIDESMANIA.COM
Device Diversity Is Human Diversity
Common ways
people hold and
touch their mobile
phone
Image Source: https://www.uxmatters.com/ (Accessed: May 2022)

SLIDESMANIA.COM
“People hold their

Summary phone in multiple ways
that change all the
time. They don’t have
just a single favorite
way, but frequently
shift their grip.”

SLIDESMANIA.COM
People Touch the Center of the Screen
Chart showing
touch accuracy for
specific parts of
the screen

SLIDESMANIA.COM
People Touch the Center of the Screen
Positions where people

prefer to tap

SLIDESMANIA.COM
People Look at the Center of the Screen
Touch-friendly
information-design
framework

SLIDESMANIA.COM
What is Usability Testing?
Usability testing is performed to Users are asked to perform a Your role is to observe and
evaluate how well a website, an range of tasks or scenarios with record the process.
app, or a prototype works. the same product or prototype.
They share their thoughts about
the experience.
55
SLIDESMANIA.COM
What would you evaluate?

q Time taken to complete a task – is it reasonable?
q Different approaches to completing the task

q Whether the user completes the task (and how easily) or gives up, or
does something else...
q Their reactions – frustrations, confusion, delight, surprise

q The user's opinions and thoughts on what works well, what needs
changing or improving
56
SLIDESMANIA.COM
The purpose of Usability Testing
To show you how usable or

understandable your prototype Testing validates your designs.
is at this early stage.
After repeated testing, you can

It reduces the risk of releasing
continue to iterate and refine
a product that is unusable or
your designs to deliver a great
unsound.
user experience.
57
SLIDESMANIA.COM
I our benm es
SLIDESMANIA.COM
7 Steps to Usability Testing
Image Source: ProductPlan (Accessed: Jun 2022)

Image Source: https://uxstudioteam.com/ (Accessed: Jun 2022)
SLIDESMANIA.COM
Why is testing important?
50% 60-80%
of product features are of development effort is
not used rework
200X cost to change code vs

prototypes (changing things in code is harder)
Official (Closed) - Non Sensiti ve
SLIDESMANIA.COM
‘Discou nted’ usability testing

Traditional Testing ‘Discounted’ Testing
No. of Users per Test Usually 8 or more to justify setup cost 3 to 5
Recruiting Effort Select carefully to match target audience Grab some people. Almost anybody who uses the Web will do
Testing Venue A usability lab, with an observation room and a one-way mirror Any office or conference room
Who does the Testing An experienced usability professional Any reasonably patient human being
Advance Planning Tests have to be scheduled weeks in advance to reserve a usability lab and Tests can be done almost any time, with little advance
allow time for recruiting scheduling
Preparation Draft, discuss, and revise a test protocol Decide what you’re going to show
What / When do you Test? Unless you have a huge budget, put all your eggs in one basket, and test Run small tests continually throughout the development proces
once when the site is nearly complete
Cost $5,000 to $15,000 (or more) $300 (a $50 to $100 stipend for each user) or less
What Happens Afterwards A 20-page written report appears a week later, then the development team The development team (and interested stakeholders) debrief
meets to decide what changes to make over lunch the same day
SLIDESMANIA.COM
How many users should you test?
3 USERS 4 USERS
Catches 65%of the Catches 75%of the
problems problems
5 USERS Four 5 person studies is

Catches 85%of the
BETTER than one 20
problems person study
Source: http://blog.invisionapp.com/ux-usability-research-testing/
SLIDESMANIA.COM
Different Types of Test

QA
(Quality Assurance) Playtesting Usability Testing
Testing
Nothing to do with enjoyment of the game Include real people who play the game and A kind of user test that is designed to
/ app and is all about finding “bugs” observation of their actions in order to find determine how convenient it is to
(errors in the program code). out how much their experience corresponds interact with the app / game and all of
to what the developer had intended its systems (interface, controls etc.)
User Acceptance Testing

A/B Testing
(UAT)
Actual software users test the software to make Also known as Split Testing) is an optimisation technique that
sure it can handle required tasks in real-world involves sending half your users to one version of a page, and
scenarios, according to specifications. UAT is the other half to another, and watching the analytics to see
one of the final and critical software project which one is more effective in getting them to do what you want
procedures that must occur before newly them to do (for example, sign up for a user account)
developed software is rolled out to the market.
- 64 -
References
q Gavin Allanwood & Peter Beare. User experience design: creating designs users really love. London: Fairchild Books, c2014.
q Jesmond Allen & James Chudle. Smashing UX design: foundations for designing online user experiences. Chichester, West Sussex:
Wiley, 2012.
q Jesse James Garrett. The elements of user experience: user-centered design for the web and beyond. Berkeley, CA: New Riders,
c2011.
q Steve Krug. Don't make me think, revisited: a common sense approach to web usability. Berkeley, CA: New Riders, c2014.
q Robert Hoekman, Jr. Designing the obvious: a common sense approach to web and mobile application design. Berkeley, CA: New
Riders, c2011.
q Richard Caddick & Steve Cable. Communicating the user experience: a practical guide for creating useful UX documentation.
Chichester, West Sussex: Wiley, 2011.
q Levin Michal. Designing multi-device experiences: an ecosystem approach to user experiences across devices. Sebastopol, CA:
O'Reilly Media, 2014.
q Giles Colborne. Simple and usable web, mobile, and interaction design. Berkeley, CA: New Riders ; c2011.
q https://www.nngroup.com/articles/ux-design-portfolios/
q https://xtensio.com/how-to-create-a-persona/
q https://careerfoundry.com/en/blog/ux-design/how-to-define-a-user-persona/
q https://blog.hubspot.com/service/affinity-diagram
64

Notes 1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Notes 1

Uploaded by

Copyright:

Available Formats

Official (Closed) - Non Sensitive

DESIGNING USER EXPERIENCE 2023 | School of ICT

User Experience (UX)

● User experience focuses on ● UX best practices promote

User Experience (UX) UI Developer / Designer Application Developer

HUMAN Focused TECHNOLOGY Focused

Image Source: crayondata (Accessed April 2022)

Framework for OBVIOUS Design

Know What to Know What Makes Know the Best

q Example: Drag-and-drop interactions cannot

q Best way to do something usually changes over time

What is a User Persona?

q Based on facts, hard data, and user

q To design based on the needs,

Source: DUX Class of Oct 2021

Image Source: National University Singapore <Digital User Experience Design>

Image Source: The Elements of User Experience by Jesse James Garrett

Placement of buttons, controls, photos and blocks of text in the most

Image Source: The Elements of User Experience by Jesse James Garrett

q As a UX Designer, you need to understand the Design Brief.

The Design Brief

Problem Description Project Scope User Description

Project Goals & Outcomes Background Information Success Metrics

Project Approach - Timing,

Meet the team!

Creative Leads UX Researcher

Graphic / Visual Designer UX Developer

Image Source: freepik (Accessed: May 2022)

Image Source: UX Planet (Accessed: Oct 2022)

A tool to help you:

q unpack the project’s context

Context Clarifier Context + Objectives Constraints /

Scope of work / People

Understanding the Users

System Usability Scale (SUS)

A survey measuring user’s perception of usability, a quantitative

10 questions assessing 3 elements: Effectiveness, Efficiency,

What is Rapid Prototyping?

3 1 Rapid prototyping is simply a three steps

To develop a successful product or an app,

An idea has no value unless it can be

2 Eventually, the goal of effective rapid

STEP 1 - PROTOTYPE STEP 2 - REVIEW STEP 3 –

Focuses on understanding user behaviors,

Image Source: VectorStock (Accessed: May 2022)

What is User RESEARCH?

Challenges of User Research

Often seen as Difficulty in Difficulty in Not enough

Why is User Research important?

Quantitative Research Qualitative Research

Research Methods: Quantitative

Research Methods: Qualitative

recordings of what is said or done.

q Can gain great insights from smaller sample sizes.

Image Source: UX Collective (Accessed: May 2022)

Framing your Questions

Why Design Prototypes?

Image Source: Justinmind (Accessed: May 2022)

Image Source: Justinmind (Accessed: May 2022)

It will reveal trends, themes, and areas of

Image Source: conceptboard (Accessed: May 2022)

3 Major Steps to Affinity Mapping: