Wire framing and Prototyping

Module 4

116U01E734
User Experience Design

July-Dec 2024
Module 4: Wire framming & Prototyping 1
 Wire framing & Prototyping
• Visual design principles, Interaction design,
Information design and data visualization,
Information architecture
• Wire framing and storyboards, Digital Designs,
Elements and Widgets, Screen design and
layout, prototyping tools.
• Usability testing – types and process.

Module 4: Wire framming & Prototyping 2

 Visual Design Principles
• Size and Scale:
• Based on the importance ; use the size of objects or vice-a –
versa
• Larger the size more important is the object
• Size and scale aid in balancing out elements based on their
relevance and importance.

• Hierarchy
• An optimal arrangement of screen elements, in such a way
that they appear to be balanced, organized, functional, and
aesthetically pleasing to the human eye.

Module 4: Wire framming & Prototyping 3

 Visual Design Principles
• Emphasis
• Scale – By rescaling elements to make them appear larger and
bigger as more the size, the better it grabs the attention.
• Positioning – Placement of the element also comes under
putting emphasis and can be centered aligned, or peripheral
• Highlighting using color, patterns, or texture
• Use of font weights such as bold, semi-bold, or even extra
bold.
• Underlining the information
• Putting pieces of information in CAPITAL LETTERS or
sometimes under “inverted commas”.
• Using lines and arrows to grab attention

Module 4: Wire framming & Prototyping 4

 Visual Design Principles
• Proportion
• Larger the size; important is the feature
• Based on the values , objects size, colour share will be decided

• Negative Space
• Cluttered interface reduce the ability to scan and read
information effectively, whereas a dense interface has
information evenly spread with the help of proper spacing
between multiple screen elements.
• Without the proper use of white or negative spacing, it makes
the content looks flooded, unorganized, and overwhelming to
the user

Module 4: Wire framming & Prototyping 5

 Visual Design Principles
• Colour and Contrast
• Used to make elements stand out
• makes the design pop and grabs the user’s attention on a
specific element on the screen
• Always put important information in bright colors (as per the
theme and color scheme) to make the design or information
pop, to easily capture user attention
• warm colors will stand out against dark backgrounds, making
them appear closer than cool colors on a dark background.
• Cool colors stand out over a light background, making them
appear closer than warm colors on a light background.
• Use these colors, in accordance with your color scheme.
Module 4: Wire framming & Prototyping 6
 Visual Design Principles
• Repetition (Consistency)
• Repetition in design refers to employing the same elements
repeatedly throughout a piece of work, including colors,
patterns, typefaces, images, textures, and more
• Creates better consistency and ease for the user to know
what to do and where to find something
• Consistent logos, icons, and colors throughout the product
also creates brand identity
• Repetitive information also stays long in user memory, using a
repetitive app over a long period of time makes the muscle
memory strong and thus users are very attached to the
app/website.

Module 4: Wire framming & Prototyping 7

 Visual Design Principles
• Balance and Alignment
• The symmetric distribution of elements in designs.
• Alignment helps create a structure in design and information
• Having balance and hierarchy in all types of screen elements
such as images, text, and icons.
• With the help of alignment, users know where to look, where
to read, and how to interact.
• Balancing out the textual content is very important, this can
be done with the help of font weight, increasing heading font
size, bold or underlining important details, and adding color to
the text.

Module 4: Wire framming & Prototyping 8

 Visual Design Principles
• Movement
• Movement refers to how a user or a reader scans
through the content. How do they move from one
point to another?
• The importance of movement gives a traceable
path of how users have scanned through the app while
approaching a goal.
• It helps users to move forward as well as come back if
they are lost in between the process.
• Movement lead’s a user eye to a particular content or
element on a big screen, marking the focal point

Module 4: Wire framming & Prototyping 9

 Visual Design Principles
• Reading Patterns
• There is always a pattern in how users scan and read any
information.
• It is found that human is read from top to bottom and based on
cultural writing it can be right to left(like Hebrew and Urdu) or left
to right(like English)
• Z-Shaped: Scan the website from the top left to the bottom right of
the page. Making a z shape while scanning through content.
• F-Shaped: When a user starts scanning data in F shape they start by
reading the top line from left to right and then going straight to the
bottom. Such as Google’s search result page.
• Layered Cake: When users only focus on the top heading and title
while leaving the rest of the content unread. Just like a frosted cake
– where frosting is the heading and cake walls are leftover content.
• Spotted: When the user focused on specific content scanning in a
random manner.
Module 4: Wire framming & Prototyping 10
 Visual Design Principles
• Variety

• Creating variety in presentation will keep the interface

interesting
• Monotony may lead to missing put some important
information
• Providing exciting and unusual but expected interaction
styles might improve user experience

Module 4: Wire framming & Prototyping 11

 Visual Design Principles
• Unity
• Relates to design elements
• Present the information in the most logical and cohesive way
possible, in a conceptually unified manner.
• Is pleasing to the eye.
• Can aid comprehension.
• Can highlight a key message.
• Creates balance.
• Promotes creativity
• Unity applied in design through
• Choosing harmonious colors
• Using similar shapes
• Adding complementary textures
• Placing elements with care
Module 4: Wire framming & Prototyping 12
 Visual Design Principles
• White/Negative Spacing
• Refers to any blank or empty space surrounding all the other
elements in a design composition
• Effective use of space can greatly contribute to an attractive,
harmonious, and successful design.
• structures and organizes content
• improves text readability and legibility
• increases user interaction
• draws focus on important elements
• promotes balance and visual order

Module 4: Wire framming & Prototyping 13

 Visual Design Principles
• Proximity
• Group similar or related items together to emphasize their
relationship.
• Space unlike or unrelated items further apart to emphasize
their lack of relationship.
• Create visual hierarchy by using proximity to guide the
viewer's eyes through the design.

Module 4: Wire framming & Prototyping 14

 Interaction Design
• The design of the interaction between users
and products.
• goal of interaction design is to create products
that enable the user to achieve their
objective(s) in the best way possible
• Often involves elements like aesthetics,
motion, sound, space, and many more

Module 4: Wire framming & Prototyping 15

 Interaction Design
• 5 Dimensions of Interaction Designs
– 1D: Words
• Especially those used in interactions, like button labels—
should be meaningful and simple to understand.
• They should communicate information to users, but not
too much information to overwhelm the user.
– 2D: Visual representations
• This concerns graphical elements like images,
typography and icons that users interact with.
• These usually supplement the words used to
communicate information to users.

Module 4: Wire framming & Prototyping 16

 Interaction Design
• 5 Dimensions of Interaction Designs
– 3D: Physical objects or space
• Through what physical objects do users interact with the
product? (Device based control)
• Affect the interaction between the user and the product.
– 4D: Time
• While this dimension sounds a little abstract, it mostly
refers to media that changes with time (animation, videos,
sounds).
• Motion and sounds play a crucial role in giving visual and
audio feedback to users’ interactions.
• Also of concern is the amount of time a user spends
interacting with the product: can users track their
progress, or resume their interaction some time later?
Module 4: Wire framming & Prototyping 17
 Interaction Design
• 5 Dimensions of Interaction Designs
– 5D: Behavior
• Includes the mechanism of a product: how do users
perform actions on the website?
• How do users operate the product?
• Includes the reactions—for instance emotional
responses or feedback—of users and the product.

Module 4: Wire framming & Prototyping 18

Information Design

Module 4: Wire framming & Prototyping 19

 Information Design
• The practice of presenting information in a
way that fosters an efficient and effective
understanding of the information
• displaying information effectively, rather than
just attractively or for artistic expression.

Module 4: Wire framming & Prototyping 20

Data Visualization

Module 4: Wire framming & Prototyping 21

Information Architecture

Module 4: Wire framming & Prototyping 22

 Wire framing & Storyboards
• Wire framing and storyboards, Digital Designs,
Elements and Widgets, Screen design and
layout, prototyping tools.
• Usability testing – types and process.

Module 4: Wire framming & Prototyping 23

Digital Designs: Elements & Widgets

Module 4: Wire framming & Prototyping 24

Screen Design and Layout

Module 4: Wire framming & Prototyping 25

 Prototyping Tools
1. Sketch
• A vector graphics editor used for drawing, wireframing,
prototyping and design handoff—essentially everything you
need to bring your designs to life.
• Key features:
– Intuitive vector editing tools and editable boolean operations for
flexible and iterative design
– Infinite design canvas with flexible Artboards, design presets,
customisable grids and simple resizing tools, allowing you to scale your
designs to any screen size
– Shorthand and math operators to speed up the design process
– Variable and OpenType fonts for infinite control over your interface
typography
– Cross-platform tools for real-time collaboration, feedback, sharing and
developer handoff
Module 4: Wire framming & Prototyping 26
 Prototyping Tools
1. Sketch

Module 4: Wire framming & Prototyping 27

 Prototyping Tools
2. Proto.io
• Proto.io is a web-based, no-code prototyping tool that allows you to create
high-fidelity, interactive prototypes in record time.
• Key features:
– Drag-and-drop interface
– 250+ UI components for iOS, Android, and web
– 1,000+ fully customisable templates for web and mobile app design, including
templates for onboarding, e-commerce, product sign-in, and more
– 6,000+ digital assets to add to your prototypes, including static and animated
icons, stock images, and sound effects
– Powerful animation features to bring your prototypes to life, including screen
transitions, timeline-based state animations, and advanced animation effects
– Seamless integration with popular design tools such as Figma, Sketch, Adobe
XD, and Photoshop
– Preview and test your prototypes in real-time with the built-in preview feature
– Easy export in multiple formats, including PDF, HTML, and video

Module 4: Wire framming & Prototyping 28

 Prototyping Tools
Porto.jo

Module 4: Wire framming & Prototyping 29

 Usability Testing and Process
What Makes Something Usable?
What Is Usability Testing?
When Should You Test?
Skills for Test Moderators
The Process for Conducting a Test:
Develop the Test Plan
Set Up a Testing Environment
Find and Select Participants
Prepare Test Materials
Conduct the Test Sessions
Debrief the Participant and Observers
Analyze Data and Observations
Report Findings and Recommendations

Module 4: UX Design Process: Prototype & Test 30

 Usability Testing: An overview
• Usability: “What makes something usable
is the absence of frustration in using it”
• When a product or service is truly usable,
the user can do what he or she wants to
do the way he or she expects to be able to
do it, without hindrance, hesitation, or
questions.
• To be usable, a product or service should
be useful, efficient, effective, satisfying,
learnable, and accessible.

Module 4: UX Design Process: Prototype & Test 31

 Usability
Typically measured in terms of :
• Usefulness
• Efficiency
• Effectiveness
• Learnability
• Satisfaction
• Accessibility

Module 4: UX Design Process: Prototype & Test 32

 Usability
• Usefulness concerns the degree to which a product
enables a user to achieve his or her goals and an
assessment of the user’s willingness to use the
product at all
• If a system is easy to use, easy to learn, and even
satisfying to use, but does not achieve the specific
goals of a specific user, it will not be used even if it is
given away for free.
• During early stage of system/ product designing the
features desirable and necessary for the system are
needed to be identified

Module 4: UX Design Process: Prototype & Test 33

 Usability
• Efficiency
• is represented by the quickness with which the user’s
goal can be accomplished accurately and completely
measured in terms of time.
• Even a small amount of time saved at every usage will
drastically save the time and will be appreciated
• Effectiveness
• is the extent to which the product behaves in the way
that users expect it to.
• The ease with which users can use it to do what they
intend.
• Measured quantitatively with error rate would be
represented in terms of percentage of total usage

Module 4: UX Design Process: Prototype & Test 34

 Usability
• Learnability
• a part of effectiveness
• The user’s ability to operate the system to some defined
level of competence after some predetermined amount and
period of training (ideally no time at all).
• The ability of infrequent users to relearn the system after
periods of inactivity.
• Satisfaction
• the user’s perceptions, feelings, and opinions of the
product, usually captured through both written and oral
questioning
• Users are more likely to perform well on a product that
meets their needs
• users are asked to rate and rank products that they try, and
this can often reveal causes and reasons for problems that
occur

Module 4: UX Design Process: Prototype & Test 35

 Usability
• Accessibility
• about having access to the products needed to accomplish a
goal
• what makes products usable by people who have disabilities
• Making a product usable for people with disabilities— or
who are in special contexts, or both— almost always
benefits people who do not have disabilities.
• Considering accessibility for people with disabilities can
clarify and simplify design for people who face temporary
limitations (for example, injury) or situational ones (such as
divided attention or bad environmental conditions, such as
bright light or not enough light).

Module 4: UX Design Process: Prototype & Test 36

 Usability Testing
What makes something usable:
Appropriate blend of
• Usefulness
• Efficiency
• Effectiveness
• Learnability
• Satisfaction
• Accessibility

Module 4: UX Design Process: Prototype & Test 37

 Reasons of something less usable
• Development focuses on the machine or
system.
• Target audiences change and adapt.
• Designing usable products is difficult.
• Team specialists don’t always work in
integrated ways.
• Design and implementation don’t always
match.

Module 4: UX Design Process: Prototype & Test 38

Reasons of something less usable
1. Development focuses on the machine or system:
• The emphasis and focus on the machine or system, not on
the person who is the ultimate end user.
• More focus on the activity to be completed than the context
and human factors due to assumptions
• human will adapt to the changed environment
seamlessly
• binary (black – white/ true-false) development
neglecting intermediate stages of development
• more focus on technical aspects of solution than humane
aspects;
• similar technical and other background of end users as
developers themselves.

Module 4: UX Design Process: Prototype & Test 39

Reasons of something less usable
2. Target audiences change and adapt
• Huge gap between continuously expanding and changing
customers (end users) and development organization
• Developers and end users worked together in past and the
end users accepted (learned or adapted) the way in which
system was developed (very less choice or options, pride in
using new technology)
• The gap is widen due to users have little technical knowledge
of computers and mechanical devices, little patience for
getting accustomed with the product just purchased, and
completely different expectations from those of the
designer.

Module 4: UX Design Process: Prototype & Test 40

Reasons of something less usable
3. Designing usable products is difficult
• Though assumed as commonsense, for designers, without
a background in either the behavioral or social sciences,
very difficult to design the system

Module 4: UX Design Process: Prototype & Test 41

Reasons of something less usable
4. Team specialists don’t always work in integrated ways
• Organizations employ very specialized teams and approaches
to product and system development, yet fail to integrate them
with each other.
• Components of a software product include the user interface,
the help system, and the written materials are developed by
different teams and hence may not synchronize their efforts

Non Integrated approach

Integrated approach
Module 4: UX Design Process: Prototype & Test 42
Reasons of something less usable
5. Design and implementation don’t always match.
• Design, in this case, relates to how the product
communicates, whereas implementation refers to how it
works
• Design expertise look at the system from communication
and human-oriented analysis point of view, while technical
expertise from programming and machine-oriented analysis
• With the advent of new-generation programming languages
and tools to automatically develop program code, the
challenge of technical implementation has diminished.
• Challenge of design has increased dramatically due to the
need to reach a broader, less sophisticated user population
and the rising expectations for ease of use

Module 4: UX Design Process: Prototype & Test 43

 Usability Testing
Thus to makes something usable:
• Focus on end user
• Research users
• Pay to user’s need while designing
• Bridge the gap between designing and implementation
• Follow integrated approach
• Early focus on users and their tasks
• Evaluation and measurement of product usage
• Iterated design

Module 4: UX Design Process: Prototype & Test 44

 The usability Testing
• Usability Testing:
• A research tool that refers to a process that
employs people as testing participants who are
representative of the target audience to evaluate
the degree to which a product meets specific
usability criteria
• inclusion of representative users eliminates
labeling as usability testing such techniques as
expert evaluations, walk-throughs, and the like that
do not require representative users as part of the
process

Module 4: UX Design Process: Prototype & Test 45

 The usability Testing
• Goals of Testing:
• Improve the profitability of products by
satisfying what user needs
• Design decisions are informed by data gathered
from representative users to expose design
issues so they can be remedied, thus minimizing
or eliminating frustration for users

Module 4: UX Design Process: Prototype & Test 46

 The usability
Goals of Testing:
Testing
•
• Informing Design:
• inform design by gathering data from which to
identify and rectify usability deficiencies existing in
products and their accompanying support materials
prior to release.
• To ensure the creation of products that:
• Are useful to and valued by the target audience
• Are easy to learn
• Help people be effective and efficient at what
they want to do
• Are satisfying (and possibly even delightful) to
use

Module 4: UX Design Process: Prototype & Test 47

 The usability Testing
• Goals of Testing:
• Eliminating Design Problems and Frustration
• the ease with which customers can use the product will increase the
profitability
• minimize the frustration of using a product for target audience by
remedying flaws in the design ahead of product release by:
• Set the stage for a positive relationship between organization
and customers.
• Establish the expectation that the products organization sells are
high quality and easy to use.
• Demonstrate that the organization considers the goals and
priorities of its customers to be important.
• Release a product that customers find useful, effective, efficient,
and satisfying.

Module 4: UX Design Process: Prototype & Test 48

 The usability Testing
• Goals of Testing:
• Improving Profitability by:
• Creating a historical record of usability benchmarks for future releases. By
keeping track of test results, a company can ensure that future products
either improve on or at least maintain current usability standards.
• Minimizing the cost of service and support calls. A more usable product will
require fewer service calls and less support from the company.
• Increasing sales and the probability of repeat sales. Usable products create
happy customers who talk to other potential buyers or users. Happy
customers also tend to stick with future releases of the product, rather
than purchase a competitor’s product
• Acquiring a competitive edge because usability has become a market
separator for products.
• Minimizing risk.

Module 4: UX Design Process: Prototype & Test 49

 Basics of Methodology
• Formulate a hypothesis
• Chose randomly (using a very systematic method)
participants and assign them to experimental
conditions which truly represent the entire set of
customers
• Apply tight control during testing
• Employ control groups
• Consider sufficient size of samples to measure
statistically significant differences between
groups.

Module 4: UX Design Process: Prototype & Test 50

 Basics of Methodology
• Basic Elements of Usability Testing
• Development of research questions or test objectives
rather than hypotheses.
• Use of a representative sample of end users which may or
may not be randomly chosen.
• Representation of the actual work environment.
• Observation of end users who either use or review a
representation of the product.
• Controlled and sometimes extensive interviewing and
probing of the participants by the test moderator.
• Collection of quantitative and qualitative performance and
preference measures.
• Recommendation of improvements to the design of the
product.

Module 4: UX Design Process: Prototype & Test 51

 Basics of Methodology
• Limitations of Usability Testing
• Testing is always an artificial situation.
Testing in the lab, or even testing in the field, still
represents a depiction of the actual situation of usage
and not the situation itself
• Test results do not prove that a product works
Statistical significance is simply a measure of the
probability that one’s results were not due to chance.
• Participants are rarely fully representative of the target
population
Participants are only as representative
• Testing is not always the best technique to use
many techniques intended to evaluate and improve
products

Module 4: UX Design Process: Prototype & Test 52

When should you test

Module 4: UX Design Process: Prototype & Test 53

 When should you test
Types of Tests conducted depending on approximate point in
the product development :
• Exploratory (or formative)
• Assessment (or summative)
• Validation (or verification)
• Comparison test (integral part of any of the other three
tests and is not associated with any specific lifecycle
phase)
• each test will vary in its emphasis on qualitative vs.
quantitative measures, and by the amount of interaction
between test moderator and participant
• Usability testing is most powerful and most effective
when implemented as part of an iterative product
development process

Module 4: UX Design Process: Prototype & Test 54

Exploratory or Formative Study
When:
• Conducted quite early in the development cycle, when
a product is still in the preliminary stages of being
defined and designed (hence called formative)
• The user profile and usage model (or task analysis) of
the product will have (or should have) been defined
• the requirements and specifications phase is
completed, and the design phase is just about to
begin.

Module 4: UX Design Process: Prototype & Test 55

Exploratory or Formative Study
Objectives:
• To examine the effectiveness of preliminary design concepts
• Would check how well the interface:
• Supports users’ tasks within a goal.
• Communicates the intended workflow.
• Allows the user to navigate from screen to screen and within a
screen
• Using the task-oriented user guide of a software product :
• Overall organization of subject matter
• Whether to use a graphic or verbal approach
• How well the proposed format supports findability
• Anticipated points of assistance and messaging
• How to address reference information
• Being early analysis and research cannot be over emphasized,
for this is the point in time when critical design decisions set
the stage for all that will follow.

Module 4: UX Design Process: Prototype & Test 56

Exploratory or Formative Study
Methodology:
• Dictate extensive interaction between the participant and test
moderator to establish the efficacy of preliminary design concepts
• Develop preliminary versions of the product’s interface and/or its
support materials for evaluation by representative users
• Involve a prototype simulation or mockup of the product that
represents its basic layout, organization of functions, and high-
level operations
• Prior to a working prototype, one might use static screen
representations or even paper drafts of screens
• Need not represent the entire functionality of the product, need
only show enough functionality to address the particular test
objective

Module 4: UX Design Process: Prototype & Test 57

Exploratory or Formative Study
Process:
• Usually quite informal and almost a collaboration
between participant and test moderator, with much
interaction between the two.
• The test moderator and participant might explore the
product together, with the test moderator conducting
an almost ongoing interview or encouraging the
participant to ‘‘think aloud’’ about his or her thought
process as much as possible

Module 4: UX Design Process: Prototype & Test 58

Exploratory or Formative Study

Module 4: UX Design Process: Prototype & Test 59

Assessment or Summative Test
When:
• The most typical type of usability test conducted.
• The simplest and most straightforward for the novice
usability professional to design and conduct
• Tests are conducted either early or midway into the
product development cycle, usually after the
fundamental or high-level design or organization of
the product has been established

Module 4: UX Design Process: Prototype & Test 60

Assessment or Summative Test
Objective:
• To expand the findings of the exploratory test by
evaluating the usability of lower-level operations and
aspects of the Product
• The assessment test begins to work on the meat and
the flesh

Module 4: UX Design Process: Prototype & Test 61

Assessment or Summative Test
Overview of the Methodology:
• An information-gathering or evidence-gathering test, the
methodology for an assessment test is a cross between the
informal exploration of the exploratory test and the more
tightly controlled measurement of the validation test
• The user will always perform tasks rather than simply walking
through and commenting upon screens, pages, and so on.
• The test moderator will lessen his or her interaction with the
participant because there is less emphasis on thought
processes and more on actual behaviors.
• Quantitative measures will be collected.

Module 4: UX Design Process: Prototype & Test 62

Validation or Verification Test
When:
• The validation test, also referred to as the verification test, is
usually conducted late in the development cycle
• Intended to measure usability of a product against
established benchmarks or, in the case of a verification test,
to confirm that problems discovered earlier have been
remedied and that new ones have not been introduced.
• The validation test typically takes place much closer to the
release of the product

Module 4: UX Design Process: Prototype & Test 63

Validation or Verification Test
Objective:
• To evaluate how the product compares to some
predetermined usability standard or benchmark, either a
project-related performance standard, an internal company
or historical standard, or even a competitor’s standard of
performance
• The intent is to establish that the product meets such a
standard prior to release, and if it does not, to establish the
reason(s).

Module 4: UX Design Process: Prototype & Test 64

Validation or Verification Test
Overview of the Methodology:
• The validation test is conducted in similar fashion to the
assessment test with three major exceptions.
1. Prior to the test, benchmarks or standards for the tasks of the
test are either developed or identified. This can be specific
error or time measures, or as simple as eliminating the
problems identified in earlier exploratory tests.
2. Participants are given tasks to perform with either very little
or no interaction with a test moderator. (And they are
probably not asked to ‘‘think aloud.’’)
3. The collection of quantitative data is the central focus,
although reasons for substandard performance are identified

Compared to an assessment test, a validation test requires more

emphasis on experimental rigor and consistency

Module 4: UX Design Process: Prototype & Test 65

 Comparison Test
When:
• Not associated with any specific point in the product
development lifecycle.
• In the early stages, it can be used to compare several
radically different interface styles via an exploratory test,
to see which has the greatest potential with the proposed
target population
• Toward the middle of the lifecycle, a comparison test can
be used to measure the effectiveness of a single element
• Toward the end of the lifecycle, a comparison test can be
used to see how the released product stacks up against a
competitor’s product

Module 4: UX Design Process: Prototype & Test 66

 Comparison Test
Objective:
• Can be used in conjunction with any of the other three tests
• Used to compare two or more designs, such as two different
interface styles, or the current design of a manual with a
proposed new design, or to compare your product with a
competitor’s
• Typically used to establish which design is easier to use or
learn, or to better understand the advantages and
disadvantages of different designs

Module 4: UX Design Process: Prototype & Test 67

 Comparison Test
Overview of the Methodology:
• Involves the side-by-side comparison of two or
more clearly different designs
• Performance data and preference data are
collected for each alternative, and the results are
compared
• Conducted informally as an exploratory test or it
can be conducted as a tightly controlled classical
experiment

Module 4: UX Design Process: Prototype & Test 68

The Process of Conducting a Test
• Develop the Test Plan
• Set Up a Testing Environment
• Find and Select Participants
• Prepare Test Materials
• Conduct the Test Sessions
• Debrief the Participant and Observers
• Analyze Data and Observations
• Report Findings and Recommendations

Module 4: UX Design Process: Prototype & Test 69

 Develop the Test Plan
• Need of the Test Plan:
• Serves as a Blueprint for the Test:
• Serves as a Blueprint for the Test
• sets the stage for all that will follow
• Serves as the Main Communication Vehicle
• Bridge between the main designer and
developer, the test moderator, and the rest
of the team
• the document that all involved members of
the development team, as well as
management (if it is interested and
involved), should review in order to
understand how the test will proceed and to
see whether their particular needs are being
Module 4: UX Design Process: Prototype & Test 70
met.
 Develop the Test Plan
• Need of the Test Plan:
• Defines or Implies Required Resources
• both internal and external
• What , when, where, who, why ; how and
how much
• Provides a Focal Point for the Test and a
Milestone
• testing systematically
• understand more of the test objectives

Module 4: UX Design Process: Prototype & Test 71

 Develop the Test Plan
• The Parts of a Test Plan
• Purpose, goals, and objectives of the test
• Research questions
• Participant characteristics
• Method (test design)
• Task list
• Test environment, equipment, and logistics
• Test moderator role
• Data to be collected and evaluation measures
• Report contents and presentation

Module 4: UX Design Process: Prototype & Test 72

Set Up a Testing Environment
Once the test plan is finalized the next step is to Find and Select
Participants
• Decide on a Location and Space
• most usability testing was done on products used in office
• not all testing should be done in a lab setting
• sometimes doing testing in a lab simply is not practical
• The location of the test sessions is intricately linked with
the design of the study and who the users are
• Consider carefully from what location you want the
observers to observe

Module 4: UX Design Process: Prototype & Test 73

Set Up a Testing Environment
Lab or at the users’ site:
• Decide on:
• Your test design and measures: type of test exploratory/
formative, summative, validation)
• Logistics: extra space available in organization, Is the
location accessible to participants?
• Public relations within your company: internal users or
real sample

Module 4: UX Design Process: Prototype & Test 74

Set Up a Testing Environment
Lab or at the users’ site:
• Decide on:
• Availability of participants: How easy is it for participants
to leave their daily routines to take part in the study?
• Test in Multiple Geographic Locations: depends upon the
product and the market
• Arranging Sessions at a User’s Site: requires some special
planning because the logistics are not trivial

Module 4: UX Design Process: Prototype & Test 75

Set Up a Testing Environment
Lab or at the users’ site:
• Decide on:
• Minimalist Portable Test Lab: the testing equipment,
such as cameras and PCs, is carted around to different
available locations.
• Advantages: You get to see the user’s context, It makes
it easier typically for participants to take part, cost
effective solution as can be easily reconfigured, because
the equipment is portable, can bring the test to the field
• Disadvantages: Planning and logistics can be complex
compared to doing all the testing in one place, Field
sessions can take more time ( all must LEARN about test
environment), limited space for observers/ participants

Module 4: UX Design Process: Prototype & Test 76

Set Up a Testing Environment
Lab or at the users’ site:
• Decide on:
• Permanent / Fixed Test Lab: Simple Single-Room Setup
• Advantages: The test moderator has an excellent sense of
what is going on with the Participant, allows the
moderator to interact closely with participants, allows
participants to try difficult situation as they are at ease
• Disadvantages: more comfort for moderator, participant
may create unreal (more comfort zone) misleading the
results, There is very limited space for observers,

Module 4: UX Design Process: Prototype & Test 77

Set Up a Testing Environment
Gather and Check Equipment, Artifacts, and Tools:
• Basic Equipment, Tools, and Props
• Gathering Biometric Data
• Identify Co-Researchers, Assistants, and Observers
• Data Gatherer/Note Taker
• Product/Technical Expert(s)
• Additional Testing Roles
• Test Observers

Module 4: UX Design Process: Prototype & Test 78

 Find and Select Participants
• Find and Select Participants
• Characterize Users
• Lack of a clear delineation of the characteristics of the end user that
contributes to usability deficiencies of products
• product team members do not know or do not agree on the characteristics
of the end user, it is difficult for them to develop a consistent, well-designed
product that meets the end user’s need
• Visualize the Test Participant
• Differentiate between Client and End User
• Look for Information about Users

• Define the Criteria for Each User Group

• Define Expertise
• Specify Requirements and Classifiers for Selection

• Document the User Profile

• Divide the User Profile into Distinct Categories (Persona)

• Determine the Number of Participants to Test

Module 4: UX Design Process: Prototype & Test 79

 Prepare Test Materials
• Prepare Test Materials
• Orientation script
• Background questionnaire
• Data collection instruments
• Nondisclosure agreement and recording consent
form
• Pre-test questionnaire
• Task scenarios
• Post-test questionnaire
• Debriefing topics guide

Module 4: UX Design Process: Prototype & Test 80

Conduct the Test Sessions
• Conduct the Test Sessions

Module 4: UX Design Process: Prototype & Test 81

Debrief the Participant and Observers
• Debrief the Participant and Observers

Module 4: UX Design Process: Prototype & Test 82

Analyze Data and Observations
• Analyze Data and Observations

Module 4: UX Design Process: Prototype & Test 83

Report Findings and Recommendations

• Report Findings and Recommendations

Module 4: UX Design Process: Prototype & Test 84

 References
• https://venngage.com/blog/design-principle-unity/ last accessed
on September 6, 2024
• https://www.geeksforgeeks.org/principles-of-visual-design-that-
every-ui-designer-should-know/ last accessed on September 6, 2024
• https://venngage.com/blog/white-space-design/ last accessed on
September 7, 2024
• https://www.interaction-design.org/literature/article/what-is-
interaction -design Last accessed on September 7, 2024
• https://www.uxdesigninstitute.com/blog/user-interface-ui-design-to
ols
/ last accessed on Sept 23, 2024
• Jeff Rubin, Dana Chisnell, Usability Testing: How Plan, Desing and
Conduct Effective Tests, 2nd edition, Wiley Publicaiton

Module 4: Wire framming & Prototyping 85