CALIFORNIA STATE UNIVERSITY, NORTHRIDGE
ANALYZING THE EFFECTIVENESS OF
A LOW FIDELITY PROTOTYPING KIT
A graduate project submitted in partial fulfillment of the requirements
For the degree of Masters of Arts in Psychology,
Human Factors and Applied Psychology
by
Amanda Nicole Schmutzler
August 2011
The graduate project of Amanda Nicole Schmutzler is approved:
______________________________________
Robert Schumacher, Ph.D.
____________
Date
______________________________________
Tyler Blake, Ph.D., Chair.
____________
Date
California State University, Northridge
ii
Dedication
This graduate project is dedicated to my family. Thank you for always being there for
me. Without your love and support I would have never been able to reach my goals.
Thank you for your commitment in supporting me throughout my academic career. You
have always encouraged me to be the best I could be. My family has taught me to live by
the following quote and for that I thank them.
“Only as high as I reach can I grow, only as far as I seek can I go, only as deep
as I look can I see, only as much as I dream can I be.” -Karen Ravn
iii
Table of Contents
Signature Page .................................................................................................................... ii
Dedication .......................................................................................................................... iii
List of Figures .................................................................................................................... vi
List of Tables ................................................................................................................... viii
Abstract .............................................................................................................................. ix
Introduction ......................................................................................................................... 1
Current Study .................................................................................................................. 7
Hypotheses ...................................................................................................................... 8
Study 1: Part 1 ..................................................................................................................... 9
Method ............................................................................................................................ 9
Participants .................................................................................................................. 9
Materials ..................................................................................................................... 9
Procedure .................................................................................................................. 13
Scoring ...................................................................................................................... 15
Results ........................................................................................................................... 16
Study 1: Part 2 ................................................................................................................... 22
Method .......................................................................................................................... 23
Participants ................................................................................................................ 23
Materials ................................................................................................................... 23
Procedure .................................................................................................................. 23
Results ........................................................................................................................... 29
Discovered Problems and Proposed Solutions ................................................................. 30
Study 2: Part 1 ................................................................................................................... 38
Method .......................................................................................................................... 38
Participants ................................................................................................................ 38
Materials ................................................................................................................... 38
Results ........................................................................................................................... 40
Study 2: Part 2 ................................................................................................................... 48
Method .......................................................................................................................... 48
Participants ................................................................................................................ 48
Materials ................................................................................................................... 48
Procedure .................................................................................................................. 48
Results ........................................................................................................................... 48
Discussion ......................................................................................................................... 50
Practical Implications.................................................................................................... 53
Limitations and Future Research .................................................................................. 54
References ......................................................................................................................... 57
iv
Appendix A: Interviews with User Experience Specialist ................................................ 59
Appendix B: Instruction Manual for the Low Fidelity Prototyping Kit ........................... 68
Appendix C: Pre-Test Questionnaire ................................................................................ 81
Appendix D: Instructions for Usability Tests ................................................................... 82
Appendix E: Post-Test Questionnaire ............................................................................... 86
Appendix F: Debriefing .................................................................................................... 91
Appendix G: Redesigned Instruction Manual for the Low Fidelity Prototyping Kit ....... 92
v
List of Figures
Figure 1: Items Included in the UXPin Portable Kit for Web ............................................ 6
Figure 2: GuiMags Prototyping Magnets ........................................................................... 6
Figure 3: Layout of the Low Fidelity Prototyping Kit...................................................... 11
Figure 4: Layout of the Low Fidelity Prototyping Kit ...................................................... 11
Figure 5: Front of the Low Fidelity Prototyping Kit ........................................................ 12
Figure 6: Whiteboard Located on the Back of the Low Fidelity Prototyping Kit ............ 12
Figure 7: MockFlow Wireframe Example ........................................................................ 13
Figure 8: Marginal Means of Perceived Usability ............................................................ 16
Figure 9: Marginal Means of Usability of the Low Fidelity Prototyping Kit Instruction
Packet ................................................................................................................................ 18
Figure 10: Marginal Means of Participant Preference to Work in a Group vs. Individually
........................................................................................................................................... 19
Figure 11: Marginal Means of Perceived Creativity......................................................... 19
Figure 12: Participant 14 Low Fidelity Prototyping Kit Home Page ............................... 24
Figure 13: Participant 14 Low Fidelity Prototyping Kit Services Page............................ 25
Figure 14: Participant 14 Low Fidelity Prototyping Kit About Us Page .......................... 25
Figure 15: Participant 14 Low Fidelity Prototyping Kit Contact Us Page ....................... 26
Figure 16: Participant 14 MockFlow Home Page............................................................. 26
Figure 17: Participant 14 MockFlow Services Page ......................................................... 27
Figure 18: Participant 14 MockFlow About Us Page ....................................................... 27
Figure 19: Participant 14 MockFlow Contact Us ............................................................. 28
Figure 20: Participant Mean Rating on Whether They Would Be Able to Use the Designs
Created in Study 1: Part 1 to Make a Website .................................................................. 29
Figure 21: Revised Kit on top of Original Version for Size Comparison ........................ 32
Figure 22: Website Stencil Kit.......................................................................................... 35
Figure 23: Front of the Revised Low Fidelity Prototyping Kit ........................................ 39
Figure 24: Layout of the Revised Low Fidelity Prototyping Kit ...................................... 39
Figure 25: Marginal Means of Perceived Usability .......................................................... 40
Figure 26: Marginal Means of Usability of the Low Fidelity Prototyping Kit Instruction
Packet ................................................................................................................................ 42
Figure 27: Marginal Means of Participant Preference to Work in a Group vs. Individually
........................................................................................................................................... 43
vi
Figure 28: Marginal Means of Perceived Creativity......................................................... 43
Figure 29: Participant Mean Rating on Whether They Would Be Able to Use the Designs
Created in Study 2: Part 1 to Make a Website .................................................................. 49
Figure 30: Marginal Means of Usability of the Low Fidelity Prototyping Kit Instruction
Packet for Study 1 vs. Study 2 .......................................................................................... 52
vii
List of Tables
Table 1: Usability Rating – Subjective Participant Mean Rating of the Low Fidelity
Prototyping Kit and MockFlow (Based on 7-point Likert scale) ..................................... 17
Table 2: Usability Rating – Subjective Participant Mean Rating of the Low Fidelity
Prototyping Kit Instructions (Based on 7-point Likert scale) ........................................... 18
Table 3: Usability Rating – Subjective Participant Mean Rating of Creativity (Based on
7-point Likert scale) .......................................................................................................... 20
Table 4: Themes Found in the Original Design of the Low Fidelity Prototyping Kit ...... 20
Table 5: Themes Found in Study 1 for MockFlow ........................................................... 21
Table 6: Number of Participant/Participant Groups to use Item in the Low Fidelity
Prototyping Kit.................................................................................................................. 22
Table 7: Usability Rating – Subjective Participant Mean Rating of the Low Fidelity
Prototyping Kit (Based on 7-point Likert scale) ............................................................... 41
Table 8: Usability Rating – Subjective Participant Mean Rating of MockFlow (Based on
7-point Likert scale) .......................................................................................................... 42
Table 9: Usability Rating – Subjective Participant Mean Rating of the Low Fidelity
Prototyping Kit Instructions (Based on 7-point Likert scale) ........................................... 44
Table 10: Usability Rating – Subjective Participant Mean Rating of Creativity (Based on
7-point Likert scale) .......................................................................................................... 45
Table 11: Themes Found in the Revised Version of the Low Fidelity Prototyping Kit ... 46
Table 12: Themes Found in Study 2: Part 1 for MockFlow ............................................. 47
viii
ABSTRACT
ANALYZING THE EFFECTIVENESS OF
A LOW FIDELITY PROTOTYPING KIT
By
Amanda Nicole Schmutzler
Masters of Arts in Psychology,
Human Factors and Applied Psychology
Prototyping plays a very important role in the early development of products. The present
study investigates the usability of a low fidelity prototyping kit in comparison to
MockFlow, a wire framing program. There are two studies each consisting of two parts.
Study 1 aims to uncover potential problems with the initial design of the low fidelity
prototyping kit. In part one of Study 1, participants included 25 undergraduate students
from California and Arizona accredited colleges. They were told to first create a physical
therapy website using the low fidelity prototyping kit and then create the same website
using MockFlow. The designs created in part 1 of Study 1 were then analyzed by 50
undergraduate students from California and Arizona accredited colleges. From the
findings in the preliminary studies, the low fidelity prototyping kit was redesigned and
tested again in Study 2. Participants in part one of Study 2 included 32 undergraduate
students from California State University, Northridge who performed the same usability
tasks as part one in Study 1. Designs created in this study were analyzed in part two of
Study 2 by 50 undergraduate students from California and Arizona accredited colleges. It
was found that there was no statistical difference in the overall usability of the low
fidelity prototyping kit in comparison to MockFlow. Most participants indicated the
preference to work in a group while using the low fidelity prototyping kit and MockFlow.
No significant statistical difference was found between the perceived ability to express
one’s creativity when using both the low fidelity prototyping kit and MockFlow.
Furthermore, the redesign of the low fidelity prototyping kit increased the perceived
creativity of the designs and decreased the perceived ability to use the designs to create a
website.
ix
Introduction
Prototyping is a key factor in the beginning stages of a design. It creates a
foundation for the entire creation of a product. There are many different forms of
prototyping. These range from full, horizontal and vertical prototypes, high fidelity and
low fidelity prototypes, chauffeured prototypes and Wizard of Oz prototypes (Preece,
1994). A full prototype contains complete functionality but is limited by lower
performance. A horizontal prototype encompasses high level functionality however,
minor details are often neglected. A vertical prototype consists of all high and low level
functions of a specific part of a system (Preece, 1994).
High fidelity prototypes resemble the final system as closely as possible. Low
fidelity prototypes are created with materials further away from the final product but tend
to be cheaper and faster to develop (Preece, 1994). Chauffeured prototyping is when a
user is involved in the design process and they watch the developer navigate through the
system (Preece, 1994). This type of prototyping is generally used to test an interface to
see if it meets the user’s needs without the user actually having to perform the lower level
actions of the system. For example, this may be useful to see the sequence of actions
needed to perform a task. Wizard of Oz prototyping involves a third party. The user
interacts with an interface and believes that it is a working prototype. Without their
knowledge, someone is behind-the-scenes controlling the prototype. This kind of
prototyping is especially useful in the early development stages because the design team
is able to get a feel for the user’s expectations before the system is fully functioning
(Preece, 1994).
1
This particular study will be focusing on low fidelity prototyping. Paper
prototyping is believed to be the most common method in use today (Warfell, 2009,
p.111). According to a recent study, a chief benefit of low fidelity prototyping is that it
imposes relatively few constraints on a design (Snyder, 2003). It allows the designer to be
creative and design whatever they desire. Creativity is defined as the “tendency to
generate or recognize ideas, alternatives, or possibilities that may be useful in solving
problems, communicating with others, and entertaining ourselves and others” (Franklin,
1994). When creating a low fidelity prototype, the designer needs to be able to generate
new possibilities and alternatives. To do this, they are given the freedom to draw
whatever they wish without the constraints of how they are going to make the design
work. Designers can put the idea down on paper and go from there to create something
else if they change their mind. This is important for the creativity of the design. If a
designer is restricted to only utilizing tools in software, it is much more difficult to
increase the creativity of their product. They are unable to simply draw how they want it
to look; they have to utilize the tools provided and attempt to manipulate them to make
them work. This, in turn, takes increased amounts of time and effort.
Paper prototyping is believed to be “the fastest of the rapid prototyping
techniques…by sketching and designing ideas and concepts onto paper, interface
designers are able to focus on aspects of design and not on the mechanics of a tool”
(Rudd, Stern, & Isensee, 1996). The designer is able to focus on the design and not how
to use a program. Warfell (2009) explains that “prototyping is a rapid, iterative process…
for exploring ideas, failing often, and learning quickly…if you’re focused on creating
production-level code, you start to lose some of the value of rapid iteration” (Warfell,
2
2009, p.100). Although very useful, low fidelity prototypes “are created to show visuals,
including colors, icons, and the placement of controls…they will show design direction,
but will not provide details such as navigation and interaction” (Rudd, Stern, & Isensee,
1996).
Low fidelity prototyping helps to reduce risk because changes can be made
without a significant cost investment. It becomes easier for designers to make changes
because nothing is coded and team members are often more comfortable suggesting
alterations which, in turn, establishes increased usability (Still & Morris, 2010). Low
fidelity prototyping is “as powerful as usability testing is, a paper prototype leverages that
power one step further by letting you gain all that knowledge even earlier in the project,
before implementation” (Snyder, 2003). Several recent studies have found that low
fidelity prototypes provide equivalent results to fully operational products (Sefelin et al.,
2003; Virzi et al., 1996; Catani and Biers, 1998; Wiklund et al., 1992; Walker et al.,
2002).
If a designer presents an idea that has been significantly polished and presented
well, yet still lacks substance, they are less likely to receive genuine objective feedback
from their peers, for fear of offending the presenter. Many times, too much focus is
placed on colors, fonts, layout, and other unimportant properties of the product and not
enough focus on the high-level problems (Snyder, 2003). Low fidelity prototyping allows
designer to change direction easily and facilitate collaborative design discussions (Still &
Morris, 2010). In a design meeting, collective feedback is more likely to be given by the
team as the idea is being sketched and drawn before the entire group, rather than
unveiling a fully-dressed, individual idea.
3
It is important to have team collaboration when creating a design (Still & Morris,
2010). This can be done by having designers meeting and sketch on a whiteboard or
paper, or across the country on a conference call. It is much more difficult to create paper
prototypes with team members across the country. Therefore, there are several wire
framing programs available that can be used to share ideas in an asynchronous fashion.
These programs can also be utilized in real time where people are sitting in same room
working together. However, this may be difficult if designers do not have access to an
interactive whiteboard, or a projector screen where all team members are able to see the
screen simultaneously.
Some examples of such wire framing software include; Gliffy, Lovely Charts,
Just in mind, Pidoco, Axure, Balsamiq, Lucid Chart, Flair Builder, Just Proto,
Mockingbird, and MockFlow. The programs each have their own unique style and
functions to create a prototype. Every program has customizable widgets, some more
than others, that are used to create the dynamic prototypes without any coding and vary in
degree of customization. Most of the programs create only the layout of the design.
However, Pidoco is a completely web based application that allows users to create and
share clickable wireframes. The software can be used to visualize and communicate
website or software ideas and supports collaboration among designers.
Balsamiq is used to create wireframes that look like sketches so that the
stakeholders will not get distracted by little details and can focus on the design. This is
beneficial in presenting designs that do not appear to be fully polished in hopes to
increase the feedback of the design team. Just Proto is the first of its kind and is used to
create network and desktop applications. Every program is designed for collaboration and
4
has a function to export and save the designs. MockFlow is especially directed towards
team collaboration and allows multiple users at different locations around the world to
simultaneously work on a design.
It is not in a designer’s best interest to devote large amounts of time and resources
becoming accustomed to a piece of software when they rarely ever create prototypes.
Paper prototyping is beneficial for companies that do not typically create software based
prototypes, reducing the training needed for using a computer program. Since low
fidelity prototypes are “constructed with paper and pencil or simple storyboard tools, low
fidelity prototypes require little or no programming skill on the part of the designer”
(Rudd, Stern, & Isensee, 1996). Paper prototyping requires no training at all and “invites
people with little-to-no technical background into the design process” (Medero, 2007).
However, wire framing software is beneficial for companies who create prototypes on a
regular basis.
Current research suggest that the “the tools for building a paper prototype are
simple, requiring paper, index cards, markers, adhesives, and other office supplies”
(Rudd, Stern, & Isensee, 1996), which indicates that the tools necessary for paper
prototyping are more simplistic than other tools, such as wireframing software. However,
current products on the market today do not include these items. UXPin portable kit for
web is a paper prototyping kit that includes sticky notes of commonly used widgets. See
Figure 1. The UXPin includes several commonly used UI elements in sticker formats but
does not include most of these suggested resources.
5
Figure 1: Items Included in the UXPin Portable Kit for Web
Magnetic prototyping is another form of low fidelity prototyping utilizing
whiteboards and magnetic UI elements. The magnets can be written on, erased, and
moved across the dry-erase board to quickly draft prototypes. The magnets come in white
and blue; blue representing clickable areas and white, representing the area for text. See
Figure 2.
Figure 2: GuiMags Prototyping Magnets
6
Both the UXPin and the magnetic prototyping do not include the suggested
resources for low fidelity prototyping. Snyder (2003), recommends having all of the tools
readily available at all times in a portable manner. This will reduce the stress of having to
frantically search for them minutes before a meeting. Therefore, the idea for a low
fidelity prototyping kit emerged.
Current Study
This study will be looking at the design of a low fidelity prototyping kit that
encompassed several of the suggested resources in a portable design that can be
transported quickly from one location to the next... It allowed for easy transition from
low to high fidelity prototyping. Once a meeting has ended, the designer can rip off the
paper, bring it to their desk, and create a higher fidelity prototype. This is not an option
when working on stationary whiteboards. The low fidelity prototyping kit can be taken
anywhere even if there is no access to a computer and displayed to everyone in the
meeting. When suggesting input, a can user can simply a pen and start sketching as
opposed to explaining their ideas.
This study aims to investigate if a low fidelity paper prototyping kit is more
beneficial than wire framing software in synchronous design meetings and while working
independently. It aims to determine which form of design tool is preferred by individuals
and groups. Lastly, it investigates if paper prototyping produces increased creativity over
wire framing software as suggested through the results of a 7-point Likert scale of study
participants – designers and reviewers
The initial design of the low fidelity prototyping kit was created by Robert
Schumacher at User Centric, Inc. It was then redesigned by three interns; Amanda
7
Schmutzler, Rylan Clark, and Sarah Hoffman. The redesign was based on several
interviews of usability specialists at User Centric, Inc. The interviews asked questions,
such as describing a typical prototyping session end-to-end, to give suggestions to
improve current prototyping tools. From the suggestions given in the interviews, the kit
was redesigned and then recreated for the purpose of this study. See Appendix A for the
interviews.
Hypotheses
The low fidelity prototyping kit was created to promote team collaboration and
therefore, it is believed that participants working in groups (two or more) will have a
stronger user preference for the low fidelity prototyping kit than a wire framing program
such as MockFlow. Additionally, although MockFlow is directed towards collaborative
design, it is believed that participants working individually will have a stronger user
preference with MockFlow, wire framing program. Furthermore, since the low fidelity
prototyping kit enables the user to freely create their design by hand without any
technical restrictions, it is suggested that there will be increased creative ability using the
low fidelity prototyping kit in comparison to MockFlow. Lastly, there should be
increased usability using the low fidelity prototyping kit designs to create a website in
comparison to MockFlow.
8
Study 1: Part 1
The first part of Study 1 consisted of a series of questionnaires and a two usability
tests. One purpose of this study was to create a baseline of participants’ satisfaction with
using the low fidelity prototyping kit and MockFlow. Its main purpose was to identify, in
a laboratory setting, the usability problems associated with the low fidelity prototyping
kit.
Method
Participants
In the spring term of 2011, 25 undergraduate students from California and
Arizona accredited colleges participated – participants included 10 males and 15 females
with a mean age of 23.8 and a mode of 19. Of these participants, 11 participated as a
psychology course requirement at California State University, Northridge. The remaining
13 volunteered and received no compensation. Participants were divided into two groups
with 13 participants tested individually and 12 participants tested in groups of two. All
participants have never created a prototype before.
Materials
There were three phases of the study: a pre-test questionnaire, a usability test with
two parts and a post-test questionnaire. The pre-test questionnaire was comprised of two
types of questions: questions based on a 7-point Likert scale and open ended questions.
The usability tests examined a low fidelity prototyping kit and MockFlow. The
low fidelity prototyping kit includes a carrying case, removable double sided tape,
scissors to customize products, an eraser, a ruler for precision lines, graphing pencils to
allow for easy sketching, a pencil sharpener, pens, five colored dry erase markers with
9
erasers, twelve erasable colored pencils and four colored transparency markers as well as
transparency sheets. These allow the designer to be able to place them over the prototype
sketch their idea without making any permanent changes. The sheets can be easily erased
or removed. Each item in the kit was Velcro’d to the kit for easy access. A cloth was
provided for erasing the transparency sheets. They can also represent page layers without
cluttering the page.
The low fidelity prototyping kit incorporated three custom printed on 1.5” x 7”
sticky notes. One displayed radio buttons and another checkboxes. The third custom
printed sticky note displayed a text box and was 1”x7”. The labels on the sticky notes
were printed lightly so they could be written over. The notes only stated ‘text box,’
‘check box,’ and ‘radio button’ to let the user know where to write and give the purpose
for the sticky note and were removable.
The low fidelity prototyping kit also includes three custom cut Post-it™ notes
with grids printed on them to allow for easy drawing. The dimension 4:3 was chosen
because of its standard use in computer monitors, iPods, TVs, and many small LCD
displays. The dimension 6:4 was chosen because the iPhone and other Smartphone’s are
3:2 yet that is too small to easily draw an interface on, therefore the ratio was doubled in
size. The dimension 5:4 was chosen because this is another common aspect ratio for
medium to large format computer displays. In addition, the low fidelity prototyping kit
includes arrow flags (1/2"x1.7"), two sizes of Post-it™ page markers (1”x3” & ½”x2”),
two packs of canary colored Post-it™ notes (1.5”x2”), round dot labels in two different
sizes (1/4” & 3/4”), Avery file folder removable labels (2/3"x3-7/16") in four colors, and
Avery one red and one blue removable labels (2"x4"). Each of these items can be used to
10
represent a widget when designing a prototype. All items were removable to ensure that
they did not rip the paper if the designer decided to change its location. See Figure 3,
Figure 4, & Figure 5. On the back side of the kit is a dry erase pad which can be used to
draw and easily change ideas. See Figure 6.
Figure 3: Layout of the Low Fidelity Prototyping Kit
Figure 4: Layout of the Low Fidelity Prototyping Kit
11
Figure 5: Front of the Low Fidelity Prototyping Kit
Figure 6: Whiteboard Located on the Back of the Low Fidelity Prototyping Kit
The kit is equipped with an instruction manual and a key indicating how and
when to use widgets and assist designers in determining what a specific widget looks like
as well as allowing for a more diverse use of the kit. In addition, the kit includes a list of
Principles of Good User Experience Design which allows users to have guidelines to
match their design with. See Appendix B.
12
Part one of Study 1 also examined an online wire framing software titled
MockFlow. This is a program that that can be used to create flowcharts, network
diagrams, floor plans, organizational charts, SWOT analysis, wireframes, UML, business
process modeling, web site mapping, or a Venn diagram. This specific wire framing
software was chosen because it was the most similar to the low fidelity prototyping kit.
Users were given a blank screen and a list of widgets that could be dragged and placed on
the screen. Many of the widgets included in MockFlow were also those explained in the
Widget Key provided in the low fidelity prototyping kit. The program was used on a
standard computer workstation with a 19” inch monitor. See Figure 7.
Figure 7: MockFlow Wireframe Example
Procedure
There were two conditions tested, the Control condition and the Modified
condition. Both conditions were identical in procedure but the number of participants
working at one time varied between them. The control group members worked with one
other participant and the modified group worked individually.
13
A pilot study was conducted to reveal deficiencies in the design of the low fidelity
prototyping kit and the procedure of the experiment. Two participants were tested in the
control group and two in the modified group. All four participants suggested the addition
of a ruler into the low fidelity prototyping kit. Therefore, a ruler was added to the low
fidelity prototyping kit.
At the beginning of part one of Study 1, each participant was given an
information sheet explaining the details of the study and then asked to complete a pre-test
questionnaire asking general demographics and whether or not the participant has created
a website or prototype before. See Appendix C.
Each participant completed one usability test with two tasks; one using the low
fidelity prototyping kit and one for MockFlow. Each task lasted approximately 40
minutes. Participants were randomly assigned to which prototyping tool they used first.
For each prototyping tool, the researcher gave a short tutorial explaining their purpose
and how it is used. Participants were given an information packet explaining that they a
working for a design company and have been told to create a website for their clients.
The packet explained that the client wished to have four aspects within the website; home
page, about us, services, and contact us. The packet also included general information
about the company. See Appendix D.
The instructions stated:
“You are currently working for a design team and have been asked to create a
prototype for a website for a particular client. The client is Candice Freed,
owner of Freed and Associates Physical Therapy. Mrs. Freed knows which
aspects to the site she wishes to include, she is simply unsure how they would like
to set it up. The title of the site is Freed and Associates Physical Therapy and the
logo is shown below. Please create a website to the best of your ability with the
information the client has provided.”
14
Once the participant completed their first design, they were asked to use the other
prototyping tool to complete the same task. They were told that the design did not have
to be the same as their previous one and were unable to look at their first design while
working on the second one. The tasks for the low fidelity prototyping kit and MockFlow
were identical, except participants were given an electronic copy of the information
packet when using MockFlow. This allowed them to copy and paste information in the
document. It was decided that participants would have access to an electronic copy of the
packet because it is most similar to a real world situation.
During the design process, the researcher asked the participant “to please explain
your thought process and tell me what you are doing while you are doing it.” In the event
that the participant was unsure what to do, the researcher gave the participant
approximately 30 seconds to attempt to resolve the problem before asking, “What is your
thought process right now?” Participants were given 40 minutes to complete each design
and were prompted every five minutes indicating how much time they had remaining. In
the event participants completed their prototype before the allotted time, they informed
the researcher and were instructed to begin the next design. Pictures were taken of each
design for the next phase of the study. Finally, participants will be asked to complete a
post-test questionnaire comprised of open ended questions, yes/no questions, and
questions based on a 7-point Likert scale. See Appendix E. Participants were thanked for
their participation and debriefed. See Appendix F.
Scoring
All scoring was completed by the principal researcher; done by analyzing the pre
and post-tests given to the participants. For the low fidelity prototyping kit, the researcher
15
observed and took note whether or not participants used an item. All participant scores
were individually examined case by case. Data was collected free of any identifying
information and scored anonymously.
Results
A factor analysis was conducted to determine reliability and for analysis of the
survey as a whole. The survey was seen as reliable to an extent that the Cronbach’s Alpha
was .745. A repeated measures ANOVA was conducted to determine the difference in
creativity and usability between the low fidelity prototyping kit and MockFlow. No
significance was found. In addition, 96% of participants would recommend the low
fidelity prototyping kit while 88% of participants would recommend MockFlow.
A repeated measures ANOVA was conducted to determine usability of the low
fidelity prototyping kit in comparison to MockFlow. No statistical significant was found.
However, participants working in a group had a slightly higher rating of usability for the
low fidelity prototyping kit and MockFlow in comparison to the participants working
individually. See Figure 8, Table 1.
Figure 8: Marginal Means of Perceived Usability
16
Question
How satisfied were you with the OVERALL
PRESENTATION of the low fidelity prototyping kit?
How easy to use was the low fidelity prototyping kit?
How easy to understand were the INSTRUCTIONS for
the low fidelity prototyping kit?
How satisfied did you feel with your DESIGN using the
low fidelity prototyping kit?
Did you enjoy your experience using the low fidelity
prototyping kit?
How satisfied were you with the OVERALL
PRESENTSATION of MockFlow?
How easy to use was MockFlow?
How easy to understand were the INSTRUCTIONS for
MockFlow?
How satisfied did you feel with your DESIGN using
MockFlow?
Did you enjoy your experience using MockFlow?
Group
5.83
Individual
5.62
6.50
6.00
6.07
6.64
5.25
5.23
6.00
5.31
5.58
5.23
6.25
6.45
5.31
5.15
5.42
5.54
5.58
5.46
Table 1: Usability Rating – Subjective Participant Mean Rating of the Low Fidelity
Prototyping Kit and MockFlow (Based on 7-point Likert scale)
There was no statistical significant difference in how the participants in the group
setting and participants in the individual setting rated the instruction packet for the low
fidelity prototyping kit. Of the 25 total participants, two indicated that they did not use
the instructions (6.32), twelve did not use the Widget Key (5.62), and eleven did not use
the Principles of Good User Experience Design (5.50). The subjective mean rating was
based on those participants who expressed that they did in fact use the materials. See
Figure 9 & Table 2.
17
Figure 9: Marginal Means of Usability of the Low Fidelity Prototyping Kit Instruction
Packet
Question
How easy to understand were the INSTRUCTIONS for the low
fidelity prototyping kit?
Group
6.00
Individual
6.64
How helpful was the WIDGET KEY for the low fidelity
prototyping kit?
5.67
5.57
How helpful were the PRINCIPLES OF GOOD USER
EXPERIENCE DESIGN for the low fidelity prototyping kit?
5.43
5.57
Table 2: Usability Rating – Subjective Participant Mean Rating of the Low Fidelity
Prototyping Kit Instructions (Based on 7-point Likert scale)
A between subjects ANOVA was conducted to compare the effect of being in a
group or working alone for both the low fidelity prototyping kit and MockFlow.
Regardless if a participant worked in a group or individually, most participants expressed
the desire to work in a group when asked what they prefer if they were to complete the
task again F(1,22) = 12.99, p,.05, SE = 5.21. On a 7-point Likert scale, the mean rating
18
for wanting to work in a group for participants working in a group was 5.63, participants
working individually mean rating was 3.25. See Figure 10.
Figure 10: Marginal Means of Participant Preference to Work in a Group vs.
Individually
It was found that participants thought that they were able to be more creative
using the low fidelity prototyping kit (mean= 5.79) vs. MockFlow (mean=5.57) for both
participants working in a group and individually. See Figure 11 & Table 3.
Figure 11: Marginal Means of Perceived Creativity
19
Question
How CREATIVE of an individual are you?
Did you feel that the low fidelity prototyping kit allowed you to
express your CREATIVITY?
Did you feel MockFlow, allowed you to express your
CREATIVITY?
Group
Individual
5.33
5.42
5.46
5.31
4.67
5.00
Table 3: Usability Rating – Subjective Participant Mean Rating of Creativity
(Based on 7-point Likert scale)
In a post-test open ended response asking “What specifically did you like/dislike
about the low fidelity prototyping kit,” there were two common themes found; the low
fidelity prototyping kit was well organized and fostered creativity. See Table 4.
Well Organized
Fostered Creativity
“I liked the organization and it was easy to
do” (Participant 17).
“I liked the organization of the kit.
Everything on the kit was right in front of
me to use. Also, I had many ways to try to
design it with the transparency. There
were many tools for me to use. I enjoyed
this kit” (Participant 2).
“I liked all the tools and how organized
everything was” (Participant 5).
“I liked the organization and the options it
provided. It made it easy to be creative
with the design of the layout" (Participant
6).
“It was very well organized” (Participant
9).
“I enjoyed the fact that I could express my
creativity somewhat” (Participant 19).
“I liked the fact that you can become very
creative with this kit. There were so many
options of color, size, font, images, etc. to
use. I enjoyed it because it allowed me to
be able to create what I wanted and how I
wanted” (Participant 25).
“I liked that you can be creative and put
your own style to it: (Participant 22).
“It really allows you to express your
ideas. It’s like a draft board, you can get
all of your ideas out before you actually
create the website” (Participant 21).
“I was able to express my creativity and
how I felt the website should look”
(Participant 24).
“There are a lot of options available to be
as creative as I want to be” (Participant 1).
“I liked the organization of the kit”
(Participant 23).
“I liked that you are able to be as creative
as you'd like” (Pparticipant 7).
Table 4: Themes Found in the Original Design of the Low Fidelity Prototyping Kit
20
Participants were also asked “What specifically did you like/dislike about
MockFlow?” It was found that participants liked that it was faster to complete, more
realistic, and it was easy to use. However, participant one, three, and eight stated that they
prefer the low fidelity prototyping kit over MockFlow. See Table 5.
More Realistic and
Faster to Use
“MockFlow was a lot
faster with less manual
work. It was easier to use
but a bit harder to express
my creativity”
(Participant 19).
“When you create a
website it is easier to be
able to see an example of
what the website will look
like. This is a great tool to
see a draft or copy of
one's website”
(Participant 21).
“MockFlow was a lot
faster with less manual
work” (Participant 19).
“I liked how it gave me
more realistic/clearer
view of the website”
(Participant 16).
“It looked more like an
actual website which
made me be able to see
how it will look in the
end” (Participant 9).
“It was a lot faster”
(Participant 13).
Ease of Use
“I liked how easy it was to
create a layout. It reminded
me of InDesign, which I am
familiar with, so it was
relatable” (Participant 6).
Preference for the Low
Fidelity Prototyping Kit
“I prefer the low fidelity
prototyping kit because I like
to stretch my idea over
jumping into a computer
program for my
ideas/designs” (Participant 1).
“It was very easy to use.
Lots of features and
elements to choose from.
The components were very
basic.” (Participant 14).
“I didn't like that it was all
words/outlines/black &
white. The manual version
was better because of bright
colors, different shapes. This
didn’t seem to really offer
that” (Participant 8).
“Very easy to follow. Many
tools to use/options”
(Participant 7).
“I liked that it was easy to
use” (Participant 13).
“It wasn't as personable nor
as easy to use” (Participant
3).
“I liked the paper version
better” (Participant 15).
“It was pretty easy to figure
out and had many different
options” (Participant 11).
“The computer version was
harder to figure out than the
paper one” (Participant 11).
“Great and easy to use
especially for someone that
does not like technology”
(Participant 17).
“I like how easy it was to
make” (Participant 18).
Table 5: Themes Found in Study 1: Part 1 for MockFlow
21
There were a total of 19 designs made in part one of Study 1. To make these
designs participants used several items in the low fidelity prototyping kit. See Table 6.
Item in Low Fidelity Prototyping Kit
Number of
Participant//Participant Groups to
Use Item out of 19
4
2
1
2
5
6
2
0
3
7
3
7
2
2
6
7
7
9
10
4
17
8
3
2
2
14
1
Text box sticky note
Radio button sticky note
Check box sticky note
Avery file folder labels (2/3”x3-7/16”)
Avery red and blue labels (2”/4”)
™ with grids (4”x3”)
Post-it™ with grids (5”x4”)
Post-it™ with grids (6”x4”)
Post-it™ page markers (1”x3”)
Post -it™ page markers (1/2”x2”)
Canary color Post-it™ notes (1.5”x2”)
Arrow flags (1/2”x1.7”)
Assorted removable dots (1/4”)
Assorted removable dots (3/4”)
Cloth for erasing
Color pencils
Dry erase markers
Eraser
Graphing pencil
Pencil sharpener
Pen
Transparency markers
Transparency sheets
Whiteboard
Removable double sided tape
Ruler
Scissors
Table 6: Number of Participants/Participant Groups to Use Item in the Low Fidelity
Prototyping Kit
22
Study 1: Part 2
Part two of Study 1 used a survey analyze the designs of part one of Study 1. The
first goal was to determine how creative the designs using the low fidelity prototyping kit
were in comparison to the designs using MockFlow. The second goal was to determine
the level of usability of the designs.
Method
Participants
Participants included 50 undergraduate students from California and Arizona
accredited colleges, recruited by a family member of the researcher, and received no
compensation. Included were 14 males and 36 females with a mean age of 23.9 and a
mode of 19.
Materials
A survey was used to analyze the usability and creativity of the prototypes created
in part one of Study 1. The survey consisted of 17 sets of prototypes, five from the
control group and twelve from the modified group. Two of the designs in Study 1, one
from the control group and one from the modified group, were not used in part one of
Study 1 because they were illegible. The designs made on MockFlow were labeled
prototype A and the designs using the low fidelity prototyping kit were labeled prototype
B.
Procedure
Participants were sent an email with the link to a survey monkey survey. Once the
link was opened, participants were informed that they will be presented with seventeen
23
sets of prototypes and to answer the questions preceding each set. Each page on the
survey displayed two prototypes designed by the same participant or group of participants
in part one of Study 1; one designed using the low fidelity prototyping kit and one using
MockFlow. The survey took approximately 15 minutes to complete. See Figures 12
through 19 for an example of a set of prototypes.
Figure 12: Participant 14 Low Fidelity Prototyping Kit Home Page
24
Figure 13: Participant 14 Low Fidelity Prototyping Kit Services Page
Figure 14: Participant 14 Low Fidelity Prototyping Kit About Us Page
25
Figure 15: Participant 14 Low Fidelity Prototyping Kit Contact Us Page
Figure 16: Participant 14 MockFlow Home Page
26
Figure 17: Participant 14 MockFlow Services Page
Figure 18: Participant 14 MockFlow About Us Page
27
Figure 19: Participant 14 MockFlow Contact Us
Preceding each set of prototypes, participants were presented with a definition of
creativity. Creativity is defined as the “tendency to generate or recognize ideas,
alternatives, or possibilities that may be useful in solving problems, communicating with
others, and entertaining ourselves and others” (Franklin, 1994). They were then asked
which prototype was more creative, prototype A, prototype B, they are equally creative,
or neither is creative. The second question asked “If given prototype A, would you be
able to create a website from this design?” Participants were given a 7-point Likert scale
to rank their decision from strongly disagree to strongly agree. Participants were asked
the same question for prototype B.
28
Results
It was found that there was no statistical significant difference in whether
participants would be able to use the designs created in part one of Study 1 using the low
fidelity prototyping kit (mean=5.32) vs. MockFlow (mean=5.01) to make a website. See
Figure 20.
Figure 20: Participant Mean Rating on Whether They Would Be Able to Use the Designs
Created in Study 1: Part 1 to Make a Website
It was also found that of 28% of participants thought that the designs made in part
one of Study 1 using the low fidelity prototyping kit were the most creative, 31% that the
designs using MockFlow were the most creative, 32% thought that they were equal, and
9% that they neither of the designs were creative.
29
Discovered Problems and Proposed Solutions
Information gained from Study 1 has led to changes in the low fidelity
prototyping kit. It was found that there is no significant statistical difference in the overall
usability of the low fidelity prototyping kit in comparison to MockFlow. Participants
believed that they are equal in usability. Part one of Study 1 uncovered that there was a
significant statistical difference in a participant’s preference to create designs in a group
for both the low fidelity prototyping kit and MockFlow.
Participants who worked in a group had a slightly higher rating of usability for the
low fidelity prototyping kit and MockFlow in comparison to the participants who worked
individually. Participants who worked in a group thought both, the low fidelity
prototyping kit and MockFlow were slightly more usable than participants who worked
individually. This did not support one of the hypotheses, which stated that participants
working individually will have a stronger user preference with MockFlow. Participants
working in a group will have a stronger user preference with the low fidelity prototyping
kit which supported the second hypothesis. There was a slight increase in perceived
usability between the two groups. Participants who worked individually and in a group
thought that they were able to be more creative using the low fidelity prototyping kit.
When asked to rate the designs on creativity, participants in part two of Study 1 thought
that the designs created using MockFlow were slightly more creative. This did not
support the third hypothesis which stated that there will be increased creative ability
using the low fidelity prototyping in comparison to MockFlow. There was thought to be
increased creativity by the designer but not by the perceived user.
30
A slight increase was found on whether a user would be able to create a website from
the designs created using the low fidelity prototyping kit in comparison to MockFlow.
This was supported in the fourth hypothesis which stated that there will be increased
usability using the low fidelity prototyping kit designs to create a website. Despite noting
a small increase, it was not significant.
In the post-test open ended response, participants were asked “What specifically did
you like/dislike about the low fidelity prototyping kit?” The two common themes found
were that the low fidelity prototyping kit was well organized and fostered creativity. This
is a very important aspect and “information should be structured in an organized manner
to improve visual search and usability” (Comber & Maltby, 1997). The items were
organized according to their use and similar items were grouped together. The same
concept of organization will be used in the new design.
Participants were also asked “What specifically did you like/dislike about
MockFlow?” Participants liked that it was faster to complete, more realistic, and was
easy to use. Several participants stated that they prefer the low fidelity prototyping kit.
Participants liked specific aspects about each prototyping tool, but there was not a
significant difference between their perceived usability.
Based on the observational analysis of the low fidelity prototyping kit in Study 1, it
was determined that the kit would benefit from a redesign. Any item used by two or less
participants/participant groups would be removed from the kit. The study yielded that the
most commonly used items were pens and a ruler and remained in the kit. Other items
were deemed not useful and removed due to pace constraints. The items removed
include:
31









Radio button sticky note
Check box sticky note
Avery file folder labels (2/3”x3”-7/16”)
Post-it™ with grids (5”x4”)
Post-it™ with grids (6”x4”)
Assorted removal dots (1/4” and 3/4”)
Whiteboard
Removable double sided tape
Scissors
Two of the items being removed from the kit are similar to those found in UXPin;
radio button sticky notes and check box sticky notes. This supports the idea that an
improved low fidelity prototyping kit may need to be created.
The revised low fidelity prototyping kit will be a more condensed version of the
original to increase portability. All of the unnecessary items will be removed and relevant
items will remain. The original version was made from a 27”x19.5” Post-it-easel-pad and
the revised version will be made from a 24”x16” foam board. See Figure 21.
Figure 21: Revised Kit on top of Original Version for Size Comparison
The paper used for the design is another important aspect. It should be “larger than
8.5x11 paper…prototypes are usually somewhat larger than life size” (Snyder, 2003).
32
The paper size of the version of the low fidelity prototyping kit was 20”x23” and the
revised version will be 22.5”x14”. Both are acceptable sizes but the revised version had
to be condensed to fit into the compacted kit.
When creating a low fidelity prototyping kit, it is important to “offer plenty of paper,
pens, and other materials for anyone to grab and use” (Medero, 2007). Each of the items
was made easily accessible by attaching them to the kit using Velcro. This proved to be
an effective method in the original design of the low fidelity prototyping kit and will not
be changed in the revision.
Current research suggests including fine point markers used for hand-drawing the
prototype especially inexpensive colored art markers because they encourage creativity
(Warfell, 2009 & Snyder, 2003). Low fidelity prototypes “are created to show visuals,
including colors, icons, and the placement of controls… and will show design direction,
but will not provide details such as navigation and interaction” (Rudd, Stern, & Isensee,
1996). A pack with twelve colors of color pencils and ten colors of fine tip markers were
included in the revised kit. Color can “effectively be used to draw attention to a certain
area of the page, a row in the table, a word in a paragraph, or even a single letter in a
word” (Proctor & Vu, 2005, p.123). It is commonly “used in data visualization in order
to convey a wide variety of types of information: metric values, pattern, extrema,
emphasis, and others” (Rheingans, 1999). Highlighters, in two colors, blue and yellow
were added to the kit because highlighters are great tools for making a “highlight of the
currently selected item” (Snyder, 2003).
Transparency sheets remained in the redesigned kit. According to Warfell (2009) they
are one of his “favorite little tricks…they’re incredibly flexible…I use them for a number
33
of effects, including hover states for navigation, highlighting input fields that have focus,
and overlay effects” (Warfell, 2009, p.123). Transparencies can be placed over the
prototype to “allow the user to "type" (handwrite) data without altering the prototype”
(Snyder, 2003).
According to Snyder (2003), “if users are going to be writing on the prototype you
need to make the edit fields large enough to accommodate their writing” (Snyder, 2003).
The size of the text box on the text field sticky note will be enlarged. Correction fluid is
beneficial for small changes to the prototype, such as wording. Since prototyping sessions
are usually done rapidly, it is best to use correction tape that does not require a wait time
(Snyder, 2003). White-out tape will be added to the low fidelity prototyping kit.
Post-it™ notes are a great tool for prototyping. They are “handy for a number of
things like displaying changing states in tiles on the page, highlighting selected items on
a screen, or dialog windows” (Warfell, 2009, p.115). The kit included two packs of
canary color Post-it™ notes (1.5”x2”). Since only three participants/participant groups
utilized this tool, one of the packs will be removed. Index cards are also a great tool that
can be used for “a variety of things, like dialog windows, pop-up messages, drop—down
menus and other GUI widgets…provide the kind that are lined on one side and blank on
the other…the subtle blue lines help when you’re writing dialog messages” (Warfell,
2009, p.115). Instead of using index cards, the low fidelity prototyping kit included
custom cut Post-it™ notes with grids on them and Avery red and blue labels (2”x4”).
This is useful because, unlike index cards, Post-it™ notes and labels are already sticky,
can be removed easily, and reduce one extra step of adding tape or glue.
34
Similar to Post-it™ notes, glue is beneficial for moving things around and showing
change in state while keeping elements of the prototype in place until the user is ready to
move them (Snyder, 2003 & Warfell, 2009, p.116). Glue sticks are the “magic that lets
you easily put together and take apart a paper interface” (Medero, 2007). A glue stick
will be added to the low fidelity prototyping kit.
In part one of Study 1, five participants suggested the addition of a stencil of
commonly used widgets. It was found that the company UI Stencils creates several
stencils for both cell phones and websites. A website stencil kit was added to the kit to
allow users to trace the widgets instead of having to hand draw them. See Figure 22.
Figure 22: Website Stencil Kit
There was no significant difference in how participants working in a group vs.
individually rated the instruction packet for the low fidelity prototyping kit. Of the 25
total participants two indicated that they did not use the instructions, 12 did not use the
Widget Key, and 11 did not use the Principles of Good User Experience Design. Eight of
these participants indicated that the instructions were too long. Participant 11 explained
“the instructions were too long and a bit overwhelming.” Participant seven stated that
she was “overwhelmed by the amount of information presented to me at first, but it was
35
fun and easy once I actually started working.” Participant three stated “there was way too
much information to read.” It became clear that the instruction packet needed to be
improved.
Several changes will be made to the instruction packet to improve its usability. The
paragraph explaining the purpose of the kit was removed from the list explaining what is
included in the kit and displayed on the kit itself. The paragraph will explain:
“The Low Fidelity Prototyping Kit is an essential tool for any designer. Utilizing the
aesthetic appeal of adhesive notes and custom-printed widget elements, it is a
welcome addition to any UX designer’s collection. The kit allows for multiple
designers (and clients!) to get involved in design process. The goal: provide a
portable design kit that can be transported and translated easily from a client’s office
prototyping session to home office, while remaining fully intact for easier transitions
into high-fidelity work.”
The title of the instructions will be changed from “How to use to low fidelity
prototyping kit” to “Features of the low fidelity prototyping kit.” This promotes improved
organization of the instructions and will only explain what is included in the kit,
suggestions of how to use each item, and how to remove an item from the kit.
The Widget Key and the Principles of Good User Experience Design will be
reference tools and are not part of the overall instructions. The explanation of the Widget
Key in the instructions will be removed because all of this information is in regards to
what is in the kit. The Widget Key will have a description at the top of the page to
describe its purpose. The paragraph will state:
“Purpose: Gives succinct instances of where a certain widget or element is best used.
Listed in alphabetical order with name, picture and an example of the widget used
highlighted in yellow.”
The instructions included in the low fidelity prototyping kit were long and
overwhelmed many of the participants. To reduce this and promote more use of the
36
instructions, users will be informed that there is only one page of instructions and the rest
is simply for reference. Columns have been used for both the instructions and the Widget
Key since they are more efficient than a single column for displaying text. The
information in the Widget Key will be condensed and chunked together in bullet points to
make the information more scanable.
Chunking is a “method of breaking down larger sequences of information into
smaller, more memorable chunks, and chunking increases the number of bits of
information that our memories can contain…chunking the instructions divides continuous
text into manageable units according to subject matter (Miller, 1956). By rewording the
Widget Key, it should increase its usability. It is suggested that “minimizing the length of
sentences can further aid in remembering the instruction steps while a user shifts
attention away from reading the instructions to the manipulating the device…long
sentences overload the memory system whereas short sentences do not (Hartley, 2004).
It is important to maintain consistency in the instructions. Consistency is explained as
“expressing the same thing the same way throughout the interface” (Nielsen, 1994). It
allows the user to predict where to locate information, reducing working memory load.
This was achieved by creating the Widget Key in alphabetical order to allow the user to
quickly find what they are looking for.
The Principles of Good User Experience Design will be displayed on the front of the
low fidelity prototyping kit. Its purpose is to describe principles that will help improve
the overall design and it may be beneficial if users are exposed to this first. See Appendix
G.
37
Study 2: Part 1
The information gathered in Study 1 lead to the creation and implementation the
new kit used in Study 2. The purpose of this study was to test the redesign of the low
fidelity prototyping kit. The procedure was identical to part one of Study 1, except all
participants were tested in groups. There was no significant difference between
participants tested individually vs. in a group and most participants expressed the desire
to work in a group when asked what they prefer if they were to complete the task again.
Therefore, in part one of Study 2 all participants were tested in groups of two.
Method
Participants
In the spring term of 2011, 32 undergraduate students at California State
University, Northridge, participated for credit in a psychology course. Participants
included 13 males and 19 females with a mean age of 19.9 and a mode of 19. None of the
participants had ever created a prototype before.
Materials
Part one of Study 2 tested the redesign of the low fidelity prototyping kit in
comparison to MockFlow. The redesign included a carrying strap, an eraser, a ruler,
graphing pencils, a pencil sharpener, pens, erasable colored pencils with twelve colors,
fine tip markers with ten colors, highlighters in two colors, white-out tape, glue,
transparency sheets, transparency markers in four colors, and a cloth for erasing the
transparency sheets. A removable 1”x7”custom printed sticky note with a text box
printed on it was also included. The word text box was printed lighter than the previous
kit to allow the user to be able to write over it while still understanding its purpose. Also
38
included was a custom cut 4”x3” Post-it™ notes with light grids, arrow flags (1/2"x1.7"),
two sizes of Post-it™ page markers (1”x3” & ½”x2”), canary colored Post-it™ notes
(1.5”x2”), Avery one red and one blue removable labels (2"x4"), and a stencil of the
most commonly used website widgets. The kit also included a revised instruction manual.
See Figure 23 & 24.
Figure 23: Front of the Revised Low Fidelity Prototyping Kit
Figure 24: Layout of the Revised Low Fidelity Prototyping Kit
39
Results
The study revealed that 96.9% of the participants would recommend the low
fidelity prototyping kit while 93.8% of participants would recommend MockFlow. A
repeated measures ANOVA was conducted to determine usability of the low fidelity
prototyping kit in comparison to MockFlow. No statistical significance was found. See
Figure 25 & Table 7.
Figure 25: Marginal Means of Perceived Usability
40
Question
How satisfied were you with the OVERALL PRESENTATION of the low fidelity
prototyping kit?
How easy to use was the low fidelity prototyping kit?
How easy to understand were the INSTRUCTIONS for the low fidelity
prototyping kit?
How satisfied did you feel with your DESIGN using the low fidelity prototyping
kit?
Did you enjoy your experience using the low fidelity prototyping kit?
How satisfied were you with the OVERALL PRESENTSATION of MockFlow?
How easy to use was MockFlow?
How easy to understand were the INSTRUCTIONS for MockFlow?
How satisfied did you feel with your DESIGN using MockFlow?
Did you enjoy your experience using MockFlow?
5.03
5.84
5.70
4.81
5.38
5.16
5.56
5.50
5.56
5.38
Table 7: Usability Rating – Subjective Participant Mean Rating of the Low Fidelity
Prototyping Kit and MockFlow (Based on 7-point Likert scale)
Of the 34 total participants two indicated that they did not use the instructions
(mean=5.70), 10 did not use the Widget Key (mean=4.95), and 11 did not use the
Principles of Good User Experience Design (mean=5.00). The subjective mean rating
was based on those participants who expressed that they did in fact utilize the materials.
See Figure 26 & Table 8.
41
Figure 26: Marginal Means of Usability of the Low Fidelity Prototyping Kit Instruction
Packet
Question
How easy to understand were the INSTRUCTIONS for the low fidelity
prototyping kit?
How helpful was the WIDGET KEY for the low fidelity prototyping kit?
How helpful were the PRINCIPLES OF GOOD USER EXPERIENCE
DESIGN for the low fidelity prototyping kit?
5.70
5.94
5.00
Table 8: Usability Rating – Subjective Participant Mean Rating of the Low Fidelity
Prototyping Kit Instructions (Based on 7-point Likert scale)
A slight increase was found in the preference to work in a group for both the low
fidelity prototyping kit and MockFlow. On a 7-point Likert scale, the subjective mean
rating for wanting to work in a group for the low fidelity prototyping kit was 4.88 and
5.03 for MockFlow. See Figure 27.
42
Figure 27: Marginal Means of Participant Preference to Work in a Group vs.
Individually
There was no significant difference in how participants rated their creativity while
using both the low fidelity prototyping kit (mean=4.72) and MockFlow (mean=4.78). See
Figure 28 & Table 9.
Figure 28: Marginal Means of Perceived Creativity
43
Question
How CREATIVE of an individual are you?
Did you feel that the low fidelity prototyping kit allowed you to express your
CREATIVITY?
Did you feel MockFlow, allowed you to express your CREATIVITY?
5.13
4.72
4.78
Table 9: Usability Rating – Subjective Participant Mean Rating of Creativity (Based on
7-point Likert scale)
In a post-test open ended response asking “What specifically did you like/dislike
about the low fidelity prototyping kit,” three common themes were discovered; the low
fidelity prototyping kit was well organized, fostered creativity, provided many tools to
create the design. See Table 10.
44
Well Organized
Fostered Creativity
Provided Many Tools
“I liked that everything
was very organized and
easy to use” (Participant
16).
“What I liked about the low
fidelity prototyping kit was
the creativity I got to
demonstrate” (Participant
6).
“I liked how it was
organized and everything
was there that we needed”
(Participant 5).
“I liked how organized it
was” (Participant 4).
“It was very easy to be
creative with the kit”
(Participant 23).
“The kit was helpful and
allowed one to use the tools
which were helpful like the
stencil which allowed us to
use icons found on a
website” (Participant 13).
“I like the material it came
with, especially the stencil”
(Participant 14).
“I like that it was very
organized” (Participant
12).
“Good organization”
(Participant 3).
“It allowed me to be
creative” (Participant 16).
“Very well organized”
(Participant 10).
“I liked the layout of the
kit, very organized”
(Participant15).
“Well organized”
(Participant 27).
“I liked that I was able to
be creative with my
design” (Participant 2).
“I really enjoyed using the
low fidelity prototyping kit
and it allowed me to
express my creativity”
(Participant 29).
“I liked that I got to be
creative” (Participant 31).
“I was able to show my
creativity” (Participant 25).
“I liked that it gives you all
the materials needed and I
liked the Velcro”
(Participant 8).
“I like that there was a lot of
tools given to us to design”
(Participant 9).
“Specifically I liked how
many tools were included in
the kit and they were
Velcroed on” (Participant
24).
“I liked how easy it was to
use and the tools you would
need were there”
(Participant 17).
“I liked it had a lot of usable
tools and minimal
limitations” (Participant 11).
“I liked the long white paper
which looked like the real
website and I liked the tips
and stencil” (Participant 1).
“Good accessibility to tools,
good range of tool options”
(Participant 7).
Table 10: Themes Found in Revised Version of the Low Fidelity Prototyping Kit
45
Participants were asked “What specifically did you like/dislike about
MockFlow?” It was found that participants liked the designs were faster to complete,
more realistic, easy to use, but lacked creativity. See Table 11.
More Realistic and Faster
to Use
“Using the computer was
easier to understand how
the design of the website
should look like. The layout
was easier to visualize”
(Participant 1).
“It was a lot faster
designing the website”
(Participant 2).
“I liked MockFlow because
it's easy to apply the
functions! Faster and
simple” (Participant 19).
“It was a little difficult to
get the hang of, but once I
learned how to use it, it was
fairly simple and quick”
(Participant 19).
“A bit better with visuals
than the prototyping kit”
(Participant 28).
“It was a lot easier and
faster” (Participant 32).
Ease of Use
Lack of Creativity
“It was easy to use not
hard to understand”
(Participant 5).
“It was a good computer
program but it was hard to
be creative” (Participant
4).
“It was simple to use”
(Participant 12).
“I didn’t like was the less
creative objects it had”
(Participant 6).
“MockFlow didn't have a
lot of colors. It was very
dull” (Participant10).
“It was easy to use. If one
had no experience in web
design it would not be
difficult to move things
around” (Participant 13).
“It was easy to use”
(Participant 15).
“I liked that everything
was easy to use”
(Participant 16).
“I liked that it was easy to
use” (Participant 20).
“I liked that MockFlow is
very simple to use”
(Participant 26).
"I liked that it was easy to
use, but I disliked that
there wasn’t much
creativity” (Participant
18).
“I could not be creative
with the computer version”
(Participant 14)
“Difficult to express
creativity” (Participant 3)
Table 11: Themes Found in Study 2: Part 1 for MockFlow
There were a total of 16 designs made in part one of Study 2. To make these
designs participants used several items in the low fidelity prototyping kit. See Table 12.
46
Item in Low Fidelity Prototyping Kit
Number of
Participant//Participant Groups to
Use Item out of 16
6
7
4
8
5
3
5
5
13
9
9
3
6
3
6
6
6
15
2
11
0
Text box sticky note
Avery red and blue labels (2”/4”)
Post-it™ with grids (6”x4”)
Post-it™ page markers (1”x3”)
Post-it™ page markers (1/2”x2”)
Canary color Post-it™ notes (1.5”x2”)
Arrow flags (1/2”x1.7”)
Color pencils
Fine tip markers
Eraser
Graphing pencil
Pencil sharpener
Pen
White-out tape
Transparency markers
Transparency sheets
Cloth for erasing
Ruler
Glue
Stencil
Highlighter
Table 12: Number of Participant Groups to Use Item in the Low Fidelity Prototyping Kit
in Study 2: Part 1
47
Study 2: Part 2
The second part of Study 2 tested the designs created in part one of Study 2. The
goal was the same as part one of Study 1 and aimed to determine how creative the
designs using the low fidelity prototyping kit were in comparison to those using
MockFlow. The study also examined the level of usability of both designs.
Method
Participants
Participants included 50 undergraduate students from California and Arizona
accredited colleges recruited by a family member of the researcher and received no
compensation. Included were 23 males and 27 females participated with a mean age of
19.3 and a mode of 19.
Materials
The survey consisted of sixteen sets of prototypes. The designs made on
MockFlow were labeled prototype A and the designs using the low fidelity prototyping
kit were labeled prototype B.
Procedure
The procedure was identical to that performed in part two of Study 1.
Results
It was found that participants indicated the designs created using MockFlow
(mean=5.76) in part one of Study 2 were better suited to create a website than those
created using the low fidelity prototyping kit (mean=4.94). See Figure 29.
48
Figure 29: Participant Mean Rating on Whether They Would Be Able to Use the Designs
Created in Study 2: Part 1 to Make a Website
The survey revealed that 39% of participants thought that the designs made in part
one of Study 2 using the low fidelity prototyping kit were the most creative, 30% thought
that the designs using MockFlow were the most creative, 22% thought that they were
equal, and 9% thought that they neither of the designs were creative.
49
Discussion
It was found that in both part one of Study 1 and part one of Study 2, there was no
statistical difference in the overall usability of the low fidelity prototyping kit in
comparison to MockFlow. This means that participants did not believe that they differed
in their level of usability. However, for both versions of the design, more participants
indicated that they would recommend the low fidelity prototyping kit than MockFlow.
Participants indicated that for both the low fidelity prototyping kit and MockFlow,
they preferred to work in a group. This is an interesting finding because prototyping is
directed towards collaboration amongst design teams. In part one of Study 2, a participant
indicated that “working in a group provided a better low fidelity prototype experience
because when two individuals bring multiple ideas to make the prototypes, results are
much better” (Participant 22). This is a significant observation when designing a
prototype because it is beneficial for both the designers and the end user to have the most
effective designs. Many designers work in teams, therefore it is advantageous for users to
have a preference to want to work in groups.
There was no significant statistical difference between the perceived ability to express
ones creativity when using the low fidelity prototyping kit or with MockFlow. In part two
of Study 1, when asked to rate the designs on creativity, participants indicated that the
designs created using MockFlow were slightly more creative than those created using the
low fidelity prototyping kit. In part two of Study 2, when asked to rate which designs
were more creative, it was suggested that the designs created using the low fidelity
prototyping kit were more creative. Therefore, the redesign of the low fidelity
prototyping kit increased the perceived creativity of the designs.
50
In part one of Study 1, participants were asked if they would be able to create a
website given the current design. There was a slight increase in whether users could
create a website from the low fidelity prototyping kit designs in comparison to those
made using MockFlow. This statistic changed in the second part of Study 2 and
participants indicated that they would be able to use the designs created using MockFlow
much more easily than the low fidelity prototyping kit. Therefore, the redesign of the low
decreased the perceived ability to use the designs to create a website.
Part one of Study 1 aims to examine the usability of the instructions packet included
in the low fidelity prototyping kit. It was initially found that, 8% did not use the
instructions, 48% did not use the Widget Key, and 44% did not use the Principles of
Good User Experience Design. After improvements were implemented, it was suggested
that these numbers should have gone down. There was only a slight reduction. In part one
of Study 2, 6.25% did not use the instructions, 31.25% did not use the Widget Key, and
34.4% did not use the Principles of Good User Experience Design. Although more
participants used the redesigned instruction packet, its perceived usability declined. It is
unknown as to why this decline took place and future research should investigate this to
determine what could have caused this outcome. See Figure 30.
51
Figure 30: Marginal Means of Usability of the Low Fidelity Prototyping Kit Instruction
Packet for Study 1 vs. Study 2
However, there were two common themes found that were consistent with the
initial design of the low fidelity prototyping kit and the redesigned version. Participants
indicated that it was well organized and fostered creativity. In the redesigned version, a
common theme found was that it provided many tools. This is an interesting finding
because many items were removed from the initial version. Four items were added to the
redesigned kit. These included highlighter, white-out tape, fine tip markers, and a stencil
of commonly known widgets. The highlighters were not a useful addition and no one
used this tool. The white-out tape was slightly more useful and three out of sixteen
participant groups used this tool. The fine tip markers and stencil were more beneficial
and were two out of three of the most commonly used items. Of the total 16 participant
groups, 13 used the fine tip markers and 11 used the stencil. Several participants
indicated that they enjoyed all of the tools provided, especially the stencil.
52
There were also common themes found when using MockFlow. Participants thought
that it was much faster and easier to use as well as more realistic than the low fidelity
prototyping kit. However, in part one of Study 1, a common theme found was that
participants preferred the low fidelity prototyping kit over MockFlow. In part one of
Study 2, a theme was that it lacked creativity. This is interesting because there was no
significant statistical difference between perceived creativity of the designs created using
the low fidelity prototyping kit in comparison to MockFlow. Future research needs to be
conducted to determine the reasoning behind this finding. More open ended questions
should be asked to examine what specifically makes MockFlow lack creativity and to
determine the difference between the two.
Practical Implications
Although the study produced unexpected results, such as there being no statistical
difference in usability or creativity as the hypothesis suggested, there are still practical
and useful implications. These positive implications revolve around the conclusion that
both the low fidelity prototyping kit and MockFlow, a post-release product currently used
by designers, were just as effective in creating prototypes as there was no statistical
difference between the two.
The low fidelity prototyping kit would be beneficial because current research
suggests that during a prototyping session, a designer should have items such as pens,
paper, Post-it™ notes, color pencils, markers, etc. No other product on the market
includes all of these items in a ready-to-go portable kit. Although few significant
differences were found in the usability between the low fidelity prototyping kit and
53
MockFlow the kit offers an alternative to using paper and pencil, or wire framing
software.
The low fidelity prototyping kit may also be used in conjunction with wire
framing software. Companies may use the wire framing software in environments with
distributed team members and the kit in face-to-face meetings.
The kit has a portable design that can be taken from one location to the next and
does not require any technology or power source. This would be beneficial for meetings
where the designer does not know what type of equipment is provided.
The kit also promotes team collaboration. Everyone is able to assist in the design
and physically draw out their ideas. It eliminates the restrictions imposed by software that
only provides specific items that may reduce innovation and creativity. Additionally,
there is also a low learning curve associated with the kit. Users do not need to take the
time to learn how to use the kit which translates into low investment which, in turn, saves
time and money. This would be extremely beneficial for companies who do not create
wire frames on a regular basis.
Limitations and Future Research
The study aimed to determine the usability of a low fidelity prototyping kit and
was performed on only undergraduate students. It would have been more beneficial to
test the kit on people in the field who would actually use this type of product. However,
none of the participants had ever created a prototype before and had a more indifferent
outlook on the study. The way they view the designs and the tools may be completely
different than a web designer or design professional. However, the low fidelity
prototyping kit is directed towards new designers who are not familiar with typical
54
prototyping tools. Future research should include both novice and experienced prototype
designers to test their differences. In the case that both enjoy and see benefit in the kit, it
will increase the validity of the study.
Future research should test the low fidelity prototyping kit in comparison to
another form of paper prototyping which would enable there to be a more even
comparison data. People may have a preference to design on a computer rather than by
hand which could have biased their judgment. If they had to create both prototypes by
hand, it could reduce the bias. Another study could also compare the low fidelity
prototyping kit to a computer program where you actually draw the designs onto a
computer. This way, both designs will be hand drawn, but one will utilize a more
advanced form of technology, helping to strengthen the preference for one version over
the other (paper vs. computer).
Research should be conducted using designs created by novice designers using
the low fidelity prototyping kit and using them to create an actual website. This will
determine if user, although a novice, is able to use the resources within the kit to pass
their designs onto a designer to create a website.
The study also failed to look at large group collaboration. It examined participants
working in groups of two, but did not look at what happens in larger settings. Design
teams can range from very few to several members on a team. It would prove valuable to
see if the kit works better or worse for larger or smaller groups of people.
The study was conducted in a lab setting with predetermined objectives which
could have skewed the results. Results may have varied had the study been conducted in
a real world setting where participants were creating a prototype for their own company
55
or one that they truly believed would be turned into a real website. Several participants
indicated their belief that their design was never going to be turned into a real website.
Since they thought that this was only an exercise and not ever going to be used in the real
world, it may have influenced their experience. Future research should test the low
fidelity prototype in a real world situation with an actual design team.
56
References
Catani, M.B., Biers, D.W., 1998. Usability evaluation and prototype fidelity: users and
usability professionals. In: Proceedings of the Human Factors Society 42nd
Annual Meeting, pp. 1331–1335.
Comber, T. & Maltby, J.R. (1997). Layout complexity: does it measure usability?
Proceedings of Interact '97 Conference on Human–Computer Interaction, 623–
626.
Franklin, R.E. (1994). Human Motivation 3rd Edition. Belmont, CA: Brooks/Cole
Publishing Co.
Hartley, J. (2004). Designing instructional and informational text. In: D.H. Jonassen
(ed.), Handbook of Research in Educational Communications and Technology
(2nd edit.) Mahwah: Lawrence Erlbaum Associates.
Medero, S. (January 23, 2007). Paper Prototyping. A List Apart. 231. Retrieved April 24,
2011 from http://www.alistapart.com/articles/paperprototyping/.
Miller, G.A. (1956). The magical number seven, plus or minus two: some limits on our
capacity for processing information. The Psychological Review, 63, 81-97.
Nielsen, J. (1994). Enhancing the explanatory power of usability heuristics. CHI '94:
Conference companion on Human factors in computing systems. 152-158.
Preece, J. (1994). Human-Computer Interaction. In Human-Computer Interaction (p.14).
Proctor, R.W. & Vu, K.L. (2005). New Jersey: Lawrence Erlbaum Associates,
Inc.
Publishers. Rheingans, P. (1999). Task-Based Color Scale Design. Proceedings Applied
Image and Pattern Recognition. SPIE. 35-43.
57
Rudd, J., Stern, K. & Isensee, S. (1996). Low vs. high-fidelity prototyping debate.
Interactions. 3,(1) (January 1996), 76-85.
Sefelin, R., Tscheligi, M., Giller, V., 2003. Paper prototyping – what is it good for? A
comparisonof paper- and computer-based prototyping. In: Proceedings of CHI,
pp. 778–779.
Snyder, C. (2003). Paper prototyping: the fast and easy way to design and refine user
interfaces. San Francisco: Morgan Kaufmann.
Still, B. & Morris, J. (2010). The blank-page technique: reinvigorating paper prototyping
in usability testing. IEEE Transactions on Professional Communication.
Virzi, R.A., Sokolov, J.L., Karis, D., (1996). Usability problem identification using both
low- and high-fidelity prototypes. In: Conference Proceedings on Human Factors
in Computing Systems: CHI 96, pp. 236–243.
Walker, M., Takayama, L., Landay, J., (2002). High-fidelity or low-fidelity, paper or
computer medium? In: Proceedings of the Human Factors and Ergonomics
Society 46th Annual Meeting: pp. 661–665.
Warfell, T.Z. (2009). Prototyping: A Practitioner’s Guide. New York: Rosenfeld Media.
Wiklund, M., Thurrot, C., Dumas, J., (1992). Does the fidelity of software prototypes
affect the perception of usability? In: Proceedings of the Human Factors and
Ergonomics Society 36th Annual Meeting: pp. 399–403.
58
Appendix A: Interviews with User Experience Specialist
Low Fidelity Prototyping Kit:
Interview Protocol
Name: Martin Ho
User Centric, Associate Director
Introduction
The purpose of this interview is to assess exactly which tasks are performed and tools are
needed to conduct a low fidelity prototyping session. We are developing a tool that will
be used to create paper-based prototypes for a variety of interfaces. As our target user,
your experience and expertise in this matter are of great interest to us.
Narrative
Let’s begin with a step by step narration of a typical prototyping session, regardless of the
type of interface.
How many colleagues are usually involved and what are their roles?
- Depends on the type of session
o 1) session in which client has no usability people on staff = 2 designers
from User Centric hired for wireframing  said in this case, the kit would
not be as applicable
o 2) session in which client involves team members (JAD = joint
application design sessions  collaborate with clients: developers,
stakeholders, internal designers all involved in the design solution
 The kit would be applicable here (everyone would have a tangible
piece to contribute)
What tools do you use? What are the essential elements of these tools?
- Tools used depends on the stage of the session
- Typically use dry erase board/markers (something that can be edited easily)
- Challenge: on a dry erase board, you can make changes instantaneously without
drawing anything over again (for the kit, we need something as fast-paced as a
dry erase board where we can make dramatic & big changes throughout the
design process)
* Kit needs to be very editable (as easy & as fast as drawing 3 or 4 versions of the
wireframe on a dry erase board, & robust enough to support multiple wireframes at
the same time)
* Have to avoid creating a kit that will cause designers or clients to make assumptions
about how something will look/how it’s developed
Please walk me through each step of the process, from introductions through final
layout and session conclusions.
1) Early stages – connect with client (& design team if they have one), begin
developing basic wireframe for use
59
2) Put into a tool to further refine the wireframe (not as many big changes here
a. Use software: Visio, Axure, Photoshop (maintaining major page elements
created in stage 1; it’s a more formal, electronic form of the interface)
3) Wireframes refined after user feedback (using the above programs), then a visual
designer comes in to refine it (becomes high-fidelity at this point)
Follow-up Questions
How do these sessions differ based on the interface you are developing? (Cell
phones, web sites, computer programs, displays for medical equipment, etc.)
- Not much change between interfaces
- With phones, there are not as many drop-down menus
- The kit does need to differ based on the interface
o It’s a good start to have varying qualities, but there’s a danger in
suggesting they’ll be so different  restrictive
Which interfaces have you worked with the most? What about User Centric?
- Worked with web applications the most (i.e. where you go online, access a tool,
allows more flexibility and complexity than a website  example: online payroll)
- Also worked with point of sales terminals (McDonalds ordering systems) &
information displays (like airport displays = arrivals & departures. An interface
where you get information but don’t interact with it directly)
Now, what do you feel is missing or needs improvement in your current prototyping
tools?
- From an application standpoint (like in Photoshop), it is very difficult to change
one item (i.e. changing the heading “About Us” to “About User Centric”) without
having the change each file in your wireframe that contains that title
- Need LOTS of paper (have to accommodate 4-6 page types minimum)
- Navigating from home page, to landing page, to catalog/cart/checkout pages, for
example
Can you prioritize the functions of an ideal prototyping tool would have?
- Overall organization of app
o Primary navigation (headings along top or left side of webpage),
secondary navigations (drop-down or cascading menus), and utility
navigations (help, login, etc.)
- Layout critical  site shell & page template, i.e. dividing the page up into
sections, like ads here, menus here, text there, etc. (very big picture, before you
even get to buttons)
o (how do we account for this in a wireframing tool?)
What are the most useful objects and controls needed for such a tool?
- Common physical phone features (physical buttons that go with the actual
command, like the 4-way controller button that appears on feature phones 
60
-
would help to have this as a “button” to put on page when looking at phone
interfaces)
o “Soft keys,” QWERTY keyboard  make these into Post-it notes to stick
onto interface, these would help the designers remember which button is
responsible for which option
Licensing purposes would restrict us from having interface look like IPhone or
Droid
“Smart” vs. “Feature” phones
How do these compare for differing interfaces, such as a website, cell phone, or
computer program GUI? Please feel free to suggest other interfaces this ideal tool
should accommodate. Which objects and controls are most interface-specific? Most
universal?
- See above
- Will have to survey designers to get their high & medium priority buttons
Specifics
Would gridlines help with organization & design? If so, which format would be
most useful (grids or just a few lines)?
- Gridlines would be great!
o Not like graph paper though  dotted & main gridlines
o How do we space these gridlines accordingly? How do we account for
scrollable pages from a scaling standpoint? (things that are “below the
fold”)
How effective do you think color coding the controls/objects would be (like yellow
for text, blue for video, etc.)?
- Could be helpful
o Keep in mind the big-picture layout  putting these big Post-it notes to
scale (like blue for menu headings, red for utility headings, etc.) would be
an issue with scissors = once I cut it, I can’t change it unless I start over
again (much less efficient than a dry erase board)
What is a good way to graphically represent layers, pages, and orientation within
the system? Transitions between layers/pages?
- Very hard, no easy way
- Problem: if you were to look at a drop-down menu (i.e. +Description is your title,
you click on the + and a lot of other text drops down, then it says –Description to
indicate that you’ve maximized the option)  how do we represent this within a
wireframe, other than doing 2 different pages?
o You’d have to identify what you want to hold constant, & what changes
on your 2nd page you make
61
How effective would using the objects found in Visual Basic 2008 be? (e.g., radio
buttons, text boxes, menu strips, etc.) What other resources would be useful for
drawing objects/controls from?
- Not familiar with Visual Basic
o Other resources we can look at: Axure, Visio
- People to talk to: Naseem, Ani, Jacob, Tom
62
Low Fidelity Prototyping Kit:
Interview Protocol
Name: Naseem Hasan
User Centric, Senior User Experience Analyst
Introduction
The purpose of this interview is to assess exactly which tasks are performed and tools are
needed to conduct a low fidelity prototyping session. We are developing a tool that will
be used to create paper-based prototypes for a variety of interfaces. As our target user,
your experience and expertise in this matter are of great interest to us.
Narrative
Let’s begin with a step by step narration of a typical prototyping session, regardless of the
type of interface.
How many colleagues are usually involved and what are their roles?
o Usually 2 – 3 colleagues.
What tools do you use? What are the essential elements of these tools?
o Whiteboard, different-colored markers, Post-it notes, whiteboard eraser,
paper, pencil.
o All materials allow for on-the-fly iterations
Please walk me through each step of the process, from introductions through final
layout and session conclusions.
 Informal brainstorming session designed to define application / site task flow
IA
 Define and sketch out application process flow or site map
 Define and sketch out primary page level wireframes and interactive elements
o Interactive elements: Menus, form elements, controls, buttons etc.
 Brainstorm to examine alternatives for proposed process flows, site maps or
wireframes.
 Decide on a proposed wireframes that will be mocked up at higher fidelity
Follow-up Questions
How do these sessions differ based on the interface you are developing? (cell phones,
web sites, computer programs, displays for medical equipment, etc.) Which
interfaces have you worked with the most? What about User Centric?
 The process applies regardless of interface type. Web / Software applications
may demand more complex interactions compared with informational websites.
 Web applications, POS Systems.
 User Centric has worked mainly on more complex data-rich web applications.
63
Now, what do you feel is missing or needs improvement in your current prototyping
tools?
 A more exhaustive set of interface components suited for data-rich applications
Can you prioritize the functions of an ideal prototyping tool would have?
 Allows rapid mock-ups and iterations
 Extensive GUI component libraries
What are the most useful objects and controls needed for such a tool?
 Form elements, tabs, tables, modal popups.
How do these compare for differing interfaces, such as a website, cell phone, or computer
program GUI? Please feel free to suggest other interfaces this ideal tool should
accommodate. Which objects and controls are most interface-specific? Most universal?
Specifics
Would gridlines help with organization & design? If so, which format would be
most useful (grids or just a few lines)?
o Few lines to indicate header, footer, left / right sidebar and 2 or 3 column
layouts.
How effective do you think color coding the controls/objects would be (like yellow
for text,
blue for video, etc.)?
o Would prefer black and white and then used color markers to apply own
color-coding.
What is a good way to graphically represent layers, pages, and orientation within
the system? Transitions between layers/pages?
o Layers can be indicated with dashed-line borders
How effective would using the objects found in Visual Basic 2008 be? (e.g., radio
buttons, text boxes, menu strips, etc.) What other resources would be useful for
drawing objects/controls from?
o Yes. Web 2.0 controls.
o Windows 7 widgets
o See Axure widget libraries
o Mobile device assets
64
Low Fidelity Prototyping Kit:
Interview Protocol
Name: Tom Green
User Centric, Associate Director
Introduction
The purpose of this interview is to assess exactly which tasks are performed and tools are
needed to conduct a low fidelity prototyping session. We are developing a tool that will
be used to create paper-based prototypes for a variety of interfaces. As our target user,
your experience and expertise in this matter are of great interest to us.
Narrative
Let’s begin with a step by step narration of a typical prototyping session, regardless of the
type of interface.
How many colleagues are usually involved and what are their roles?
What tools do you use? What are the essential elements of these tools?
Please walk me through each step of the process, from introductions through
final layout and session conclusions.
Follow-up Questions
How do these sessions differ based on the interface you are developing? (cell phones,
web sites, computer programs, displays for medical equipment, etc.) Which
interfaces have you worked with the most? What about User Centric?
o I have not done any prototyping sessions with participants. I’ve only
prototyped by ‘stitching together’ wireframes (using Fireworks) to create a
clickable artifact for testing.
Now, what do you feel is missing or needs improvement in your current prototyping
tools?
Can you prioritize the functions of an ideal prototyping tool would have?
What are the most useful objects and controls needed for such a tool?
How do these compare for differing interfaces, such as a website, cell phone, or
computer program GUI? Please feel free to suggest other interfaces this ideal tool
should accommodate. Which objects and controls are most interface-specific? Most
universal?
o For website, you need a
 browser frame to give it context and
 a scroll bar (maybe a hand control to suggest selection)
65






navigate menu pull downs
auto complete simulation (for search)
map controls to zoom, move (e.g. Google Maps)
Web 2.0 controls that give the ability to chat
share comments (think FBook)
video (youtube interface controls including ratings and advancing
through a video)
 provide feedback (not necessarily a form, but think about Pandora
where you give an object a thumbs up/down rating) ability to
collapse/expand navigation including accordion style (see
Apple.com) or the ‘plus signs’ to imply more information.
o For mobile, you need
 a scroll bar
 some icons to suggest gestures for touch screen (a swiping gesture
and pinching gesture, for example). Ask Mike Murphy about this.
 Some of the above Web 2.0 controls I mentioned above.
o For program GUI
 pagination controls, list boxes, dropdown lists, radio buttons and the
usual Web 1.0 type things
Specifics
Would gridlines help with organization & design? If so, which format would be
most useful (grids or just a few lines)?
o This is me, but the best you can to keep things organized, the better. I’m
not suggesting you go overboard but I grid would be ideal especially for
pages with many controls. The grid can be faint and just serve as a guide
for those involved.
How effective do you think color coding the controls/objects would be (like yellow
for text, blue for video, etc.)?
o Very effective but use subtle color variations again to guide those
involved. Don’t make it obnoxious. 
What is a good way to graphically represent layers, pages, and orientation within
the system? Transitions between layers/pages?
o For layers, consider making the top layer color and the layers below in a
faint gray color. The layers below would have a few color states (one
when they are on top and one when they are below). Usually an arrow is a
good indication of transition.
How effective would using the objects found in Visual Basic 2008 be? (e.g., radio
buttons, text boxes, menu strips, etc.) What other resources would be useful for
drawing objects/controls from?
66
o Very effective! Other programs like Axure come with these built in.
Check with Naseem and Mike who may have a library for UC already
started.
67
Appendix B: Instruction Manual for the Low Fidelity Prototyping Kit
How to Use the Low Fidelity Prototyping Kit
________________________________________________________________________
The Low Fidelity Prototyping Kit is an essential tool for any designer. Combining the efficiency and
flexibility of whiteboards with the aesthetic appeal of adhesive notes and custom-printed widget elements,
it is a welcome addition to any UX designer’s collection. The goal: provide a portable design kit that can be
transported and translated easily from a client’s office prototyping session to home office, while remaining
fully intact for easier transitions into high-fidelity work.
To use:
 Open the kit, lay flat on a table or floor
 Detach one of the large easel-size adhesive sheets on the right side of the kit to a wall or
whiteboard
 Begin designing!
Special Features:
o Brings a bit of color into the low-fidelity
 Carrying case
process, while not overwhelming the
o Easy, portable, light design
process
o Can be packaged for travel
- Removable Labels
o Transparency sheets
o Entirely sticky and fully
o Allow multiple designers (and clients!)
removable/reusable
to get involved in design process
o Perfect for drop-down menus, hyperlinks,
o To use, simply draw an idea on the easel
and input fields
sheet, and hold it up on the easel sheet to
- Flag Arrows
demonstrate your idea.
o Use to highlight important areas of the
o If it becomes permanent, tape it down
page for reminders
with provided double-stick tape. If not,
o Bright colors catch the eye, ensuring
move the transparency sheet, erase with
reminders will be noted!
provided cloth, and start again!
- Page Markers
o Can also represent page layers without
o Turn these adhesives on their side for the
cluttering the page
perfect button, command function, or
- Custom-sized sticky notes
dropdown menu representation
o Three sizes are included, each
- Round Dot Labels
corresponding to the three most typical
o Combine these with aforementioned page
interface aspect ratios: 5x4, 6x4, 4x3
markers and make custom-made
o Faint gridlines keep even a low fidelity
radio/check boxes by placing a small dot
prototype accurate and aligned, making it
on the left hand side of a page marker
easier for high-fidelity prototyping later
o Different colors can denote “active” vs.
- Custom printed sticky notes
“inactive” states
o Three types are included, each
Widget Key
representing a different image:
o Gives succinct instances of where a
checkboxes, radio buttons, and text fields
certain widget or element is best used
- Dry erase pad
o Gives picture examples of how the widget
o Close the kit and turn it on its back for a
is used
dry erase pad
- Scissors included for customization
o Use this to draw ideas and erase with
- Ruler for precision lines
ease
- Drawing/formatting tools (i.e. pens/pencils,
o Kit includes dry erase makers in multiple
eraser, scissors, folder) are attached with
colors with erasers on the caps for easy
Velcro, so you can easily remove tools without
use
worrying about losing them
- Double-sided removable tape
- Adhesives, tabs, etc. are secured to the kit and
o Gives permanence for the low to high
will not fall out of the case as it is carried or
fidelity transition and still be able to be
move
altered
- Colored pencils
68
Website Widget Key
________________________________________________________________________
Widget
When To Use
Example
Arrows (left, Arrows point a user to particularly
right, double) important page elements, and can
also serve as links to move further
down or across a page if needed.
Bar Chart
A bar chart is used to horizontally
plot occurrence of categorical
variables in separate plots on the
same graph; it compares these
values and rate of occurrence
individually and across all bars.
Button
A button is used to indicate an
action to a user, and confirms this
action with a click. Examples
include the “OK” button on most
command boxes, or a magnifying
glass icon on a search bar, where
pressing the button will perform
the indicated action.
Checkbox
A checkbox is used when the user
can select any number of the listed
options, or none at all. Checkboxes
are not mutually exclusive.
69
Color Picker
A color picker is used when the
user needs to select a color they
would like present in an
application, background of a
picture, text, etc.
Combobox
A combobox is employed when a
user needs to select an item from a
list. It is similar to a listbox and
droplist, but the difference is a
combobox allows a user to type in
the text field, either creating an
“other” option (creating limitless
possibilities for text) or using an
auto-complete to find the pre-set
selection they were looking for.
Command
Button
A command button is used to help
inform users and complete actions
on an interface. They may be
located within dialog boxes.
Command buttons employ the
same features as regular buttons,
that is, clicking any command
button will carry out that particular
action.
Date Picker
A date picker is used for calendar
functions, to allow user to
essentially pick a date for an event
(i.e. online appointment
schedulers, etc.).
70
Dialog Box
A dialog box is most commonly
employed in “alert” form, where
the interface tells the user that
something needs to be done.
Dialog boxes usually contain
command buttons to trigger an
action that will close the alert.
They can also be used any time the
interface needs to “tell” the user
something important.
Dropdown
Menu
A dropdown menu is used to
simplify and organize an interface
for a user. Instead of displaying
every available link on a webpage,
a dropdown menu organizes the
links into relevant headings. When
a user moves their mouse over any
heading, the relevant links
temporarily drop down, allowing
the user to see all choices under
that heading (all clickable). When
a user moves their mouse to
another heading, the previously
highlighted heading will return to
its original state.
A droplist enables a user to select
one value from a selected list that
literally “drops down” when
clicking an arrow displayed in the
right hand corner of the text field.
There are an unlimited number of
selections that may be displayed in
a droplist. Once a user selects their
choice, that particular choice
appears in the original text field.
Droplist
Dynamic
Panel
A dynamic panel is used to choose
a selection and then another
slection within that selection. It
can have a number of states, each
state being activated by clicking
on an element such as a tab button,
list-box item,
71
Hyperlink
Bar
A hyperlink bar is an element in an
electronic document that links to
another place in the same
document or to an entirely
different document. Typically, the
user clicks on the hyperlink to
follow the link.
Image Box
An image box is used to display
images on interfaces, they may be
interactive (i.e. clickable) or still
frames. Image boxes tell the user
more about the interface in visual
form.
Inline Frame
An inline frame is used to help a
designer organize information.
Inline frames are commonly
known as “I-frames,” and are
employed to place a sub-section
(often scrollable) into a browser
window.
Line Chart
A line chart is used to indicate
trends to a user, usually over a
predetermined period of time.
Each time slot (or other
measurable interval) is marked by
a data point, each of which is
connected to other data points by a
line.
72
Listbox
A list box lets a user make a
selection from predetermined
values/choices in a list format. It
is, in essence, a dropdown menu in
permanently expanded form. List
boxes sometimes have scrollbars if
many choices are available to the
user.
Menu Bar
A menu bar is a set of controls for
the overall functioning of the
interface, displayed in text format
at the top of the interface for the
user. Each tab in the menu bar
contains a dropdown list of
selections. Common sections in a
menu bar include File, Edit, Help,
etc. Can be either horizontal or
vertical.
horizontal
vertical
Mouse
Pointer
A mouse pointer helps the user
navigate a webpage and work with
images, elements, etc. on an
interface. Mice are used in web,
application, and mobile devices,
and can be embedded within the
device (i.e. touch screen) or
external (computer or laptop
mouse). Either way, they mimic
the movements of the hand or
finger to help the user fully
navigate said interface.
Note
Notes are used for placing Postit™ note-like windows on an
interface with reminders, short
notes and other clippings. They are
typically rectangular and yellow,
like their real-world counterpart,
but most applications support
other colors and more elaborate
designs.
Select note and type
your message!
73
Pie Chart
A circular (“pie”-shaped) graph
split into any number of sections,
used to indicate to a user how
much of something is represented
by a particular whole.
Progress Bar
A progress bar is used to convey
the progress of a task, such as a
download or file transfer. Often,
the graphic is accompanied by a
textual representation of the
progress in a percent format.
Radio Button Radio buttons are used when a
user can only select 1 choice from
several indicated options (buttons).
Switching a choice will cause the
previously highlighted button to
become inactive. Radio buttons are
seen often in online surveys for
“Yes/No” questions or multiple
choice questions.
Scroll Bar
horizontal
A scrollbar is a bar that appears on
the side or bottom of a window to
control which part of a list or
document is currently in the
window’s frame. Typically, it has
arrows at either end, a gray or
colored area in the middle, and a
scroll box moves from one end to
the other to reflect the user’s
position in the document.
vertical
74
Slider
horizontal
vertical
A slider is utilized to assist a user
in easily moving a tab onto a
desired number on a number scale.
This number scale has a distinct
minimum and maximum value
beyond which the slider cannot
extend. Sliders can represent
various scales. They can be both
horizontal and vertical
Street Map
A street map is used as a computer
representation of an actual map,
allowing users to get directions,
find locations, and search through
unfamiliar places virtually.
Table
A table is used to show the user
information in a table format, with
rows & columns.
Text Box
A text box is used as a space
where a user can enter in text to
serve some purpose: to search, to
enter information, etc. Text boxes
may also display relevant
information to the user without a
typing component (simply gives
textual information about
interface/elements of interface).
75
Tool Bar
A toolbar is a pictorial
representation of choices for a user
within an interface. Each choice is
represented by a clickable button
with picture to indicate what the
user will be selecting. A toolbar
can include such features as a
“favorites” option, or a button to
transition back to a homepage.
Tree
Diagram
A tree diagram views allow the
user to see an information
hierarchy. When a tree diagram is
inactive, diagram headings are
displayed alongside plus signs,
indicating that information is
beneath them. Clicking on a plus
sign expands that heading, and a
minus sign is displayed next to the
heading to indicate that the
selection is fully expanded. Tree
diagrams are used when not much
design space is available, for they
can fit in smaller spaces. They are
seen commonly in the “Browse” or
“Select File” on a computer (i.e.
“My Documents” expands to show
the subfolders within it).
A video player is used to play,
pause, rewind, etc. a video or clip
for a user (clips often related to
interface, or can be present in
advertisement form). They are
commonly used in “how-to” clips,
for music sites, and any place
where both visual and auditory
information need to be
communicated simultaneously to a
user.
Video Player
76
Cell Phone Widget Key
________________________________________________________________________
Widget
App Icons
When to Use
App icons are used to
display applications on
the phone. The icon
consists of an image to
represent what the
application is about.
The user presses on the
icon in order to launch
the application.
Battery Icon
A battery icon is used
to display the amount
of battery life in the
phone.
Entry Field
(iPhone)
An entry field is used
to enter text to be sent.
Once the text has been
entered, the user
presses send.
Keypad
A keypad is used to
dial a telephone
number, enter a text
message, or make a
selection on selected
phone application.
77
Example
Scroll Ball
(BlackBerry)
A scroll ball is used to
select information on a
cell phone screen. It is
similar to a mouse for
a computer. Once the
highlighted area is
over the desired
selection, the user
pushes down on the
scroll ball to activate
it.
Smartphone
Keypad
A Smartphone keypad
is used both as a dial
pad and a keyboard. It
can be used to browse
the web, enter a text
message, write an
email, and much more.
Text Message
Bubbles
Text message bubbles
are used to display text
messages between
users. Each user has a
designated color to
indicate who is
speaking in the
message
(incoming/outgoing).
4-Way Physical
Button
A 4-way physical
button is used to
navigate through a cell
phone. Each button has
a certain function and
is used to access
different information
in the phone.
78
Principles of Good User Experience Design
________________________________________________________________________
Source: http://www.echointeraction.com.au/principles.htm
http://msdn.microsoft.com/en-us/library/aa373647%28v=vs.85%29.aspx
General Principles
Principle
Simple & direct
Enjoyable &
desirable
Personal
Glanceable
Efficient
Consistent
Secure
Match
Experience &
Expectation
Description
Keep it simple and to the point.
Make the product desirable to look at and for the users to want
to use the site.
Meet individual user's needs by designing an application that
is personable for the majority of the population of users.
Create a user interface that does not need to be studied. Users
should be able to read the display at a glance to quickly gather
necessary information in situations where their attention is not
fully-focused. Minimize the amount of “thinking work”
required to reduce cognitive load.
Enable quick, convenient access to information and tasks.
Minimize the number of displayed options and settings to no
more than necessary. Acknowledge all actions, including
navigation.
Design the layout, terminology, and interaction consistent
across all aspects of the design (i.e. use the same font and
color for the same features across all pages).
Ensure that users feel confident that personal data is safe and
private.
The sequence of steps, layout of information and terminology
used should match people’s expectations (i.e. there should be
a home page at the beginning of the webpage that allows the
user to navigate from).
79
Information Design Principles
Principle
Grouping
Visual Hierarchy
Reading Order
Visual Weight
Visual Balance
Description
Group information to indicate relationships between elements.
Information and controls should be grouped and sub-grouped
in a clear hierarchy.
Supports users’ natural reading order (i.e. read from left to
right, top to bottom).
Use visual weight to direct user’s attention appropriately (i.e.
make an object flash only when needed a response is required
promptly on the screen).
Balance visual cues across the page to increase visual comfort
of user.
Minimize the number of visual elements on the display.
Visual
Minimalism
Visual Rhythm & Provide resting places for the eye (i.e. provide space in
Scannabilty
between different sections of information.
Interface Design Principles
Principle
Functional
Layering
Visibility
Mapping
Error Prevention,
Detection &
Recovery
Mouse Operated
Controls
Affordance
Description
Make the most common or fundamental functions easiest to
find.
Users should be able to determine all available functions by
inspection.
Provide actions which match users’ goals at each step of the
process
Anticipate possible mistakes and prevent them, or make them
easy to spot and recover from.
Maximize the size of the mouse-operated controls within
reason and minimize the distance required to reach them
(i.e.
on Google Search).
The physical properties of an object should suggest how it can
be used (i.e. a login button means “login”).
80
Appendix C: Pre-Test Questionnaire
81
Appendix D: Instructions for Usability Tests
Task Instructions
You are currently working for a design team and have been asked to create a
prototype for a website for a particular client. The client is Candice Freed, owner of
Freed and Associates Physical Therapy. Mrs. Freed knows which aspects to the site she
wishes to include, she is simply unsure how they would like to set it up. The title of the
site is Freed and Associates Physical Therapy and the logo is shown below. Please create
a website to the best of your ability with the information the client has provided.
Items the client wishes to include within the website:
1. Home Page
2. About Us
3. Services
4. Contact Us
82
Information the Client has Provided
General Information
Freed and Associates Physical Therapy is a physical therapist owned, private physical
therapy practice.
Freed and Associates Physical Therapy is committed to providing quality physical
therapy treatment in a professional, friendly and family environment.
Freed and Associates is open Monday through Friday 7:00 a.m. to 6:00 p.m. Saturday
morning appointments are available upon request.
Freed and Associates Physical Therapy is a certified Medicare provider and is on most
insurance company PPO plans (Aetna, Blue Shield, Cigna etc.) and Works Compensation
MPN networks.
Mission Statement
We are committed to providing comprehensive physical therapy treatment to our local
community
Our primary objective is to develop and maintain partnerships with patients, schools,
sports clubs and local employers, helping achieve everyone’s full potential for leading a
healthily and productive lifestyle.
Our goal is to treat each patient as if they are family, restoring function to the highest
possible level, be it getting back to work, sports or simply improving the quality of life’s
activity.
Services












Fitness Conditioning Program
Hand Therapy
Industrial Rehabilitation
Job Site Evaluations
Neurological Rehabilitation
Pediatric Rehabilitation
Orthopedic Physical Therapy
Pre-Natal & Post-Partum Care
Spinal Rehabilitation
Sports Physical Therapy
Lymphedema Care and Control
83
Staff
Candice Freed, PT, DPT, CEO/Owner
Dr. Freed founded Freed and Associates, in 2000 as a private physical therapy practice to
deliver physical therapy to our local community and physicians. She believes that a
thorough evaluation, evidence-informed clinical decision making, and skill development
are essential in creating successful physical therapy interventions.
Dr. Freed’s belief in education and research contributes to further analysis and promotion
of the profession, and creates a better environment for patient care. She understands that
patient focused care and education are the key components to patient satisfaction.
Freed’s belief in organizational expansion and growth has lead to prioritizing patient
outcomes, care and the use of staff development as a means of effective management.
Aside from being an active participant among educational programs, Freed is an active
member of the American Physical Therapy Association (APTA). Improvement,
promotion and contribution to the profession of physical therapy are essential for its
progress and goals. Freed knows that these tenets are essential to achieving the
organizations’ future goals with the progression of the physical therapy profession. Freed
enojoys lecturing on these matters, along with, clinical topics to tie in the importance of
technical skill and administrative responsibility.
Andrew Sage, DPT, MS, OCS
Andre earned his Doctorate in Physical Therapy after many years of studying and clinical
practice. He received his Master of Science degree in 1982 and his Bachelor of Science in
1972 from University of Southern California. In 1995, has was certified a clinical
specialist in Orthopedic Physical Therapy by the American Board of Physical Therapy
Specialties (ABPTS) and received his recertification in 2005.
Maggie Morgan, MPT, CLT-LANA
Maggie is our Certified Lymphedema Therapist. She graduated with a Master of Physical
Therapy in 1989 from Childrens Hospital Los Angeles--Chapman University. She
received her Bachelor of Science degree in 1983 from University of California, Davis.
After completing her MLD/CDT Cerification with the Klose Norton School of
Lymphedema Therapy, Maggie established the Lymphedema Program at Long Beach
Memorial Medical Center and was the Clinical Supervisor. Maggie joined us in January,
2007 to provide the individual attention that lymphedema and cancer patients deserve and
need.
84
Eric Walters, PT, DPT
Eric graduated from Springfield College with a Master of Science in Physical Therapy
and completed her Doctorate in Physical Therapy at Sage Graduate School a year later.
He has a special interest in Kinesio taping, which is great in conjunction with manual
treatment to help heal and prevent injuries.
Robert Mead, PT, MPT, OCS, Cert. MDT
Robert is a graduate of SUNY Upstate Medical University in Syracuse, NY. He holds a
Masters Degree in Physical Therapy and has received numerous academic and
professional awards. Allen’s clinical interests are in orthopedic and sports injuries with a
special interest in low back disorders. His approach to physical therapy is through a
variety of manual therapy techniques and evidence-based exercise treatments. He is a
Board Certified Specialist in Orthopedic Physical Therapy through the American Board
of Physical Therapy Specialties, Certified in Mechanical Diagnosis and Therapy through
the McKenzie Institute, and a Certified Strength and Condition Specialist through the
National Strength and Conditioning Association. Since 2002, Robert has been involved in
leadership activities with the American Physical Therapy Association on a local, state,
and national level. He has presented at local and national conferences, authored articles
about physical therapy practice, and was a reviewer for an anatomy textbook. He is the
Vice-President of Operations and Center Coordinator of Clinical Education at ReddyCare Physical Therapy.
Location
We are located on the corner of Victory and Topanga Blvd. Parking is validated.
6197 Topanga Canyon Blvd., Suite 200
Woodland Hills, CA 91367
Phone: (818) 999-999
Fax: (818) 999-9999
85
Appendix E: Post-Test Questionnaire
86
87
88
89
90
Appendix F: Debriefing
Analyzing the Effectiveness of a Low Fidelity Prototyping Kit
Amanda Nicole Schmutzler
California State University, Northridge
DEBREIFING
This experiment was conducted to examine the effectivness of a Low Fidelity
Prototyping Kit in comparision to Mock Flow, an online prorotyping tool. The kit was
designed to provide a portable design that can be transported and translated easily from a
client’s office prototyping session to home office, while remaining fully intact for easier
transitions into high-fidelity work. This would be helpful in times when the designer does
not have access to a projector screen that would allow the whole meeting to be able to see
their design. The designer can take this kit, rip off a sheet of paper, place it on a
whiteboard and start designing. According to a recent study, a benefit of paper
prototyping is that it imposes relatively few constraints on a design (Snyder, 2003). It
allows the designer to be creative and have the freedom to draw whatever they wish
without the constraints of how they are going to make this work. This study will prove or
disprove the effectiveness of the Low Fidelity Prototyping Kit. Participants were divided
into two groups and tested either with a partner or independently. I hypothesized that
participants working in groups (two or more) will have a stronger user preference for the
low fidelity prototyping kit than the online wire framing program. Participants working
individually will have a stronger user preference with the online wire framing program.
Lastly, there will be increased creative ability using the low fidelity prototyping in
comparison to the online wire framing program. Thank you for participating in my
research study! For more information regarding prototyping please refer to the following
references:
REFERENCES
Snyder, C. (2003). Paper prototyping: the fast and easy way to design and refine user
interfaces. London, UK: Morgan Kaufmann.
Warfell, T.Z. (2009). Prototyping: A Practitioner’s Guide. New York: Rosenfeld Media.
91
Appendix G: Redesigned Instruction Manual for the Low Fidelity Prototyping Kit
Features of the Low Fidelity Prototyping Kit
________________________________________________________________________
- Carrying case
o Easy, portable, light design
o Can be packaged for travel
- Drawing/formatting tools (i.e. pens/pencils, eraser, folder) are attached with Velcro, so
you can easily remove tools without worrying about losing them
- Post-it™ notes, custom printed sticky notes etc. are secured to the kit and will not fall
out of the case as it is carried or moved
-
Tools Provided
- Website widget stencil kit
o Includes the most commonly used
widgets to simplify drawing
- Transparency sheets
If you are not sure of an idea, draw
it on a transparency sheet. Then, if
you are satisfied with your design,
move the transparency and create it
with the tools provided. If not,
erase it with the provided cloth and
start again!
o Can also represent page layers
without cluttering the page
o 4 colors of transparency markers
are provided to assist you in your
design
- Custom-sized Post-it™ notes
o A commonly used interface aspect
ratio: 4x3
o Faint gridlines keep even a low
fidelity prototype accurate and
aligned, making it easier for highfidelity prototyping later
- Custom printed sticky note
o Text box with the word “text field”
written faintly to allow you to write
over and customize it
- Red and blue 2”x4” removable labels
o Use as a text entry field, an image
place holder, or anything you
desire.
o Removable so it does not leave any
residue if you decide to change its
location
-
-
-
-
92
Canary color Post-it™ notes
o 1.5”x2”
o Use to represent a widget or to add
notes for the designer/client
Arrow Flags
o Use to highlight important areas of
the page for reminders
o Bright colors catch the eye,
ensuring reminders will be noted!
Page markers
o 2 sizes 1”x3 and ½”x2”
o 4 colors; blue, pink, purple, yellow
o Turn these adhesives on their side
for the perfect button, command
function, or dropdown menu
representation
Markers—pack of 10
o Brings permanent color to the
design
Erasable colored pencils—pack of 12
o Brings a bit of color into the lowfidelity process, while not
overwhelming the process
o You can erase the color pencils if
you wish to change your design
Ruler
o For precision lines
2 Graphing pencils for sketching
Eraser
Pencil sharpener
2 Highlighters
2 pens to draw design
Whiteout to correct errors
Glue to give design permanence
Website Widget Key
________________________________________________________________________
Purpose: Gives succinct instances of where a certain widget or element is best used.
Listed in alphabetical order with name, picture and an example of the widget used
highlighted in yellow.
Widget
When To Use
Example
Arrows (left, -Point a user to particularly
right, double) important page elements
-Serves as links to move further
down or across a page if needed
Bar Chart
-Used to horizontally plot
occurrence of categorical variables
in separate plots on the same graph
-Compares values and rate of
occurrence individually and across
all bars
Button
-Indicates an action to a user
-Confirms action with a click
-Example; “OK” button on most
command boxes or a magnifying
glass icon on a search bar, where
pressing the button will perform
the indicated action
Checkbox
-Used when the user can select any
number of the listed options, or
none at all
-Checkboxes are not mutually
exclusive
93
Color Picker
-Used when the user needs to
select a color they would like to
present in an application,
background of a picture, text, etc.
Combobox
-Used when a user needs to select
an item from a list
- Allows a user to type in the text
field, either creating an “other”
option (creating limitless
possibilities for text)
Command
Button
-Used to help inform and ask them
to confirm or decline a task
- May be located within dialog
boxes
-Employs the same features as
regular buttons, that is, clicking
any command button will carry out
that particular action
Date Picker
-Used for calendar functions, to
allow user to essentially pick a
date for an event (i.e. online
appointment schedulers, etc.)
94
Dialog Box
-Most commonly employed in
“alert” form, where the interface
tells the user that something needs
to be done
-Dialog boxes usually contain
command buttons to trigger an
action that will close the alert
Dropdown
Menu
-Can be used any time the
interface needs to “tell” the user
something important
-Organizes the links into relevant
headings and simplifies the
interface
-When the user hovers their mouse
pointer over a heading, the
relevant links temporarily drop
down, allowing the user to select
any choice under that heading
- The previously highlighted
heading will return to its original
state once the user moves the
mouse pointer
Droplist
-Enables a user to select one value
from a selected list that literally
“drops down” when clicking an
arrow displayed in the right hand
corner of the text field
-Once a user selects their choice,
that particular choice appears in
the original text field
Dynamic
Panel
-Used to choose a selection and
then another slection within that
selectio
-Can have a number of states, each
state being activated by clicking
on an element such as a tab button,
list-box item
95
Hyperlink
Bar
-Is an element in an electronic
document that links to another
place in the same document or to
an entirely different document
-Typically, the user clicks on the
hyperlink to follow the link
Image Box
-Used to display images on
interfaces
-May be interactive (i.e. clickable)
or still frames
-Informs the user about the
interface in visual form
Inline Frame
-Used to help a designer organize
information
-Commonly known as “I-frames,”
-Employed to place a sub-section
(often scrollable) into a browser
window
Line Chart
-Used to indicate trends to a user,
usually over a predetermined
period of time
-Each time slot (or other
measurable interval) is marked by
a data point which is connected to
other data points by a line
96
Listbox
-Lets a user make a selection from
predetermined values/choices in a
list format
It is, in essence, a dropdown menu
in permanently expanded form
-Sometimes has scrollbars if many
choices are available
Menu Bar
horizontal
vertical
-A set of controls for the overall
functioning of the interface,
displayed in text format at the top
of the interface
-Each tab in the menu bar contains
a dropdown list of selections
-Common sections in a menu bar
include File, Edit, Help, etc.
Mouse
Pointer
-Can either be horizontal or
vertical
-Helps the user navigate a
webpage and work with images,
elements, etc. on an interface.
-Mice are used in web, application,
and mobile devices, and can be
embedded within the device (i.e.
touch screen) or external
(computer or laptop mouse)
Note
Select note and type
your message!
-Mimic the movements of the hand
or finger to help the user fully
navigate said interface
-Used for placing Post-it™ notelike windows on an interface with
reminders, short notes and other
clippings.
-Typically rectangular and yellow,
like their real-world counterpart,
but most applications support
other colors and more elaborate
designs
97
Pie Chart
-A circular (“pie”-shaped) graph
split into any number of sections,
used to indicate how much of
something is represented by a
particular whole
Progress Bar
-Used to convey the progress of a
task, such as a download or file
transfer
-Often, the graphic is accompanied
by a textual representation of the
progress in a percent format
Radio Button -Used when a user can only select
1 choice from several indicated
options (buttons)
-Switching a choice will cause the
previously highlighted button to
become inactive
-Often used in online surveys for
“Yes/No” questions or multiple
choice questions
Scroll Bar
horizontal
vertical
-A bar that appears on the side or
bottom of a window to control
which part of a list or document is
currently in the window’s frame
-Typically, it has arrows at either
end, a gray or colored area in the
middle, and a scroll box moves
from one end to the other to reflect
the user’s position in the document
98
Slider
horizontal
vertical
-Utilized to assist a user in easily
moving a tab onto a desired
number on a number scale
-This number scale has a distinct
minimum and maximum value
beyond which the slider cannot
extend
-May represent various scales.
-Can be both horizontal or vertical
Street Map
-Used as a computer
representation of an actual map,
allowing users to get directions,
find locations, and search through
unfamiliar places virtually
Table
-Used to display information in a
table format, with rows & columns
Text Box
-Used as a space to enter in text to
serve some purpose
-Example: to search, to enter
information, etc.
-May display relevant information
to the user without a typing
component (simply gives textual
information about interface/
elements of interface)
99
Tool Bar
-A pictorial representation of
choices for a user within an
interface
-Each choice is represented by a
clickable button with picture to
indicate what the user will be
selecting
-May include such features as a
“favorites” option, or a button to
transition back to a homepage
Tree
Diagram
-Displays an information hierarchy
-Used when not much design
space is available, for they can fit
in smaller spaces
-When inactive, headings are
displayed next to plus signs,
indicating that information is
beneath them
-Clicking the plus sign expands the
heading while minus signs indicate
that the selection is fully expanded
-Example: My Documents expands to
display the subfolders within it
Video Player
-Used to play, pause, rewind, etc. a
video or clip (clips often related to
interface, or can be present in
advertisement form)
-Commonly used in “how-to”
clips, for music sites, and any
place where both visual and
auditory information need to be
communicated simultaneously to a
user
100
Cell Phone Widget Key
________________________________________________________________________
Widget
App Icons
When to Use
-Used to display
applications on the
phone
Example
-Consists of an image
to represent what the
application is about
-User presses on the
icon in order to launch
the application
Battery Icon
-Used to display the
amount of battery life
in the phone
Entry Field
(iPhone)
-Used to enter text to
be sent
-Once the text has
been entered, the user
presses send
Keypad
.-Used to dial a
telephone number,
enter a text message,
or make a selection on
selected phone
application
101
Scroll Ball
(BlackBerry)
-Used to select
information on a cell
phone screen
-Similar to a mouse
for a computer
Smartphone
Keypad
-Once the highlighted
area is over the desired
selection, the user
pushes down on the
scroll ball to activate it
-Used both as a dial
pad and a keyboard
-Can be used to
browse the web, enter
a text message, write
an email, and much
more
Text Message
Bubbles
-Used to display text
messages between
users
-Each user has a
designated color to
indicate who is
speaking in the
message
(incoming/outgoing)
4-Way Physical
Button
-Used to navigate
through a cell phone
-Each button has a
certain function and is
used to access
different information
in the phone
102
103