|
Introduction
TraveLite
is a web-based, customized travel guide publisher. It allows
travelers to sort through a database of travel content and
choose only what they decide they need or want. Through a
series of tasks, users create a customized guide, which they
can later download to a PDA or other portable electronic format.
The system will also allow users to store personalized guides
in an account on TraveLite to later further modify and purchase
the guide.
The
first TraveLite prototype was constructed in paper. We wanted
to evaluate this low-fidelity paper-based version prior to
implementing a prototype in HTML. We tested the interface
using three representative users. Testing was relatively informal,
using a think-aloud protocol. The intent of this stage of
the design process was (1) to locate major problems with the
interaction flow, nomenclature, and structure of the content
as it was presented and (2) to see if users generally "get"
TraveLite.
The Making of the Paper Interface
Working
from the original design sketches, the TraveLite low-fi prototype
was initially drafted by hand on paper onto 11x14 photocopied
mockups of a web browser window.
Following are pictures of the prototyping in process. Click
on any image to see a larger view.
The
11x14 page size was selected because it permitted slightly
larger screen views, while also replicating the relative dimensions
of a typical 800x600 display screen.
The
team fashioned a low-fi prototype kit, stored in a box in
the SIMS basement lab, where all team members could access
it. In addition to the actual "computer," the low-fi
prototype materials kit included:
- a
mouse "pointer";
- a
"highlighter" (used by the computer to indicate
selection in pull-down lists, etc.);
- 11x14
paper;
- adding
machine tape;
- pencils,
pens, highlighters, markers;
- post-it
glue, post-it tape, and post-it notes of various sizes and
colors;
- whiteout;
- exacto-knife
and (cardboard) cutting board;
- scissors;
- paper
clips, binder clips;
- rulers;
- 4x6
notecards;
- sheet
protectors
- rubber
bands; and
- scotch
tape and masking tape.
Some
of the more creative representations of GUI elements included:
paper pulled through two cuts in a screen to represent a scrolling
pane in a window, adding machine tape inserted through an
incision to represent a drop down box, and fan-folded paper
with a pull-tab to imitate a progress bar. The initial paper
prototype was piloted with an outside tester, as well as "tested"
by the team members using the draft scenarios, and then iterated
a second time in paper.
As
a result of these pilot tests, so many changes were necessary
that it became easier to mockup the content of the screens
on the computer as well, rather than erasing and rewriting
by hand. The second complete iteration of the low-fi prototype
was generated on the computer, using word processor and spreadsheet
applications. The computer-generated content was then cut
up and pasted onto the web browser window mockup to produce
the various prototype screens of the "computer".
In
addition to "dynamic" travel-related content, the
final low-fi prototype consisted of 16 screens:
- Home;
- About
TraveLite;
- Frequently
Asked Questions (FAQ);
- Free
trial download, including two download dialogue boxes;
- Sign
In;
- Create
Account;
- Forget
Password;
- My
Guides (personal account page);
- Choose
a Destination;
- Choose
Content (filter content categories);
- Create/Edit
a profile;
- Guide
Table of Contents;
- View/Edit
a Section;
- Detailed
information on a particular content item;
- Checkout
pages:
- enter/edit
personal information and specify download format,
- enter
credit card information,
- confirmation
& download; and
- Log-out.
As
much as possible, pieces of the paper prototype were conceived
as individual elements of the interface. This perspective
will be useful for later interactive prototypes, helping the
team think in terms of a modular design using global and local
elements of the interactive interface.
Special
thanks to Jeff McNeill for providing the photographs.
|
