|
|
|
|
|
Design
Approach
|
| |
Our
approach to the initial design process was highly collaborative.
We sat down as a group to sketch out ideas with pencil and paper
and came up with two different interaction flows for the TraveLite
System. Once a design was sketched out, we did a walkthrough
of the interaction flow using each of the three scenarios we
had created in our needs assessment
phase, iterating as appropriate to incorporate the needs of
the persona in question. After working through each of the scenarios,
we decided to record our initial ideas regarding screens and
interaction flows in a form which could easily be saved and
modified throughout our early design iterations. We used Visio
to record these early screens. |
|
Early
Design |
|
|
We initially came up with an interaction flow that was focused
on a sequential, step-by-step flow through the decision
process of customizing a guide. The flow could be truncated,
allowing the user to skip detailed editing as needed.
While this approach has was valuable for personas who need
the ability to edit content in detail, it was less than
ideal for the business traveler, who is concerned with the
length of time spent customizing a guide. To minimize the
number of steps this user would have to take, we came up
with a different interaction flow, in which the TraveLite
system would make a "first cut" of the content
based on the specified preferences of the user. This way,
s/he could opt-out of the detailed refinements if s/he so
chose. Furthermore, these preferences could be saved as
"profiles" and applied later, speeding the guide
building process in the future. To view these initial
design sketches, please visit our IS213 writeup.
Some design issues we faced include:
- constraining
the questions used to create profiles to be sufficiently
generic to apply across destinations, while still being
helpful in making a cut of the content;
- deciding
which style of interactions is appropriate for the various
attributes, and fitting in multiple attributes wihtout
overloading the user;
- determining
whether people are likely to puchase more than one guide
at a time, which requires a full shopping cart feature;
- whether
to allow people to purchase guides and postpone downoad
to later, possibly through an email link to the download,
or making it available from the "My Guides"
page
At
this stage of the process, the prototype consisted of 16 (paper)
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.
|
|
|
|
|
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 "got" TraveLite.
The
initial paper prototype was first 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". See
the complete writeup for a complete description of methods.
|
|
|
|
|
We
divided the results of the first round of testing into five
major areas. The first area consists of specific interaction
details which can relatively easily be fixed in the next
iteration of the system. We refer to these problems as Minor
details in our Critical
Incident Log. The other four areas point to serious
problems in the underlying task flow and required the team
to address deeper issues in the system. For this reason,
incidents that have been classed as Minor details will be
addressed only after the other four areas are addressed
in the redesign, simply because the functionality may change
so radically that they will not be an issue in the next
iteration.
Perhaps
the most obvious of the system's problems was a result of
organizational ambiguity about what exactly (in terms of
a product) TraveLite seeks to offer its customers and how
and what exactly it plans to charge for that product. This
is a classic usability blunder - to reveal underlying organizational
issues with an unclear interface. The problems that were
a result of this were classed as Pricing Model problems.
To solve these issues, the TraveLite team revisited its
needs assessment research and documented a decision about
the pricing model behind the system.
The
pricing model we decided upon is one where a user buys a
guide for a particular price and can then create as many
guides as they want from this content. This matches the
users conceptual model around current print guides - but
adds the ability to recycle the same content in myriad ways
and in various formats. The current plan is to allow access
to a guide's content for one year, though this time period
can change as the pricing model develops. This new pricing
model more closely matches the goals of users and makes
the entire system much clearer.
The
second major theme was that of confusion between all the
content that is available for a particular destination and
the part of that content that is included in a particular
guide. We coded these incidents as Content Context problems.
To address this issue, the redesign of TraveLite will have
a simpler filtering mechanism that shows all content available
and specific guide content in close proximity to one another.
A
related theme was confusion about where a user was in the
process of creating a guide. We called these issues Process
Context problems. To address these issues, we plan to introduce
a contextual map showing where the user is in the process
of creating a guide.
An
overarching theme which, in some respects, affects the entire
interface, was that of exposing the user to entirely too
much detail at once. All three users felt somewhat overwhelmed
by the choices they were making and the level of detail
to which they could go to customize their guides. One user
did not want to choose content at a low level of detail
at all. The other two users appreciated the ability to so
closely tailor their content, but thought that the way the
interaction was structured was too confusing.
All
three users were unconvinced that the Profiles functionality
offered enough value to justify the confusion they engendered.
So our first solution to this problem is to eliminate entirely
the Profiles functionality in the next iteration. It may
be added back in a later version if it is requested by users.
The
second solution is to rather dramatically limit the functionality
regarding filtering content. For instance, users will no
longer be able to run disjoint queries over the data to
add content to their guides. This functionality will more
likely be useful at the local version of the guide (on the
user's PDA). We will allow filtering over the most popular
metadata (as determined by our card sorting exercises) but
users will not be able to refine their searches at the level
of granularity provided in the first prototype.
This
first evaluation phase revealed major problems with the
flow of the system. Because of this, we felt that the next
stage of our process should be to redo our task flow and
design a new interaction based on what we learned in this
phase.
|
|
Changes |
| |
The
interaction flow of the paper prototype focused on a series
of steps resulting a customized guide. This flow could be truncated,
allowing the user to choose only categories of interest, but
the selection process within each category was relatively detailed.
In addition, users were able to traverse to extremely detailed
searching, filtering and information about individual listings.
Profiles functionality allowed users to store filters
and then apply them to new guides, thus allowing them to circumvent
this detailed process in later interactions with the site.
Following
are the major problems we encountered in the paper prototyping
stage, and how we changed them for the first interactive prototype.
Organizational
ambiguity about the business model of the site. (i.e. how
and what do we plan to charge for content?).
Since it is outside the scope of this project to determine
the best business model for a product such as TraveLite,
we decided the best course was to choose one and stick with
it.
To
do so, we revisited our user research and recalled that
users' current experience with customizing guides is buying
guide content at bookstores (and collecting it from other
sources) and customizing with scissors and glue. We decided
to mimic this path and changed the purchasing path to use
a subscription based model where users subscribe
to content for a year. They can manipulate and recycle that
content into as many guides as they like during that period.
Problems
with flow
We believe that our problems with flow in the paper prototype
stemmed primarily from the fact that our purchasing path
was unclear. Users were also overwhelmed with detail and
functionality. This cluttered the interface and made it
difficult to interpret and navigate.
In
response, we began by cutting the "Profiles" functionality
entirely in addition to limiting the ability to perform
complex queries and searches over the information. These
features may be added back in a later version.
After
these extraneous features were eliminated, we designed a
new interaction based on the new purchase path and limiting
users' exposure to detail. Since the changes we made from
the paper prototype were so radical, we decided it would
be wise to iterate several more times on paper before committing
the interface to code. We iterated four low-fi versions
(using paper and very basic printed HTML pages) before moving
to our first interactive prototype.
Confusion
between the content available in system and the content
currently in a particular guide.
Our solution to this problem fit nicely with our decision
to limit search and filtering over content. We decided that
each filtering task would take place in a suite of dynamic
panes. All content appears by default and is removed as
the user unclicks check boxes. Since the content updates
dynamically, we think it will be clear to users what represents
available content and what represents content in their guide
(experiments from last semester confirms this suspicion).
Problem:
Uncertainty of location within the process of creating a
guide.
We tried to address this problem by providing more of a
path through the guide building process in this iteration.
Since we want to allow users the flexibility to move between
the steps of this process, however, it is still possible
to leave that path and possibly get confused. We are curious
to see whether the new interaction works and plan to make
changes as necessary.
Problem:
Exposing the users to too much detail and too many choices.
Most test participants appreciated the ability to tailor
content but found the interaction structure confusing.
As discussed above, we primarily addressed this by limiting
functionality. We also implemented a tabbed interface which
limits the content a user sees at any given moment. This
is another portion of the interface that is fairly complex
and will probably change in further iterations.
|
|