Application designshowcase 1st_edition

Application Design Showcase
10 Best Application UIs

Jakob Nielsen, Chris Nodder and J.M. Berger

1st edition

48105 WARM SPRINGS BLVD., FREMONT CA 94539–7498 USA WWW.NNGROUP.COM

COPYRIGHT © NIELSEN NORMAN GROUP, ALL RIGHTS RESERVED.
To buy a copy, download from: http://www.nngroup.co m/reports/applicatio ns/design

This page is left blank for reports that will be printed double sided

2 INFO@NNGROUP.COM 48105 WARM SPRINGS BLVD., FREMONT CA 94539–7498 USA

Contents

Executive Summary ....................................................................... 4
Overview of the Winners ............................................................. 10
Common Themes Among the Winners ......................................... 13
Campaign Monitor ....................................................................... 14
CMSbox ....................................................................................... 38
FotoFlexer ................................................................................... 60
PRISMAprepare ........................................................................... 88
Seating Management ................................................................. 120
SQL diagnostic manager ............................................................ 140
SugarSync ................................................................................. 167
SuperSaaS ................................................................................. 197
Wufoo ........................................................................................ 229
Xero........................................................................................... 259
Applications Not Selected: Common Issues ............................... 297
Selection Criteria and Process ................................................... 298
About the Authors ..................................................................... 300
Acknowledgements ................................................................... 301

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 3

Executive Summary

The winners of the first competition to identify the 10 best-designed application user
interfaces are:
• Campaign Monitor by Eyeblaster (Israel): Integrated management of
multiple advertising campaigns for media buyers.
• CMSBox by CMSBox (Switzerland): Content management system.
• FotoFlexer by Arbor Labs (USA): Photo editor.
• PRISMAprepare by Océ (The Netherlands): Print shop software.
• Seating Management by Magellan Network and DesignMap (USA): Hostess-
stand reservation book for restaurants.
• SQL diagnostic manager by Idera (USA): Database performance monitoring
and diagnostics.
• SugarSync by Sharpcast (USA): Synchronizing files across multiple
computers.
• SuperSaaS by SuperSaaS (The Netherlands): Creating and hosting
scheduling and reservation systems.
• Wufoo by Infinity Box, Inc. (USA): Online forms, surveys, invitations, and
payments.
• Xero by Xero (New Zealand): Accounting for small businesses.
As with all our design competitions, winners came from around the world, covering 4
continents. In this competition, we had our first winner from the Middle East, as well
as a strong showing from The Netherlands, given its size.
Of the winning applications, 70% are Web-based and 40% are locally hosted. Yes,
this sums to 110%—we counted SugarSync twice because it’s both Web-based and
PC-/Mac-based. In fact, like several other winners, it also has a component for
mobile devices.
Although dedicated mobile apps are not yet good enough to win in their own right, it
was striking how many of this year’s winners have a mobile component. Mobile is
definitively the trend to watch for next year, and any application owner should think
hard about whether and how to add mobile features in 2009.

BUSINESS-ORIENTED INTERACTION
You’d think that there would be little common ground between marketing managers
overseeing advertising campaigns and database administrators overseeing SQL
servers. And you’d be right, as indicated by the many differences in the detailed
design of the 2 winning applications for these distinct business users.
You can’t just plop a “dashboard” design pattern into your app and expect it to
support business users; they have highly domain-specific needs.
Still, the similarities are amazing when comparing the Campaign Monitor and the
SQL diagnostic manager. Both need alerts, and both must avoid issuing too many
alerts because doing so could cause users to overlook the most-important
emergencies. Both also need drilldowns. Finally, both display selected forms of


current status in a single overview, which lets users see the health of their ads or
servers in a glance.
The general challenges of managing large amounts of information and giving users a
single view of complexity was addressed across many of the winning applications.
Seating Management, for example, shows which tables are expected to be vacated
(and when), as indicated by color-coding on a floor plan of the restaurant. A very
different UI tied into a physical space, and yet one that also offers an overview-at-a-
glance.
Most winners also use progressive disclosure to great effect. It’s a simple idea that
improves usability across a very broad range of contexts.

FREEFORM VS. LINEAR TASK FLOW
Many of the winning applications target a broader audience than similar apps have
aimed for in the past. That’s of course why they emphasized usability, and why they
achieved an award-winning user experience.
A primary challenge in simplifying the initial experience for less-expert users is that
you might create something that’s too restrained for your traditional users. Many of
our winners addressed this dilemma by emphasizing a linear task flow for the
newbies, while also offering a more traditional open-ended set of commands for the
experts.
Wizards abound this year as the preferred approach for guiding users through the
application. But these wizards are more flexible and less dumbed-down than the
restrictive wizards we’ve seen in the past. So, having witnessed this improved user
experience, we now declare that it’s time for a wizard renaissance. (Still, in most
cases, you should also provide a non-wizard UI for expert users or people who prefer
a freeform task flow.)

OFFICE 2007 RIBBON SEES FAST UPTAKE
Several winners employed a ribbon as their main control, taking a lead from
Microsoft Office 2007’s new user interface. Considering how revolutionary it is to
abandon traditional pull-down menus, having additional applications implement this
idea only a year after it was introduced is very fast indeed.

Ribbon from SQLdm.
For decades, we’ve heard enterprise users say, “just give me a UI that looks like
Office.” There is definitely much to be said for familiarity and for leveraging users’
existing knowledge and expectations, but we’ve been a bit cautious about following
this request for several reasons.
First, it’s a basic tenet of usability that you shouldn’t listen to what users say; you
should watch what they do. End users are not interaction designers, so the specific
dialog elements they request are usually not what’s best for them.


Second, Microsoft user interfaces have not always been shining examples of good
usability; the company has embraced usability in a big way only in recent years.
About 10 years ago, the main design criterion was to pass a Bill Gates review, and
Billg’s definitely not an average user.
Third, even as Microsoft’s designs improved, it wasn’t a given that the Office UI
would transfer to enterprise apps. After all, Office is a productivity suite consisting
mainly of document editors (text editing, slide editing, spreadsheet editing). While
enterprise apps have some editing, most tasks are very different than Office-style
tasks.
Based on this year’s winners, however, it seems that the ribbon has legs and
transfers beyond its document-editing origins.

MODAL DIALOG BOXES: YES OR NO?
When it comes to modal dialog boxes, our winners have very distinct ideologies. At
one extreme is Seating Management. As a real-time application monitoring a
physical environment, Seating Management didn’t set out to interrupt hostess work
in any way. If a hostess wants to seat 5 guests at a table that the database says has
a capacity of 4, the system won’t halt the running of the restaurant by saying that it
can’t be done. Maybe that party looked friendly enough that they can squeeze in an
extra chair.
At the other extreme, several apps use modal dialog boxes—and plenty of them—in
ways that clearly stop users in their tracks and require them to do something before
they can proceed. As discussed below, the lightbox was a preferred technique to this
end.
So, what’s the answer here? There is none. Generally, a user experience feels more
accommodating if modal dialog boxes are avoided or downplayed. But, when
something does need fixing, it’s better to make sure that the user knows about it.

LIGHTBOX: INTERACTION DESIGN TECHNIQUE OF THE YEAR
In UI terms, a lightbox draws the user’s attention to a dialog box, error message, or
other design element in the middle of the screen by dimming the rest of the screen.
The following screenshot from Xero shows a typical lightbox design:


We’ve seen lightboxes in some interfaces over the last 4 years, but so many of this
year’s winning applications employed the idea that we’ve named the lightbox the
dialog design technique of the year for 2008.
The lightbox benefit is obvious: it’s impossible for users to overlook the only bright
part of the screen. This is in stark contrast to many traditional designs, where users
often remain blissfully ignorant of notifications that are camouflaged within busy
pages.
Lightboxes do have downsides, however, and they shouldn’t be used everywhere.
• A lightbox is a blunt instrument that hits users over the head and causes
them to stop everything they’re doing. Don’t use them for low-priority items
or background information.
• Talk about modal dialog boxes. A lightbox takes that concept to the extreme.
(Even though it’s theoretically possible to enable interaction with the dimmed
parts of the screen, in practice this just isn’t done because something that’s
dimmed should be inactive.)
• Users often have to refer to information on the background display to resolve
the situation in the foreground dialog box. If the background is dimmed too
much, such information can be hard to read.

DOUBLE USABILITY CHALLENGE
Several winners were construction kits that let users create something for a different
set of end users:
• In CMSBox, the user creates Web pages for others to browse.
• In SuperSaaS, the user creates reservation systems so that other users can
make bookings.


• In Wufoo, the user creates online forms for other users to fill in.
Such apps face a double usability challenge. First, the user interface must be easy
enough for the direct users to create their desired outcomes. But second, these
outcomes must be easy for the ultimate users to use. This second issue is
particularly difficult because the ultimate users don’t use the application; instead
they use the direct user’s creation.
The solution in all cases was the same: Make it particularly easy for direct users to
create highly usable designs. True, users might hang themselves by going beyond
the defaults and thus creating a miserable experience for their end users. But most
people are lazy and stay with the defaults as much as possible.

USER ASSISTANCE
User assistance ran the gamut from applications with no help or manuals, to fully
described applications with extensive online help, knowledge bases, and other
elaborate forms of user assistance.
Mostly, the trend is to downplay user assistance as a separate feature. Most
applications integrate helpful hints and descriptions with the main user interface,
using on-screen instructions, beefed-up super-tooltips, and click-tips. (The difference
between tooltips and click-tips is that the user has to explicitly request a click-tip by
clicking, whereas a tooltip appears when the mouse hovers over a design element.)

EMOTIONAL DESIGN
Applications are about features, but they are also about connecting with users.
Several applications explicitly targeted emotional design that puts users at ease and
projects a sense of playfulness.
Wufoo is the most prominent example of this approach, with its bold graphics and
humorous assistance text. For that matter, their tagline is “making forms easy + fast
+ fun.” (For once a tagline that makes sense and explains what the site does in 5
words.)
But Xero might be a more interesting example, simply because it targets the
traditionally dry domain of accounting. One of its main features lets users
automatically reconcile bookkeeping entries with bank account transactions. As a
match is made, the 2 matching entries are removed from the list of stuff to be
reconciled. Users compared this interaction to playing Tetris and described it as fun
and addictive. Come on, making accounting fun? That’s an award-winning design.

USABILITY METHODS: CHEAP BUT CONTEXTUAL
The winning designs are revolutionary, but there’s nothing revolutionary about the
usability methods employed to ensure their quality. The teams used well-known and
long-established usability methods that we’ve advocated for decades.
These winning methods deviate from most companies’ usability efforts in two key
ways:
Most winners used a very rapid approach to usability, emphasizing small-N user
testing and paper prototypes to generate user feedback before investing in coding.
Several teams squeezed a large amount of usability work into a budget of only 80


hours. This is perfectly reasonable, and proof that good results can come from small
investments—as long as the designers actually follow the user research findings.
Many winners conducted field studies or other forms of contextual research in the
workplace. After all, when you’re designing mission-critical software for print shops,
you need to move your precious behind out of the office and into some real print
shops.


Overview of the Winners
Diverse applications and design team structures are represented in this year’s
winning group.

FIVE COUNTRIES
A highly international set of submissions resulted in winners from Israel, The
Netherlands, New Zealand, Switzerland and the USA. The products developed by
these teams are used in many more countries again.

DOMAINS
Applications ranged from online photo editing for occasional users through to
document setup software for professional print shop employees. Small business
owners wanting a simple accounting package are catered for, as are marketing
executives controlling massive online advertizing budgets. Three of the winners are
not just applications in their own right, but are application creation environments
aimed at allowing end users to build their own interfaces.
The one common thread was that each of the winning teams had thoroughly
investigated their intended domain, extracted the key tasks and designed for their
vision of the key users. In each case, this clear focus on users, task and environment
contributed to their winning designs.

TEAM SIZES
One-person teams can still produce winning software. Indeed four of the applications
were developed by teams ranging from one to five people total. At the other end of
the spectrum, one application had a design and modeling department of 24 people in
an organization of 24,000.

IN-HOUSE OR DESIGN CONSULTANCY
Sometimes a team will realize that they don’t have all the resources they need on
their staff. At least two of the winners worked with outside companies to bring in
design expertise at stages of the process.
Several of the entrants—including a few of the winning designs—took this
outsourcing one stage further, involving third parties in the development work as
well. This approach requires very clear communication between the designer and the
contract developer in order to ensure that the interaction and interface behave as
originally envisaged.


THE 10 WINNERS in alphabetical order
Campaign Monitor by Eyeblaster Presents a wealth of information from online
(Israel) advertising campaigns in one concise dashboard-
style interface to empower media buyers to plan,
create, serve, manage and measure online
campaigns.
CMSBox by CMSBox Content management system that combines user
(Switzerland) freedom where it matters (creating content) with
guided constraints that keep users out of trouble
for other aspects of page design.
FotoFlexer by Arbor Labs A full-featured photo editor, delivered over the
(USA) Web with no installation, no configuration and no
footprint on a user’s hard drive.
PRISMAprepare by OCE Allows print shop employees to take customers’
(Netherlands) content and turn it into professional print
packages using the metaphors from their
physical environment.
Seating Management by Magellan Replaces the reservation book, wait list and floor
Network and DesignMap plan typically found at the hostess stand in
(USA) restaurants. Tracks the habits of specific
customers and the patterns of dining in the
restaurant to produce increasingly accurate
estimates of dining time and wait time
SQL diagnostic manager by Idera Performance monitoring and diagnostics for
(USA) information technologists using Microsoft SQL
Servers. Proactively notifies SQL administrators
about the health, performance and capacity of
their SQL Server environments
SugarSync by Sharpcast Allows all of a user's devices and the web to work
(USA) as one. It keeps the user’s digital media and files
automatically in sync across multiple computers,
backed up online, and remotely accessible from
mobile phones and Web browsers.
SuperSaaS by SuperSaaS A Web-based application used to create and host
(Netherlands) online scheduling and reservation systems which
are then used by the creator’s customers or user
base.
Wufoo by Infinity Box, Inc. Lets users easily create online forms, surveys,
(USA) invitations and simple payment orders, then
manage and analyze the data entered by
customers.


Xero by Xero Xero is a full-function accounting program for
(New Zealand) small businesses and those who balance their
books. It provides multiple tools toward this end,
including cashbook, general ledger, invoicing and
reporting.


Common Themes Among the Winners

DESIGNED TO BE QUICKLY COMPREHENSIBLE
Comprehension here means understandable to their target audience. For some, this
means easy for anyone who has ever used a computer to pick up. For others, this
means their specific, defined, domain-aware users.

TELLING A SIMPLE STORY, AND COMMUNICATING WELL
By making the goals of the application clear and then providing an easy and well
signposted path to achieving these goals, the winners demonstrate that the narrative
flow of the application is a defining factor in how usable it is for its target audience. A
good story which sticks to consistent metaphors and unambiguous feature names
makes applications easy to learn, remember, and then teach to others. The easier
the learning process, the less users will have to rely on the crutch of help systems.

USING INTERFACE ELEMENTS IN THE WAY THAT USERS EXPECT
Innovation is wonderful, but it has to be introduced in a way which makes sense to
the target audience. This is typically achieved by using common widgets to perform a
novel task. The familiarity of the common widgets enables users to see how the
novel story unfolds without losing them in unfamiliar interactions.

HELPING USERS LEARN
Leading users though novel areas and then giving them control in areas they are
familiar with ensures that they are never bewildered but also never frustrated with a
badly paced interface. Users often feel lost when approaching an unfamiliar task, so
they need guidance. However, this same level of guidance can be irritating for
frequent tasks. Many of the applications in this annual show a good balance between
leading users through unfamiliar or infrequent tasks and then letting users define
their own flow through the interface for more common tasks.


Campaign Monitor

COMPANY INFORMATION

Company: Eyeblaster Design team:
Application: Campaign Monitor Product Planning and User Research:
• Yael Tolub, Nir Shimoni and Gefen Lamdan
Headquarters: Ra’anana, Israel o Program Management
Number of employees: 200+ • Ran Sarig and Gil Ditkovski
o R&D Project Managers: Amichai
Design motto: “Keep it simple.” Kidron and Tsufit Naor
U.I. and Graphic Design:
• Amihay Rotter (Member of UPA Israel)
Technology Research:
• Chen Bekor
Development Project Team:
• Amir Chervinsky, Giri Berenstein, Hadas Or,
Helena Belyakova, Ilan Avigdor, Ilanit
Molayem, Jermy Hoffman, Lena Bernstein,
Meital Kankazil, Rany Shochat, Rinat
Sherzer, Ruven Yusupov, Thierry Sitbon.

OVERVIEW
Eyeblaster’s Campaign Monitor is designed to present a wealth of information from
online advertising campaigns in one concise dashboard-style interface.
The company’s focus is empowering media buyers (including media agencies,
creative agencies and advertisers) to plan, create, serve, manage and measure
online campaigns. Involved in digital media advertising since 1999, Eyeblaster aims
to provide advanced management tools—and Campaign Monitor is just that.
A Web-based application, Campaign Monitor can track multiple ads and multiple
campaigns, presenting metrics from several different sources in a unified view,
directing users to campaigns which show problems so that they can be fixed.
Campaign performance data is refreshed every 15 minutes (except for revenue,
which is calculated daily).
The design team’s slogan was “Keep it simple.” But with so much data flowing into
the application, making a simple interface was an incredibly complicated task.
“When it comes to presenting data it is very tempting to ‘show it all’ to the user,”
says Amihay Rotter, Eyeblaster’s user experience design manager. Instead, the team
decided on a strategy of progressive disclosure, in which each user action
(mouseover, button click, etc.) serves up an increasing portion of the data and
creates new opportunities for action.


Campaign Monitor shows the effectiveness of online advertising campaigns in
real time, so that clients can manage their online spend and react quickly to
pull underperforming advertisements. This is the primary Gantt or timeline
view.

WHAT DOES IT DO?
Key metrics provided by Campaign Monitor include setup, delivery, performance and
return on investment. In addition to providing raw data, the application calculates
error warnings and evaluates campaign status according to predefined levels of
performance (characterized as thresholds) for each available metric.
Typical Campaign Monitor users are media planners or traffickers at digital media
agencies, responsible for running large, complex campaigns generating vast
quantities of metrics that are constantly in flux.
The main thrust of the design, therefore, is empowering users to identify problems
without drowning them in information about aspects of the campaign that are
running smoothly.
The dashboard view presented at sign-in offers a list of all current campaigns
displayed in a Gantt timeline view. Inside each Gantt bar are three additional
performance bars for the specific campaign.


Campaigns are sorted according to their health, with the most urgent cases
highlighted in the default sorting scheme. The dashboard is customizable, and
campaigns can be sorted or filtered according to various criteria.
The performance bars show the number of issues categorized as errors (in red), the
number of issues at a warning level (in orange), and the number of normally
behaving flights or ads (in green). The color scheme allows for a quick intuitive
glimpse at the overall health of the campaign.
“The Campaign Monitor was planned with one aim in mind—to troubleshoot problems
or errors that may appear in a campaign,” says Rotter.
Mousing over the campaign bar expands it in the first layer of progressive
disclosure—a more detailed overview, including ordered impressions, served
impressions, unique impressions, flights, ads, delivery rate, and campaign start and
end dates.

Gantt view, with campaign bar highlighted.

The expanded campaign bar features buttons to access four categories of metrics
classified under campaign setup, delivery, performance and ROI.
The buttons are also indicators following the same red-orange-green color scheme
established in the opening view. Here, the colors are a distillation of a wide range of
metrics, such as click rates, impressions and other interactions.


Clicking on the button drills down to the next level of disclosure, opening a detailed
screen of finely grained data concerning campaign specifics.

Drill-down view showing campaign setup in graph view.

Continuity runs all the way through the various views. In drill-down mode, users can
select from graph or grid views, which can be sorted according to preference. Items
are highlighted in color, with an icon that mirrors the campaign bar button indicators.
Issues identified in the grid view can be dismissed or selected. Selecting a problem
item takes users to Eyeblaster’s Campaign Manager, a separate application where
modifications can be made to the campaign. For walkthrough purposes, this
constitutes an exit from the program, but not a traditional endpoint. (Campaign
Manager opens in a new window.)

THE APPLICATION
As a real-time monitoring tool, Campaign Monitor doesn’t follow a strict narrative
storyline. It works more like a 3-D instrumentation panel, where each gauge can be
expanded into a new and more detailed panel. For the main functional area of the
program, navigation consists of drilling down and zooming out and switching
between campaigns.


Drill-down view with unresolved alerts.

The red alert color-and-icon schemes serve as a magnet—pulling the eye and the
user’s attention in a very deliberate manner, encouraging them to drill ever deeper,
until the user reaches “bottom” and exits to Campaign Manager, where the red alert
can be resolved. From there, the user can make several iterative runs from the
dashboard view until all error and warning issues have been resolved.
Users can bypass a return to the dashboard and move laterally from one campaign
to another through a “campaign menu” which can be invoked or pinned to the right
hand side of the screen.
Given the volume of data and the number of campaigns run by a typical user, this
represents a wide degree of freedom in how to resolve issues although the program
obviously nudges users in the direction of fixing problems.
“We did have a story or narrative in mind when we planned the application and we
aim for a specific path,” says Rotter. “But we are doing so without putting any
limitations on the users.”
Although the natural path is to sort campaigns by urgency of issues and work
through problems, there are plenty other ways to work with Campaign Monitor’s
tools.


Filters allow the list of campaigns to be reduced to a more manageable size
without leaving Gantt view. Here, filtering by advertiser gives focus to specific
campaigns.

Campaigns can be filtered or sorted by advertiser (to evaluate a desired campaign’s
performance), or by type of error (to identify and diagnose systemic problems
through multiple campaigns).
Eyeblaster’s UI is obviously designed to be familiar to a particular type of user, and
it’s expected that many users will take part in periodic online training sessions
offered by the company’s product specialists. New users receive an overview training
session and a “quick reference” one-page cheat sheet.
However, the program does offer several paths to learning from within. These
include an integrated (context-sensitive) help section with short video tutorials.
These are organized first according to the section of the application, then by best
practices in some commonly encountered situations.
Many controls and displays feature tool tips, and most controls also feature click-tip
help boxes, which are accessible by clicking the [?] icon. The click-tips offer
extended explanations of what display data means and what each control does.
“We want this application to be as intuitive as working with any other applications
that our users use (such as) web browsers, MS Outlook, etc.,” says Eyeblaster


Program Manager Gil Ditkovski, “so it will not require more than a few words of
explanation over the phone on how users are supposed to use it. If users know the
basic terminology of online advertising they will know their way around in the
Campaign Monitor.”

Tooltips provide more information on alerts without requiring a click.


Click-tips offer opportunities for learning within the program. These help
balloons are different from tooltips because they must be clicked to invoke
them, and then must be closed to remove them from the screen. Click-tips
offer more space to describe features and (as in this example) can contain
graphics to aid in explanation.

INFORMATION DISPLAY
Obviously, given the function Campaign Monitor performs, the development team’s
greatest focus was on how to display information—what to display and how to
display it, as well as the crucial question of how to ruthlessly distill a sea of metrics
into the most Spartan format that retains high functionality.
The developers followed the design philosophy of information visualization guru
Stephen Few, who defines a dashboard as the “single-screen display of the most
important information people need to do a job, presented in a way that allows them
to monitor what’s going on in an instant.”
The key principle for Campaign Monitor’s developers was “reduction”—how the raw
information could be reduced to avoid overwhelming users, while still providing the
maximum amount of direction and—most importantly—flagging critical issues that
require immediate attention.


The team opted to keep the number of alert colors to a minimum, and to deploy the
same colors over and over again throughout the tiers of information. Separately,
Eyeblaster’s online advertising experts isolated the major problems that could be
expected to surface during an online campaign, as well as honing the numerical
thresholds that would trigger an error or warning alert. This is functional usability,
rather than design usability, and spotlights the advantage of bringing in expertise
from all over an enterprise.
The progressive disclosure philosophy comes into play as the user works through the
application’s tiers. In the initial dashboard view, three key information items are
spotlighted for each campaign—1) errors, 2) warnings and 3) healthy ads. Numerics
and visual bars allow users to quantify these instantly, as well as to make a quick,
intuitive comparison and estimate the relative overall health of the campaign.
The progressive disclosure expands when the users mouses over the campaign of his
or her choice, revealing a handful of metrics and four more color-coded categories
for further exploration. These are:
• Campaign Setup: Has the campaign ad been approved? Was the PO signed,
etc.?
• Delivery: Is the campaign getting the expected exposure by the publishing
sites?
• Performance: What is the current clickthrough rate?
• ROI: What is the conversion rate?
As previously noted, each of these categories can be clicked to reveal a data-
intensive graph or grid view. The data graphs and grids in the campaign view are the
most complex informational elements in the program.
“The developers spent days on days working on the controls until it finally had the
right functionality,” Rotter says. As a result, the graphs are easy to learn and
understand, even at a glance and even for novice users (as long as they understand
the actual mechanics of an online ad campaign, which is not by definition a usability
issue).
For future releases, the development team plans to allow users to customize alarm
levels and color schemes. This will further increase dashboard and grid view usability
for advanced users, who can tune the program to whatever cues they personally
prefer.


Graphs used in the grid view reflect the colors used at the dashboard level.
This color consistency keeps warnings simple. For users who can’t see the
colors, each element has an associated icon or numerical scale.


An earlier version of the graph view. Removing some of the “decoration” on
each slider has made it easier to evaluate. The additional information
provided in the more recent version also gives a faster indication of the
underperforming campaigns and shows more of the information that users
will want to see without requiring further clicks.


Some of the styles the team considered for the graph views. Note that the
implemented version is one of the plainer options.

INTERFACE ELEMENTS
Campaign Monitor’s development team used Adobe Flex to create its UI, borrowing
or buying standard elements such as checkboxes, dropdowns and various buttons
used in the app. Familiarity works here—the red color-coding for an error, for
instance, is accompanied by buttons and icons showing an instantly recognizable
circle with an X in the center. Green elements use a checkmark, another piece of
shorthand familiar to most tech-savvy users.
Almost every clickable item is 3-D shaded, for a touchable consistency, even down to
the checkboxes. Informational (non-action) clicks are presented as links. Text
labeling is concise but more than adequately descriptive to the task at hand.
Some controls, such as the zoom slider, were skinned to give them a distinctive feel
within the context of the overall interface. These changes are largely cosmetic—
everything works as you would expect it to. Thanks to the innovative approach to
information display, traditional dialogs have been minimized; they are simple and
quickly dispatched when they do appear.


Usability isn’t all about being boring. The skinned version of the zoom control
which Eyeblaster chose for the Campaign Monitor UI ties in visually with the
rest of the UI and provides additional affordances (the white background gets
thicker towards the “+” side of the slider).

A go-to feature for most users is the Campaign Navigation Menu, a panel displayed
from the drill-down levels that starts minimized and animates on rollover. It can be
detached from its right-hand column placement for a better view and pinned in
expanded mode if the user wants to keep the information highlighted.
In expanded mode, the campaign names are easier to read and navigate. Given the
complexity of the information being navigated, it’s good to remind users of where
they can go and what they can do from inside the grid view rather than relying on
them to remember to check back at the dashboard level for other alerts or pressing
tasks.
Another custom control is “select advertiser,” which allows users to navigate or
select among multiple advertisers. That means control of campaigns can be both
vertical and horizontal. For instance, if the application is configured to track an
agency’s entire caseload, an employee can configure his or her view to show only the
advertisers for which he or she is responsible.


Campaign menu, unpinned (left) and pinned (right). Pinning of information-
rich interface elements allows users to keep them visible at all times. The
campaign menu here is a primary source of navigation for users who manage
multiple campaigns but may be less important for users who are focusing on
just one campaign.


Zooming in on the Gantt chart progressively discloses information.

Conventional controls were used whenever possible, such as the filter menus
(left) and checkboxes (right).


INNOVATION VS. CONVENTION
Where Campaign Monitor most notably breaks with convention is the dashboard
enhanced Gantt display. Rotter says it’s the first time a media trafficker has been
empowered to monitor all of his or her campaigns simultaneously. More significant
from a usability perspective is the format’s clever manipulation of psychology to
provide a substantial chunk of information without requiring the user to consciously
acknowledge each bit.
The Gantt chart serves up start- and end-date information to the user at an almost
subliminal level. The format also quietly draws attention to the current day—“what’s
running now,”—most likely the best place to start fixing any issues.
By the nature of the graph, start and end dates can be accessed by a glance in either
direction, but they don’t demand to be consciously acknowledged by the user,
because each floating bar is perceived as a running campaign rather than a
measurement in itself.
But when that information is sought, it’s there, and it can be expanded or contracted
using the zoom slider, which is positioned to be accessible but not intrusive.
Because this sharp departure with the norm is so central to the application, it’s a
very good thing that users can touch ground with familiar controls to handle most
tasks and actions. As previously noted, many controls were purchased or derived
from open-source designs. In some cases, custom controls had to be developed, and
the team focused on familiar feel whenever possible.
Conventional controls “are easier to use since users are already familiar with them
and have already established a mental model in terms of how to use them, what
they do, and what to expect,” Rotter says. Additionally, they save on development
time, since elements are readily available in development toolkits.
The ability to sort and filter campaigns allows a user to quickly prioritize the display
in the most helpful manner, so that the most important campaigns rise to the top of
the window. Conventional controls were used for filtering functions, but the team
developed new elements for the data graphs because they couldn’t find useful
precedents elsewhere that did what they wanted.
The team viewed the drilldown graphs as a usability feature, making them easy to
learn and structuring them to lead to an action. Several different iterations of graph
design were tested, and an initial design was discarded in favor of a simpler and
more accessible version that emphasized relevance.
The format of the status icons and dashboard performance bar displays also required
some creative design, although they rely on very familiar metaphors (the red X for
“problem,” for instance). The design went through several iterations. An early
version of the Gantt view used a large colored dot as a sort of “stoplight” metaphor,
representing the overall health of the campaign as distilled by a formula determined
by Eyeblaster.
Since the application mediates between the user and a massive amount of
information, the question of visual design here became more than a formality. The
visuals had to serve the purpose of distilling information, but they couldn’t just
reduce ad infinitum.


The problem was that when everything was reduced to a single number, the
stoplight frequently returned an overall reading of “error” based even on the most
liberal calculations they could devise that retained utility.
“That it meant it was red and was very alarming to users,” Rotter says.
Based on alpha version feedback, the element was revamped into the performance
bar display. The team experimented with several different versions of this display
and honed it through internal feedback and revisiting the alpha testers.

An early draft of the Gantt view used a single “dot” to denote the project’s
health. Distilling so many variables into a single number ultimately meant that
most projects ended up showing red. Additionally, without further drill-down it
was hard to see why the project was showing up as in trouble. Increasing the
number of variables shown at this level allowed the team to better differentiate
projects’ status.


An early version of the dashboard with a campaign highlighted. Current
campaign pages contain more information but with less visual clutter. Careful
attention to user feedback helped to shape the current view.


Eyeblaster used wireframes during development to quickly mock up design
concepts for initial usability work. Flash mockups were created from these
early designs.

Wireframing was also used for the graph view. Here, an early draft composed
of cut-and-pasted elements shows how the initial thinking subsequently
evolved.


A graphic design draft for the Gantt view. Significant elements from this
version ended up in the final design.


Another graphic design mock-up, here trying out different visual representations
of the status indicators in the Gantt view. By comparing them side-by-side, the
relative merits of each design can be more easily discussed.


USABILITY PROCESS
Campaign Monitor went through a rigorous formal usability process. Total usability
spend was about 20 percent of the development budget. User profiles and common
task scenarios were identified in the development team’s initial market requirements
document (MRD).
“Usability evolution” sessions were carried out at the very beginning of
development, starting with high-level design concept wireframes. These provided a
touchstone for future reference as variations were deployed and tested.
Interactive Flash demos were derived from the wireframes. The team went through a
really impressive number of variations in their quest to find the right visual
metaphors, the most relevant metrics to include, and the most accessible graph and
grid views.
The Flash demos were shared first with Eyeblaster account managers, the internal
personnel who have the most direct contact with customers. Data was collected,
discussed and processed into a second flash demo. Four feedback sessions then were
conducted with four different account managers. Each time, their feedback was
worked into the product, until a formal graphic design demo was produced, also
using Flash. This demo included the Gantt view dashboard, but did not include
drilldown displays. A follow-up version added the graph and grid views.
The graph view went through a lot of changes during this period. The team
approached the changes from a usability view point, with a focus on making them
easy to understand and the goal of presenting the most important information
without overwhelming users. Several different versions were experimented with. The
design called for in the initial product requirements document (PRD) was redesigned
from scratch after input from an early round of user testing.
Based on the demos, feedback and testing, an alpha release was implemented to
select external users. Eyeblaster’s quality assurance team conducted two usability
training sessions with some alpha testers using Morae Usability Testing Software.
The alpha version was also evaluated by two Eyeblaster account managers who had
not taken part in the previous rounds of testing.
The QA team prepared written and video reports for the development team outlining
problems and difficulties encountered by users. This led to more changes at the
drilldown level, which were incorporated into a beta version.
Beta testers were invited to take part based on identifying a representative sample
of Eyeblaster’s user base, with user requirements and location factored into the
selection of the test group. Beta users were given a short training session and
encouraged to use Campaign Monitor on a daily basis.
Each week, the beta users were contacted to seek verbal feedback. Interviews were
conducted both by phone and in person, when practical. Users were also asked to fill
out questionnaires about the application’s different functions. This data was checked
against actual usage, as collected by metrics within the application.
Relatively few changes were made at the end of the beta period, based on the
information collected, which showed users were generally happy with the existing


functionality. However, many asked for new features, which are currently being
developed for a future version.

TEAM
The design team included:
• Product Planning and User Research
o Yael Tolub, Nir Shimoni and Gefen Lamdan
• Program Management
o Ran Sarig and Gil Ditkovski
• R&D Project Managers
o Amichai Kidron and Tsufit Naor
• U.I. and Graphic Design
o Amihay Rotter (Member of UPA Israel)
• Technology Research
o Chen Bekor
• Development Project Team
o Amir Chervinsky, Giri Berenstein, Hadas Or, Helena Belyakova, Ilan
Avigdor, Ilanit Moalyem, Jermy Hoffman, Lena Bernstein, Meital
Kankazil, Rany Shochat, Rinat Sherzer, Ruven Yusupov, Thierry
Sitbon.

The team was heavily influenced by Stephen Few’s book “Information Dashboard
Design: The Effective Visual Communication of Data.”
“It inspired us and guided us throughout the design process, especially when it came
to simplifying data visualizations,” says Rotter.
Visual influences included websites such as www.nikeplus.com and
www.bbc.co.uk/history.
The team’s design motto of “keep it simple” was elaborated somewhat in a quote by
jazz composer Charles Mingus: "Making the simple complicated is commonplace;
making the complicated simple, awesomely simple, that's creativity."


Back row, standing up, from left to right: Amir Chervinsky, Itay Kinnrot, Tsufit Naor,
Yael Tolub, Michael Zilberstein, Rany Shochat, Meital Kankazil, Amichai Kidron,
Helena Belyakova.
Front row, kneeling down, from left to right: Livne Rahamim, Giri Berenstein, Gil
Ditkovski. Amihay Rotter, Jermy Hoffman, Asaf Sella, Rinat Sherzer.

WHY THEY WERE CHOSEN
Showing the fourth dimension—time—in computer applications is not always easy.
Eyeblaster stays with a relatively traditional Gantt view of the campaigns they track,
but through the clever application of status information they reduce the need to drill
down into other views of the information.
Because of the clear visual coding and good dashboard view, this is the kind of
application where a regular user could easily start to see beyond the UI and visualize
their campaigns directly. Timely and accurate customer communication is important
in any industry, but the cost of underperforming campaigns makes quick data access
essential in this market. Providing customers with an immediate overview of their
investment and return allows these customers to quickly react to a changing market.


CMSbox

COMPANY INFORMATION

Company: CMSBox GmbH Design team:
Application: Campaign Monitor Simon Raess, Usability Engineer / Product Manager

Headquarters: Bern, Switzerland
Number of employees: 9
Design motto: “As little as possible, as much as
necessary.”

OVERVIEW/MOTTO
CMSBox is a content-management system designed to make it easy to create, edit
and enhance a website.
Certainly, there is no shortage of such products, with varying degrees of utility.
CMSBox distinguishes itself by offering an auspiciously usable method of creating a
site with plenty of personalization.
The parent company, CMSBox GmbH, is a young company targeting highly usable
Web applications with nine employees, including system and software engineers,
media psychologists and usability professionals.
The usability mandate guiding CMSBox was to do “as little as possible, as much as
necessary,” said Simon Raess, the company’s Usability Engineer and Product
Manager.

WHAT DOES IT DO?
CMSBox creates semantic, valid and accessible XHTML source code so that users
don’t have to. The system is aimed at relatively inexperienced users but tuned to
accommodate professionals who come to a project with higher expectations.
Users can work with a fairly generic but serviceable template, or they can
commission professional designs which are then edited using the CMSBox interface.
The code is generated through a combination of user interface elements—including
text inputs, lists and forms.
Elements are graphically arranged on the site in WYSIWYG style—the user is
presented with the page as it will appear and can edit content right on the page
simply by clicking the relevant element.
The core idea of the application is “simplicity taken to the extreme” using user-
centered design techniques, including rapid prototyping, contextual inquiry and log
file analysis. A novice user can create a basic informational page using CMSBox just
as fast as she or he can type its content, and multi-page sites are not far behind.


(Note: A new and significantly different version of CMSBox was released during the
evaluation process for this report. The main section of this report discusses the
application as originally submitted, since that is the version we judged in determining
the winners. The new version is discussed at the end of the case study.)

The CMSBox homepage: “Works simply/Simply professional”


WHO IS THE USER?
The user base can include anyone seeking a quick path to having a frequently
updated website without the use of HTML coding, but a typical user is someone
working in a small enterprise with a non-static website but no full-time designer.
In addition to facilitating frequent updates, CMSBox is aimed at users who want to
maintain a consistent corporate identity online, with a minimal learning
commitment—the goal is one hour to basic proficiency, even for users with little or
no experience in Web design.
The sites produced are basic but attractive and functional, with minimal load times,
and designed to meet with established standards and provide accessibility.
The latter point reflects a slightly wider net being cast in terms of the user base.
CMSBox isn’t just concerned with producing a Web page using visual editing—it’s
concerned with producing good pages with clean code.
Anyone who has used a WYSIWYG HTML editor can tell you that generating clean
code is one of the biggest challenges. We often hear comments from developers
along the lines of “We can either do standards or usability, not both.” CMSBox shows
that you can do both.
The use of professionally designed custom layouts helps make this possible, allowing
the actual editing interface to be tightly constrained without prohibiting individuality.

NARRATIVE/WALKTHROUGH
When users log in for the first time, they’re presented with a Web page that
describes how to use CMSBox. That’s not necessarily unusual for a Web-based
application, but the tutorial in this case is also the workspace. The introductory page
is a template and every element on the page can be edited, providing a unique jump
start to the user process.


Starter page with tutorial boxes describing and providing editable examples of
changing text, dragging and dropping elements and copying and pasting
content. The intention is to show users how the system works from within the
system. In this way, content creators can see early gains while they learn the
intricacies of the system.

Even the support links can be edited (possibly a problem for those who jump in both
feet first and accidentally delete the tutorial links, although the information is
available elsewhere on the site in case of mishap).
Video tutorials are available which cover the basic mechanics of the application.
Since the mechanics are pretty intuitive, a short video covers quite a bit of ground.
But the primary path to user learning is play.
Pages in CMSBox are made of “elements,” which are blocklike modules consisting of
common HTML page features—text, image, forms, etc.
On the introductory page, the blocks are already in place. When the mouse rolls over
an editable block, it is highlighted in light blue, allowing the user to quickly get a
sense of the page’s breakdown.
There are two primary controls here—users can click on an editable block to
customize its contents, or drag the block to move it elsewhere on the page. Drag-
and-drop editing works intuitively and items snap into position smoothly.


It’s about as simple as you can get. First time users can quickly orient to the
application by playing with the elements already in place on the introductory page.
This approach leads users through the mechanics of the site while still giving them
total control over the content they add.
Once the basic mechanics have been mastered, users turn to the toolbar ribbon for
additional features. The ribbon here is an interesting hybrid. The left side of the
ribbon features button controls. When clicked, the right side of the ribbon presents
submenu-style options in a horizontal strip, text input fields and/or dropdown
menus.
The right-side elements are context-sensitive. Although there is a slightly different
layout for each control, the consistent placement makes it easy to find what you
need.
The main buttons (below) are, from left to right, “CMSBox” (indicating the
application’s editing mode), Editor (mode indicator), Archive, Edit, Insert, Copy and
Undo. Buttons whose function is active or relevant to the user action are subtly
highlighted with a blue flash.

The toolbar ribbon shows that the user is in editor mode rather than archive
mode and that the Edit submenu is being shown to the right

Here the ribbon is shown with the Insert control active. The Insert submenu
choices then appear to the right.

The “Insert” button is really the master control here, allowing users to add pages or
add elements to an existing page. Clicking on the button from the page view brings
up submenu choices, including Page, Article (Text), Table and Form.
Clicking the button while an element is highlighted brings up a list of additional
context-relevant options for inserting text, titles, lists, images, forms, files (such as a
downloadable PDF), video, links and rules.
The available elements represent a pretty broad selection, including customizable
forms and fields. Multimedia content—including images, various types of documents,
and specific audio and video file formats—can also be embedded.
Controls can be selected from the toolbar, but they are also activated in a context-
sensitive manner when the user clicks on an element. For instance, clicking a text


block will highlight the “editor” control and invoke the appropriate submenu options
on the right side of the toolbar.
The robust Undo button invokes a dropdown with a long list of past actions. We
couldn’t exceed the maximum number of entries during testing. Users can step
backward and forward to their heart’s content. This feature is incredibly valuable as a
confidence booster, because once users know that they can undo their actions they
are much more likely to explore new functionality, safe in the knowledge that they
can always back out if things go wrong.
Time-sensitive options are also available. For instance, earlier versions of pages can
be accessed, or a page revision can be scheduled to automatically publish in the
future.

CHOICE
CMSBox presents an interesting mix of user freedom and tight constraints.
Its building-block approach to page elements differs markedly from the template-
based design that you more commonly see in WYSIWYG editors. Elements can be
easily mixed and matched and rearranged. It “feels” freer—a good case of usability
delight.
The drag-and-drop scheme offers a lot of freedom for users in terms of the internal
layout of the page, but there is a tradeoff.
Major page design features—like page background, font, or a color chooser for text
color—are absent from the user interface and can only be changed at the
professional template level. Instead, users select from CSS-style option such as Body
Text and Header.
This was a deliberately chosen compromise, with the idea of giving users plenty of
freedom to customize pages without allowing them to wander off the reservation.
“The highest level of usability can be reached by relieving the user of tasks that do
not require explicit user input in order to be completed,” says Raess. “Many
important aspects such as human readable URLs, formal search engine
optimizations, image and movie uploads and conversions, dynamic site-maps and full
text search indices are generated automatically by the system.”
In other words, the user is given plenty of freedom in the areas where it’s really
needed—creating content—but they are strongly guided or even constrained in areas
that are tangential to the content task. That might be frustrating for some expert
users, but it’s perfect for busy content owners in the small to medium enterprise
space, who more often than not just want to get their content onto the Web quickly.
Other products in the Web design space focus more on the incremental design
choices—selecting fonts, choosing from color palettes, deciding whether links should
highlight on hover, and so on. CMSBox is much more focused on the informational
content.
“The main reason we restricted editing the design of the website is to guarantee the
company's corporate identity,” says Raess. “We consciously reduced the number of
elements, attributes and functions to a necessary minimum, while making them
generic enough to be combined arbitrarily with each other.”


Raess is too modest here. “Generic” doesn’t do justice to the design of the individual
elements. They are workmanlike but cleanly designed. Combined on a page, they
don’t look like disparate boxes that have been thrown together at random (a chronic
problem with novice-designed pages). Rather, they flow well with each other and
with the static elements on the page.
Thanks to the designers putting this thought in at the design stage, users don’t have
to worry about it during their implementations.

A generous undo function inspires a sense of adventure: the more confident
users are that they can back out of a bad choice, the more likely they are to
experiment with novel features.


Authentication uses a lightbox effect (dimming the page, showing a “dialog”
as a layer on top) to let users know they are now working with a feature
which is “outside” their pages, while still understanding the context of the
authentication dialog.


Adding an image is as simple as browsing for it on the host computer. Image
format, size and storage location are handled automatically by the
application. For some more expert users this may feel like a loss of control,
but for the target audience this kind of automation allows them to focus on
the content, not the creation process.


Formatting a link is as simple as choosing its destination page. The
application handles the rest based on its pre-determined styles. This has the
added benefit of producing “clean” code where the look can be easily updated
by global application of a style sheet change.


Text formatting options appear on the right pane of the toolbar. Clicking into
an area of text brings the correct controls to the pane contextually. (Showing
the applicable commands, depending on the current context, is an approach
similar to the “Ribbon” UI introduced in Microsoft Office 2007, though the
specific design in CMSBox is simpler.)

By simplifying the choices and focusing instead on how elements combine, “the
number of rules that need to be learned by the user has been considerably reduced,”
Raess says.
It’s definitely a give-and-take situation.
For example, form creation has a fairly constrained path. When only one option is
available, it’s automatically formatted as a checkbox. Two to three options are
automatically formatted as radio buttons, and four or more are formatted as a
dropdown list.
In other areas, the sky’s the limit. For instance, there are no restrictions on the
number of elements that can go on any given page, or on how many different types
of element can be added.
“The application provides the most fundamental and necessary functions and
features, says Raess. “All superfluous settings were done away with in order to help
the user to focus on the essential tasks.”


This approach ensures that once good usability practices have been coded into the
application, it becomes harder for content creators to “mess up” the page. This may
prove frustrating to some content creators who have a specific effect in mind, but
overall their end users will most likely thank Raess for constraining otherwise
whimsical designs.

INTERFACE ELEMENTS
The toolbar ribbon has a metallic, technological feel. The buttons are big and icon-
based. Change of state is indicated with a blue dot, and icons pulse on mouseover,
resulting in a very tactile feel. Tooltips with very brief explanations accompany each
major control.
Many submenu controls appear in a retro computer stripe, white text labels on a
green background that show an underline on mouseover. The major elements are
capitalized; when context sensitive options appear they’re in title case.
The application controls are concentrated in the toolbar, except for the context
menu, where options are sensibly grouped and appear next to a smaller version of
the toolbar icon.
The context menu offers cut, copy and paste, undo, and options to duplicate or
delete the highlighted element. The page itself can also be selected and manipulated.
The context menu also features a title function that identifies the type of element,
echoing the submenu choice and providing a little user learning on the cheap.
Controls within the HTML workspace are also highly intuitive, which is a good thing,
since they’re not conventional.
Mousing over an element creates a highlight around the whole target area, clearly
signaling where user actions can take place. Clicking on the element to enable
editing switches the highlight to a dashed-line box. When an element can be
dragged, the cursor transforms into a four-way pointer.
“Working with the program allows the user to have a type of conversation with the
application, which provides him with continuous feedback as to the changes made to
content or format,” says Raess.
Standard browser buttons and concise labels are used on the Web pages produced
by CMSBox users. On horizontal forms, button position is fixed on the right, and on
vertical forms, they are located on the bottom.


Inline editing of a text box involves nothing more than clicking and typing.
The other elements on the page flow around the box as it grows, and
formatting is achieved by changing the options to the right of the tool ribbon
buttons.


Form editing again provides the minimum options necessary to create a field,
but with sufficient control to meet users’ needs—constraint to ensure
compatibility, freedom to ensure editorial control.


The context menu provides faster access to the key commands that users
would need—undo, cut/copy/paste and a duplicate and delete function.


Publishing is as simple as setting a “live” date (which sensibly defaults to
today) and hitting the button. Viewing archival versions of the site is equally
easy using the date picker to see what the site looked like at that time in
history. By re-using the same control types for these different actions,
CMSBox reduces users’ learning requirements.


USABILITY PROCESS
“We first identified the most salient information the user needs to successfully
complete his tasks, while the largest portion of the data remains completely invisible
to the user,” says Raess.
The minimum information needed by users was then divided into a relatively small
number of clearly defined and semantically structured chunks containing up to 10
similar items.
“For this purpose we employed methods such as card sorting and cluster analysis,”
Raess says.
User feedback and usability testing were incorporated into the development process
from the moment the product was conceived. In order to define product
requirements, CMSBox performed user needs analysis, such as customer interviews,
in-depth competition analyses and focus groups.
Rapid prototyping was used for basic conceptual modeling, card sorting for
information architecture, and expert interviews were conducted while developing the
interface design. Functional prototypes were built and evaluated using empirical
methods such as contextual inquiries, shadowing and log-data analysis.
User experience is continually evaluated with the help of longitudinal usability testing
and systematically collected customer feedback.
“Usability is half systematic user research and half anticipatory creativity,” says
Raess.

NEW VERSION AND FUTURE PLANS
A substantial update was issued after the judging period for our contest. The revised
design was not available until late in the process.
The most significant and clearly visible change was the replacement of the toolbar
ribbon with traditional dropdown menus.
The menus include CMSBox, which is devoted to application controls that do not
affect the contents of the page, Edit, Insert, Clipboard and History—essentially the
same functions as before, but regrouped.
“As with all aspects of application design, our motto here was: as little as possible,
as much as necessary” says Raess. “We prefer clearly grouped menus to nested
popup menus. Unavailable commands are not hidden but rather deactivated.”
The context menus for handling elements were removed. Text boxes highlighted for
editing now change the display font to signal the change in state.
Future plans include the addition of a global CSS style-sheet editor. Individual items
will remain tied to the global stylesheets in order to insure site-wide consistency. But
users will be able to change global settings for color, size, text, etc. for specific
elements such as headers, text boxes or links.


A newer version of CMSBox—The font now changes to show the highlighted
area when editing inline.


The newer CMSBox menu removes the need for the tool ribbon. A change in
text case and a small dot show the active command (Editor in this image).


The newer Insert menu. Items that were shown in green to the right of the
buttons are now menu items in the menu.


TEAM
Simon Raess is CMSBox’s usability engineer and product manager. He is also co-
founder and partner of CMSBox Ltd.
He studied Media Psychology at the University of Bern, Switzerland. He has taught
usability at the university and worked as a usability engineer at Swisscom
Innovations and the University of Bern.
“Excellent application design is all about streamlining, consistency and elegance,”
says Raess, who is co-author of several usability textbooks, a guest lecturer and a
usability consultant.

Simon Raess


CMSBox has, along with a couple of the other applications in this annual, a double
challenge. As they are a development environment they must be usable to their
audience (content creators and publishers) but also to that audience’s audience (end
users). The CMSBox team has successfully balanced on the fine line of just enough
user freedom to provide a valuable tool, yet not so much user freedom that the end
result becomes confusing or inconsistent to end users.
To have done this without a markedly different editing environment is an additional
challenge, and one which the team has met well. They have demonstrated that just
one extra line of controls is all that is required to turn a website into a Web authoring
environment.
WYSIWYG interfaces are hard to do well, but here even the initial tutorial is
embedded in the real interface. By ensuring that all interaction takes place in the
view that visitors will have of the site, it becomes quickly apparent to content
creators when their composition is incorrect. There are no modes to switch between,
no edit windows to keep track of; it is immediately clear to users what effect their
actions will have on the final layout because they are always working within that final
layout.


FotoFlexer

COMPANY INFORMATION

Company: ArborLabs Design team:
Application: FotoFlexer • Heston Liebowitz, Lead Designer

Headquarters: Berkeley, Calif. • Dominic Antonelli, Software Engineer

Number of employees: 16 • Justin Fiedler, Software Engineer

Design motto: “A design should be usable even
by your mom.”

OVERVIEW/MOTTO
FotoFlexer is a full-featured photo editor, delivered over the Web and powered by
Web design sensibilities. The company calls it “the world’s most advanced online
digital photo editor” and it’s a pretty credible claim.
Despite its impressive array of features, where FotoFlexer really stands out is in the
realm of usability. Thanks to its Web deployment, it’s a high-power application with
no installation, no configuration and no footprint on a user’s hard drive.
The application is produced and hosted by Arbor Labs Inc. of Berkeley, Calif., a 2006
startup founded by a group of (mostly) alumni and graduate students from the
University of California, Berkeley. It’s offered in seven languages, and comes as a
standalone application or as an API. The app has partnered for easy photo importing
and exporting from the Web’s leading photo sharing and social networks (including
Facebook, Picasa and MySpace).
“I believe a design should be usable even by your mom,” says Heston Liebowitz, lead
UI designer and graphic designer for FotoFlexer. “Since my mother is not technically
inclined at all, this places the bar quite high.”
Liebowitz says “trained professionals” run into the same usability obstacles as casual
users, making the placement of that bar a key measurement of the application’s
overall utility.


FotoFlexer’s homepage must sell the application and allow easy access points.
It also provides sample images in case users are scared to use their own.


WHAT DOES IT DO?
FotoFlexer is all about the features, boasting that it has 90 percent of the most
popular features in the consumer-level edition of Photoshop. The list includes the
necessities (cropping, resizing, rotation, contrast and exposure) as well as the most
common pro-am features (red-eye, simple retouching, color balance).
In the realm of special effects, FotoFlexer also shines, with features for captioning,
speech bubbles, clip art additions, color manipulation, compositing, distortions,
removing backgrounds, morphing, seam-carving, animation, layering and
transparency, smart cutout and smart scissors. Filters include painting and sketching
effects, sepia, bronzing, “cartoonify,” pop art, heat map, film grain, and blueprint,
among other things.
Navigating this mass of possibilities is only the first challenge. Usability is not just a
question of managing volume here, it’s also about flexibility. Anyone who has worked
with photo-editing tools knows that there’s a world of difference in how you
manipulate layers, for instance, as opposed to curves. Each filter or effect uses
different sorts of controls, whether handles for rotation or sliders for contrast. The
Holy Grail is implementing all these features in a consistent manner, so that users
don’t feel like they’re abruptly exiting one application and entering another.

WHO IS THE USER?
FotoFlexer’s user base is mainly casual photographers, including social networkers,
bloggers and travelers. Most users are looking to share photos online, but the final
product also needs to be printworthy, whether for a traditional snapshot or special
formats such as a greeting card or poster.
Since most users are using this application for fun, there’s a premium on features
like adding captions, clipart, frames, and/or arty filters.
FotoFlexer’s 1.6 million worldwide users skew young, as might be expected from the
above, generally teenagers to people in their mid-20s. Regardless of whether they’re
looking to print at some stage, most are interested in sharing photos online for self-
expression and social communication.
“They typically cannot afford, and don’t have the patience to learn, complicated
desktop photo-editing software,” says Liebowitz.
With a user profile like this, the learning curve needs to be virtually nonexistent.
Fortunately, that’s very much the case here.


FotoFlexer’s editor page, which can be accessed without signup, provides the
basic activities with no further exploration required. However, much fun is to
be discovered on subsequent tabs.


THE APPLICATION
FotoFlexer aims to get users in and working as quickly as possible.
“Even simple editing tasks such as fixing red eye are quite complex when performed
through the streamlined interface of Photoshop or The Gimp,” says Liebowitz.
In an application like Photoshop (aimed at trained professionals), the photo itself is
the center of gravity. Tools are palletized, categorized, nested, piled on top of each
other and generally minimized in terms of visual weight in the window.
In contrast, FotoFlexer puts the tools front and center, organized in plain English and
with strong weighting. The photo is still at the center of the universe, both visually
and in terms of process, but the tools are given a dominant position in a series of
tabs and hierarchically dependent ribbons across the top of the screen.
The controls are structurally reminiscent of the Office 2007 toolbar ribbon, which
provided inspiration to several of our winners this year, but like the other awardees,
the reduced feature set makes this implementation more usable than the original.
Until recently, we considered toolbars an expert feature, but FotoFlexer and our
other winners have reversed that psychology. The generation of toolbars inspired by
the Office 2007 ribbon have evolved sharply toward usability.

Three examples of toolbars in FotoFlexer.


FotoFlexer’s Effects controls scroll horizontally. Also note the use of a “New”
label on new buttons. Such internal advertising is decidedly untraditional for
applications. It’s more of a website convention, but since FotoFlexer is a Web-
based app, it can be appropriate to borrow selected Web design ideas. In this
case, the “New” sash helps overcome the problem of experienced users’
fixation on already-known features: if nothing else, it’ll make them aware that
something new has been added to the application.


In contrast to the complexity of the Office ribbons, each FotoFlexer ribbon is just a
set of buttons—featuring a consistent size, look and feel, comfortably spaced and
usefully grouped. Non-button controls are progressively disclosed after clicking on a
button. (See Idera’s SQLdm, page 140, for a similarly effective approach to the
ribbon.) Under this layout, you can’t miss the tools.
First-time users don’t even have to log in to start working—a sharp departure from
other online tools of this sophistication. As soon as you activate the app, you’re
invited to upload a photo or select a sample picture. Users are only asked to log in
when absolutely necessary—for instance to save a photo, or change persistent
settings.
“We were very aware of “empty page” syndrome with applications of this sort, where
users are unsure how to start,” says Liebowitz. “By encouraging users to upload a
photo from the homepage, or edit a sample image, we made it very easy to get
started with a photo from the get go. The purpose of the site homepage is to guide
users to the application with a specific photo already loaded.”
Users are immediately dropped into the main editing window. Basic controls (such as
auto-fix, red-eye, cropping, contrast and rotate) are served immediately. Multiple
images can be loaded and worked on concurrently.
FotoFlexer’s narrative is generally organized along an exploratory model, with saving
and sharing work as the easily accessed endpoint.
“In certain areas (such as opening and saving images), it is more important to lead
users towards the correct goal,” says Liebowitz. “We made options in these windows
as simple as possible, so that the correct action could be determined and carried out
quickly. If users cannot figure out how to open an image, then they can’t very well
start editing it. Likewise if they cannot figure out how to save, they probably will not
return.”
Otherwise, users are expected and encouraged to wander among the application’s
features, experimenting—or more accurately, learning by playing. The program
doesn’t demand much in the way of recall, but even with the large number of
features, the strong organization means most users will quickly determine and
remember where they can find the items that interest them.
This is a sharp contrast to desktop competitors like Photoshop, where arcane
organization can make it difficult for even experienced users to rediscover the
location of a feature they have used in the past.


FotoFlexer with multiple images loaded. These images can be worked on
individually or more experienced users can treat them as layers, with opacity,
blends and other more advanced features.


INTERFACE ELEMENTS
Controls are grouped on a series of tabs, Basic, Effects, Decorate, Animations,
Beautify, Distort, Layers and Geek. The tabs proceed from left to right roughly in
ascending order of complexity, so users scanning left to right will progress naturally
from easier tasks to more complicated ones as they explore.
The buttons and tabs are well-spaced to avoid accidental clicks. Both the controls
and workspace resize themselves seamlessly to fit the browser window width, up to
1280 pixels wide. The proportionate size and spacing of the tabs and ribbon keep the
visual grouping dynamic steady throughout.
“We developed a method to automatically and continually adjust the zoom level of
the canvas to properly fit within the available browser window space,” says
Liebowitz. “As a result, no matter what size screen is in use, the photo always fits
nicely on the canvas, allowing the user to see the entire photo.” This reflects an
important interface rule—always let users see the entire canvas they are working on
as a default. If they choose to change the size later that’s fine, but initially they
should be able to view and work with the entire image.
Each tab features a series of large, colorful buttons with a descriptive icon for each
function. Hovering over the button produces a tooltip with just a couple words of
descriptive text. Clicking a button makes the ribbon fade into a control dialog,
generally including options for “apply,” “cancel” and “advanced options.”
Where applicable, clicking on some buttons will produce brief, clear instructions on
how to use the tool, and most clicks will immediately invoke a preview of how the
effect will look.
Tabs with more options than can be displayed on a single screen can scroll
horizontally. This allows for future feature addition. Generally, however, the number
of options under each FotoFlexer tab represents a single screen’s worth of actions.
Dialogs appear where appropriate. Most of these are pretty simple, but some of the
more sophisticated “geek” functions, such as smart recolor or smart cutout, will open
a full-fledged dialog window with a series of fairly standard controls. Wherever
possible, FotoFlexer employs a one-click-and-apply approach. Progressive disclosure
techniques allow users to unfold more advanced settings for even the most basic
functions, without forcing them on novice users.
Another important element is the persistent Undo feature. Once users know that
they can easily remove an effect, they will be much more inclined to explore and
play with unfamiliar features, thus learning new tricks as they work through the
application.


A simple dialog in FotoFlexer. Selecting a shape shows a larger preview, and
then a single button click applies the action.


An intermediate dialog requires choices in three sections, but still shows the
preview as in the simple dialog. Users’ exploration of simpler dialogs should
allow them to work with the more complex ones as they learn the application.
WYSYWIG (What You See Is What You Get) display of fonts and borders here
leaves users with no surprises.


Once users start working with advanced dialogs, the interface changes to a
more typical image editing format. However, videos (top) or tutorials
(bottom) are often provided to help users work with the different options.


Often, informational or procedural dialogs will replace the tools within the tool
bar. This is a very simple technique for ensuring that users see the dialog. In
countless studies, we’ve observed users overlook error messages or
informative dialogs when they were placed out of the way. And yet, in this
application, it would often be inappropriate to brutally overlay the user’s
photos with a more in-your-face dialog box. (Particularly in this example,
where the user is asked to select an image.) Temporarily overlaying the
buttons works well here.

MENUS
Probably the most compelling choice the design team made in implementing
FotoFlexer was to completely abandon the nested menu model. The tab/ribbon
hierarchy is completely intuitive and gives users a clear direction any time they want
to employ a control. While menus are familiar, they are also the bane of many
professional image applications, and the focus here is cultivating novice users.
“We chose not to use menus for several reasons,” says Liebowitz. “First, we felt they
were not ideal in a web application, since menus on websites are still relatively


unexpected and not standardized. Second, we didn’t want to hide the application’s
features in menus, opting for tabs instead. One of the biggest complaints of desktop
image editors is that users don’t know what features are available, let alone how to
use them.”
One notable exception to the “no menu” rule is a right-click context menu featuring
several arrangement options, which is accessed when users select an image from
among multiple images in the workspace. This is a familiar convention for those who
have worked with layered image processing applications in the past, and it adds to
FotoFlexer’s general feel, which resembles a desktop-installed application more than
a Web app.
(A technical distinction also helps this case—client-side processing. Since photo
editing tends to be bandwidth-intensive, the user’s computer is tasked with most of
the processing. The result is generally faster performance, and controls which are
much more responsive than a typical Web control. The team also felt the tab/button
scheme helped enhance the speed and flow of actions.)

BUTTON DESIGN
The design of the buttons also provides a key advantage. Manipulating images is a
visual task, and the use of large illustrative icon/buttons meshes perfectly with the
task at hand. Although each is distinguishable, they’re also similar enough that they
group before the eye. Subtle shading gives them an understated 3D look that is
eminently clickable.
The button art does a good job of representing what the control will do to the image,
and the familiar text labels clarify any function that might not be immediately
apparent. The combination of text label and illustrative icon is greater than the sum
of its parts.
Whenever an effect has a default setting, clicking the button provides an instant
preview of the resulting image, with an option to apply or cancel. The controls are
consistent with each other to an impressive extent, given that “twirl” and “crop” and
“sharpen” are like apples, oranges and pears. Action elements generally were kept to
a minimum, in order to avoid overwhelming the user with too many focal-point
options at any given moment. In most cases, there’s one “right” choice which is
pretty apparent.
Grouping is used effectively throughout the application to control the amount of
information being displayed at any given time as well as to guide the user through
different phases of work. The design teams also tried to keep the grouped
organization along the lines of a page metaphor, as opposed to relying on scrolling
(although this is not entirely absent).


Image-distortion control buttons are visually indicative of their action, if the
labels were not sufficiently descriptive. What will “squish” do to your photo?
Seeing the icon makes this clear. Yet, seeing the icon in isolation (as done in
many other apps’ toolbars), would not be sufficient for new users to
understand the action. Truly, icons + labels reinforce each other and
constitute the superior design in this case.


Once the Twirl control is selected, its options replace the tool bar buttons.


DIALOGS
Modal dialogs are used for some functions. As much as possible, the team tried to
make the dialogs follow a consistent scheme of size and structure, and appear in the
same location on the screen, with a preview or selection on the left and controls on
the right. Some of these are unavoidable given the function being performed, but the
team is working on ways to minimize or eliminate them, says Liebowitz. “It tends to
be intrusive, and breaks up the flow of editing,” he says.

The team realizes that modal dialogs break the flow of editing, and is working
on ways to remove them.


Other dialogs use a “Lightbox” effect to show that they require attention
before the user can proceed. This helps to focus attention on the important
question and because the dialog is actually just another layer on the page, it
prevents users from clicking on the main page and thus “hiding” the dialog.


Even the regular Save dialog has been replaced with one which fits better
with the application’s metaphor. “Saving” can mean different things when
both the image and the application are online, and FotoFlexer makes the
options clear.


Like all good applications, FotoFlexer shows a progress bar when actions
could take time.


HELP AND ERROR MESSAGING
For the most part, FotoFlexer’s help schema is pay-as-you-play. For most functions,
it’s assumed that users have a general sense of what’s going on, and by keeping the
controls minimal and the preview instant, exploring users will quickly grasp what a
slider for “softness” under “blur edges” is going to do.
The program provides some limited handholding, but overall the help and guidance
are pretty minimal, which is OK given the transparency of most functions. Occasional
tips are provided, and the application will occasionally direct users to the next step in
employing a tool. Most of these are pretty minimal and focused on short, clear
actionable messages.
It’s unavoidable that some functions are simply too complicated to stick with the
click-and-apply model. In cases where a function simply exceeds the model, inline
help videos are offered prominently—right inside the control window, where their
relevance can’t be missed.
One of the very few nitpicks we have about FotoFlexer is the prominent placement of
a button featuring a bold, black question mark. When we see that icon, we think
“help”—but what we got instead was a feedback window.
“To be honest, there isn’t a good visual metaphor for ‘Give us Feedback,’ at least
that we could find,” says Liebowitz. “Instead of making up an arcane icon that would
rarely get clicked, we opted for the more universal question mark. It communicates
‘help’ as opposed to ‘feedback,’ but in the event that a user does need help, we
probably did something wrong with the UI, and thus would like to know about it.”
There is no “help” section in the traditional sense, at least not from within the
application window (you can back out to the homepage and find a handful of demos).
There are no tutorials (except those embedded similarly to videos), no FAQs, no
right-click tooltips, no context sensitive help and no indexed list of basic instructions.
Granted, you won’t find many applications that have so little need of these features,
and we did not encounter a single user moment where we genuinely needed them.
The absence did not create a usability obstacle, although it was a little shocking.
“As strange as it may seem, we have never heard a user complain about a lack of
help resources,” says Liebowitz.
That’s a pretty strong testament to usability. Another factor that likely contributes to
the lack of complaints is the application’s error-resistance.
Short of tripping over the Ethernet cable, it’s pretty difficult for a user to create an
error message in FotoFlexer. Short of that, the only way we found to trigger one
during testing was entering an invalid username at login. When error messages do
occur, a brief and straightforward message is provided.
Multi-level undo provides pretty good insurance against the unlikely event that
something does go seriously awry. Aside from the confidence the feature inspires in
users generally, multiple undos are an absolute necessity in image processing, which
always involves a certain amount of trial and error unrelated to the skill of the
application’s programmers.
Undo (and other functions) can be accessed via hotkey, but the function is irregularly
available.


“Adobe Flex is less than perfect with event handling, and as a result keyboard
shortcuts work erratically,” says Liebowitz. “We did implement keyboard shortcuts,
but until Flex becomes more mature, they canot be relied upon.”

There are few places to make errors within the application, given its
exploratory nature. Error messaging suggests a potential solution to the issue
alongside the error description.


The question mark icon opens a Feedback window rather than help. Help has
been integrated into the UI wherever possible, and the team want to hear
about issues that lead to user confusion so that they can be resolved in future
releases.


Eliminating the nested menus was an innovation from the perspective of the image
processing application, but as noted above, such menus are not actually conventional
for those working online. In general, the development team opted to stick with
desktop convention wherever possible.
“Only when an existing convention did not exist did we innovate a new approach,”
says Liebowitz. “Photo editing is complicated enough without introducing foreign
design elements.”
Although FotoFlexer does feature some distinctive design, Liebowitz says the team
approached their task with restraint in mind.
“From the beginning, we decided that usability came first and visual design was in
the service of usability,” he says. “We wanted to design an attractive product, but
felt that when ‘in the flow’ of editing, the interface should fade into the background
and become an afterthought to the user. Nothing is more frustrating than a pretty
interface that quickly gets in your way when trying to accomplish a task.”
Early drafts of the design were extremely minimal. The overall page structure
remained consistent throughout the process, but color and a few other bells and
whistles were added after feedback from various quarters.


An example of a using standard controls for a nonstandard feature. This
enables users to apply their existing knowledge to a new environment.


USABILITY PROCESS
Arbor Labs conducted usability testing throughout the development of FotoFlexer,
but “not on a routine schedule or in a systematic way,” says Liebowitz. As a startup
without outside investors, there wasn’t a formal development budget. Five to seven
man-hours of development time were devoted to formal usability testing
(significantly less than one percent of total development).
Testing was done on a feature-by-feature basis, due to the small team and fast
development cycle. “The team utilizes an iterative design process, where features
are released quickly, and then revised later in response to user feedback and later
testing,” Liebowitz says.
Most usability testing was heuristic, but users were called in at various points,
especially when team members had divergent opinions about how to proceed.
Generally, these tests were informal, with a handful of participants.
Feedback from these tests “led us to an 80/20 approach,” Liebowitz said. “By
default, the application is set up to serve the most common users.” That meant a
focus on fast application responsiveness and a de-emphasis of complicated options
for advanced users.
Although the team didn’t take part in user modeling per se, they did draw on
demographic information from Web analytics to get a snapshot of who was using the
application, as well as informally collecting feedback from Facebook users who
accessed FotoFlexer. This information was used to inform design decisions.
Liebowitz describes himself as “self-taught” on usability issues and always looking to
learn from each project he works on. Influences included
• Jeffery Zeldman (Happy Cog Studios) and the staff of A List Apart magazine;
• Jakob Nielsen (useit.com and books);
• Donald Norman (website and The Design of Everyday Things);
• Vincent Flanders and his book, Web Pages That Suck, the book that sparked
Heston’s interest in usability to begin with.

TEAM
FotoFlexer’s design team includes:
• Heston Liebowitz, a Web developer and entrepreneur with several startups
under his belt. Prior to working on FotoFlexer, he helped develop
MacBand.com, a music-sharing website. Heston was the lead UI designer and
graphic designer for FotoFlexer. He is responsible for all visual elements of
the website and application, and the overall user experience.
• Dominic Antonelli, a graduate student at the University of California,
Berkeley, who is currently researching architectural techniques for reducing
power consumption in dedicated multimedia processors. He has a bachelor’s
degree in computer science from Notre Dame, where he graduated summa
cum laude. Antonelli executed much of FotoFlexer’s UI development and


contributed significantly to the design of its text, shapes and effects controls,
and the innovative automated zoom functionality.
• Justin Fiedler is an alumni of University of Wisconsin, Madison, with a
bachelor’s degree in computer science. His interests include computer vision,
image processing, and real time algorithms. Fiedler designed and built
FotoFlexer’s edge-detecting “Smart Scissors” (similar in function to
Photoshop’s magnetic lasso).

Left to right, Justin Fiedler, Dominic Antonelli, Heston Liebowitz

FotoFlexer has created a refreshingly simple interaction for the key tasks and effects
that their target audience will want to apply to their photographs. Design
professionals may scoff at the lack of options but that is half the battle in this case.
The FotoFlexer team realize that their product is as much about entertainment as it
is about aesthetics, and if entertainment is a major goal, then the interface has to
“disappear” from the interaction as much as is possible.


Creating online versions of applications “because you can” serves no useful purpose.
Creating an online application which adds to the user experience by interacting well
with other online services (in this case, photo storage sites) gives users an easy to
pick up and use alternative to desktop-based editing applications.


PRISMAprepare

COMPANY INFORMATION

Company: Océ-Technologies B.V. Design team (continued):
Application: PRISMAprepare
Product Design
Headquarters: Venlo, The Netherlands
• Guido Stompff
Number of employees: 24,000
• Rob Zweerman
Design team: • Estella Stok
• Arjen Wind
Interaction Design Usability Research
Edward Bosma, • Eddy van Vliembergen
Fred de Jong • Abbie Vanhoutte
Robert Eijlander • Sanna Langeveld
Merijn Neeleman Modeling
Anita Morskate • Ron Dongelmans (digital modeling)
Bas Hermus • Dirk Soentjens (digital modeling)
Jannie Dijkstra • Hay Gout
Carlijn Compen • Frank Willems
Nanne Krikke Graphic Design
• Saskia van Cleef-Megens
• Andrea Meessen
• Jacqueline Jansen
• Pascal Hagens

OVERVIEW/MOTTO
Netherlands-based Océ is one of the world’s leading suppliers of systems and
services for digital printing and document management. The company provides print,
copy and scan devices and workflow software for professional users in office
environments and print-centers. Océ also does consulting and outsourcing in the
print space.
The company’s workforce spans research and development centers in the
Netherlands, the United States, Canada, Germany, France, Rumania and Belgium,
employing nearly 24,000.
Océ serves print centers such as digital print providers, copy shops, reprographic
departments and book printers. The company’s customers provide scan, copy and
print services to their customers.


Preparing documents for printing is far from a one-size-fits-all job. PRISMAprepare
users—print center employees—have to render every imaginable type of print-
related service.
A print project can be anything from a business card to a pamphlet to a book. The
number of jobs being performed at any given time and their deadlines can also vary
wildly. Most large print jobs involve a selection of elements such as covers, inserts
and tabs, many of which need to be customized with text or color.
Further complicating matters, there isn’t a standard user for PRISMAprepare. A
college student employee could be using the software at a copy shop, while a
professional printer or prepress specialist might be using it at a book publisher.
The PRISMAprepare development team focused on making an application that could
guide inexperienced computer users without constraining how they approached the
universe of possible print jobs.
A major usability challenge for developers in this situation is creating a program easy
enough for low-end users that is also comfortable for high-end users. Make it too
simple, and it becomes tedious and limited for the high-end. Make it too powerful
and you run the risk of losing that college student. At either extreme, users risk
ending up with serious errors that can derail a project midstream.

WHAT DOES IT DO?
Content is supplied by the customer, but it’s the print center’s job to create finished
packages with all the bells and whistles. PRISMAprepare’s functionality includes such
key tasks as:
• Collecting source files.
• Cleaning up scanned pages.
• Correcting the page contents.
• Selecting media.
• Adding enhancements such as page numbers or tab captions.
• Defining layouts.
• Finishing and imposition (i.e., advanced options such as full-bleed and same-
up printing; imposition is the process of arranging pages on larger sheets.
After printing they will be folded and/or cut so they end up in the correct
sequence in the document. Same-up is a type of imposition.)


PRISMAprepare users aren’t waiting for a few pages to pop out of a LaserJet.
This is an example of the kind of output rig that PRISMAprepare is designed
to control. (Image courtesy Océ)


WHO IS THE USER?
All users are ‘professional’ in the sense that they use the PRISMAprepare application
as part of their job on a day-to-day basis, so efficiency and ease of use for
experienced users is a must. However, not all users have the same profile in terms
of education and computer proficiency. The target user is a print professional with an
unknown degree of experience—not necessarily an experienced computer user.
In a full-scale press operation, users can include blue collar workers who have spent
much of their lives working with mechanical reproduction techniques. In a copy shop,
the person responsible for tending to the printers might be the same person
performing pre-press functions. In a graphic design setting, those two functions
might be connected by little more than an Ethernet cable.
The majority of PRISMAprepare users are offset machine operators, reproduction
workers with relatively little formal education, and temporary employees. So while
efficiency and application power are important, the development team also put a
high premium on an intuitive interface and a friendly learning curve that guides
users into more advanced areas of functionality.
In an ideal world, PRISMAprepare users get formal training from an Océ employee,
who customizes the presentation to the specific work environment. In the real world,
customers often opt for a half-day of on-the-job training given to a couple of
employees, who then pass their knowledge onwards to others that will be using the
application. And some users get no training at all.
In light of all this, the development team approached the design knowing that many
users would be learning through trial and error.


Users typically start by assembling pages into a document for printing. The
Pages workspace allows fast navigation between each page and gives users
the opportunity to clean up scanned images and edit page details. This on-
screen task closely mimics the first step of the old manual process.


THE APPLICATION
PRISMAprepare isn’t the only product available to print centers for managing jobs.
The competition, says Bosma, consists of programs that are either very open-ended
or those which operate with simplified wizard interfaces. The challenge for Océ was
to create a program that provided some direction without sacrificing flexibility.
The user starts off in PRISMAprepare’s Pages Workspace. The application follows a
pretty straight-ahead three-stage process that was developed after Océ personnel
spent time with users in their work environments (see Usability Process on page 115
for more on the visits):
1. Collect and correct pages.
2. Define and enhance document.
3. Optimize and execute printing.
The first two phases involve manipulation and tuning of general structure, so the
development team opted to define each as a workspace—the Pages Workspace and
Document Workspace respectively. The third phase, printing, is both an action and
endpoint, so it’s defined as such within the navigation scheme.
The workspaces are navigated by a left-column navbar, with a look and feel that will
be familiar to most Windows users. The print phase can be accessed at any time
from a horizontal toolbar across the top of the page. The print button always
occupies the dominant far-left position on the horizontal bar, with other functions
tailored to the workspace scanning left to right.
The Pages Workspace is tuned to document preparation and preview. The window
offers an accurate view of what the pages will look like, supplemented by page
guides and other view options.
Controls in this section include deleting pages, defining page size, moving elements,
scaling elements, erasing areas, splitting pages (e.g. facing magazine pages that are
scanned from a flatbed) and rotating. The “mark” function lets users designate pages
that must be sent to different printers. There are also controls for cleaning up
scanned pages.
In addition to the horizontal toolbar, users can work with rulers and guides using
mechanics that will be familiar to most print workers and users of desktop publishing
packages. The main workspace is divided into two panes—one for structure, which
includes numbered thumbnails and other data for each page, and a preview pane, on
which page elements can be manipulated and the results seen in real time.
The Document Workspace is where the edited pages are defined into a cohesive
document, which can then be enhanced. Controls here are more project-oriented,
including defining paper type, whether printing is one-sided or two-sided, margins
for binding, type of binding, tabs and captions, and defining the general document
type (which in turn dictates various other available options).
The panes here maintain strong continuity with the Pages Workspace, but they have
been re-tuned to reflect the change in functionality. The Structure pane now allows
users to designate paper type, binding and finishing techniques, while the preview
switches from a single page display to a facing-pages display showing how the final
product will look, including the placement of punch holes, staples, margins, tabs and


so forth. In this mode, the preview pane no longer includes tools for manipulating
elements on the page.
Once the document has been fully described, the Print phase allows users to set up,
configure, optimize and send the print job to a printer/press operator. Clicking print
brings up a fairly extensive dialog box in which the final options can be set and notes
can be sent to the operator.
Although the application steers users sequentially from Pages to Document to Print,
they aren’t obligated to follow that template. Users can move back and forth
between workspaces and print test pages at any stage.


The Document workspace allows manipulation of global elements, for instance
the cover and spine, and properties such as what paper type each page will
be printed on and whether binding (such as staples) or finishing (such as
punch holes) will be applied.


The third part of the process after gathering pages and formatting them into a
document is to set print options. Even after these options have been set,
users can easily move back to the Page or Document view to make changes.
This flexibility is essential in an environment which has many last-minute
changes.


“It is intentionally not designed as a wizard but as a navigation concept with a
suggested sequence,” says Edward Bosma, Océ’s interaction designer. “This is
important because work (at print centers) is often unstructured with many last-
minute changes.”
However, the suggested order does reflect the most common path toward printing,
and so it’s aimed at making the application easier to learn.
To enhance the narrative flow’s utility as a teaching tool, PRISMAprepare also offers
context-sensitive help, information panels in dialog windows and tooltips.

INTERFACE ELEMENTS
The user interface is based on Océ’s corporate “look and feel.” OCEAN is a unified
GUI that spans Océ’s product line, offering a consistent interface and program style.
Users of one OCEAN product have a head start with any other.
The genetic resemblance is reinforcing for users, in the same way that users of the
Microsoft Office suite are continually being cross-trained in the entire package of
applications. Generic interaction concepts can be learned once, but employed in a
wide variety of settings.
This corporate user interface style is not only a means to communicate a coherent
brand image but also uses generic interaction concepts that users have to learn once
to benefit from in all other Océ products they use.
One of these concepts is a task-based division of functionality in Workspaces that are
accessed from the main navigation bar. The Workspaces in PRISMAprepare resemble
the natural (although not obligatory) working sequence for the user:
The controls are formatted to be familiar to most Windows users, with large target
buttons that are clickable and easy to distinguish. Simple illustrative icons are paired
with text, so that users know what they’re getting, and the button labels are clear
and explanatory. Some buttons invoke a dropdown menu with additional options,
some open dialogs and others simply execute an action.

Toolbar detail in pages workspace. Note the difference in visual style between
these icons and those in FotoFlexer’s buttons (page 64). The two basically
have the same interaction design, but the styles are different, as appropriate
for the different target audiences and the different levels of playfulness


inherent in their tasks (preparing print jobs vs. fixing vacation—and other—
photos).

Despeckle control with custom cursor (see next text page).


Rotation controls.

In the Pages Workspace, the mouse pointer changes to reflect the tool selected,
using both standard (rotation handles) and custom (pixel measure for despeckling)
controls. In the Document Workspace, the cursor reflects controls for selection and
dragging.
Users can stack pages on top of each other, using transparency to quickly visually
detect pages that have been misaligned. The functionality mimics the offline
approach that a printer would use to perform the same task (placing the pages on a
lightbox).
The Document Workspace preview pane displays pages exactly as they would be
output from the printer, including paper color, punch holes, staples, tabs and tab
captions, folds for booklet and pamphlets, and/or captioning for the book’s spine.
This approach takes WYSIWYG to the next level.
The “structure” pane spans both the Pages and Document workspaces. The pane is
designed to show information about the document’s attributes on a per page level,
highlighting different aspects of the production depending on which workspace the
user is in. The structure view also makes it possible to view page groupings (such as


pages of a certain color, in a chapter, or with a specific type of binding). It’s also
possible to select groups of pages based on multiple criteria.
The print dialog allows users to specify printing parameters, which are far beyond
what the typical computer user has to think about—for instance, printing multiple
pages on an oversized sheet which will later be cut to size, or printing color pages
with two different printers (one for color elements and one for black type). These
options automate a lot of functions which were once done manually, which involved
both additional time and a higher chance of error.

The Print dialog is slightly more complex than in most applications, mainly
because printing is the core task here. The first tab summarizes the required
media. Listing required elements at the beginning of a task is a key usability
principle—unless the printer has a stock of these paper types, users cannot
continue with their task.


The second tab in the print dialog—Imposition—controls how multiple pages
print on one large sheet. Previously, print staff would have to work this out
manually and then send the pages in the correct order so that after folding,
cutting or binding the pages would be in sequence. Now, the application
removes some of that manual and error-prone work.


Print tab 3—Finishing. Note the iconic description to the left of each option
and the large graphical representation of how the job will be completed to the
right of the selection area, which changes as different choices are made. This
visual representation of the page or document is a common theme throughout
the application and provides a concrete link between the PRISMAprepare
program and the physical print article.

BUTTONS
Most-used functions can be addressed directly from the Toolbar and by means of
keyboard shortcuts. The complete set is available in the Menu.
PRISMAprepare uses large toolbar buttons with icons and text labels. Although this
limits the number of buttons you can place on a toolbar it helps in making the basic


functionality better accessible and easier to explain. As such the toolbar is very
friendly to novice users while the menu offers the complete set of functionality.
The buttons are well-spaced and consistently sized, using conventional icons paired
with text for maximum ease of use. The controls spotlighted in the toolbar can also
be accessed through menus and hotkeys.
Many of the buttons invoke dialog boxes. With the multitude of parameters available
to users, these are well-designed with generous use of white space and logical
clustering of related options. Most of the major dialogs include a brief line of
direction and illustrative icons or previews, so that the user can clearly see the effect
of the changes they are making. For instance, the spine caption dialog features a live
preview as users add text, select fonts and designate other options.

MENUS
In addition to the toolbars, PRISMAprepare offers a suite of standard hierarchical
menus that closely follow Windows conventions. Standard menus include File, Edit,
View and Help. Application-specific menus include Select, Pages, Document and
Tools. The designers aimed to balance the number of selections and the amount of
information appearing on each menu for a sense of consistency.
The menus are nested where logical, with submenus for multiple-choice selections
like zoom magnification or column display mode.
Generally, the menu organization followed convention only where such conventions
were very well established.
“From our experiences we concluded that users often do not grasp the concept
behind different clusters of functionality,” says Bosma. “(For instance,) does ‘Find’
belong to ‘Edit’ or to ‘View’?” Where they felt users were not conditioned to expect a
specific placement, the designers didn’t hesitate to move it.
Most of PRISMAprepare’s key functions are found under the Pages and Document
menus, with the former used to customize specific pages or sections and the latter
reserved for the document’s global controls such as document type or binding. The
Tools menu is reserved for controls which do not affect the document itself.
In addition to providing a consistent interface, this hierarchy also helps educate
users about the different workspaces. The menu organization parallels the
commands available under the respective workspaces.
The Select menu was added as a result of usability testing. Originally, the
functionality was nested in the Edit menu, but users were not able to find the
controls. The menu is specific to PRISMAprepare.
Users have a variety of needs when selecting pages for a print job, and the menu
reflects this with options such as “Select front pages,” “Select pages with same size,”
“Select first page of every chapter,” and “Select pages with color.”


The View menu provides users with a way of configuring and navigating
through the interface to see different properties of the pages and document
that they are working on at different points in the process.


PRISMAprepare has a Select menu separate from the Edit function. This was
added as a direct result of user testing, where users could not find the select
controls that were nested within the Edit menu. Given the large number of
task-specific ways of selecting (for instance, pages with the same media, or
pages which will be printed on the same larger sheet of paper), calling this
task out as a separate menu makes sense.


Context menus in the application provide a fast alternative way to select
common options. Here, right-clicking in the Finishing column shows the
options right next to the mouse for easy selection. Less experienced users can
still use menu controls to perform the same function.


Right-click context menus are used at several different places in the application. The
designers kept these limited in size and aimed mainly at offering faster access to
features where they made the most sense in context.
For instance, one column in the Structure pane depicts the document’s binding
mechanism—such as staples (see screenshot, previous page). Right-clicking in the
Finishing column brings up a context menu with options for the number of staples to
be used.
The ‘Tools’ menu holds all items that do not change the document itself. Limited-
sized context menus are used at several places in the application that offer faster
access to functionality within a certain context.

INFORMATION DISPLAY
More often than not, PRISMAprepare users are working on large documents. The
Structure pane is the place where the most information is made available in the most
compacted form. The pane is a table with customizable columns which display
anything from binding materials to paper stock. Pretty much everything in the
Structure pane can be interacted with via right-click, allowing massive point-by-point
customization on an information display that can easily contain hundreds of
elements.
The overview of the complete document is persistent throughout the assembly and
editing of the document. The display also uses vertical bars to illustrate chapters and
sections as well as other running qualities like paper color, chapters or bound
sections. The user can customize which criteria appear and in what sequence, and
the bars can be used to easily select entire sections for editing.
Between the Structure and Preview panes, “the user always has an overview on what
the document will look like when it is printed,” says Bosma. “The Structure pane
provides the ‘zoomed-out’ overview. The structure of the document is always visible.
Ranges of pages are clearly recognizable (and selectable), for example, the different
chapters of the ranges or the pages that are separated by tab sheets.”
But at all times users are also able to see the effect of structural editing on the
actual pages via the Preview pane, where “the user can inspect the alignment of
pages, correct placement of tab captions, make sure that punch holes will not
interfere with the page content, etc.”


Manipulating the Structure page results in live preview changes—for instance,
changing the media from Prepunched A4 to Tab Sheet would display the page
with a yellow tabbed background. Moving a page in the Structure tab would
reposition it in the Preview layout. In this way, users can keep a vision of how
the physical product will appear throughout the design process.


Grouping is available in the Structure tab. In this way, users can expand and
contract grouped pages (perhaps a chapter or the content of a tab) while still
maintaining a view of the project as a whole.


Multiple pages that belong to the same group can easily be selected in the
Structure pane.


PRISMAprepare puts a premium on maintaining the common elements that most
users will instantly recognize, whether the traditional menus, dialog boxes and
informational forms, or toolbars. In some cases, however, the traditional forms
weren’t intuitive enough for users who have previously worked more with mechanical
than digital print systems.
One specific decision to break with convention came in the design of the Structure
pane. Most applications dealing with the amount and type of information in question
would be designed with a hierarchical tree view, says Bosma.
For print jobs, however, the tree view was too limited, only allowing grouping
according to one property at a time and leading to a cluttered display when multiple
levels apply. Tree views are also typically only properly exploited by power users—
not the expected audience for this product.
Another place where conventional features broke down was the stacked page view,
in which users can place pages on top of each other in translucent form. “This allows
easy detection and correction of misalignment similar to (how) operators would
check this in the ‘physical’ world by means of a light table,” says Bosma. “It also
helps to safely erase areas on multiple pages simultaneously without the risk of
erasing too much.”
Controls also had to be designed for scratch for new features which didn’t have direct
parallels in other applications, such as Page Alignment and Despeckle. However, in
these cases, PRISMAprepare offers upgraded controls while still using familiar
interface items (radio buttons, numeric entry fields with up/down handles, graphical
alignment buttons). Even though the controls are being employed in a new way,
users benefit from the familiarity of the basic construction.
The specific needs of print centers also come into play. One control that will be
largely unfamiliar to most computer users is the Split and Merge printing function.
Again, the actual controls are basically conventional—tabs, checkboxes, text entry—
but the marriage of these elements is unique and includes program specific icons and
features that reflect the use of multiple sheet printing, multiple printers on the same
document, and complex collating. Many of these tasks were previously performed
manually.


Align controls required some innovation as this process may previously have
been carried out using a light table. Now, images from different pages are
overlaid upon each other to allow visual control during manipulation.


If pages have been scanned on an angle, they must be de-skewed. The
application can make a good guess at this, or users can manually rotate
content if they prefer. By giving users both an automatic process and a
manual alternative, the application allows fast processing in most situations
but with fine control for the times when the automatic algorithm doesn’t
provide good results.


Documents often have artifacts introduced during the scanning process. The
erase function is the equivalent to “painting” the artifacts with the background
color by dragging an area of background color over the offending sections of
the page. Notice that here the erasing applies to more than one page—made
possible by the virtual light table visual aid.


USABILITY PROCESS
The usability process at Océ starts with user visits, which are part of the company’s
overall customer relations approach. The workplace is observed and analyzed based
on the “Contextual Design” approach. Different team members get involved as the
process goes on. Feedback from trainers, consultants and help desk staff is also
integrated into the development planning process.
Data collected through these regularly recurring practices are used to guide
upgrades to existing products and when drafting requirements for the development
of new products. During earlier stages of development, a multi-disciplinary team
from R&D, marketing and customer service helped define requirements for new
products and new releases. The research-and-development department is
responsible for ongoing design and engineering of products including bug fixes and
usability.
Suggested improvements, including new features and controls, are initially drafted as
low-fidelity paper prototypes. 1 After that, the Wizard of Oz technique (a human-
controlled simulation of the actual program’s response) was used to hammer out the
workspace concepts, including the Preview and Structure panes, object manipulation
and how to represent the document in real-time WYSIWYG manner. The Wizard of
Oz tests followed scripts derived from actual customer situations.
Internal usability experts, interaction designers and field experts from different parts
of the company were called in to perform expert reviews as the development cycle
matured. They were asked to evaluate the design for consistency, clarity of
messaging, aesthetics and other traits. Consulting experts were also asked to help
match the evolving design to real-world workflow. These practices were generally
tuned to the contributors, rather than being part of a formal usability scheme.
When the application reached a stable testing release, extensive usability tests were
done with participants drawn from the actual user population. A “print room” was
created in which participants could take a print job from concept to completion using
PRISMAprepare in a laboratory setting, including an evaluation of the final printed
output and whether the application’s preview function accurately portrayed how the
final document would look.
Another half-day was devoted to collecting feedback from participants on how
intuitive the application was and how its controls would play out over long-term
usage. Finally, at the conclusion of the program, participants were individually
interviewed about their perceptions of the program’s user-friendliness and
usefulness.
Testing resulted in several changes to the program as it went through development.
For instance, onsite observations done during usability testing showed that some
pre-press workers received their instructions based on page numbers (for example,
“add tab sheets before pages 10, 26 and 46”). Based on this finding, a box was
added under the Structure pane allowing users to quickly key in page numbers and
select them for modification.

1
For more information about paper prototyping, please see
http://www.nngroup.com/reports/prototyping


Océ’s usability process is evolving, and the design team is integrating the persona
technique to get a better handle on how users in different environments use the
product differently. Personas have been created for Océ’s office products, but the
print room customers tend to be more particular and varied due to the differences in
approach among clients.
Because of this, Océ is creating specific virtual customer environments which they
call “Clientas.” “Personas and Clientas play a role in creating and prioritizing
functional and usability requirements,” says Bosma.


Concept drawings showing early iterations of the documents workspace. Many
elements from these drawings show up in the product.


TEAM
PRISMAprepare was created by the company’s Industrial Design department, which
employs 24 people in in the areas of product design, interaction design, graphic
design, usability research and (digital) modeling.
Influences included Bill Buxton, one of Bosma’s favorites, who “knows how to grasp
the essence of what I think design should be.” Bosma says he is also inspired by
well-designed products he encounters in real life, “such as Google maps, Pinnacle
Studio and my Kenwood lemon squeezer.”
The team includes:
• Edward Bosma, Interaction Design
• Saskia van Cleef-Megens, Graphic Design
• Fred de Jong, Interaction Design
• Robert Eijlander, Interaction Design
• Merijn Neeleman, Interaction Design
• Anita Morskate, Interaction Design
• Bas Hermus, Interaction Design
• Jannie Dijkstra, Interaction Design
• Carlijn Compen, Graphic Design (now Interaction Design)
• Nanne Krikke, Interaction Design
• Andrea Meessen, Graphic Design
• Jacqueline Jansen, Graphic Design
• Pascal Hagens, Graphic Design
• Eddy van Vliembergen, Usability Research
• Abbie Vanhoutte, Usability Research
• Sanna Langeveld, Usability Research
• Ron Dongelmans, Digital modeling
• Dirk Soentjens, Digital modeling
• Guido Stompff, Product Design
• Rob Zweerman, Product Design
• Estella Stok, Product Design
• Arjen Wind, Product Design
• Hay Gout, Modeling
• Frank Willems, Modeling

Print shops are stacked with increasingly more technical reproduction technology.
Customers’ expectations have also increased over the years. Océ has concentrated
on the end result rather than the technology which creates the product, thus leading


to an intuitive and visually representative product which can expand as machine
capabilities improve. Because of its highly representative interface, machine
operators coming either from a print background or a PC background should be
equally able to understand the interface and how changes on the screen will affect
the end result, thus enabling them to produce a more professional product for their
customers.
Using the technology to simplify users’ tasks by for instance re-stacking already
printed pages in a spare paper hopper ready for later insertion shows an appreciation
of what machines do well (repetitive tasks requiring accuracy) and what users do
well (document layout and cleanup, and big picture issue detection)


Seating Management

COMPANY INFORMATION

Company: The Magellan Network and DesignMap Design team:
• Audrey Crane, (former) VP of Interaction
Application: Seating Management
Design, The Magellan Network
Headquarters: • The Magellan Network’s internal design team
The Magellan Network—Durango, Colo. • Michael Aurello, Interaction Designer,
DesignMap—San Francisco, Calif. DesignMap
Number of employees: • Gregory Baker, Principle / Design Director,
DesignMap
Magellan—40
DesignMap—8

Design motto: “First, do no harm.”

OVERVIEW
Anyone who has spent time waiting for a restaurant table knows that seating
management is traditionally more of an art than a science.
So if you want a glimpse at how computers are transforming every aspect of modern
life, look no further than Magellan Network’s Seating Management application.
Seating Management aims to replace the reservation book, wait list and floor plan
typically found at the hostess stand in restaurants—not just replace, but upgrade.
The application not only keeps track of which seats have been filled and where, it
also tracks the habits of specific customers and the patterns of dining in the
restaurant to produce increasingly accurate estimates of dining time and wait time.
The development team set out to create a product that would handle a variety of
tasks and information sources while maximizing usability.
“Our competition is not the other guys—it’s pencil and paper," says Audrey Crane,
Magellan’s vice president of interaction design.
Seating Management takes reservations and organizes and prioritizes real-time
restaurant business, managing seating for both reservations and walk-ins.
It gives hosts and hostesses feedback about their performance in estimating wait
times and minimizing empty seats, while collecting customer information that can be
used to improve relations with the “regulars.”
Seating Management was developed jointly by The Magellan Network, a Colorado
company that develops online products and services for the restaurant industry, and
DesignMap, a San Francisco design agency that specializes in aligning technology to
complex business problems. (Clients have included Cisco, IBM, Netscape and AOL.)
The team worked together on most aspects of the program.


The main screen of Magellan’s Seating Management application maps out the
dining area and shows upcoming reservations. Where it improves over the
paper system is in giving additional information to the host or hostess—
estimates of remaining time until a party leaves, and end-of-shift handover
for instance. A primary concern during development was to always support
the flow of the hostess’ task—this meant incorporating much flexibility into
the process.


WHAT DOES IT DO?
Restaurant staff can bring a wide variety of life and technical experience to the
table—from college students working part-time, who might be quite proficient with
computers, to career restaurant workers who spend far more time on their feet than
seated in front of a keyboard. Add in the stress of managing multiple tasks in a busy,
noisy environment and you’re looking at a pretty significant usability challenge.
In developing the Seating Management app, the design team knew it had to be easy
to use and effective. But most importantly, it couldn’t be more complicated than
doing seating charts the old-fashioned way.
"Our primary directive was THE primary directive: First, do no harm," says Crane.
"In other words, this can’t be more painful than plain ol’ pencil and paper, flexible
tools that never get in your way, and that everyone knows how to use."
“Do no harm," informed all of the subsequent design and development decisions.
Seating Management was designed as a tool to help what Crane called the "Hero-
Hostess" do her job more effectively and enhance customer satisfaction and
revenues for the dining industry.
The application handles several tasks:
• Record details for any dining party, currently seated or on the waiting list,
including any history or notes associated with that party.
• Display an accurate floor plan, which shows occupied and unoccupied tables
and sections.
• Display per-table information, including real-time estimates of how much
longer before any given party will leave. This information is displayed in two
ways—with a quick-glance gray-scale display and a numerical estimate of the
number of minutes before a party will leave.
• Display the names of servers, which sections they are covering, and the
number of customers each server has handled today.
• Allow hostesses and hosts to reassign servers to different sections or close
sections to new customers.
Program features include:
• Calendar view, showing the number of diners scheduled for any given day and
any expected problems, such as overbooking.
• An option to send text-message notification to the cell phone of a party
waiting to be seated. This also displays the time elapsed after the message
has been sent.
• Customer search, which can be used for parties who don’t all arrive at the
same time, as well as to access customer information from a previous visit.
• Reconciliation of parties seated, waiting and expected, which is automatically
invoked when a user ends his or her shift.
• Scoring, which rates the efficiency of the user in managing parties quickly and
minimizing empty seats.
This instant feedback function is particularly innovative within the industry, says
Harald Conradi, one of the Magellan team members, generating information for


restaurant owners and managers and also allowing individuals hosts and hostesses
to improve their own performance.

The single menu contains just nine regularly used commands, all of which are
also accessible from the keyboard. These keyboard shortcuts are essential for
an application where the same set of tasks will be performed frequently, and
where the environment may not support easy mouse access.

WHO IS THE USER?
Users of Seating Management will be restaurant managers and owners, and most
often hosts and hostesses, who may not have extensive computer skills. Stefan


Walger, a designer at Magellan, calls the latter the “unsung heros” of the restaurant
business.
"When they do their job well, customers are happy, staff are happy, and restaurants
make more money," Walger says. "When they do poorly, customers walk out, staff
struggles with poorly paced work, customer service and food quality suffers.”
This is a bottom line issue. “Inefficient seating and unhappy customers result in a
loss of revenue for the restaurant," says Walger.
Developers identified two predominant types of hostesses:
• Young people (usually women). Hostesses are often workers who are too
young to serve alcohol and thus can’t wait tables. These users are sometimes
less than entirely engaged and are mostly looking to keep everyone happy.
• More experienced restaurant workers who prefer working the hostess desk to
waiting tables for other reasons (shorter hours, less physically strenuous).
Two main types of managers were also identified as potential users:
• Restaurant owner/managers who generally are in the restaurant business
because they like people and may not like computers all that much.
• Professional employee/managers, who see their work as task-oriented and
may be more comfortable and proficient with computers.
This second set of users are important for the application because although they may
have less daily interaction with the product, they are the ones who will benefit if it
helps their hosts/hostesses to do their job properly. They are also the ones who
must be initially convinced to try the application in their restaurants.

THE APPLICATION
Seating Management has navigation modes that are either narrative or open-ended,
depending on the task at hand.
The primary table display is a real-time representation of the story of an evening in
the life of a restaurant, and the user flow follows that path.
On the main application screen, the day and date are prominently displayed in the
leading top left position, along with a date selector for changing the view. The
graphical floor plan appears immediately below. When setting up the restaurant for
the first time, users can deal with simple or complex floor plans, including setting
bookmark-like views of sections or floors. The floor plan can be zoomed from a
control in the lower left and navigated using scroll bars when appropriate. The
default view is configured by the restaurant staff when they set up the system.
Each table on the floor plan displays the table number and how long the diners have
been seated at the table. The table is colored along a range from dark gray (recently
seated) to white (empty table), allowing the user to take in the status of the room at
a glance and foresee where openings will occur.
A pane to the right displays the list of parties, including everyone who has a
reservation and all walk-ins who have been added to the waiting list. A sub-pane
below this list offers two tabs which allow the user to view details for either a specific


party or a specific table. Text alerts (discussed at more length below) notify when
someone is ready to be seated.
Rather than an overarching narrative path such as would be provided by a wizard,
Seating Management provides a series of micro-stories broken into units of either
tables or parties. The structure of these stories is very simple—origination
(reservation or addition to the waiting list), wait time, seat time, and termination
(table cleared/party exits). Each micro-narrative can be accessed either from the
graphical display or the list pane.
This approach puts the user firmly in control. The application is designed to be a tool
that improves productivity rather than an enforcement mechanism, and so at no
point does it force the user down a specific path. Even within certain tasks, users
have the freedom to leave fields blank or skip steps without the application forcing
them to provide details that they may not have.


The List Pane shows the customers who are scheduled for specific times in the
evening. It scrolls down as time moves on, but always allows users to move
forward and backward to check on other diners. The two tabs below show
information on each party and table, drawn from the online reservation
system and any notes that staff members have entered. This is also the area
where the hostess updates status.


What’s complex is the task of managing all these overlapping narratives, which
feature staggered start times and thousands of “x-factors” which can influence how
long the story runs.
The hostess or host brings a holistic view of the restaurant that a computer simply
can’t match. The development team researched what sort of calculus went into a
user’s estimate of how long a party will be at a table. The responses included:
• Are they all men or all women?
• Are there smokers in the party? Are they taking frequent smoke breaks?
• Is it a couple? Are they fighting, or deeply engrossed in a first date?
• Is the waiter or waitress particularly chatty, or particularly good-looking?
(This can result in additional talk time and longer table time.)
• Can the host or hostess do anything to speed the table along, such as
bussing, delivering food or getting out ahead with the check?
"The computer can’t know any of this stuff—without endless, ridiculous data entry—
and this is what the hostess is good at—this is what she likes doing," says Rob
Gardziel, another designer with Magellan. "So we’ve designed a product that
supports her, but doesn’t seek to replace her with something that can’t do nearly as
good a job at the pieces she does well."
Speed is critical at a busy restaurant, so designers focused on making the interface
quick to respond. Generally, the narrative is emphasized over detail—the directive is
always to “allow progress.”
In order to facilitate speed, the program eliminated modal error and confirmation
messages entirely, and “undo” is always just a click away.
This is a radical departure from standard application design, which tends to coax,
cajole and (if necessary) drag users into a relatively rigid input and tracking scheme.
"The hostess always has a pen behind her ear and yesterday’s menu she can scribble
on," Daniel Newton, another team member, says. "If this product gets in her way,
it’s easy for her to go back to the old way of doing things and then the product loses
its usefulness to managers too."
Therefore, the interface must be flexible. Hosting a large or busy restaurant is hard
work. Hosts and hostesses are constantly being prodded by demand—not just from
customers in front of them, but from phones, managers and wait staff. And most of
these demands have to be met with a smile.
In other words, where most application users are focused on the application (or the
application’s task), a hostess or host is focused on the restaurant.
Therefore use of the application needs to be second-nature, instantly available when
needed—but not a source of additional distraction and demand.
The end result, from a usability standpoint, is a requirement that the application be
always present but never intrusive, providing useful information and acting as a good
memory aid without demanding attention at busy moments.
For the task at hand, usability can be defined more by what user is permitted not to
do than what he or she is encouraged to do. It’s structured but highly tolerant. For
instance, the application is highly interpretative and will allow users to enter virtually
anything into any text fields.


When entering an estimate of how long diners will be at the table, a user can enter
1, 60, :60, 0:60 or 1:00 and any of these will be interpreted as one hour. If a user
enters seven digits for a phone number, the restaurant’s area code is automatically
appended. If a customer record is created without specifying a date, the application
makes a best guess as to what the date should be and applies it.
When the program can’t make a good assumption, an alert message is shown at the
top left of the screen. For instance, if an alphabetical character is entered in a phone
number field, an alert appears at the top of the alerts/messages list. When
unavoidable, alerts are queued, with only the most recent on display and the rest
accessible via a dropdown menu. A copywriter was brought in to write the text,
which simply and clearly states the problem, leaving corrective action to the user.
Alerts, confirmations and error messages are presented all in one list with the most
recent one first. New messages “pulse” when they appear to invite attention without
demanding it. Alerts are low-impact and can be ignored when things are too busy.
Action alerts (“Smith party has been waiting for more than 10 minutes.”) and error
messages (“Smith party phone number does not appear to be correctly formatted.”)
are presented with special icons to draw more attention.
Modal dialog boxes—which stop everything until a problem is fixed—were forbidden.
"We feel this creates an appropriate balance," Crane says. "Let’s assume the user is
competent first. We’ll try to meaningfully interpret their intention, and if we can’t
we’ll let them know. Let’s not assume that they are incompetent, and that just
because we don’t understand a particular data entry, they must have made a
mistake. And let’s especially not assume this and then present a modal dialog box
that gets in their way."

INTERFACE ELEMENTS
Everything in the interface is designed for speed. There is only one menu, and every
item in the menu has an equivalent key command, which let users access those
functions quickly.
At the lower right of the screen, a couple of key buttons are displayed to reflect the
most common functions, such as adding a party, noting that a reservation has
arrived, marking a party as seated and noting its departure. The buttons are large, in
order to accommodate touch-screens.
Another button will text a party that their table is ready, then display a timer
showing how long it has been since the message was sent.
One of the most innovative interface elements is also the most traditional—a penny
that can be dragged around the graphical display using a mouse or touchscreen. The
penny might seem counterintuitive to a non-restaurant user.
The issue goes back to the “competition” as seen by the developers—paper seating
charts. Traditionally, many hostesses put a penny on the chart next to a table or
section, in order to keep track of which server will be seated next. In addition to
being dragged, the penny will automatically move when a party is seated with a
waitperson to the next waitperson in the queue.


Speaking the same language as your users is key to usability, although as online
systems become the norm, the penny seems destined for obsolescence. The trick will
be for the developers of future Seating Management editions to know when the
penny has ceased to be a familiar touchstone and has become instead the answer to
a trivia question.


The Penny metaphor is drawn from observation of hosts using a penny to
keep tabs on which server should be given the next party on paper floor
plans. Not all metaphors translate well from paper to screen, but as a marker
was required the penny seems to serve the purpose well. Note that the
corresponding party is highlighted in the right hand pane. Although the
computer is suggesting the next table allocation, it is up to the host to make
the final choice.


Search is similarly flexible to the rest of the application. Results are returned
in real time in a predictive manner. They are split into current and historical
reservations to help staff distinguish between diners. Actions to be performed
(change or create new reservation) are available directly from the results list.


As noted previously, the Seating Management application is big on forward
momentum and light on error messaging.
Part of the calculus that went into the decision to downplay messaging was the self-
evident nature of many problems. If a user inputs that he or she is seating a large
party at a small table, the error message “You cannot seat a party of 12 at a table
for 4” is not likely to help. More importantly, it’s very unlikely in most cases that a
hostess or host will actually try to accomplish that task.
In most cases, the likely source of such an error is mistyping—entering “12” instead
of “2” for instance. What might seem like an input error may also reflect a
contingency not accounted for by the application (such as dragging a table out from
a back room or a child sitting on a parent’s lap).
A modal dialog that rejects the input and demands a correction becomes the user’s
worst enemy in a situation where users are constantly dealing with noise,
distractions and direct demands on their time and attention. The decision to drop the
traditional approach led the design team into strange new waters.
"The resulting lack of any error messages, confirmation messages, 'are you sure'
messages, or anything else that gets in the way of a busy hostess moving forward
has forced us to think about the design task in a new way," Crane says. "It’s also
proved compelling to our usability participants, who expect to get 'stuck,' and are
delighted to be free to move forward. While the information is always available in a
list of messages and alerts, it is never in the way."
This is a sharp contrast with traditional software applications, in large part because
the usual model features tasks which are primarily digital prior to reaching the
application’s end point (for instance, image processing, which only becomes physical
if and when a picture is printed).
“Unlike a set of tasks performed entirely digitally—for example, a payroll, where a
misplaced zero has a real and significant result at a future date –a hostess will
indicate that she will seat a party, and then actually seat them," says Crane. “So
there is a real-world test for the reasonableness of that action, and the software
doesn’t need to second-guess that.”
Designers always applied the "pencil test" to the product.
"A pencil will never tell you that you haven’t written enough information, or ask if
you’re sure you want to do something, or say there is an error and you can’t move
forward," Crane says. Neither does Seating Management.
In a similar vein, the designers opted to leave out a formal “help” function. Users
aren’t likely to turn to a tutorial when customers are waiting to be seated. The high
fault-tolerance built into the program makes it easier to accommodate or ignore
errors than to explain them to users. Although Seating Management features some
skeletal handholding, the controls of the application are expected to be transparent
enough to stand on their own (with some expected training of initial employees).

INFORMATION DISPLAY
The graphical floor plan display takes its cues directly from the paper seating charts
traditionally used in restaurants. The team opted for a dark background after running


some focus groups, which indicated a darker screen was more desirable in terms of
restaurant ambience. This had the potential to introduce legibility issues, so high
contrast was implemented to ensure clear visibility. In another concession to work
environment and pace, the program doesn’t use sound. Attention to the environment
in which the application is used is crucial for any product, but especially so when
constant error beeps could ruin a diner’s experience.


During design, the developers experimented with different color schemes. The
final scheme was chosen to mesh with the restaurant’s ambience based on
user feedback from focus groups. Not a usual usability consideration but
interesting and relevant. Three of the rejected schemes are shown here.


The reservation list is a columnar display which can be sorted according to various
criteria. The default sort—and by far the most commonly used—is reservation time.
In the heat of the moment, however, the most important thing hostesses and hosts
need to know is who they should seat next. As the evening flows along, so too does
the list, which refreshes in real time.
However the sorting function is more than just window dressing. For instance, floor
managers may want to look at which tables are booked during the evening, or a wait
person may want to know if they can expect a large party.
"Restaurants do like to plan—who will sit where, for how long," Josh Peters, a
designer with Magellan, says.
The overall information display is broken into three levels: party list, party details
and Web interface, with the latter being a Web-based application mainly used to
sync up with an online reservation system offered by Magellan. Reservations made
through Magellan can also be checked through the Web app for detailed information
such as when the reservation was made. This data is segregated from the main
program because the higher level of detail is so infrequently required.


Calendar view is one of the few times users break out of the standard two
pane interface. This makes good sense, because the calendar task has little to
do with the seating arrangement, so there is no need to display the
restaurant layout at the same time. Switching between the two views is fast,
so the host/hostess can take a reservation call and then quickly move back to
the main screen.

USABILITY PROCESS
The partner companies relied on in-house talent with usability experience to develop
the application, keeping expenses relatively minimal.
Personas were developed after conducting an initial round of interviews to gather
data on users and their typical tasks. About 60 to 80 man-hours were invested in
usability testing.
Team members conducted interviews and made recordings of sessions in coffee-
shops to help steer development. The research role rotated throughout the design
team. Restaurant participants received a small thank-you gift certificate.


"We knew what tasks hostesses and managers typically undertake, and we knew
what additional tasks we wanted to make possible. To that end, our personas
included goals and the tasks each persona would undertake to achieve those goals.
We wrote scenarios for each task and designed our product to support them. Some
of those scenarios became tasks for our usability studies," says Kricket Lewis,
another designer on the team.
After the initial information gathering phase, they went through the (relatively
standard) process of creating personas, writing scenarios, designing storyboards and
maps, wireframes, and then mockups. Finally, detailed functional specifications were
designed, describing each item on the screen in detail and its behavior in every
imaginable situation. The specs were given to the engineering team for review and
implementation.
"Our engineering team was critical to the success of this approach—supporting our
process and contribution in the first place, and then working with us to point out any
cases we missed and giving us the opportunity to fill in any gaps in our
specification," Lewis says.
Testing prototypes included paper wireframes and mockups, barebones-but-
functional HTML wireframes, and finally alpha testing (the application was still in
alpha testing at the time this case study was written).
During each phase, the design team conducted interviews with test users in person
and over the phone. Most testing phases included a study protocol with specific
tasks, but moderators were given freedom to explore items that interested the test
users. Multiple sessions were conducted each week during the last eight weeks of the
design process.
During a weekly round-up, the team discussed the outcome of that week’s studies—
including metrics such as task completion and time-on-task and “soft” data, including
ideas, recommendations, general impressions and psychological obstacles noted by
the test users.
Crane says the constant, less formal usability sessions were incredibly helpful and, in
her opinion, worked better than spacing the testing out along development timeline
milestones.
"(It) certainly changed the way I’ll plan design work going forward," Crane says.

TEAM
• Audrey Crane, (former) VP of Interaction Design, The Magellan Network—
studied design at California College of the Art and Berkeley. Much of her
influence comes of course from working for 3 years at Netscape with Hugh
Dubberly, and then 6 more years at Dubberly Design Office. She has
presented at IIT’s About, With and For, DUX, BayCHI, and various AIGA
presentations. The work in the studio is heavily influenced by Nielsen and
Cooper in particular. They are also big fans of Steve Krug’s approach to
usability research.
• The Magellan Network’s internal design team
• Michael Aurello, Interaction Designer, DesignMap - BS in Graphic Design from
California State University, Sacramento


• Gregory Baker, Principle / Design Director, DesignMap - BFA in Graphic
Design from RISD

The DesignMap team, Michael Aurello and Gregory Baker.


The Magellan team

Magellan’s design philosophy was to use technology to augment rather than replace
the knowledge and awareness that a host or maitre d’ carries in their heads. This is
an empowering rather than controlling application of computing power, and as such
it is likely to be much better received by its users. Real-world layouts (tables in the
system reflect the restaurant’s design) and metaphors (the penny) allow quick
movement between reality and the computer’s view.
Careful attention to the users’ task and environment led to some interface design
decisions which would be out of place in most applications – dark screen, no sound –
but which fit well in this application’s intended setting.


SQL diagnostic manager

COMPANY INFORMATION

Company: Idera (a division of BBS Technologies, Design team:
Inc.)
Project Manager:
Application: SQL diagnostic manager (SQLdm) • Heather Sullivan
Headquarters: Houston, Texas Software Developers:
Number of employees: 150 • Kurt Goolsbee, Mark Lauritsen, Trent
Miskelly, Michael O'Neal, Vicky Sherrouse,
Shekhar Vaidya
Quality Assurance Engineers:
• Adam Condron, Will Meurer, Rodney
Quissak, Alfredo Ramos, Jason Van Dyke
Information Developers:
• Marcus Bryant, Marlowe Wakeman
Customer Support:
• John Harp

OVERVIEW/MOTTO
Idera’s SQL diagnostic manager 5 (also known as SQLdm) is a performance
monitoring and diagnostics application for information technologists using Microsoft
SQL Servers.
The application uses a console design to proactively notify SQL administrators about
the health, performance and capacity of their SQL Server environments. SQLdm was
first released more than eight years ago. It is used to monitor thousands of SQL
Servers worldwide.
Idera (a division of BBS Technologies Inc.) develops tools for managing and
administering Microsoft SQL Server products, including performance monitoring,
backup, configuration, storage management, security and compliance.
The company has more than 2,500 customers globally, which it manages from its
headquarters in Houston and satellite offices in London and Sao Paulo. Idera
products are sold and supported directly and through authorized resellers and
distributors.
“Our CEO pushed the ‘rules of three’,” says Trent Miskelly, a senior software
developer who worked on the cross-disciplinary project development team (about 25
employees from around the company). The rules are:
1. Sales should be able to pitch the product in 30 seconds.
2. The value should be obvious in 3 minutes.
3. Download and install should take no more than 30 minutes.


These concepts (and particularly the second two) helped drive a focus on usability
and smart design. SQL is complex on the face of it, and SQLdm performs tasks on
the complex end of SQL. But all that complexity doesn’t have to be obvious to users.

The SQL diagnostic manager main screen. This dashboard gives database
administrators an at-a-glance view of their servers, focusing on what they
care about most—the problems. It builds on the familiar Outlook Today view.


Two basic rules guided many of the specific design choices:
1. The less often a feature is used, the more guidance the application should
provide.
2. Advanced and complex features should give users a choice between well-
chosen defaults with basic options or advanced options and custom input.

WHAT DOES IT DO?
SQLdm is built around the workflow of those who monitor SQL Servers, with an
emphasis on troubleshooting problems and optimizing performance based on
historical data.
The program gives (in roughly sequential order) a summary overview, error
highlighting and drilldown for a more detailed look at the server. The application
aims to offer quick navigation to increasingly granular detail, with easy setup and
integrated help.
Its real-time monitoring and customizable alerts are intended to help administrators
minimize server downtime and quickly diagnose and fix performance and availability
problems. SQLdm also identifies common performance bottlenecks, such as worst-
performing code, and aggregates historical metrics for use in trend analysis.
SQLdm needs to function like the dashboard of a car, but each gauge has a deeper
level of complexity which is essential to user tasks. So while users need to take in a
lot of critical information at a glance, they also need to be able to pop open the hood
and understand what they see inside (while driving the whole time).

WHO IS THE USER?
User profiling is relatively easy in some ways—the product serves a very, very
specific niche, SQL Server database administrators (DBAs) managing between five
and hundreds of SQL Servers.
SQL Server DBAs are usually in charge of monitoring and optimizing system
performance as well as the critical functions of database backup and recovery.
However, within the realm of this job description can be found varying levels of
expertise and experience.
SQLdm’s usability focus has a two-pronged effect. It helps entry-level DBAs by
showing them what SQL Server performance metrics need to be monitored, while it
provides experienced users with fast access to measurements they are already
following closely.
In addition to the disparity in experience levels, there are substantial variations in
how administrators use the product. Some work in the live application on a daily
basis; others set up e-mail notifications and rarely enter the actual program. The
daily users don’t want to feel constrained by wizards and handholding, but the
infrequent users need to have a clear path to the features they need.


THE APPLICATION
SQLdm’s user experience supports both open-ended and narrative metaphors. The
design of the application follows the general architecture of the SQL Server database
engine, with the intention of making the narrative aspect educational not only about
the program itself but also about the SQL Server environment in general.
The less experienced the user, the more compelling the narrative approach. For
power users, SQLdm may be a more comfortable fit as a multi-featured, open-ended
control set, so the application also had to accommodate a free-choice approach in
which most of the destination points can be quickly reached.

On first login, users are presented with a configuration wizard which will step
them through adding servers and configuring alerts. Highly experienced users
can choose to skip this step and work directly in the interface. In this way,
the needs of both novice and experienced DBAs can be met with the same
application.
Regardless of expertise, the first-time user has a fairly complex configuration task
ahead of him or her. In order to counteract this challenge, SQLdm launches with a


“Getting Started” dialog box that clearly outlines the available choices, with
descriptive text labels and large friendly icons. Expert users can skip to the
monitoring console with an easily identifiable button in the lower right.
The most important task for a first time user is setting up new servers to monitor.
That option is highlighted in red on the Getting Started Launch Pad for new users
and it’s an easy user choice to follow the path, which leads to a wizard.
Handholding is extensive here, and can be disabled with a checkbox. The wizard
walks users through several simple steps.
(The use of “simple” and other adjectives throughout this case study applies to those
with a prior knowledge of SQL. So if the screenshots look like Greek to you, and they
very well may, remember it’s a reflection on the task and not the application.)
Wizard controls include helping the user designate one or more servers for
monitoring, and specify what data the application will collect. Each step in the wizard
provides information context, with a significant amount of text explaining what the
various options will do and what their effect might be.


This wizard describes the functions it performs in a relatively verbose manner
suitable for less experienced DBAs. Those with more experience with
database administration or with the application can choose to remove the
verbose screens and concentrate just on the key choices.


Less experienced users are unlikely to know what constitutes a good value for
certain configuration parameters. The application provides smart default
values for most fields and options within the wizard. This serves two
purposes; users are taught what a “sensible” value looks like, and the system
is set up in a state which will provide a good level of support. Later on, when
they have spent some time working with the system, users can re-run the
wizard or tweak individual values in order to create an environment that more
closely mirrors their exact needs.

Data entry at the wizard stage follows comfortable convention, with checkboxes, text
and numeric entry fields and standard windows buttons for navigation. This is a


sensible choice for such highly technical material—the elements are so familiar that
they fade into the background and don’t steal focus from the task.
Once the wizard is complete, users are taken to the application’s default interface,
the Today view, which typically appears when the application opens. The Today view
provides an overall status summary of all servers being monitored by the application.
A left-hand tree hierarchy provides a list of all possible views, but user focus is
drawn to the primary pane. Line of sight is instantly commanded by the status
summary, where critical alerts are highlighted with a bold, red, clickable target that
dominates the page.
To the right of the summary, a task to-do list is displayed, and below is a detailed list
of alerts. Both of these panes feature columnar tables which can be sorted by several
different criteria.
The left-hand Server Tree is broken into two panes, one of which provides a quick
read on the state of each server being monitored. The status indicators can be
expanded to indicate the state of specific areas on each server. On hover, the server
state icons show a tooltip with the most urgent notifications.

Tooltip example
These tooltips provide an easy mechanism for users to compare the severity of alerts
without leaving the dashboard page. A simple mouse hover over key alerts shows
what has triggered the issue and thus what might need to be done to resolve it. After
viewing several of these alerts, the DBA will know which require immediate
attention. The alternative—displaying all of this information on the initial screen—
would most likely lead to a confusing mess of data which would hinder rather than
help in problem resolution.

There are numerous points of departure from the Today screen. Given the
complexity of the task, the narrative becomes a series of light, but weighted,
suggestions. There are two paths from this point which receive the greatest focus:
• Selecting an alert by clicking on it wherever it appears. In the case of critical
alerts, this is a pretty easy choice. This option takes users into a detailed view
of the server, with the problem areas strongly highlighted (more on this
below).
• Selecting a server from the tree view, to see an overview of the server state.
There are multiple paths leading to alert resolution as exception management is
obviously a DBA’s key task in this application. However, as the application also offers
many other management features, expert users can easily take a different route.


DASHBOARD VIEW
Following the Server tree view leads to the Server Dashboard, a hybrid view
combining several different types of display into a snapshot of server state and key
performance metrics.
The Server Dashboard is like an application inside the application. SQLdm—the outer
application—features primary interface elements including standard Windows menus
and the Server Tree display (which strongly resembles Microsoft Outlook, exploiting
previous learning). The Dashboard sits inside the application’s dominant pane and
features independent controls—a tab and toolbar ribbon modeled on the Office 2007
design.
Overlooking the dashboard’s meters and displays is a tabbed interface, with
dependent control ribbons, following the Office 2007 model but featuring simplified
controls. We saw this simplified model in more than one entry in this year’s contest.
The ribbon concept works well when its information architecture (tab labels) mirror
users’ tasks, especially when it’s not overburdened with features. In this application,
the tab scheme mirrors the architecture of SQL Server which users should already be
intimately familiar with.
Clicking on a metric opens a popup help window with a paragraph of text explaining
what it is and offering guidance about interpreting the reading. There are three basic
types of performance meters—the speedometer (such as response time in ms),
numeric (such as the number of active sessions) and text (OK, Warning and Critical).
The meter messaging is accompanied by more detailed metrics in smaller type below
each item. The metrics are de-emphasized so as not to draw focus, but are instantly
accessible for those seeking more information.
Color schemes throughout the application follow the familiar red/yellow/green
stoplight pattern that is so effective for this sort of visual labeling. The labeling is
pervasive throughout SQLdm’s different views, providing a welcome shot of
consistency even when dealing with substantially different types of data. The
designers wisely organized the material around the data that really matters—overall
server health—and made it an integral part of every view.
The color provides a unifying motif that brings together several different types of
metric displays (speedometer, numerical, text and iconic). Informational displays
that are not direct performance gauges—such as historical trend graphs—use a
distinct red-blue color scheme that clearly differentiates them from the critical
performance measurements.
Color is not the only indicator, as text and graphics in the alerts also help signify the
level of concern. This is especially important for users who may be red-green
colorblind or who are working in cramped server rooms with poor artificial lighting.


A view into an individual server. The Server Dashboard is the default view
obtained by clicking the server name in the tree to the left. From this point,
users can drill in to problem areas shown on the screen or work with the
ribbon controls at the top of the main pane to perform further diagnostics.
Help is readily available for each of the items in this view.


A more detailed view of the dashboard area from the previous screen. This
screen combines alerts, trend data and real-time metrics into one view.
Despite the large amount of information on the screen, careful use of size and
color makes it clear which are the most important areas to focus on and
which are providing secondary information.

Although a tremendous amount of information has been packed into a very small
space, the screen is not crowded. The design of the dashboard makes effective use
of white space, resulting in a strong presentation that is easy to scan and features
logical grouping.
Careful aesthetic decisions have been applied throughout SQLdm, and they are
showcased here. Each category of metrics appears grouped as a distinct unit with
clean lines. The color-coded alerts are proportionately sized to really grab the users’
attention and generously spaced so that each stands visually apart.
Users can also choose by clicking on a metric value button or label to navigate to
more detailed views, with deeper and broader metrics to analyze performance in
specific areas.
“We believe the quick navigation among views to more granular levels of detail, as
well as the ease of setup and integrated help goes a long way toward helping users
quickly learn and make use of our application,” says Miskelly.


The Status section is the most functionally important part of this mix. Located on the
left-hand side of the Dashboard pane, it provides a concise summary of critical errors
and metrics that are operating at a warning level. Beneath the basic summary, the
errors are broken out by category. Each category corresponds to a navigation tab at
the top of the pane. Clicking on an error or warning alert takes the user to the
relevant tab.
Finally, a horizontal Recent Trends display provides four histograms displaying
performance of key metrics over time. Each can be clicked for more detail on the
specific metric.
Users can configure alert levels for each meter on the dashboard, using sliders tied
to visual feedback and again reinforcing the stoplight scheme. (They can also type in
numeric values directly.) Users can also configure SQLdm to send notifications when
performance dips below a selected threshold.

The alert configuration screen. Although alerts have smart default settings, it
is possible that DBAs will want to change them for specific databases. Here,
the DBA can either drag the slider or type new values into the table in order
to set warning and critical levels for the metric (Database Full).


Alerts appear in the dashboard. Notifications can be set up to be sent to
individuals. Here, a notification is being created by specifying the alert
conditions and then writing the text that will be sent. This text is written using
SQL-like variable names, which should be very familiar to the target
audience. Not all applications could get away with this approach but a clear
focus on the capabilities of the user base means that SQLdm is working within
the comfort zone if its users.


INTERFACE ELEMENTS
SQLdm uses a pretty extensive mix of interface elements, more than the average
program, a reflection of the complexity of the task. But the combination of elements
blends well thanks to some elegant design and careful planning.
Probably the most important feature is the ribbon toolbar, using a design that’s very
similar to that introduced by Office 2007. It is context-sensitive and loaded with
large, click-friendly target buttons. The ribbon is context-controlled by tabs which
follow SQL Server architecture.

Toolbar ribbon in “sessions” mode.

The ribbon “allows for a lot of controls to be visible at once, and groups the buttons,”
says Miskelly, and the tabs allow the set of controls on display to be specifically
tuned to the content. Some of the buttons feature simple, visible controls, and many
invoke modal dialogs. Some of these can be quite complex, largely a function of the
task.
Windows standards for button size, label and placement were used in the ribbon and
elsewhere in the program, which is often a wise choice. These defaults are, after all,
the product of a great deal of research, reinforced by the fact that most users have
already been trained to respond to them. The design of the buttons is simple but
effective, with judicious touches of color and big illustrative icons which invoke
familiar user shorthand—the equivalent of a second language to anyone in this
product’s user base.
In many cases, a button click will open a dialog to handle a more advanced function.
The development team opted to use only modal dialog boxes, in order to reinforce
that dialogs are invoked to step outside the normal application flow, perform a task
and see it through to completion.
Control of the outer application is managed through Windows standard menus,
including File, View, Go and Tools. A regular toolbar below the menu items offers
common commands such as navigating back to the Today page, Refresh, Pause and
Help.
Context menus are scattered throughout the program at appropriate points,
including within the Server Tree and in diagnostic view grids and charts. Different
menus are served when clicking column headings and row labels, reflecting the
change in focus—column menus are oriented toward grouping and sorting, row
menus are specific to the item being examined. Context menus also offer data-action
functions like export and print.


Tree views such as the Servers list can be confusing for novice users, but for
this audience their ability to show relationships and hierarchy in a small
amount of space make them a useful control. In this situation the tree view
location mirrors that of Outlook, providing another familiar touch to the
application even for new users.


In many views, status is integrated into the data table and is thus sortable.
Here, users can also choose which data elements to graph in order to see the
relationship between them.


Choosing Alerts from the left hand menu bar shows all alerts by default. The
main pane then allows for filtering down to specific servers, severities, time
frames, etc. Beneath this, the filtered list of alerts is shown and by selecting
an individual alert, users can drill down to the full details (lower area of the
main pane). The contextual menu here allows quick access to the most
frequent tasks at this point in the application.


The alerts are obviously SQLdm’s action items, and each can be right-clicked for
additional information from vertical and horizontal groupings. Context menu
information includes why the alert was invoked, what else was happening on the
server at the same time, and current performance of the alert metric. Users can also
change the alert threshold to suit their error tolerance.

Context-sensitive F1 help is provided for all active views and the main application
panels, invoking the Microsoft standard indexed help application. Help can also be
accessed through the ? button on the outer application, and from within modal
dialogs where appropriate.
Within the Server Dashboard, help is served in additional formats. Each key
performance metric features a popup help feature that explains the metric generally
and provides some specific guidance as to what action the user might want to take
next.
The help document includes descriptions of screens and metrics related to the
context in which help was invoked, including technical information about the task.
Help entries also crosslink to related pages and offer power-user tips for getting
more out of the application.
Error messaging takes different forms in SQLdm. Modal dialogs serve up critical error
information, such as when a connection has been dropped, preventing the
application from collecting the data it needs to be functional. Error messages include
robust text descriptions of the error.
The design team also opted to add a few custom features to the error message,
including a “copy” button which copies the text of the message to the clipboard and a
“details” button which calls up more information on the error. The copy button is a
particularly brilliant addition that we’d like to see in more similarly technical
programs.
“We found that many customers used the copy button feature to quickly copy error
messages and details into an email to send to customer support,” says Miskelly.
“This helped our support staff rapidly turn around cases when the issue was known
and get early development feedback on issues that were unknown.”
Some error messages are also mirrored in the lower right hand corner of the
application, in the same style as a Microsoft Outlook “send receive” error alert.


Error messaging takes several forms in the application. The standard modal
dialog is shown, as is the in-page error. There is also a status notification
error in the bottom right of the window. All three error messages provide a
way to see the details of the error and potential resolutions.


Modal error messages contain a copy feature which allows users to paste
exact error message text into e-mails to the Idera helpdesk.

INFORMATION DISPLAY
You won’t find many programs with as much information to display as SQLdm, and
highly technical information to boot.
“There are many places in our product where information overload and sizing could
be a problem,” says Miskelly. “We handle each type of information sizing issue
differently.”
For intense grids containing massive amounts of data (such as the Sessions detail
view), the application supplies default sorting, grouping, and columns that the
development team determined would most likely be of use. Users can customize all
these settings.
Filters are also provided, allowing users to pare down information that isn’t relevant
to their task of interest of the moment. Default filters are available for some of the
more common options. Generally, the defaults aim to provide the most information
and let users eliminate that which doesn’t fit their needs.
Information in SQLdm comes in different flavors. Some of it is hierarchical, such as
tables in a database. Progressive disclosure was used in these cases, offering a basic
view covering multiple tables then expanding to include much more detail in a drill-
down view when looking at a single table. A similar strategy has been applied to
database files.
Since SQL Server is a data storage system, the location and properties of files are of
paramount importance in troubleshooting. The Files view aggregates this data and
provides visualizations for disks and space usage. Users can also select multiple
databases and files to compare the graphs and information, useful in identifying
items that are consuming disk space or planning a migration of data to another
server.
All views also need to be scalable. For instance, the UI needs to be able to
accommodate anything from one to 200 servers. In order to better manage this
range, users can create custom groupings of servers, breaking them down in
whatever order makes the most sense to the administrator or job at hand.


Many administrators manage their servers “by exception”, or only when there’s a
problem. In order to accommodate this, the information display can be customized to
provide a navigation strategy of following the errors and warnings. This can be
further refined with filters and grouping so that only the servers of primary interest
are displayed.
The filter function offers various mechanisms. Some are multiple choice, while others
offer virtually unlimited freedom using text input. In these cases, the development
team opted to define text inputs using SQL syntax—the “native” language of the
user—so that the benefit of familiarity would counterbalance the usability challenge
of excessive choice. Text within most of the filter dialogs helps explain their function.
SQLdm also allows users to prepare customized reports, using specific criteria from a
horizontal range, such as server names, database names, table names and date
range. “For these we provide single or multiple choice mechanisms, such as checking
items in a tree and selecting from a list,” says Miskelly.
While the alerts are among the most targeted forms of communication within the
application, the system retrieves a lot of data from multiple servers on a recurring
basis, and so even the list of alerts can quickly stack up to an unwieldy height.
Filtering and grouping features have been added to these views as well, including
default filters based on the most common choices (time that the alert was registered
and which alerts are still active) and other less urgent parameters (by specific server
or group, specific metric or severity of the alarm).
Similar mechanics were applied in the SQL Agent function, which allows users to
schedule maintenance jobs and monitoring tasks.


Tables and Indexes view shows a textual and graphical representation of the
databases on each server. Table column headings are sortable and tools in
the ribbon allow for filtering.

While SQLdm is a real-time monitoring tool, users can’t be available in real time, all
the time, so a History Browser was added to the mix. Its purpose is to get deeper
contextual information about a problem at the time it occurred.
Not all problems in SQLdm are persistent or predictable. For example, an SQL Server
session can be derailed when one session locks a shared system resource needed by
another concurrent session. The problem is called “blocking,” and it can come and go
very quickly.
An administrator might not get to respond to an alert until the problem has passed.
So the History Browser allows users to view the broad system state around the error
as it appeared at the time the error occurred. (History snapshots can also be
accessed by selecting an alert notification from the Alerts panel.)
Historical snapshots are captured every six minutes in the default setting. The
browser is invoked from the ribbon toolbar and features a calendar selector with a
list of snapshot times and the status of the metric at each snapshot. On hover over a
snapshot listing, the tooltip shows the top three rated alerts for the list item.


Snapshot lists can be delimited by a time range. Selecting a snapshot brings it up in
the main pane, with a notification that the data is historical. The title bar also
changes color as a cue to the user. Snapshots can be navigated from the ribbon with
“next” and “previous” buttons.

An innovative feature is the history view—useful in tracing intermittent issues.
Here, the same dashboard metrics are shown, but for a point in the past.
Different snapshot dates and times are shown on the right, with key metrics
on hover. Selecting one of these snapshots displays the dashboard metrics for
that moment. This provides a powerful diagnostic tool for database
administrators.

Idera was an early adopter of the Microsoft Office 2007 ribbon toolbar concept. While
the ribbon is relatively new, SQLdm nevertheless benefits from the user learning
created in Microsoft’s sizeable wake.
“We believed it was very powerful and that the uptake on Office 2007 from the
community would be huge,” says Miskelly. “Based on this, we believed the ribbon
would become familiar fast because of Microsoft’s Office 2007 product push, so a
good bit of the risk was taken out of the equation.”


They also worked to apply the idea in innovative ways. The previous release of
SQLdm used independent dialogs for each diagnostic view, resulting in lots of
windows, a difficult management task, and user complaints. The ribbon provided a
way out of this problem, because it facilitated organizing the application parallel to
SQL Server architecture.
“For the most part we stuck closely to how it was designed, but our use of the tabs
to represent SQL Server architectural components was quite innovative compared to
how the ribbon was employed in Office 2007 products,” says Miskelly. “It just goes to
show that intent does not necessarily dictate use.”
The ribbon also made it easier to provide action options in context. For example,
when viewing Session Details, users can click on a specific session and see options to
Trace or Kill the selected session. The ribbon provided a much easier and more
intuitive way to access these actions than a context menu or small toolbar.

USABILITY PROCESS
Previous versions of SQLdm had “quite a few usability problems,” says Meurer. Part
of the problem was that the information views were fragmented by windowing. Once
users got past the introductory overview of all servers, all additional information
popped up in a new window which was an island unto itself—the windows were not
logically or navigationally related. Trying to use all these independent views to get a
holistic sense of what was happening on the servers was virtually impossible.
In designing the new release, usability analysis was performed after each set of
features was completed and delivered to Quality Assurance. Development team
members met in groups to run through features for usability strategies throughout
the design phase.
Although the team didn’t use formal user models, informal personas were employed
at different times to represent major segments of the user base. Discussions during
the specification phase also analyzed the different types of users and how different
UIs would perform for each subset.
As screens were completed, the development team performed heuristic analyses on
each one, with informal use-case based run-throughs of the product with developers,
quality engineers, and other employees not directly involved in development of the
application.
The analysis sessions focused primarily on identifying workflow problems and basic
usability issues. Usability testing was also done with the first implementation of
features, tracking task success metrics and measuring user understanding of
information presented by the application. Metrics were collected once or twice for
each feature.
User feedback is collected and evaluated on an ongoing basis, through the sales
team, and from product managers, technical support and in-house users of SQLdm.


The previous version of SQLdm. Each view onto a server or alert opened in a
new window, causing user confusion and preventing DBAs from getting a
good overview. Much of the same information is displayed here, but in a far
less intelligible manner.


TEAM
SQLdm’s design team worked in a highly collaborative environment. Primary usability
workers were:
• Trent Miskelly received his BS from Mississippi State University in Computer
Science. As a software developer, Trent quickly realized he had a passion for
user interface design and development and has since pursued every
opportunity to work on those of interest. Trent works with BBS Technologies
as the technical lead on SQL diagnostic manager.

• Will Meurer received his BS from the University Of Houston College Of
Technology, where he studied information systems. After working in web
development and in the software industry, Will found the differentiator
between a good and bad information system was not the information itself,
rather in the form of that information and in ease of use. From that point, Will
pursued a career in user-centered information design and received his MS in
Information Studies from the University of Texas at Austin School of
Information. Will has worked with BBS Technologies on SQL diagnostic
manager and most BBS products as a Quality Assurance Engineer and
Usability Analyst. Beyond functional testing, Will performed heuristic analyses
and user tests, and championed usability efforts.

Members of the broader development team included:
• Project Manager: Heather Sullivan
• Software Developers: Kurt Goolsbee, Mark Lauritsen, Trent Miskelly,
Michael O'Neal, Vicky Sherrouse, Shekhar Vaidya
• Quality Assurance Engineers: Adam Condron, Will Meurer, Rodney
Quissak, Alfredo Ramos, Jason Van Dyke
• Information Developers: Marcus Bryant, Marlowe Wakeman
• Customer Support: John Harp


Idera team, left-to-right: Adam Condron, Lee Pylant, Heather Sullivan, Kurt
Goolsbee, Trent Miskelly, Alfredo Ramos, Mark Lauritsen, Vicky Harp, Marcus
Erickson, and Michael O’Neal (not shown: Will Meurer, Rodney Quissack,
Shekhar Vaidya, Jason VanDyke, and Mike White).

Idera’s challenge with SQL Diagnostic Manager—to hand-hold inexperienced DBAs
but to simultaneously be a shadow for experienced ones—is tough. Luckily, because
they have spent time to understand how successful DBAs perform their job, they lay
out the interface in a way which supports their users’ tasks. They provide the data
that experienced DBAs need to resolve issues, while also stepping less experienced
users through the process.
The product allows its users to deal with large quantities of information through
clever graphical summaries and progressive disclosure. All features have defaults
which will work well out-of-the-box, but also allow for customization to make the
product suitable for different environments. Innovative features like the history
snapshots give much more diagnostic power to DBAs who are trying to resolve
infrequent or intermittent problems.


SugarSync

COMPANY INFORMATION
Company: Sharpcast Inc. Design team:
Application: SugarSync • Vivek Patel, Director, Product Management
• Nicci Gabriel, Creative Lead
Headquarters: Palo Alto, Calif. • Ashish Chordia, Product Manager
• Mark Dixon, Director, Products
Motto: Strive to create a user experience you
wished existed, but doesn’t.

OVERVIEW/MOTTO
We’ve known for some time that usability isn’t only for desktop computers.
SugarSync arose from the special challenge of crafting a consistent usability schema
for accessing the same data over multiple devices using multiple operating systems
and interfaces.
Universal data access is a huge challenge when the data can be synchronized among
a bewildering array of devices that can be controlled through every possible
combination of keyboards, keypads, mice, trackballs, styli, fingers, and even voices.
“Users want to create, share, edit and view their media files and documents from
anywhere, in an appropriate format, and at their own convenience. And they aren’t
willing to become the IT department for their own personal intranet,” says Vivek
Patel, Director of Product Management. “These processes must be automatic,
intuitive, and available on all their devices.”
SugarSync was developed for general consumers who use multiple devices and the
system is designed to scale to millions of users around the world.
The application aims to address the challenge of maintaining data integrity across all
these platforms, so that users can rest assured that they always have access to the
most current version, even when switching platforms.
Sharpcast, incorporated in 2004 by Gibu Thomas and Ben Strong, launched
Sharpcast Photos in February 2006, after a first round of $3 million in funding from
Draper Fisher Jurvetson and Selby Ventures. Sharpcast Photos was a tool for
synchronizing images between multiple devices including PCs and mobile phone.
In 2008, after second round of funding brought the total to $16.5 million, Sharpcast
decided to take the concept a step further and developed SugarSync to synchronize
any file type.


The SugarSync site’s homepage (at the time of submission): Three bullet
points and one diagram describe the key product features. The ability to sum
up the key attributes this clearly is a sign that the product has good focus.


WHAT DOES IT DO?
SugarSync allows all of a user’s devices and the Web to work as one. It keeps the
user’s digital media and files automatically in sync across multiple computers,
backed up online, and remotely accessible from mobile phones. In addition,
SugarSync’s “Lite Sync” function allows a user to access their main computer’s files
from another computer or mobile device and make changes without requiring full
replication of all remote files on the local file system. SugarSync is accessed through
a mobile website compatible with virtually any Internet application or device, or
alternatively through custom applications designed for Blackberry or Windows
Mobile, or a custom website for iPhone.
A user can also make changes to files while offline. When a network connection
becomes available, SugarSync automatically synchronizes the files back to the
system. All files monitored by SugarSync are automatically backed up to multiple
data centers.
When the user is away from his or her primary computer, a Web-based file manager
is used to access files remotely. A special “photo gallery” picks out jpegs from synced
folders and organizes them in one place, from which they can be shared or
commented. The mobile applications allow additional interaction, such as streaming
audio and advanced synchronization of photos taken with the mobile device.
Changes made through the website are synced to the desktop file system. Multiple
computers can be synchronized across Windows and Mac platforms.

WHO IS THE USER?
As you might imagine, SugarSync doesn’t attract newbies.
“We have designed a path for customers who simply want to backup files from one
computer, but our typical users are looking to do more with SugarSync,” says Patel.
Typical users are people who routinely access more than one computer in addition to
an Internet-enabled mobile phone. While most profiles assume some technical
proficiency, there’s enough disparity to introduce a range of usability issues.
The company characterizes its user/personas as early adopters, meaning that growth
will likely come from an even more diverse customer base.

THE APPLICATION
SugarSync users typically discover the application from a press article or blog, then
visit the website for more information. If a user decides to sign up for a free trial, he
or she is directed through the signup process, which culminates in the installation of
the product.
“We strove to create a sign-up process that would guide users who were not familiar
with navigating their file system to be able to back up their important files,” Patel
says. “This story informs the usability of the setup process. Aside from this setup
process, there are multiple avenues that a user can pursue depending on what they
are seeking.”


This process is painless but pretty extensive, since it must be repeated on the
primary computer, any secondary computer that will be used, and the mobile
devices. Although the application in use follows a pretty open-ended narrative
structure, the fixed steps of installation are required to empower that usage.
Once the user launches the application, he or she is led through a setup wizard
intended to educate her or him about some of the features. The setup process for a
second computer is modified to educate the user about the different modes by which
he can sync folders from his first computer.

Versions of the SugarSync application are available for PC, Mac, Blackberry
and Windows Mobile, as well as a regular and mobile website. This cross-
platform approach introduces the potential for usability confusion without
strong focus.


The short sign-up process on the website includes several elements which
help users: in-line assistance, a clear understanding of where the nickname
will be used before it is created, and a clear statement of what will not
happen to the provided information. Refreshingly, no credit card is required at
this point. Neither is there a whole list of pointless demographic questions. By
lowering the barriers to entry and then asking for additional information later
in the relationship once users have seen the value of the application,
SugarSync encourages more users to complete the initial sign-up. (In a case
study presented in our report 2 on the Return On Investment From Usability,
another Web service increased registrations by 260% after reducing the
number of questions on the sign-up form.)

2
www.nngroup.com/reports/roi


On the PC, installation carries on where sign-up left off. Impatient users who
did not complete the online sign-up are also catered for. This consideration of
potential user entry points is important to attract as many users as possible.

Colorful, fun icons are listed alongside more standard computer images,
giving the application a less formal feel and letting users know from the start


that this isn’t just any old boring backup application. Graphical treatment
goes a long way towards setting the tone for any product.

While finer level detail is available with the Customize button, users are
encouraged to select “types” of file stored in particular locations rather than
choosing from a tree control. This minimizes the effort required during setup.

The setup wizard also reminds users of their online access URL. Even at this
point in the interaction, when users are already on board, SugarSync takes


the time to reassure them that their data is safe. These small, constant
reminders are a great boost to user trust.

Again, text on the screen is aimed at reassuring users. While many will not
read the full text, the formatting ensures that the key concepts stand out. A
clear action button lets users know what will happen next.

“To make it simple for users to select the most common folders to sync, they are
presented with a flat list with checkboxes (during setup), instead of a tree with
checkboxes,” Patel says. Each item on the list can be checked off to synchronize the
folder.
Once the primary computer setup is completed, the computer is immediately set to
work uploading synced files to the SugarSync server, a background process that
doesn’t especially require the user’s attention.
Folders selected for sync are backed up to SugarSync’s server, which offers 10 gigs
of storage under the default plan (additional storage can be purchased). Folders are
synchronized to and from the computer in real-time, for as long as the application is
running. So if a file is changed on the host computer, it’s instantly changed on the
server as well, ensuring the most current version is always available. Files changed
remotely are synchronized back immediately.
Configuration is relatively quick and simple, because SugarSync puts itself in
between the data devices, rather than forcing them to talk to each other—a process
that is potentially very complicated due to the differing systems, and which can
require installation and learning for multiple applications.


“SugarSync requires less manual configuration than updating an iPod since it does
not have to be physically connected to your computer to access the latest data,”
says Patel.

DESKTOP APPLICATION
After the setup process, the application presents a simple tree structure with a left-
pane collapsible tree hierarchy showing all folders and a right-pane window
containing the contents of a selected folder. Hovering over an item invokes a tooltip
which indicated whether the item is in sync. Many Finder/Explorer functions are also
duplicated in SugarSync’s file browser.
The tree display shows all the synced folders in a fairly conventional format.
Additional locations include “Deleted Files” (files deleted from the shared file area of
the user’s SugarSync storage), “Web Archive” (files stored on SugarSync’s server but
not maintained on the host computer), and the “Magic Briefcase.”
The latter feature is one of the strongest components of the package. Files dragged
into the Magic Briefcase folder are shared among all devices, whether accessing via
mobile phone, on the Web or from another shared computer running the SugarSync
application.
Users can switch among different devices using a large dropdown menu/button at
the top of the left-hand pane. Each device is identified by name and with an icon,
and backed up files from these devices can be viewed remotely. This action is also
supported by buttons on the menu bar as testing showed some users were not using
the menu to find their other computers or devices. The ability to switch between
remotely accessed devices is a key aspect of SugarSync.
Buttons on the lower left of the application window allow access to the Web interface
and Web photo gallery. The size and placement echo the Microsoft Outlook
Navigation Pane, although clicking opens the requested item in a new browser
window rather than providing navigation inside the application.
The desktop app is also available for the Mac OS.
“Many Mac users also have a PC since it is required by their employer,” Patel says.
“They often find themselves having to manually move files back and forth between
the different devices which can be difficult to manage.”


The file manager within the desktop application (PC version) lists all the files
that have been synchronized. Status indication at the bottom of the window
shows used and available storage space and sync status.


Files synced from other devices can be viewed in a similar way just by
switching to that device within the sync manager.


The setup wizard allows users to quickly configure the folders which will be
backed up on each machine. Later, they can manipulate this list to add new
folders and customize chosen locations if they choose.

Tool bar buttons are for expert users. The SugarSync team realized that
simply creating a button for every feature serves little purpose. Instead, only
core features are represented in the bar.


CLARITY AND CHOICE
Usually when you think about usability challenges, you think about the interface. In
this case, what has been left out of the interface makes a big difference.
A frequent downfall of file synchronization schemes has to do with overwriting the
wrong file and losing changes as a result, or creating conflicting versions of the same
file. So one of the biggest challenges for SugarSync relates to what’s happening
under the hood, making sure the right version of the file is always accessible and
never confusing.
The first step toward a solution comes from the “always syncing” mode that the
application runs in. Once files have initially been uploaded, revisions to the server-
based files take place in close to real time.
Users can select from two different modes for synchronization—lite and full—which
apply when users are syncing between more than one computer, such as a desktop
and a notebook.
“Lite Sync” allows users to interact with files that have been backed up to the
SugarSync server without downloading the entire folder to the remote location,
which can useful when storage space is limited on the secondary computer.
“For example, you might have a desktop computer with 100 GB of files that you want
to back up, but a laptop with only 50 GB of hard drive space,” says Patel. “By using
Lite Sync, you can access files on your desktop computer from your laptop by
downloading the files you need on demand.”
“Full Sync” makes a complete copy of the synchronized folder on the secondary
computer. That allows users to make changes to files on the remote hard drive’s file
system, as they would any other files, and have the change automatically
synchronized back to the server and then to the primary computer.
The Full Sync mode works almost invisibly for users. But in order to allow that
functionality, other choices had to be curtailed.
“From a systems perspective, we could have enabled the ability for users to Full Sync
any folder between computers without restrictions,” says Patel. “However, we felt
that over time, users would have a difficult time tracking which folders were set to
Full Sync. This has a high probability of introducing unintentional errors and could
potentially get the user in a bad state.”
That meant enforcing a scheme whereby only certain subsets of folders could be fully
synced.


Sync options are explained both textually and graphically within the setup
process. Allowing Lite Sync reduces the complexity of keeping files up-to-date
for both the user and the application.


As part of the setup process, users are asked which files they want to fully
synchronize. However, the default is to lite synch so that files are available
from the server rather than taking up disk space on each computer.


Terminology is important. When everything the application does can be
counted as a “backup”, what do you call items which are backed up but not
synced? Web Archive is a term which fits the bill well. Note the use of a
graphic to describe the difference between sync and archive.


WEB APPLICATION
The Web application visually mirrors much of the desktop interface, with the same
left-pane tree hierarchy and location selector, and the right-pane file list. There are
some differences, however. The lower part of the left panel shows the amount of
online storage used and available, and a link is provided for setting up access from a
mobile phone.
New features are also available. Tabs offer the option of accessing the file manager
or switching to the Web Photo Gallery, where photos can be viewed or shared.
SugarSync automatically creates the online gallery by scanning all jpegs in synced
folders and adding them to the gallery interface.
The gallery features a thumbnail view of pictures, which can be toggled between
large and small (although both views are actually pretty big). Clicking on a thumbnail
invokes a full image view of the photo, which can then be commented. Additional
thumbnail navigation is available from the full-size view. Other features include
captioning, commenting and a slideshow.
Navigation links on the top right go to Downloads (the SugarSync desktop
application), Account, Address Book, Help and Logout. The Address Book is a Web-
based contact manager, intended to make it easier to share media with their friends.
It can import contacts from several Web-based e-mail clients but, oddly, not from
Outlook or CSV.


The file manager within the Web application works as similarly as possible to
the native applications given the constraints of the Web interface. Here the
learning experience from one environment will carry over into other
environments with little issue. (However, full consistency is not always
desirable, as discussed below in the context of the mobile user experience,
where providing the full set of features from the Web and PC apps would have
backfired.)


The Web application offers one distinct feature which is not found in the
native applications. Jpeg images from synced folders are extracted and
displayed in this online-only interface. Albums are private by default but they
can be shared in a public photo gallery with very little additional effort. This
must be one of the least effortful ways of creating online albums.


Because it crawls all synced folders for jpegs, the photo gallery may create
albums from random jpegs unnecessarily. Such albums can easily be removed
by “hiding” them (to delete them would cause a problem with the file
metaphor—have they then been deleted from the computer as well?).

MOBILE
The mobile application contains similar elements to the desktop application, but with
a single-pane folder view to accommodate the smaller screens found on mobile
devices. Users drill down to the file list, rather than having access to a viewing pane.
Obviously the phone application interface was not designed to be fully consistent
with the desktop UI—this is one area where consistency would be pointless, as the
tasks that users perform on their phones are very different to the tasks they perform
on PCs. Sharpcast have realized this and offered just the most portable application


features on the phone—browsing photos from the online store and syncing photos
from the phone.
Getting access to documents is possible but doesn’t take up the same proportion of
real estate on the phone as on the desktop as it is a much less frequent mobile task.
In fact, on Blackberry devices the File Vault opens in a browser instance. This makes
a lot of sense, as the browser already knows how to handle multiple file formats.
Rather than spending time coding this functionality into their application, Sharpcast
were sensible enough to utilize existing technology and instead concentrate their
development resources on other areas. This does lead to a slightly less polished user
interface (especially with the constraints of the Blackberry browser), but the end
result is still functional.
There are also features for synchronizing and viewing pictures taken with a camera
phone. Using the SugarSync mobile application, users can move a photo from their
phone to their desktop and the Web in one click. They can also send files of any size
to anyone or select a recipient from their SugarSync Address Book list. These are the
tasks that users are most likely to want to perform while away from a PC.

There is a challenge in designing for a wide variety of mobile platforms
without standard interaction styles or screen sizes. SugarSync is available in a
native version for Windows Mobile and Blackberry, and a Web version
optimized for iPhone. Other devices can make use of a mobile-specific Web
interface to view synced files which are stored online.

The mobile interface comes in a couple of different flavors to accommodate different
phone operating systems, including Windows Mobile, Blackberry and iPhone. Users
on any other Internet enabled cell-phone can use a mobile Web interface to access,
download or upload files, or view the photo gallery, but without the live sync feature.


Adding a mobile device is made much simpler by the addition of SMS links-
rather than having to type in a URL, the application will send an SMS to your
phone. The SMS contains the link which will navigate you to the correct
location.


Mobile application, Windows Mobile and Blackberry versions.

The photo gallery (left) and Mobile Photos menu (right) in the Windows Mobile
Application


For other mobile devices, there is a specific Web interface. Signing in (left)
gives access to the file manager and photo gallery (middle) along with a link
to download the mobile application for compatible devices. Inside the file
manager (right), users navigate to the file they want using links. These files
can then be viewed or sent to a recipient’s e-mail address.

The Web interface to the photo gallery on mobile devices includes thumbnail
images to help choose the correct album. Images—even tiny ones—help users
to choose the correct item because they allow fast recognition.


Sharpcast have developed a version of their Mobile website (left) which is
optimized for the iPhone. Note the large target areas to allow for easy
selection using the iPhone’s touch screen even with big fingers.
The Mobile Web photo gallery has also been optimized for the iPhone (right).
Note that this has involved removing the “Share” option which is present in
the regular Web interface. The iPhone provides a large enough viewing
experience for immediate sharing to take place on the device.

INTERFACE ELEMENTS
Because the application deploys across multiple platforms, the challenge of a
consistent interface is exponentially more difficult. The trick was to figure out the
right approach to a wide variety of environments, not all of which contain the same
capabilities. In the end, the design team decided to tailor each application to the
controls most familiar to the given environment.


“The design team works daily on Vista, Mac, XP, Windows Mobile, and the iPhone to
stay in tune with the UI constructs on each of these platforms,” says Patel. “The
same design team created the design for all the different platforms.”
The design team considered the tradeoffs of working with platform specific user
interfaces, but mostly followed the constraints of the Qt Cross-Platform Application
Framework which was used to develop SugarSync. A Mac platform client was pushed
through to beta because of user demand. Due to time limitations, the team wasn’t
able to exploit the native Mac interface as well as they would have liked (for
instance, the button skinning), but that’s only a temporary obstacle.
“With respect to other elements, we were careful to create an interface that would be
well received and familiar to both PC and Mac users,” says Patel.
During the development process, designers experimented with several buttons on
the toolbar, including various elements from Windows Explorer and Finder. But in the
end, the team chose to present only primary actions, such as “Add/Edit Sync
Folders.” A Finder-style dialog was used to handle moving and copying files among
multiple computers on the website since it could operate in a fixed amount of space
and did not require vertical page scrolling.
The Web interface obviously spans operating systems, which requires a decision as
to whether a Mac or PC interface should be used for common interface elements.
Sharpcast again chose the Mac’s Finder control for file management rather than
Windows’ Explorer UI. As this control can display multiple hierarchy levels without a
tree view, and requires no vertical page scrolling it provides fast online control over
folder navigation. Given the fact that the product is aimed particularly at multi-
platform users, this design decision makes good usability sense.
The dropdown menu for switching computers was also carefully chosen to reduce the
possibility for confusion by overwhelming the user with a view of all the folders on all
their computers at once. There are some tradeoffs here in terms of control (for
instance, channeling the option to drag material from one computer to another
through the Magic Briefcase), but it’s a sensible tradeoff considering the alternatives.
The design team is considering possible changes to this approach for future versions
based on user feedback.

The setup process provides extensive handholding and coaching about how to use
SugarSync and what the application will be doing in the background while the user
attends to other tasks. The wizard-style setup also provides instructions on how to
set up other locations (such as a notebook or mobile phone), including images of
some of the other formats.
The designers were conscious of helping users get accustomed to the system. A
dynamic help/tip bubble system on the website will pop up with different tips or
suggestions, based on the state of the user’s account.
These tips include information about a recent release or suggestions about new ways
of enhancing the desktop application. Diagrams and “pithy” explanations help fortify
concepts which might be otherwise hard to understand due to the product’s
innovative nature, Patel says.


Online, the first time that users open an area of the product that they have yet to
configure, they are presented with a graphical explanation of its purpose. This
encourages exploration of the UI and gives users a second opportunity to learn about
the product beyond the setup process. Bringing assistance into the UI in this way
increases the likelihood that users will see and understand the different features
available to them.
If users do need additional help, this is available in the desktop product versions as a
link to the online assistance topics. Additionally, “What Is..?” and “how to” links are
listed under the desktop Help menu which lead to single pane explanations very
similar in style to the online diagrams. Online assistance allows for the regular
search and browse functions of most help systems but additionally provides sections
covering tutorials and the most popular and recent topics. A support contact e-mail
address is also highly visible on the page.

Online help is image-rich to help orient users to features whose names they
may be unaware of.


Indeed, developers knew they were introducing unusual concepts that might be
difficult for users to immediately grasp. For example, the “Lite Sync” concept
discussed above, which allows users work on a server file without creating a
permanent sync location on the computer where the editing is being done.
“This is powerful, but difficult to understand and explain,” Patel says. “We tried to
balance this innovative approach with familiarity by relying on usability paradigms
that the user is already familiar with, such as the design of Windows Explorer. We
also tried to adopt familiar views on the website for sharing files and based these on
an email metaphor.”
Getting users setup on a mobile device was also challenging, since it’s difficult to
explain the value proposition, Patel says. In addition, there are the usual problems
mobile users experience—such as the difficulty of typing in Web addresses on a
phone or smartphone, which were resolved using common tactics (in this case
texting the URL to the phone via SMS).
SugarSync’s developers also sought a balance between an attractive, clean design
for the target users and one that that would still be easy to use for a “newbie.”
The visual designer and interaction designer worked closely together—even sitting
next to each other while evaluating design concepts in Photoshop. To resolve
differences, they would often submit a design for user testing.

USABILITY PROCESS
User testing was an integral part of the design process.
In some tests, developers simply observed as a user installed, set up and used the
product. At other times, a user was given a list of tasks to perform. If an area was
suspected to be problematic, a user would be asked to take part in further
evaluation. Wireframes, sketches and prototypes were also tested at various stages
in the process.
Beta users were both surveyed and interviewed about product usability. One
business partner also conducted an in-depth five-person usability survey which
evaluated the entire experience using a standardized usability questionnaire.
Feedback from the various research streams was turned into feature requests, which
were added to product tracking efforts. A bug-tracking system was used to monitor
problems and short-term items.
“We typically look at patterns, but do not invest in formal summaries of our findings
due to current resource constraints,” Patel says. About one man-day per week was
devoted to usability process during development for a total of about 50 days.
The developers decided fairly quickly that the product would be aimed at early
adopters, and modeled their users accordingly.
SugarSync broke the target audience down into broad groups which it used to
develop four key personas for Sharpcast’s wider range of synchronization products.
Two of these were directly targeted to SugarSync, the other two cover the broader
category of Sharpcast customers acquired through ISPs and other sources.


The SugarSync personas included “Mobile Professional” and “Prosumer.” Each is
described in substantial detail, including how they use the application and additional
biographical detail which can be used to extrapolate about how they might want to
use the application in the future. The persona descriptions were posted at strategic
locations around the office, to keep them at the forefront of team members’
decisions.

TEAM
Team members included Vivek Patel, Director of Product Management; Nicci Gabriel,
Creative Lead; Ashish Chordia, Product Manager; and Mark Dixon, Director of
Products.
Patel says was he heavily influenced by classes he took at Stanford during his
undergraduate and graduate school programs. He has studied with UI experts such
as Terry Winograd and Don Norman. Patel previously was a co-founder of a startup
that was sold to Handspring, where he was influenced by Jeff Hawkins and Rob
Haitani. His love of photography has also been an asset to him in designing the
photo-related portion of SugarSync.
Gabriel has a visual design background and is heavily influenced by Apple from both
a design and interface perspective. During graduate school she was studied under
and worked with traditional designers such as Maira Kalman, Steve Heller and Stefan
Sagmeister, among others. She strongly believes in an equal marriage of form and
function.


Vivek Patel and Nicci Gabriel

The Sharpcast team has solved a long-time problem with a conceptually simple
application which successfully spans different operating systems and takes a leap
beyond simple backup and in to file sharing and replication. Although still a young
product, SugarSync shows how strong focus on a core user task and a set user group
can result in innovative and user-centric solutions.
Whether by design or through time and resource constraints, the interface is
pleasantly minimal. It describes several new concepts in terms that the target
audience should be able to easily understand. The team’s challenge will now be to
build on these concepts in a way which makes the product accessible to a broader
group of potential users without introducing clutter or extraneous features into the
interaction.


SuperSaaS

COMPANY INFORMATION

Company: SuperSaaS Design team: Jan Maurits Faber
Application: SuperSaaS (Super Schedule)
Design motto: “You should not need an IT
Headquarters: Amsterdam, the Netherlands department to run your business.”

OVERVIEW/MOTTO
Super Schedule is a flexible Web-based application used to create online scheduling
and reservation systems by SuperSaaS.
SaaS stands for “Software as a Service,” because the application is intended to
create other applications, which are then deployed to the public. So the end-user of
Super Schedule is not the end user of the scheduling application; it’s the person
responsible for creating the scheduling application.
The application is accessed over the Internet. The development engine is hosted on
SuperSaaS servers; the finished scheduling application can be hosted by SuperSaaS
with the option to use a custom URL. The user can control who accesses the system
and what privileges they have. Both the application’s process flow and the visual
layout can be tailored to match the user’s website. The application is intended to run
on all major browsers, in three languages.
The aim is to empower users to create a fully functional reservation system including
options for payment and a custom URL in 15 minutes without the need for technical
assistance from a human and with no knowledge of Web scripting or server
configuration. SuperSaaS integrates APIs from Paypal and GoDaddy for payment and
DNS tasks respectively.
As you can imagine, there’s a lot going on under the hood to make all these parts
work together smoothly. Our usability analysis looks at the development engine
rather than the final product, although we’ll touch on that too.
“Using software should be easier. You should not need an IT department to run your
business,” says Jan Maurits Faber, SuperSaaS president and CEO and the designer of
the application. In Faber’s view, SuperSaaS is a step toward IT freedom.
“Applications that need a central server, such as e-mail, greatly benefit from
economies of scale when outsourced,” he says. For most companies that are not
primarily concerned with technology as a product, IT functions should be migrating
toward the software-as-service model, he says. Super Schedule is the first module in
a planned SuperSaaS suite.


The homepage. This part of the application is only seen by superusers—those
who have a need to create a scheduling system which will then be used by
the superuser’s users. Note that the term superuser refers to a role, not a
level of experience, and the Web application is created with this caveat in
mind as a superuser may not have much prior experience with hosted
applications.


WHAT DOES IT DO?
SuperSaaS is used to create Web-based scheduling systems—balancing flexibility
with simplicity. The scheduling systems created then have users of their own,
creating a two-pronged usability challenge.
Faber boasts that superusers can—in just 15 minutes—create a fully functioning
reservation system with a custom URL and a payment system (the 15 minutes
doesn’t include signing up for Paypal). The task is accomplished “without any
involvement from other humans and without any scripting or changing configuration
files,” says Faber.
The Paypal API does the “heavy lifting” on payment, and the GoDaddy.com API
manages the DNS interface. SuperSaaS combines these features into a continuous
interface that lets superusers avoid dirtying their hands with hardcore development
tools.
Key features include:
• An entire reservation system can be configured by picking options from
interactive Web forms.
• Access control can be tuned to a fine pitch—including setting the business
hours and controlling who can make or change reservations.
• The process flow can be adjusted for the type of business and appointment.
• The layout is also highly customizable.
• Strong browser compatibility.
• Multilingual application (English, Dutch and Portuguese currently
implemented)

WHO IS THE USER?
Superusers—those who use the SuperSaaS development engine—typically fall into
two categories—1) professional website builders and 2) business people who want
the convenience of a Web scheduling system but who do not specialize in online
content.
The latter category ranges from owners of small- to medium-sized enterprises to
managers and professionals with schedule-sensitive vocations (such as in academics
or the medical field)—basically, anyone.
That makes for a pretty diverse user base. Web-oriented entrepreneurs bring a
certain amount of expertise to the job. Even among this group, levels of proficiency
and technical knowledge can vary widely. When it comes to SME owners, that wide
variation expands to a chasm.
Anything from a garage to a caterer to a yoga studio can usefully employ online
scheduling. A user approaching the development engine for the first time could be a
near-novice who simply wishes to share an agenda or schedule with a few colleagues
or friends.
You see, in addition to the superusers, there are the user’s users, those who will use
the scheduling application created by SuperSaaS to make appointments. More simply
put, according to Faber, “those who create a booking system, and those who use the
resulting booking system.”


The latter category can include virtually anyone who uses the Internet. So in addition
to creating a low threshold for development-side users, the end product also
contains a second usability component that aims to serve to just about anyone who
uses the Internet.
As this report went to press, SuperSaaS hosted more than 600 reservation systems,
with growth of about 20 percent each month. Each scheduling application also has its
own user base, which can range in size from a handful to hundreds or more.


A schedule created with SuperSaaS. This demonstration schedule shows some
of the variables which must be considered; how long is an “appointment”?
How many people can attend at a time? What cost is associated with each
schedule item? How do you show free/busy times?


On first login, users are presented with their main options (creating a
schedule or learning more on the tour), but they are also given access to all
other features so that they can explore on their own if they choose.


NARRATIVE/WALKTHROUGH
The original prototype for the SuperSaaS development engine was open-ended. Test
users reported they were overwhelmed with the options presented, so a wizard
interface was introduced as the entry point for most people setting out to design a
scheduling system.
First-time application builders sign in and land on a dashboard interface. A tour is
offered from the start, with demos and tutorials available for those who prefer to
have more guidance. These novice options are relegated to the help pages after the
user builds his or her first app. It’s nice to have this abundance of training options,
but the wizard also provides plenty of guidance for those who want to jump right in.
At each step in the wizard, a few lines of text explain the user’s options. “Help me
choose” leads to an even more detailed explanation. Options are laid out in plain
English, with dropdowns, text boxes and buttons as appropriate. Each step in the
wizard is fairly concise—efficient to the point that an expert user likely won’t feel
constrained by the format.
But for hardcore geeks and the truly driven, an expert mode option cuts out what
little fat the wizard contains and offers direct access to advanced options such as
access control, a decision point which the wizard defers until later with a default
setting.
The advanced wizard is essentially the prototype interface. Even in this expert mode,
the interface offers a hand-holding and context-sensitive help. However, it’s a no-
frills affair. It will appeal to highly technical users of the sort who feel nostalgic for
the good, old DOS command prompt.
The main difference is the intimidation factor—the advanced wizard loads virtually all
options for configuring the schedule application in one place. But since most
superusers—especially new ones—won’t need all of the options presented, it makes
perfect sense to keep them out of sight and out of mind in most cases.
The carefully tuned suite of default settings allows most users to create a perfectly
acceptable scheduling app from the basic wizard without ever dirtying their hands.
For the users’ users—those who will make appointments with the deployed
scheduling application—the object is to make learning virtually moot. These users
want to come in, perform a single task, and exit in no more than minutes. Nobody
would be willing to read a manual to set up a hygiene appointment with their dentist.
The system is therefore simple, but includes tooltips, context sensitive help and
verbose error messages. Superusers can also roll out usability features targeting end
users. Among the more notable options, the configuration settings available to
superusers allow the person running the scheduling system to customize text
prompts. SuperSaaS serves a choice of predetermined labels—including client,
employee, student, or simply user—and also allows superusers to create their own
labels as appropriate. For instance, an acupuncturist could create a schedule that
describes a user as a “client” or enter a custom term like “patient.”
Another powerful usability feature for superusers is the process management screen.
From here, the superuser can control what information a schedule user is require to
provide, as well as controlling notifications and restricting the parameters within
which an appointment is made. For instance, users can be required to set up


appointments at least 24 hours in advance, or they can be prevented from cancelling
with less than 24 hours notice.

The wizard was developed after user feedback that the list of options was too
confusing. By adopting this approach, each question can be asked in turn,
with more space for descriptive text. Notice that the Help Me Choose option
opens even greater levels of assistance. On the other hand, checking the
Advanced Wizard box reduces prompts to the bare minimum. In this way, one
interface start point serves many user types. Note also the reassurance that
changes can be made at any time.


The sign of a good wizard: here the text describes not just what to enter, but
also where it will be used, ensuring that schedule designers don’t create
inappropriate names which will later show up in a URL.


NAVIGATION PATHS/CHOICE
The original prototype (which can be seen as the advanced wizard) was open-ended
in terms of the user experience, a collection of settings which could be saved. The
basic wizard format pushes users through a series of choices to a “destination”—a
default-configured scheduling system which can then be tweaked through a variety
of methods. Once a schedule has been deployed, the path is iterative, allowing
superusers to keep going over the setup and tweak virtually everything about how
end users see and use the schedule.
Redundancy is pervasive throughout the site. While we generally don’t like to see
redundant navigation on Web pages, it works here thanks in equal parts to careful
design decisions and the iterative nature of the site’s narrative. Faber says he was
careful not to create redundant controls—meaning more than one interface to handle
the same task. So while there is more than one path to a task, all roads lead to
Rome.
Users are never forced to repeat steps; rather the system offers multiple interfaces
and navigational paths to execute any given task. For instance, the time controls
described previously on the process management page are also found by selecting
“Supervise” from the controls and selecting the tab for “Opening Hours.”
On paper, this might raise concerns about creating confusion, but in practice, a user
can feel their way through the application and quickly find the function they need.
The alternate navigation is either de-emphasized by its placement, or made to look
fresh by the addition of descriptive handholding tips (see below).
Most users are unlikely to consciously grasp the redundancy, since they will stop
looking for a feature once they find it the first time. What they will notice instead is
that they’re usually not many away from the feature or control for which they are
looking.
And there are plenty of controls to choose from.
SuperSaaS strongly steers superusers toward a baseline of usability, but it rarely
demands that they stay with the defaults. And with great power comes great
responsibility.
“We have tried to ‘game’ the system so that it is unlikely that a user will produce a
booking system with bad usability by providing sensible defaults everywhere,” says
Faber. “The large freedom on the user’s part does mean it is impossible to prevent
him from, say, changing the default help text to something very unhelpful.”


The Advanced
path through
schedule
creation. The
form creates a
conversation
with the user
which initially
looks to be
overly verbose,
but in fact
keeps the task
flowing
through
sensible field
order and the
use of
formatting to
group options.


Supervisor options provide a place to set overarching variables. Again,
assistance in the page means that if users get to this page by mistake, they
can quickly reorient themselves without having to visit a help page.


User management allows control over “guests” (users of the scheduling tool)
and superusers.


INTERFACE ELEMENTS
Generally, the SuperSaaS interface follows existing design conventions.
“Typically, the benefit of introducing a new widget seldom outweighs the cost of
reduced familiarity,” says Faber.
Where SuperSaaS does depart from the Web-based script, it exploits another set of
conventions that will be familiar to most users.
“Many screens use a desktop metaphor to avoid the modal way of presenting a
sequence of pages as found on most other reservation systems,” says Faber. For
example, creating a new slot on the schedule opens a non-modal “window” inside the
page which can be dragged and closed using familiar controls. While the window is
open, users can still work on the main body of the page.
“Although the desktop metaphor is seldom used on websites, it is very familiar to
anyone who has used a computer,” Faber says.
This can be helpful when dealing with large amounts of information. For instance, the
desktop metaphor kicks in when a superuser is reviewing appointments that have
been booked by end users. In the case of a yoga class, for instance, this could
involve multiple times during a week and dozens of customers in each class.
When a supervisor clicks on an entry to review its details, he or she is presented with
a new “window” that adds information while the overall schedule page remains
accessible behind it.
“Editing the information opens another window still; all the while staying on the
same page and at any time the windows can be closed or moved out of the way,”
says Faber. (However they can’t be minimized or moved to the background, which
could result in users “losing” those windows.)
SuperSaaS’s button scheme follows W3C guidelines. Buttons are used for actions
that create a persistent change in conditions, while links are used for non-persistent
actions such as navigating and accessing help. Although Faber says this occasionally
results in an inconsistent look, he points out that the visual incongruity doesn’t
impede user understanding.
In some cases, however, SuperSaaS has opted to make concessions to style over
substance, using a visual button where a link better fits the rules. It’s a small
concession to style that doesn’t detract from usability. In this case, eliminating the
visual distraction is probably a net positive in usability terms. And, like most
application designers, Faber says good looks do serve a purpose for the company.
“Looking ‘professional’ is very important to make a sale,” Faber points out. “The
paying customer is the creator of the web application, not the end user. While we
have an ambition to ‘enlighten the masses’ with regards to usability, it should not
hurt our sales too much.”
“We have tried to find a middle ground” Faber says.


Process
manager


The process manager is a clever way of summarizing the steps that have
been created for users to follow. In this way, a superuser can quickly work
out whether they designed the scheduling system the way they intended.
Without this interface, superusers would probably end up logging in as an end
user just to check the functionality.


SuperSaaS uses elements of the Desktop metaphor by invoking non-modal
dialog boxes for data entry and property viewing. These dialog boxes only
appear for superusers and are constrained within the page, meaning that they
can’t get “lost” behind the main window (a typical problem with dialog boxes
spawned from Web pages). The use of these dialog boxes prevents navigation
away from the main dataset, which is useful in providing an overview.


Typically the designers of SuperSaaS attempted to use buttons for actions
and links for navigation. The decision was made in keeping with W3C
guidelines, under which persistent changes are effected with a button and
non-persistent changes are effected with a link. For some users (who may not
have studied W3C), this may appear to be an inconsistency, but Faber says
this has not been reported as a problem. The situation arises infrequently and
is applied consistently across the application.


There are many options
for controlling the
appearance of the
scheduling application.
Sensible defaults are
suggested, but all are
customizable to fit in
with an existing website.


A usability issue that came up consistently was providing users a route to see what
their scheduling application would look like, while giving them a quick path back to
their configuration controls. The solution to this was a floating menu “fiche.”

Menu Fiche

After setting up a scheduling application, the user is returned to the dashboard,
where the options include “use,” “supervise” and “configure.” Those options are
duplicated on the fiche. When a superuser previews the finished application, the
menu fiche appears in roughly the same location on the screen. It’s only visible to
superusers (the creator of the schedule and designated supervisors). Visually, the
fiche has a distinct look, clueing superusers in that the feature doesn’t appear on the
end user’s page.
The fiche floats in the same position on each page. This element of continuity keeps
users in a navigational box around each scheduling app and the unanchored nature
of the fiche makes it look less like a navigational element. The color and 3-D buttons
makes the element stand out against the relatively flat elements that surround it, so
there’s little chance of confusion about how to use the fiche.
Departures from convention need to be powerfully justified—familiarity is key to
usability. A similar departure is the right-column navigation menu in the dashboard
view. Typically right-column navigation is used for secondary controls, and here it
could be argued that this is the case.
SuperSaaS comes equipped with a pretty extensive array of redundant navigation.
This increases the number of routes to any given destination, but risks overloading
viewers with too many options.
By placing navigation in an “off lead” position (like the fiche) or in a low-traffic
position (like the right-hand column), you give users several additional navigation
points while also minimizing the negative impact of information overload and
redundancy. The right-hand column is also visually soft, further reducing its intrusion
into the user experience.
In other words, a user who is lost will search around for additional navigation and
find it fairly easily, but the element won’t crowd into the consciousness of a user who
isn’t lost.


The Menu Fiche in context. This element only appears on the page for
superusers, and it allows fast access to configuration and supervisory
functions.


Secondary or redundant navigation appears on the right hand side and
bottom of the page. Notice that here, the Fiche controls are embedded in the
Applications table because they could apply to one of several schedules.

Another redundant navigation option is a table that appears at the bottom of some
pages, in cases where the user has a number of possible destinations ahead. The
table includes descriptive text that explains briefly the nature of each available
function.
“(A) problem with an application of such high complexity is how menu labels can be
created that are still descriptive enough to make sense, but not so unwieldy that the
menus would take over the entire screen,” Faber says.
These are artful uses of negative space, but we’d advise developers reading this to
think long and hard before trying to implement redundant navigation themselves.
It’s a complicated balancing act. Even minor changes to the SuperSaaS template
could tip the balance from helpful to confusing.

Descriptive cues are characteristic of SuperSaaS, which frequently prompts users
about possible routes and outcomes.
“Since the user task is quite complex we decided to provide a lot of handholding
features,” Faber says.


All icons include tooltips that explain their use. When many menu options are
available, short descriptions outline each choice. And the wizard is heavy on text and
explanation. The redundant navigation features do double-duty as cheat sheets
about how various functions and application sections work.
“In our usability tests we found the help pages rarely got consulted, but the other
features are being put to good use,” Faber says.
Tutorials and demos are pushed heavily at the first login, and many superusers will
view these materials in order to get a look at what lies ahead, Faber says.
These features and an FAQ are available by clicking help from the dashboard screen
seen at login. Clicking help from other pages in the program usually brings up a
context-sensitive page.


Help comes in two flavors within SuperSaaS; there is help for creating
schedules, and then there is help for using them. Here, the (completely
customizable) help for using schedules is shown in its basic form.


Assistance for superusers (schedule creators) includes tutorials such as this
one. Working through the tutorial examples gives users an understanding of
the feature set that they can then apply to their own schedule.


The tour is higher level than the tutorial—it provides an overview of the
application’s functionality and is more marketing oriented, yet it still gives
superusers a good starting point for creating their own schedule.


Demos are working example scheduling systems which have been created to
showcase the different features available in the application. Giving superusers
a way to “play before they pay” will help them decide whether the reservation
systems that SuperSaaS creates are right for their user base.


Error messaging for superusers is sparse but typically informative. Users
would often overlook this type of restrained presentation of an error message,
which is why we have commented favorably on some of the more forceful
presentation styles used by other winners in this report. However, for
SuperSaaS, the simple error message style works because these screens use
a particularly muted color scheme, making the bright error color stand out.
(Even so, had the message font size been half that chosen here—which we’ve
seen in many other applications—we would still expect users to get into
trouble. Presenting noticeable error messages is a delicate business.)


Error messaging in the finished scheduling application is more verbose and is
presented in a modal dialog, as the user cannot continue without resolving
the issues.
Also note that error messages for end users have a more in-your-face style
than the error messages for superusers shown in the previous screenshot.
This is appropriate, because end users have less patience and are likely to
abandon their reservation if they think the application doesn’t work because
they overlooked an error message.


USABILITY PROCESS
Usability testing was conducted at two junctures. The first round of testing was
performed on a closed alpha release of the application. In this form, the advanced
wizard was essentially the main interface, and users understandably felt
overwhelmed. Feedback was collected from users and changes were made to the
program’s process flow, resulting in the simplified wizard interface.
Toward the end of the production cycle, another round of user testing was
implemented to fine-tune the process flow and other interface elements, including a
few new items that had been added since the initial testing.
During the formal usability testing, users were asked to follow a relatively open
ended story script (i.e., “You are the owner of a tennis club with three tennis courts,
and you need a reservation system.”). Metrics collected include time on task and
errors.
Additional formal testing is planned for when significant new features are added,
Faber says.
The tasks that were evaluated included:
• Signing up to use the system.
• Configuring a reservation system (including making changes to the layout and
50 other configuration parameters).
• Create supervisors/superusers.
• Setting up user access control (i.e., designating a user who can perform
administrative functions and instructing SuperSaaS on how to specific types
of users).
• Set up a custom URL.
• Downloading user or calendar information for use in Microsoft Office.
Usability was also evaluated for end-user tasks, including:
• Look for a free spot on a calendar.
• Make a reservation (and optional payment).
• Sign up to use the system (an optional feature).
• Change or cancel a reservation.
• Change sign up information and registered e-mail address.
Users are screened for basic Internet proficiency before testing—they don’t have to
be savants, but they do have to have a clue. (For instance, test users were asked if
they knew how to access their e-mail from a friend’s computer.)
In addition to the formal testing, SuperSaaS routinely tracks user activity logs on an
ongoing basis. The logs track clicks, showing which elements users are employing, as
well as providing a window onto which content pages and error messages the users
are encountering.
SuperSaaS is currently a one-man operation, consisting of Faber (and the occasional
contractor), so there isn’t a line-item budget for usability process. But Faber
guesstimates that he spent 80 hours and about 3 percent of the development budget
on usability process and testing, not counting the ongoing log analysis.


TEAM
Jan Maurits Faber describes himself as “a usability engineer by vocation.” He studied
Computer Science at Delft University of Technology and spent a year writing his
master’s thesis at Bell Communication Research under the guidance of Nielsen
Norman Group principal Jakob Nielsen. 3
His 1994 thesis and a 1995 follow-up paper dealt with Parallel User Interface design
in 1994 (http://www.useit.com/papers/parallel_design/).
His first business venture was a computer game. Unhappy with the software
engineering career path, he decided (after a few sidebars) to become a consultant
working to advise companies on e-business strategies. After obtaining an MBA from
MIT, he started a successful consulting company with some colleagues.
He sold his stake and went back to the independent life in 2005. Much of his focus
remains on software-as-a-service, a model that he believes will grow to eventually
crowd out the internal IT department at many companies.
“Why buy your own server and install software from CD-ROM when you can just get
the service cheaper from a website?” Faber says. “For many businesses this is
obviously the way to go once Internet adoption in their field is at an adequate level.”
He initially expected to rely on contract help to build SuperSaaS, but found that once
he had been working on explanatory prototypes and pitches for several months that
the programming wasn’t really all that much more investment, so he built the site
and its programming himself, shopping out some pieces of the visual design using
guru.com.
“It is somewhat satisfying that my original training has not completely gone to
waste, and my inner nerd rather enjoys programming,” Faber says, “but I do expect
to enlarge the team soon with bona fide developers while I focus more on the
business side of things and future projects.”

J.M. Faber

3
SuperSaaS was first selected as a finalist in two rounds of judging by people who were
unaware of Faber’s prior professional relationship with Nielsen. Given this fact and the 14
years since the association, it was determined that no conflict of interest existed.


SuperSaas must satisfy both its customers and its customers’ customers. As with
other applications in this annual, the schedule creation tool does this by balancing
the fine line between confusion (which occurs when the application does not lead well
enough) and frustration (when it tries to take control of too much of the interaction).
SuperSaas shows that this is not only possible but actually ideal for the target
“superuser” group of busy small business owners.
The true superuser has not however been forgotten. For service providers who use
SuperSaaS regularly to set up reservation systems for their clients (yes, another
level of abstraction), there is an unobtrusive Advanced mode which does away with
much of the assistance in order to just speed through the process. This increase in
efficiency will be welcomed by users who have familiarity with the product through
frequent use.
Ultimately, the goal is to produce a reservation system which is properly configured
for the task in hand and which fits with the look of the parent site where necessary.
SuperSaas allows this to happen easily and because of its flexible nature, if
something changes on the rest of the site, updates should be quick to apply in the
product as well.


Wufoo

COMPANY INFORMATION

Company: Infinity Box Inc. Design team:
Application: Wufoo Kevin Hale

Headquarters: Tampa, Fla. Chris Campbell

Number of employees: 3 Ryan Campbell

OVERVIEW/MOTTO
When you think about fun, you probably don’t think about creating Web forms.
Wufoo wants to change your mind.
Infinity Box Inc.’s Wufoo product is a Web application that aims to simplify online
HTML form-building without sacrificing features.
It’s much faster than hand-coding and offers a compelling combination of powerful
customization with ease of use. Even non-technical users can create and deploy a
fairly sophisticated form in short order.
The object of the program is “helping web developers and designers create beautiful
HTML form interfaces,” said Kevin Hale, Infinity Box co-founder.
Company founders Hale, Chris Campbell and Ryan Campbell developed Wufoo on the
belief that HTML forms were the starting point for building anything useful on the
Web. But while forms streamline and enable information collection, they felt there
wasn’t a sufficiently streamlined way for developers to create good-looking (and
usable) forms.
In order to make this happen, the Wufoo team has created a UI that lightens the
mood without cluttering the mind or slowing down the process.
“When I started working on Wufoo, I saw the user as a wild beast that needed to be
tamed. I always wanted the users to use the tool the way I designed it. Thinking
back, I remember being angry all of the time,” Hale says.
He soon realized that his attitude was counterproductive. When customer inquiries
start coming in and “you’re the one who has to answer the questions and
complaints,” you focus on what is easy as possible for the user to understand, Hale
says.
Good designers should be more like matchmakers trying to enhance the relationship
between the tool and the user, Hale believes.
“If you know anything about relationships, then you know that this is extremely
difficult,” he adds. As in any good relationship, a successful designer, like a
successful partner, has to “listen constantly and carefully.”


The Wufoo homepage clearly states the product’s intended use—gathering
and analyzing information by using Web forms.


WHAT DOES IT DO?
Using Wufoo, users can easily create online forms, surveys, invitations and simple
payment orders. They can also send invitations and manage event registrations.
When a user designs a form with Wufoo, the application automatically builds all
necessary database fields, backend logic and scripts.
So while a form-creation wizard invites users to the table, the information
management tool under the hood is, in some ways, the real draw.
“Wufoo's main function is to help anyone create HTML forms, but ultimately we strive
to be the easiest way to collect information over the Internet,” Hale says.
The application’s information management functions include:
• Filtering entries.
• Creating reports.
• Building graphs based on collected data.
• Sharing data (with security features).
“Because we host everything, all you need is a browser, an Internet connection and
a few minutes to build a form and start using it right away,” Hale says.

WHO IS THE USER?
Hale estimates Wufoo currently has over 80,000 users worldwide. Most are
concentrated in English-speaking nations, but they come from a variety of industries,
markets and verticals and include individuals, developers, designers, non-profits,
teachers, students, universities, research, real estate, marketing, healthcare, banks
and SMBs.
Wufoo also has enterprise clients, including Microsoft, Sony, Panasonic, FOX,
Discovery Channel, National Geographic, Kodak, Disney, SourceForge, Billboard,
JCrew, Lands End and the U.S. Navy.
Within these many client bases, job functions range from secretaries to high-level IT
managers. Students may use the application to collect and manage data for a
research paper, while their universities might use it to accept online payments.
Obviously, a universal profile isn’t happening. If anything unites this base, it’s a
desire not to be bothered.
“I think what they all have in common is that they want to skip the tedious parts of
creating an HTML form,” says Hale. Tedium is defined here to include maintaining a
host, database management, coding, programming, data validation, spam
protection, design and pretty much anything else that costs a significant amount of
time or money.


On first login, users are led through the process of creating a form in a
lighthearted manner.

THE APPLICATION
While there are any number of possible paths for a user who is established with
Wufoo, there’s only one point of entry and that’s creating an HTML form.
Although some potential users are research-oriented (taking the tour, reading
documentation or watching the “getting started” video), most tend to dive right in,
create a free account and start using the program.
“I guess we do prefer users to learn this way, because we think the true value of
Wufoo is in the experience,” says Hale.
The developers tried to make the first steps as obvious as possible to allow users to
quickly create their first form. First-time users are immediately steered into the form
creation interface with a humorous message.
The initial screen presents a left-hand panel showing a series of buttons representing
fields from which the user can begin to assemble a form.
Buttons can be clicked or dragged into a right-pane workspace that doubles as a live
preview. Clicking on the field after it has been added to the workspace fills the left
pane with a form (property inspector) which can be used to customize the field.
The left pane is tabbed, so users can toggle back to the field chooser, or forward to
select settings for the overall form. Virtually every manipulation of the form being
created is a click or two away at any given moment.
Green plus and red minus icons appear at the lower right of each field in the
workspace, as well as within multiple choice fields where the user can add choices.
The plus sign adds a copy of the selected field, or adds choices to the field, and the
minus sign deletes the same.
Depending on the complexity of the desired form and the inclination of the user, this
initial phase can take a long time or it can be over before you know it. The form
creation interface—like the rest of Wufoo—caters to tinkerers. The design team
doesn’t expect users to follow a strongly fixed narrative path.


“If you’ve ever taught in a classroom setting, then you know that different people
learn in a lot of different ways and so we try to sneak in learning everywhere we
can,” Hale says.

Items are added to a form by clicking or dragging. Form titles and
instructional text are pre-filled, but in a way which encourages the user to
edit them. Assistance is built in to the product in the form of instructions
which are context sensitive—a lack of form fields triggers the “add a field”
assistance information shown above, but once fields have been added this
information disappears.


Assistance is also available in the form of click tips next to most field
properties. Clicking the “(?)” next to each field title provides useful contextual
information about the purpose, use or display of the field property.


The Form Manager view allows easy access to the separate forms that users
have created. It provides a quick view into the usage frequency and allows
access to change and administer each form or invite users to fill it in.


The “Fancy Pants” form elements provide pre-formatted chunks for common
entry requirements such as address or phone number. This form was created
in no more than three seconds by dragging just four elements from the left to
the right of the page. By providing these chunks which conform to standard
design patterns, Wufoo make it faster for the form creator but more
importantly they make form filling easier for end users who will recognize the
common layout. It’s one of the oldest lessons in usability that the way to get
developers to design better user interfaces is to make good UI easier to build
than bad UI.

While there’s a great potential for “play,” you can get right down to business when
you need to using a suite of preset fields covering the most common options.
Because these presets typically follow “standard” design patterns, end users who are
filling in the form will be able to quickly identify what information is required because
they will have seen the same pattern many times before.
“In the early design stages, we knew that we wanted to make two large departures
from other form/interface builders,” Hale says.


• The database infrastructure would follow the design, and not the other way
around.
• Wufoo would reduce the number choices the user needed to make to get a
basic Web form set up.
However, reducing the number of necessary choices is not the same thing as
reducing the number of possible choices. If you’re not in a hurry, each generic field
type and preset can be clicked and customized pretty extensively. The fast and
highly visual interface makes it easy to experiment and most users will.

TEMPLATES
The form builder is about as easy as it could possibly be. But things can be easier
still. Users are presented with an option to access about 40 predesigned forms that
cover the most common situations. The HTML gallery can be navigated according to
seven types of form (Forms, Surveys, Invitations, Registrations, Lead Generation,
Online Orders and Tracking), or five categories.
A left-column navigation bar contains the types and categories in two distinct
groups. Clicking one opens up a submenu bar on the left hand of the interior pane of
the page with more specific types (such as birthday party invitations or mortgage
applications, among many others). Form types can appear in more than one
category, as appropriate, for ease of finding. A search function is also available,
which Hale says will be more helpful as Wufoo implements plans to add more
templates.
From the gallery level, the forms can’t be customized, but once a form has been
selected and saved to the user’s Wufoo account, all fields can be completely
customized using the Form Builder.
Users can further customize template forms using predesigned CSS palettes—the
Form Gallery (which can be accessed at various stages of form management) offers
about 50 different predesigned color schemes using a fairly simple selector interface.
“See a swatch that you like and it’ll show you a live preview on the right,” Hale says.


Wufoo have done all the hard work to produce a set of template forms which
users can select and customize. They have also produced themes which make
even the most color-challenged form designer look professional; just choose a
color swatch from the list, preview it on your form, and then send it live.


Template forms are categorized two ways—by type (forms, surveys,
invitations, etc.) and by usage (business, personal, education, etc.). Some
forms appear in several categories because of their wide appeal. As the list of
forms grows over time, the search feature will become more necessary as an
alternative to browsing categories.

Once an initial form has been created and saved, the program shifts into an open-
ended mode. Users are taken to a dashboard where additional options can be added
to the form, the visual look of the form can be customized, or the code for the form
can be downloaded. Above the dashboard are tabbed sections for Forms, Reports
and Themes, adding users and Wufoo account settings.
There isn’t a strong sense of direction at this stage, but the set-up here is familiar to
Web users with moderate experience. (Since Wufoo delivers HTML code as its final
product, most users will have at least this level of experience.)
The additional features are well designed, with less focus on play and more on
getting the job done in an intuitive manner. Getting code, setting notifications and


creating a payment function have been simplified to the point of being pretty
perfunctory. That’s not a bad thing at all; the interface pages are well-designed and
clear and the steps are easy to perform.
Payment settings, for instance, are managed relationships with outside vendors, set
up in a three-stage horizontal step process.
“Configuring the payment settings can be thought of as an equation,” Hale says. “As
you add a field from your form to the equation, the amount of money that can be
received per form submission will change. The second step of the payment settings
allows you to add fields to the equation, and to get a visual overview of what your
users will have to pay you in order to submit the form.”

Payment integration steps users through the equation used to calculate totals.
Each part of the equation is pulled from fields added to the form.

The area where most users spend their time, however, is the Themes section, which
allows customization of the user-created form.
“To most people, the database and validation scripts are all just magic that happens
behind the curtain and so you never hear anyone ask about schemas and query
efficiency,” says Hale. About 80 percent of user interaction with Wufoo takes place in
the Themes section.


The simplest forms of customization are the aforementioned HTML templates and
CSS themes, which have been designed to universally mix and match as users
please.
The more advanced feature is Wufoo's Theme Designer, which allows users to create
visual themes in which every element can be customized to fit the user’s existing
Web identity (or just for fun).

If users are not satisfied with the built-in theme choices, or if they need to
match the design of an existing site, they can create their own CSS theme.
Changes selected in the top section of the page are immediately shown in the
preview section below.


The theme designer squeezes many choices into a small area by using a
progressive disclosure technique. Selecting a property (here, Typography)
displays the options associated with that property (font face, size and color).
Moving to a different property displays different options (say, color and
pattern for Backgrounds).


The Theme Designer features a live preview underneath a series of menus. The
controls start minimized with a simple list of customizable form parts. Clicking the
label for any of the parts starts a progressive disclosure scheme that unfolds
additional choices in stages across a horizontal field. Changes are applied instantly,
allowing for a quick read on how the item will look and equally quick revisions, if
necessary.

INFORMATION DISPLAY
Wufoo isn’t all play and design. After a form has been created, the application takes
on a data manager function. Information submitted through a Wufoo form is loaded
into the user’s Wufoo account for further manipulation.
Collected data goes into Wufoo’s Entry Manager, a browsing tool divided into two
parts—a viewing tool at the top for examining individual submissions and a data grid
below for viewing recent entries and otherwise organizing the body of submissions.
Items can be sorted by column, and the columns can be customized.
A series of colorful buttons on the right side of the viewing tool allow users to edit
submitted text, create new entries themselves and print, e-mail or delete
submissions. New entries are created with the user’s Wufoo form. Entries can also be
commented for internal use.


Form entries are managed using a three-part interface which shows the data
as it was entered, a comment area, and a table of all entries which can be
used for browsing and selecting individual entries.


An earlier version the Entry Manager shows how the design has evolved. Now,
more space is given over to viewing data and less to managing it.

Data can be filtered using a prominently displayed search key, and advanced options
are also available. Once filtering has been applied, the selected entries can be
deleted or exported in an Excel-compatible format.
The display is attractive and easy enough to deal with, although users who need to
do serious data crunching will either be heading for the export button and Excel, or
for Wufoo’s Reports feature.
As far as ease of use, there’s no contest between Excel and Wufoo Reports. The
format for creating reports is essentially a wizard compacted into a single page,
combining step-based simplicity with the ability to quickly scan the whole collection
of settings. The display format choices are flexible enough to give the user
ownership, but constrained enough to keep users firmly on a track toward
completion.


Users can select from a wide range of options offering two types of choice—
dropdown menus for multiple choice with a single selectable option, and checkboxes
for multiple choice where multiple selections are possible. Options are presented in
plain English, with handholding throughout.
The actual reports are very readable, with customizable charts and columnar
displays. While the data management tools don’t offer professional-grade power,
they’re more than sufficient for a substantial number of users who just want a quick
and easy snapshot of the data they have collected. For users who don’t have
extensive spreadsheet skills, there’s a certain “wow” factor at the ease with which an
attractive report can be created and navigated.

Report filtering uses conditional drop-down list boxes and check boxes based
on form fields to create custom views on data. This interface is designed with
more advanced users in mind, but still provides a relatively simple way to
create complex information visualizations. For full manipulation, experienced
users can export the raw data to Excel.


Reports produced in the application look professional and allow for still further
data browsing and manipulation.


Wufoo recognized that different individuals within an organization may be
responsible for creating forms and analyzing data. Users can be given specific
roles and permissions within the application.


Users can also choose to receive notification when specific events occur. For
high volume forms this could be overkill, but to ensure fast response to less
frequently used forms, notifications can be very valuable.

HELP AND HANDHOLDING
Virtually every control in Wufoo has a question mark next to the title that provides
additional information about how the control works. The instructions appear in a
small pop-up window with good, clear text—enough to explain the control, not so
much as to overwhelm.
The application also steers users along various paths toward completing their task,
often with a light humorous touch. Employing humor in an application is not always
the safest choice, but it works here, given the overall focus on a fun user experience.
The help pages are extensive and offer several paths to reach support, including
FAQs, a Knowledgebase, tutorials, forums, a glossary, and a prominent link to
contact technical support. The latter has an option to upload a screenshot of the
error, which is a nice touch, and also includes an option to describe the user’s
“emotional state” (wisely, this is a dropdown menu and not a free text input field).
These pages have also been designed to be more scannable with more illustrations,
screenshots and even movies where necessary. Error messages include descriptive
text and a link to find more information about the problem.
Moreover, the team is committed to helping international users make their forms just
as good as the English equivalent. “To help the cause, we’ve created an interface to


make it easier to submit and manage translations of default error messages and field
titles in Wufoo,” Hale says.
New languages, corrections, and suggestions are easy to submit, and are actively
maintained by the team. Documentation pages present an individualized table of
contents and a mini FAQ about features and actions for that aspect of Wufoo. This
controlled implementation of crowdsourcing makes use of users’ enthusiasm to
improve the product while still ensuring that ultimate responsibility for the
application rests with the development team.

Rather than leaving users to deduce what they should do on a page, empty
sections make use of humorous assistance text to provide direction. Humor
often doesn’t mix well with support, given users’ typical level of frustration
when they finally go to the help system, but this type of assistance is aimed
at keeping users away from help files in the first place so a certain levity is
acceptable given the application’s overall tone.


As mentioned earlier, assistance is provided in the application through on-
screen descriptions and through click tips—field level help which is available
should users require it, but which does not clutter the interface for more
experienced (or adventurous) users. Note that this field level help and
subsequent help text takes a much more serious and straightforward tone
than the in-page assistance text.


Support comes in several flavors. There are regular help documents, forums,
a knowledge base and FAQ lists. If all else fails, users can contact the team
directly. The emphasis on self help and the resulting quality of help
documentation is necessary given the small team size and their desire to
create new features rather than supporting existing ones.


Help documentation takes a task rather than feature based approach, which is
ideal for less experienced users. It frequently includes videos and Frequently
Asked Questions sections which appear to have been culled from real issues
rather than from what some marketing department wants to promote.

Wufoo’s designers always tried to take a fresh approach to new interfaces and
features, but they were wary of creating anything that felt unfamiliar or confusing.
“We don’t think the problem is about too much innovation but a lack of clarity,” Hale
says. “If you have nothing but core functionality then there’s always something you
can add to make it more obvious, whether that’s signposts, giant arrows or even a
video demonstration.”


A major visual goal with Wufoo was to create software that didn't constantly remind
users they were working in a cubicle. Bright colors and informal type run throughout
the application, complimenting the irreverent tone of the text throughout.
“I’m very lucky to have as much creative freedom as I want on my team and so
there wasn’t really any tension about that. If you’re a good designer with a good
sense of aesthetics, you can’t help but make something as beautiful as possible,” he
says.
The bright colors and large buttons throughout Wufoo stand in sharp contrast to the
more familiar button schemes that many applications implement “off the shelf” from
developer toolkits or Windows defaults. The differences aren’t generally enough to be
confusing, but the Wufoo interface works double-time to make sure. Every clickable
and editable item changes state on rollover, so it’s easy enough to figure out where
to click.
The appeal of aesthetics needs to be balanced by a visualization of incoming support
requests, says Hale. “It became very tempting to put in eye-candy effects,” he says.
One of Hale’s primary tasks was to make sure the team didn’t take “ourselves too
seriously” and not to get carried away over any one interface or feature.
“For example, we’d use a (a fake modal dialog) for asking the user for additional
input or advanced settings that didn't need to be built into a main screen,” Hale
says. “In the beginning, we had the boxes fade in and slightly grow from a smaller
size. It looked nice, but after we were behind the interface using the service for a
few months, we found the extra 0.5 seconds for the animation to complete to be a
little annoying. We tried speeding it up to 0.3 seconds, but even that felt like the
interface was robbing me of time. Eventually we removed the animation altogether.”

USABILITY PROCESS
Infinity Box, as a three-person company, never had a formal budget assigning funds
to any specific project area. Hale estimates that about a third of the company's
resources were dedicated to usability.
“Everyone on the team, and even our users are expected to speak up,” he says.
The team started usability testing once a working XHMTL/Javascript prototype was
created, about three weeks into the initial design process. The team was invited to
weekly dinners with other companies supported by its seed capital supplier (Y
Combinator), where participants would trade feedback on their projects under
development.
Early into the process—before a live database had been attached to the interface—a
demo of Wufoo’s form-builder went into circulation on a number of social networking
sites, resulting in a surge of interest before an actual application technically existed.
Along with that interest came feedback about what worked and what didn’t, which
was integrated into the frontend while the backend was in development.


Continuous improvement: The homepage has been redesigned since the
contest entry was submitted to emphasize the call to action and provide more
details before a click is required.


Hale also implemented what he called “The Girlfriend Test.” 4 The team members
watched silently while their girlfriends, who were not computer professionals,
designed a form. When they were finished, the team questioned them in depth as to
why they took certain actions that ran counter to the team’s expectations. As a
result of this feedback, the team re-designed “about 50 percent” of the application,
Hale says.
The usability process mostly consisted of this sort of informal feedback; quantitative
metrics such as time-on-task were not tracked. Instead, questions and exploration
focused on whether users understood basic concepts and were continually making
progress toward their goals. Questions included:
• Did users know how to create a new form?
• Did users understand features that weren't explicitly explained, such as
rearranging and editing with drag and drop?
• Could the secretaries I’ve met 5 use this without having to ask someone from
IT for help?
• Could the girlfriends I've had use this without having to ask me for help?
Items that users found confusing or frustrating were reworked. This was crucial since
the application was always meant to be targeted to less technically proficient users,
Hale says.
Usability vetting is constant and ongoing, Hale says.
“Wufoo gets tested for usability every time we demo the service, use it ourselves
and as support requests come in from our users,” Hale says.
The team initially used volunteer beta testers to test new features. But they found
the volunteers rarely gave quality feedback and often gave no feedback at all.
Instead, the team now simply rolls out new or experimental features to a random
batch of current users.
“Then we wait and see how it changes the support requests that come in,” Hale says.
“If everything seems kosher, we roll out to a larger batch until the feature is
implemented for every user.”
Many of the new features are aimed specifically at reducing the number of support
requests. Customer support does not scale easily in a three-person company, says
Hale. “That’s why we invest so much time on documentation, screencasts and
usability.”
Support provides a window into real-life usability, says Hale.
“On a Web application, the design breathes through customer support. It’s in support
requests that Wufoo lets us know when something isn’t working. It’s there that she
lets me know when I’ve done something right,” Hale says.

4
Editor’s note: Don’t write to us, we didn’t come up with it.
5
Editor’s note: See previous editor’s note.


TEAM
Infinity Box is the second company created by Chris Campbell, Ryan Campbell and
Hale. Their first, Particletree Inc., is responsible for the web development blog,
Particletree, and the monthly PDF web development magazine, Treehouse.
Hale is responsible for safeguarding and designing the Wufoo user experience. He
writes about interface design issues for Particletree and served as editor-in-chief of
the Web development magazine, Treehouse. Hale studied Digital Arts and Modern
American English Literature at Stetson University in Florida.
As a child, he “was the kid in class who ate a box of crayons for a dollar,” Hale says.

Kevin Hale


To be successful, Wufoo had not only to create a highly usable development
environment but also to ensure that the output from that environment was usable as
well. A well constructed form creation tool which allowed users to create terrible
forms would not make the users or Wufoo look good. Thankfully, the manner in
which Wufoo encourages users to create forms from pre-structured elements means
that it would take quite some effort to deploy a badly designed survey.
For most users, their ultimate task is not to create a survey or interface, but to
gather and analyze the data for business insight. To this end, smart defaults,
minimum decision making and maximum insight from the collected data are
essential. Again, in the reports section of the application Wufoo streamline the data
display and analysis to ensure that form administrators can quickly gain insight or
collect money from their end users.


Xero
COMPANY INFORMATION

Company: Xero Design team:
Application: Xero • Philip Fierlinger, Head of Design
• Grant Robinson, Senior Interaction Designer
Headquarters: Wellington, New Zealand
Number of employees: 50 Design motto: “Rapid prototyping and rapid
development lead to rapid improvement.”

OVERVIEW/MOTTO
Xero has as their mission statement “less accounting, more business.” We imagine
they get a lot of takers on that proposition.
“The aim of Xero is to remove complexity, automate common tasks and clarify
financial performance for accounting experts and non-experts alike,” the company
states.
As a Web-based application, Xero addresses multiple issues of concern to both
computer users and accountants alike. The recent trend toward Web apps builds on
the appeal of a no-install, no-maintain software that doesn’t clutter a desktop
computer (see SuperSaaS for more).
Accounting, specifically, depends on consistency of data. Arguably, that’s the very
definition of the term. So it’s easy to understand the appeal of a Web interface that
allows all changes to happen in real-time and to be updated for all users instantly.
Xero, the company, was founded in New Zealand in 2006 by “serial-entrepreneur”
Rod Drury and small business accountant Hamish Edwards. The company employs
50 people in 4 locations in New Zealand and England. In June 2007, Xero was listed
on the NZ stock exchange after raising $15 million (NZD) in its IPO.
The company develops its products on an iterative model, rolling out new features
and making revisions based on user response. “Rapid prototyping and rapid
development lead to rapid improvement,” says Philip Fierlinger, Xero’s Head of
Design.

WHAT DOES IT DO?
Xero is a full-function accounting program for small businesses and those who
balance their books. It provides multiple tools toward this end, including cashbook,
general ledger, invoicing and reporting.
Functions and information are unified in a dashboard view, which provides a real-
time view of a company’s financial status, enhanced by manual input and feeds of
bank information. The application offers sophisticated options for reconciling
accounts and generating interactive reports. It also matches up contact information


with financial transactions, allowing close coordination between client activity,
communication and accounting.
Information is stored securely on Xero servers, backed up daily, and complete
transaction history is always available. The application can share information among
unlimited users (two to five is the norm) and manage an unlimited number of
organizations from one account.

Xero’s Web presence serves two purposes—it is both a marketing site and a
portal to the application itself. Users can log in from most browsers (including
the iPhone) to check on or work with their data.

WHO IS THE USER?
Xero users include a business’s owners, advisors (including accountants and
bookkeepers), investors and employees. Users can be in different geographic
locations, and they usually are. Accounting and financial professionals can also use
Xero to manage multiple clients (the average is two to three, but increasingly there
are firms with dozens of clients).


Xero needs to accommodate the viewpoints, priorities and learning of all these user
types. For instance, business owners are mainly interested in cash flow, directors are
interested in revenue and profits, bookkeepers work to keep everything properly
organized, while accountants are focused on tax compliance. Employees, on the
other hand, only need access to perform very specific and limited tasks.

THE APPLICATION
After signing up for the Xero service (a fairly minimal affair), users are taken into a
wizard to set up their first accounts.
“For a long time we resisted creating a wizard because we felt it was too restrictive
and didn’t provide instant gratification,” says Fierlinger. “Then we started noticing
that some people weren’t entering their starting balances.”
This is a pretty central problem in accounting, but one which can lie dormant for a
long time and only surface later in the process, when the problem has escalated to
significant proportions. Although the wizard can’t entirely save people from
themselves, it does provide some much needed consistency to the process of getting
started, and it educates users about important concepts from day one. We’ve
included screenshots of the entire wizard process (following pages), which we think
can be instructive given the deep complexity of the task. 6
The education doesn’t stop with the wizard, however. Key pages feature “Getting
Started” panels which introduce key concepts and link to related features and help.
Messaging here is extensive but to the point, and the panel can easily be hidden for
those who have graduated to the next level.

6
Note: Images are from an updated version of Xero. Live updates are served regularly. In
most other cases, we have used the version of the application originally submitted for
consideration in the contest.


The first screen of the wizard contains both PDF and video instructions to help
new users follow along with the setup process. It also provides links to the
information that users will need during the process and the potential time the
process will take. All of this information is essential to reassure people before
they embark on the process of setting up their financial information.


Status is shown along the top of the screen, and there is the option to save
and quit at any point during the wizard. Information is requested in an order
and format that users will be familiar with, and smart defaults are provided
for some fields.


Dialog boxes are displayed to save users’ time. We often see users missing
online dialog messages because they have clicked on the content behind, but
the “lightbox” technique used by Xero (making the background inaccessible)
ensures that users will see and interact with the message before continuing.


Again, Xero have prepopulated some fields with smart default values, and by
focusing on only the core tasks, they have reduced the number of items that
users must think about during setup to a manageable level. Buttons are
labeled with their action (“Upload Logo”), making it easy for users to see at a
glance what is required. The assistance text in the empty logo space also
describes where the logo will be used, which helps users decide what size
image to upload.


”Permissions” are handled using language that users will be familiar with. It
makes good sense to invite others to access the information rather than
talking in typical computer jargon about accounts, restrictions and such like.


Choosing permission levels is easy—four radio buttons distinguish the
different levels. Xero have chosen a visual display of the different access
granted to each level. This saves much space and repetition in comparison to
a textual description and allows for descriptive help just one click away.


Often users won’t know which option to pick. By “suggesting” the most
suitable option through the use of pre-selected radio buttons (smart defaults),
the application helps users to quickly move forward.


Even when dealing with more complex data presentations, the interface
follows a familiar format—here, the Chart of Accounts is presented in a very


similar manner to Web-based e-mail accounts. It should be easy for users to
scan the list and make changes where necessary.

Users often just hit “Next” through wizards. Xero detects this behavior on
screens where it is likely that changes should be made. Note that no blame or
criticism is implied in the message.


Assistance text suggests a sensible way forward and provides links to more
information. The next step is also clearly signposted.

Tips appear on pages within the Wizard where users may experience
confusion with accounting practices. Here, the tips walk users through the
process of entering starting balances.


Although the Wizard is sequential, users can return to previous steps at any
point and the rest of their data will be retained.


Once the setup phase is completed, the next natural step is to move to the
dashboard. Although the dashboard interface is a gateway to all of Xero’s other
functions, the view itself is strongly constrained.
The decision to limit user freedom ensured that the right data gets presented in the
right way. Only one panel on the dashboard offers options, and that’s the Account
Watchlist, which allows the user to select which accounts are monitored at this level.
Each module features a link in its title bar that takes the user to a more in-depth
section of the application where they can get more information or take action.
The modules are echoed but not precisely duplicated by the top level navigation, a
series of big, fat clickable buttons across the top of every screen for the major areas
of Xero—Dashboard, Accounts, Reports, Adviser, Contacts, Settings and Help.
The color and 3-D texture of the menu buttons ensure they stand out—not to the
point of distraction, but they hold the user’s attention and clearly represent the
primary navigation function. The dropdowns are similarly styled and similarly
effective.

Buttons on a menu bar provide the primary navigation. These drop-down
buttons also highlight like tabs to allow users to see their current location in
the application.


Dashboard items are designed to provide a quick overview rather than being
highly customizable. Still, several actions are available from each item using
both buttons and links.


The dashboard gives a quick overview and allows for drill-down. Xero decided
not to allow configuration of each module in an attempt to simplify the story
for the user. Users can drill down from the dashboard into the relevant areas
of the application to quickly gather more detail on problem areas. Advanced
users can gather more information by looking at the provided reports.


INTERFACE ELEMENTS
One of the most important interface elements is the text attached to a control or
message, says Fierlinger. While picking the right text is always a huge consideration
in usability design, it’s even more important for Xero’s customers.
“It's important to keep words absolutely concise and unambiguous, especially when
it comes to menus and buttons,” he says. “With accounting terminology this can be
extremely difficult, because many terms have multiple meanings depending on
context.”
For instance, the word account can refer to a bank account, a sales account,
accounts payable, accounts receivable or the user’s account with Xero (which the
team branded as a “profile” in order to circumvent the issue).
Critical accounting terms are also often two or more words, frequently a main term
with a modifier. Words like payment, invoice or credit need a modifier specifying if
they are being sent or received by the company. Even accountants can misplace or
misuse accounting terms, so clarity is a top focus.

BUTTONS
In addition to the menu buttons, dialog and action buttons throughout the program
have a consistent look and feel. All buttons throughout feature a 3-D patina and
most feature color.
“It took us a few months and many iterations to establish a well defined button
style,” says Fierlinger. “The big considerations were size, color and placement. We
ended up using fairly big and brightly colored buttons as our standard design, to give
them relatively big target areas that standout.”
Major action buttons (such as “Save” or “Publish”) are brightly colored. Buttons
which are represent neutral or intermediary steps (submitting a draft for approval or
refreshing a display) are a more muted blue. Non-action buttons such as “Back” or
“Cancel” are gray.
“We've struggled with the use of red for Delete functionality,” says Fierlinger. “We
want to call attention to the destructiveness and permanence of a delete, but
ironically in doing so it calls far too much attention to itself. We're gradually
removing the use of red in favor of gray with a red rollover.”
The team experimented with button placement in early iterations of the application,
switching between right and left align positions. Users complained about the left-
aligned buttons but had no comment about the right, resolving the issue quickly.
Button size throughout the program is fairly consistent, with most being significantly
larger than a Windows standard button, but not so large as to create distractions.


Buttons look sufficiently clickable. The default action button is always green,
and secondary actions are shown by blue buttons.

Button detail: Labels are descriptive and typically start with a verb. Xero also
makes use of split buttons, which have a default action and also additional
related actions behind the drop-down arrow. This style of button is becoming
more popular as it allows several related commands to be displayed in a
smaller area and clearly signals the default action. (Note, though, that the
secondary commands truly do become secondary with this design, since they
are out of sight, and thus often out of mind as well, especially for less-skilled
users. Thus, split buttons are best for cases where one command is used


much more than the rest and where the secondary commands are mainly
expert features.)

MENUS/BREADCRUMBS
The process of defining industry standards for online applications is still evolving,
nowhere more noticeably than in the use (or non-use) of menus. We saw a lot of
different approaches to the menu problem among contest entrants, including
examples in which menus had been entirely discarded (see FotoFlexer, page 38).
Xero’s approach was to make the menus count with strong placement and sharply
curtailed options—keeping the number of menus contained, constraining dropdowns
to ideally six options or fewer, using brief descriptive labels and eschewing nested
menus altogether. The result is a command-and-control interface which doesn’t
intimidate.
“This is one key reason why people perceive Xero to be so easy,” says Fierlinger.
“It’s much more approachable and less overwhelming than most accounting
systems.”
Menu and button labels received a lot of attention from the design team, which
“agonized and debated fiercely” over each one, Fierlinger said. “There is a never
ending struggle between varying mental models, levels of expertise and varying
contexts.”
Because the application uses the full screen for transactional data displays and input
fields, the decision was made to keep the menu navigation horizontal rather than the
more common left-hand column approach. Thanks to the size and texture of the
menus, this works just fine.
The dropdown menus were added after early experiments with a list of links. As the
list of links grew longer, the dropdown format became more attractive, because it
limited the number of choices on screen at any given moment.
The menus are split-button style. Clicking “Reports” simply takes users to the reports
category page, whereas clicking a down-arrow next to the label drops down a menu
of specific reports to choose from.
“These split button menus have provided an extremely economical mechanism to
offer a wider range of functionality in a convenient, yet unobtrusive form factor,”
says Fierlinger.

DIALOGS AND MESSAGING
The program uses “popover” dialogs to add data in certain contexts without leaving
the current page, for instance, when adding a new account. Severe errors or critical
confirmations—such as deleting important data—are marked with modal dialogs.
Colored banners are used for confirmations and general notifications, but the Xero
team has been refining the visual treatment to make sure they get the user’s
attention.
“We've increased the size and visual intensity of the banners, but still they are often
overlooked,” Fierlinger says. “We're exploring other visual cues, like animation.”


Inline highlight messages are used occasionally, when input data is incorrectly
formatted or otherwise incorrect.

Drop-down menu lists from the toolbar are typically short and never cascade.
This makes it easier for users to select the correct option.


Contextual menus are also provided within the data itself to allow quick
access to item-specific tasks.


Dialog boxes appear to float above the page, but because they are coded as
part of the page they can never be “lost” behind the main screen—a problem
we consistently see with Web applications.


Modal dialogs are used for confirmation and important messaging. These
dialogs use a “lightbox” effect to blur out the main content window, providing
extra focus on the modal dialog box.


HELP AND HANDHOLDING
The complexity of the accounting task, combined with a powerful and feature-laden
application, makes it vital to educate users from day one and on an ongoing basis.
The Getting Started panels mentioned above are part of an evolving strategy.
“We have plans to make these a bit more narrative by providing a recommended set
of day-to-day activities,” says Fierlinger. “We believe this will help people maximize
the advantages of using our software, guiding them away from transferring their old
thinking and old approaches to Xero.”
The site features a number other ways to steer and educate users, once they have
become acclimated to the application’s controls.
• Tutorial videos are offered within the program for several topics, which walk
users through a typical scenario from start to finish. In addition, the
marketing site has simpler videos showing key features in action.
• A knowledgebase with search steers users to more detailed explanations of
features and controls, and can also be accessed through context sensitive
help. Clickable tips are available in various places and open in a popover
window.
• Industry vertical guides explain how to perform some of the most common
accounting tasks using Xero for each industry, including real estate, property
investment and sports clubs.
• In the Help menu there is a Contact Support link which opens a panel to let
you send an email directly to our support team. It has options for you to
categorize your support issue as either a question, a suggestion, or to report
a bug.
• A Xero blog is also offered.
Xero initially invested significant effort in creating and building up a user forum, but
they didn’t get much traction, Fierlinger says, so the team is currently refocusing on
other support options.
One idea under consideration is adding “practice tasks” to give people a hands-on
education in key concepts, similar to the way video games offer interactive tutorials
that coach users while they perform a series of learning tasks.


Handholding for new users in the dashboard view: It is important that users
be given their “next steps” rather than just dumping them in a location where
they must deduce their tasks.


Live support is available from within the application. This allows the support
team to know exactly where a user was when they had an issue.


Help is written by user task and also by feature area. This means that less
experienced users can start from a description of the problem they face,
whereas users migrating from a different application can quickly find out how
to perform the same action within Xero. There is also a section aimed more at
accountants whose clients may have chosen to use Xero.


INFORMATION DISPLAY
More than most tasks, accounting is all about the information, and Xero has a lot of
different ways to show it to you.
The most important and most frequently accessed information display is the
Dashboard, which features five modular boxes containing the most important
information users need: Bank Accounts, Account Watchlist, Money Coming In, Money
Going Out and Expense Claims. Note the user-centric language in this section of the
application.
The modules feature a mix of text and graphical representations, providing a very
fast and targeted look at the health of the user’s accounts and issues in need of
attention. Most of the displays are interactive, offering routine or convenient
functions without having to navigate further. For instance, adding new bank
transactions, invoices or expense claims is available with a single click from the
Dashboard.
In different sections of the application, information is displayed in an efficient
sortable tabular format. It offers all the functionality you would expect, but more. In
some cases there are additional controls to act on individual fields in a table. Plus, on
many screens, multiple items can be selected for bulk action.
Standard data input fields use auto-complete as appropriate, and the application
learns over time how the user codes transactions, leading to even more auto-
completion.
The design is nicely optimized for readability—with far more white space and more
intuitive Gestalt grouping than the spreadsheets users are likely accustomed to.
Transactions are organized by type in different sections of the application; then can
be further isolated by payment status using a tab scheme. All lists are sortable and
paginated to minimize scrolling. The search function can be used to find specific
transactions by invoice number, reference, contact or date range.


This screen is typical of the information-rich areas of the application. Users
can focus in on specific transactions by searching, sorting (column headings)
or filtering (tabs), or can just move through the data using the pagination
controls at the bottom of the page.


In other areas of the application where lists of accounts or similar information
are shown, the same sorting and filtering activities are available to users. This
design pattern is one that most users will be familiar with from regular use of
e-mail applications.


Xero can collect information automatically from most of New Zealand’s major banks,
so account information is always current, saving the substantial time and risk of
error attached to data entry. Once the data is downloaded, users must reconcile the
bank transactions to invoices, expense accounts and other corresponding line items.
The bank reconciliation is a hybrid of information display and interaction, and one of
the more unique features of Xero.
Xero automatically lines up the most likely matches in two columns (one for the bank
statement and one for recorded transactions), then users must confirm correct
matches. When there is no likely match, Xero’s interface allows the user to create
one on the spot, record it and clear the row. The transaction field features three
tabs—one for automatically identified matches, one for creating a transaction and
one for recording a transfer of funds from among company bank accounts. Once an
item has been reconciled, the row flashes and disappears and the other rows slide up
the screen.
“The interaction of the bank reconciliation has been described by users as fun,
addictive and reminiscent of Tetris,” says Fierlinger. “As you make matches you click
OK to clear the row, pushing items off the stack and bringing up the next one until
you’re done.”
As a matter of pure theory, it’s pretty risky introducing a gamelike element to a
serious application—accounting, no less, where mistakes and frivolity can cost users
money or more. But the reconciliation function here is not only a complete success
but an inspiration. It works for a couple of reasons:
• The task itself has an inherent element of puzzle or game—pattern-matching
is one of the basic mechanics of play.
• The bells and whistles are restrained. The interaction might feel like a game,
but it doesn’t look or act like one. The actions are natural and appropriate—
clearing the row and moving the next item up. (Just imagine if the UI had
featured sound effects reminiscent of the Bejeweled computer game,
complete with cheering when the user matched a transaction and jeering if
they took too long. Inappropriate, to say the least.)
• Although elements of how the reconciliation is depicted are novel, the
mechanics of what the user does are conventional—enter data in a field and
click OK.
“In our approach to interaction design we focus on understanding and respecting
existing conventions,” says Fierlinger. “We analyze the underlying motivation behind
an existing convention, then consider alternatives and opportunities to make
improvements.”
While there are conventions about how to reconcile in accounting software, these
conventions aren’t nearly as well established as, say, a print dialog box.
Furthermore, Xero’s features render some of the conventional practices unnecessary.
“With Xero you don’t enter your starting and closing balances. Most software
requires you to type in all your bank statement data,” says Fierlinger. “Even with
software that lets you import the data, you're still not matching transactions from
the bank with transactions in your software, you're essentially re-keying the bank’s


data. We’ve never seen an accounting system that presents your bank statement
data side-by-side with your matching business transactions.”
Fierlinger says the Xero system of side-by-side comparisons draws on how
reconciliation is done on paper. Since there isn’t strong precedent for how
reconciliations should be done (and considering the additional features Xero offers),
the price of innovation here is negligible and the potential benefits are great.
“We might defy existing software conventions, but only when we can create a
solution that's better aligned with how people naturally think and behave,” says
Fierlinger. “There are cases where we have decided to stick with a convention even
when we believe there’s potentially a better way.”
For instance, the design team hotly debated whether to add a feature that could tag
transactions, rather than using the accounting standard model for categorization. In
the end they decided that the benefits wouldn’t outweigh the negatives of user
education and possible rejection.
Another place where the designers decided to take a risk was the contacts field.
Rather than working with a fixed contact format (like the “New Contact” fields in
Outlook), contact entry is free-form and auto-completed. When a user starts typing
contact information, the system looks for matches throughout its data set and
suggests possibilities. Only when information can’t be found otherwise does it create
and format a new contact record.
In most cases, Fierlinger says, users quickly adapt to the innovations and start using
the new controls. But Xero tracks when they encounter obstacles and works to
educate users about how and why to use the feature.


Xero’s reconciliation function allows users to visually match transactions with
downloaded bank statements. The side-by-side placement and the fact that
matched transactions “disappear” have led to great customer feedback.


VISUAL DESIGN VS. FUNCTIONALITY
For many designers, the look and feel of an application or website can precede the
function. Xero postponed the visual design part of the job to the 11th hour.
“We didn’t want to be precious about visual details until we had a strong
architectural framework in place,” Fierlinger says.
Once the framework of the application’s function was in place, however, the team
spent a substantial amount of time refining the look, from page layouts to white
space to element color, shape and texture. Many of those design choices have
already been discussed above.
“Visual design is an essential aspect of usability,” says Fierlinger. “Visual clarity and
visual details determine what gets attention, it determines how ideas are perceived,
and perhaps most importantly, it determines the emotional response to an
experience.”
Screen width was set as a fixed 970 pixels, for target 1024 screen resolutions. “We
felt that a completely fluid layout would cause scannability problems and make data
entry very cumbersome.”
Standard text size was set to 11pt Tahoma, which Fierlinger says is narrower and
easier to read than many other screen fonts. The width was an important
consideration, since it dictates how much information will fit on a screen.

USABILITY PROCESS
During earliest development, a task analysis matrix was drafted and organized to
identify key user roles: business owners, bookkeepers, accountants, employees, and
financial advisers. Regular tasks were identified for each user type, then refined to
anticipate the frequency of the task (daily, weekly, monthly, quarterly, or annual).
Core features emerged from this analysis.
“When we first started out, we spent several weeks modeling our product
architecture simply by putting sticky notes on a wall,” Fierlinger says. “As we revised
the hierarchy of features we would continually evaluate how the structure suited our
user roles, based on their task requirements.”
Although a lot of consideration was given to how each user would approach the
product, the Xero team deliberately avoided using personas.
“We do evaluate design decisions by considering how representative users would
respond, but we reference real customers and real scenarios, rather than
manufactured personas,” says Fierlinger.


An earlier version menu design. While the items are more visible, a large
amount of screen real estate is taken up with options which may be used
infrequently. This design is also hard to scale—for instance if the Reports
section gains three new items, then three lines of content are lost. (And
content is definitely king in accounting: you want to see your money and
where it’s going.)


The interaction design phase was primarily concerned with usability issues, Fierlinger
says, along with about half of software development and 60 percent of customer
care efforts. Like some of the other winners in this year’s contest, customer care
input is favored over formal usability testing. Fierlinger estimated that Xero spent 40
to 60 hours on usability testing such as user interviews, screenflow testing and
contextual inquiry.
“Our entire interaction design and product development process revolves around
screenflow prototypes,” says Fierlinger, “simple Flash movies that show a simulation
of every screen design, mouse click, and simulated user input necessary to complete
a given task, from start to finish.”
During early development, testers were guided through the screenflows by the
designers explaining each task and screen. Input was collected as to how the screens
were viewed and understood and user expectations. A functional prototype was used
for one set of controls in order to get a feel for the speed and ease of data entry.
Beta testing proved significantly more informative than early stage testing, Fierlinger
says.
“Getting feedback based on hypothetical scenarios is no match for getting feedback
from people using live software with their real data, under real circumstances,” he
says.
This insight fuels a five-step process for ongoing development.
1. Prioritize desired features.
2. Create an iteration of the design that supports those features.
3. Release the software.
4. Get user feedback.
5. Refine and repeat.
Although beta testing has come forward as a primary tool, product development still
revolves around screenflow designs. A design iteration is based on input from in-
house business analysts and product experts. The customer care team and sales
teams also provide important feedback in their roles as the most direct conduit to
user opinion. The development team conducts occasional formal usability testing and
monitors Web 2.0 sources like blogs and Twitter to gauge user sentiment. Usage
statistics are also mined for usability metrics.

TEAM
Xero’s development team was inspired to think about usability largely by example,
including such creators as Google, Apple, Flickr, LinkedIn and Facebook. The
usability sensibilities of Web application designer 37signals were also a major
influence.
Xero’s Head of Design Fierlinger came to development from an education in industrial
design. With his brother Peter, he founded digital design firm Turntable
(http://turntablemedia.com) and ran it for 10 years, doing groundbreaking work in
multimedia and innovative interactive platforms. He moved to New Zealand in 2001
and helped found Xero in 2006.


He works closely with Grant Robinson, Senior Interaction Designer, whose previous
experience includes design work for Shift, the BBC and British Telecom, and popular
personal projects such as “Guess-the-Google”.
“We both love code. We both love Flash,” says Fierlinger. “We are constantly hunting
and adopting successful design patterns.”

Philip Fierlinger, left, and Grant Robinson.

The Xero team re-examined a process which has changed little since its migration
from paper to the PC and found that there are many improvements to be made.
They have focused on users’ key tasks, and on presenting these tasks in an inductive
manner which draws users into the process rather than forcing them to deduce their
next step. By doing this, it is possible to provide learning experiences which
complement rather than interfering with the interface.
These innovations have not been introduced at the expense of accounting standards.
Users moving to Xero from a different system should find it familiar, but where there
is no set way of proceeding—for instance when reconciling online statements—the
Xero team have created well thought out and ultimately successful new interaction
styles.


Applications Not Selected: Common Issues
It was hard to choose winners given the overall quality of submissions for this
annual. However, while we never name or show examples from the applications
which did not make it into this year’s top 10, some of the distinguishing factors
which we saw across submissions that are not in the winning group are listed below.

UNCLEAR GOALS
The purpose of the application has to be clear to the developer, otherwise it will
never be clear to potential users. Some entries did not list the application’s goals as
if they were self evident. However, although they may be clear to someone who has
been immersed in development for some time, that is not sufficient. A clear, concise
statement of the goals should be easy to provide and those same goals should be
apparent in the interface.

NO APPARENT FOCUS ON USERS
Without an understanding of your user base, it will be next to impossible to develop
for them. This understanding can be gained in many ways and can be described to
different levels—from a thumbnail sketch to a detailed set of personas. If entrants
could not describe their users succinctly, their interfaces seemed to suffer as a
result.

POOR USE OF INTERFACE ELEMENTS
Interface standards exist for a reason; certain controls were developed to perform
certain tasks. Users have become familiar with these standards and so any deviation
has to be well planned in order for the target audience to stand any chance of
understanding what is required of them. This does not prevent innovation. Some of
the controls and layouts in the top ten applications are far from usual, but they have
each been developed to solve a novel problem and typically were tested with users
and iterated until they performed well. Coherent arrangement of standard elements
is essential to help guide users through their task.

SPOTTY OR NON-EXISTENT ASSISTANCE
Assistance is not just the contents of help files. Clear on-screen instructions, sensible
field and control labels, calm and descriptive error messages and even well-stated
screen titles all contribute to clear understanding. Without this constant attention to
user education and guidance, the application will not tell a good story to its users
and they will become frustrated.


Selection Criteria and Process
As this is the first year that we have run the Application Usability competition, we
were pleasantly surprised by the number and quality of submissions. In response to
a call for submissions on http://wwww.useit.com, teams sent us screenshots of their
application along with explicit descriptions of the functionality and the design process
including information about the expected users of the application and the
application’s goals.
Judging followed a four-step process:
1. Initial expert design reviews and numeric rankings of every entry to
determine the top submissions
2. Follow-up questions to the teams where necessary
3. Thorough design reviews to choose the top 10
4. Follow-up interviews with the top 10 to gain more insight into the application
and design process followed.

INITIAL DESIGN REVIEWS AND NUMERIC RANKINGS
Working from the information provided in the initial submissions, the three judges
(see About the Authors) conducted design reviews of each submission to narrow
down the list of entrants to the tier one submissions.
In addition to written commentary, we rated each site numerically. These ratings
were based on common application design criteria and are key to application
usability. They included (among others):
Design for Comprehension
• Layout, consistency and narrative flow
Correct use of Components
• Widgets and design patterns used as users would expect
Ease of Adding/Editing info
• Easy manipulation, quick recovery from errors
Workflow appropriate for users
• Clear flow which leads where necessary but leaves users in control
Communicating with users
• Clear notifications and error messages, good assistance and support
Design and Development Process
• Good consideration of user groups and iterative design which involved
user feedback


FOLLOW-UP QUESTIONS
After we finished reviewing the initial submissions, there were often areas which
required clarification. We sent a follow-up questionnaire to the top tier teams which
delved into specific areas of interest including their design philosophy, the types of
user-centered work they performed, and additional questions on the applications
themselves. Some of these questions were best answered with additional screen
shots, others with a text description.

FOLLOW-UP INTERVIEWS WITH THE TOP 10
After choosing the top 10 submissions, we asked the application creators some
general and specific questions about their applications and the development process.
As you can tell from the winning entries, the level of user involvement in the
development process varied from team to team, but a characteristic of all the
winning entries is that they embraced a user-centered approach to the design
process. We were interested in finding out what drove the teams to design the
applications they did, their methods, their philosophies around innovation versus
familiarity, interactivity, even which interface components they used and why. Their
answers are interspersed as quotes throughout each application’s chapter.


About the Authors
Dr. Jakob Nielsen (www.useit.com) is a principal of Nielsen Norman Group. He is
the founder of the “discount usability engineering” movement, which emphasizes fast
and efficient methods for improving the quality of user interfaces. Nielsen, noted as
“the world’s leading expert on Web usability” by U.S. News and World Report and
“the next best thing to a true time machine” by USA Today, is the author of the
bestselling book Designing Web Usability: The Practice of Simplicity (2000), which
has sold more than a quarter of a million copies in twenty-two languages. His other
books include Hypertext and Hypermedia (1990), Usability Engineering (1993),
Usability Inspection Methods (1994), International User Interfaces (1996),
Homepage Usability: 50 Websites Deconstructed (2001), Prioritizing Web Usability
(2006), and Eyetracking Web Usability (2009). Nielsen’s Alertbox column on Web
usability has been published on the Internet since 1995 and currently has about
200,000 readers. From 1994 to 1998, Nielsen was a Sun Microsystems Distinguished
Engineer. His previous affiliations include Bell Communications Research, the
Technical University of Denmark, and the IBM User Interface Institute. He holds 79
US patents, mainly on ways of making the Internet easier to use.

J.M. Berger is a longtime journalist and content designer who has been working
online since the late 1990s. Based in Cambridge, Massachusetts, Berger has written
for the Boston Globe, the San Francisco Examiner, National Public Radio and
Office.com. He covers business, technology, the Internet, science and, most
recently, terrorism. He recently returned from a filming and research trip to Bosnia
for a television documentary about U.S. intelligence and al Qaeda’s Balkans network.
The program is scheduled to air in spring 2009.

Chris Nodder is a User Experience Specialist with Nielsen Norman Group. He works
with clients across Europe and the USA, large and small, in industries as diverse as
financial services, health care, entertainment, e-commerce, telecommunications,
government, intranets, and several highly specialized B2B sectors.
Before joining NN/g, Nodder worked as a senior user researcher at Microsoft Corp.
During his seven years at Microsoft, Nodder worked on products as diverse as
videoconferencing, programming tools for web developers, home networking, online
communities, and delivering Internet content over cell phones. In 2004 he was
responsible for the user experience for XP Service Pack 2, a major upgrade to
Windows XP (documented in the book Security and Usability). He has created
personas, reality TV episodes, and even whole rooms (“usertoriums”) as ways of
getting developers to walk in their customers’ shoes.
Nodder earned a M.S. in Human Computer Interaction from Guildhall University,
London, and a B.S. in Psychology from the Polytechnic of East London. He has
presented at and spoken on panels for conferences such as UPA, CHI, CSCW, and
British HCI.
He coauthored the NN/g report on B2B usability, conducting focus groups, usability
tests, and field studies in a broad variety of business-to-business industries. In the
B2C space, Nodder coauthored the research report on wishlists and gift giving,
conducting user studies and field research with a broad range of e-commerce sites
and physical stores.


Acknowledgements
The designers and organizations associated with the ten applications in this report
deserve many thanks for first being brave enough to submit their work, then for co-
operating in sending more material, participating in the interviews we conducted,
and for reviewing the report.
We also must thank the many other organizations and individuals who entered their
applications in our competition. It was great to see that there are many developers
who value usability highly in their production process and are proud enough of their
user-centered achievements that they want to share the results with us.


About Nielsen Norman Group
Nielsen Norman Group (NN/g) is a consulting and research company that is solely
focused on user experience. We are not a Web design shop—we will tell you what
your customers want and how to vastly increase the business value of your site or
intranet, but we won’t build the new site for you. We are independent of technology
vendors and design agencies, so we can report the unvarnished truth about what
works and what doesn’t.

Here are some of our most popular services. For the full list (and for current prices),
please see our website at www.nngroup.com/services
CONSULTING
• Independent expert review of the user experience of your website or
intranet: $38,000.
• User testing: typically $25,000 to test a website or intranet; $45,000 for a
competitive study.
CONFERENCE
We produce an annual conference where world-class experts teach the latest findings
about the usability of websites, intranets, and email newsletters. We also teach
correct methodology so that you can hone your skills and conduct your own usability
projects with more success than if you use weaker methods.

NN/g is the only company that presents high-end usability conferences bringing the
same seminars to the United States, Europe, and Australia. For the current
conference program, see http://www.nngroup.com/events
TRAINING
Most of our conference seminars are available for in-house presentation at your
location. We also have special training events that are optimized for having one of our
seasoned usability experts come to your team and teach it usability by leveraging
your own design questions:
• 3-day Learning-by-Doing Usability Testing ($23,000). We take you
through a user test of your own design, teaching usability principles with your
own project as the case study.
• Intranet Usability ($23,000). Combines a full-day tutorial with the lessons
from our testing of 27 intranets and a full-day workshop about your own
intranet’s usability, based on our review of your design.
• Application Usability ($16,000). Two days intensive course on everything from
screen design (buttons, field labels, widgets) to feature and workflow design.
• Writing for the Web ($9,000). A writing workshop using your own sample
content for the rewrite exercises.
• Fundamental Guidelines for Web Usability ($9,000). The basics everybody
should know about users’ online behavior and how to design better sites.
PRICES
Prices are stated in U.S. dollars and were valid when this report was published. Travel
expenses are extra for all training seminars and for many other services; prices are
higher outside the United States. Prices are subject to change without notice: for
current prices, please see http://www.nngroup.com/services
NEWSLETTER
Free e-mail newsletter published every two weeks with summaries of our newest
research and thinking. To subscribe: http://www.useit.com/alertbox/subscribe.html
TWITTER
Follow us at @NNgroup (highly abbreviated; missing much of the newsletter info).

Reports by Nielsen Norman Group
For a full list and to download reports, please see http://www.nngroup.com/reports
WEB USABILITY
• E-commerce user experience
• Wishlists and gift certificates: guidelines for website and email design
• Location finder usability
• Corporate Image: presenting company information in a site’s “About Us” area
• PR section of corporate sites: supporting journalists
• Investor Relations area of corporate website: supporting investors
• Site map usability
• B2B: guidelines for converting business users into leads and customers
INTRANET USABILITY
• Intranet usability guidelines: 10 reports based on user testing of 27 intranets
• Intranet information architecture (IA)
• Intranet design annual: published every year about that year’s 10 best intranets
• Sector-specific intranets: financial services, manufacturing, technology, retail,
knowledge-intensive, and government agencies
• Intranet portals: report from the trenches
• Social networking and collaboration features on intranets
E-MAIL USABILITY
• Email newsletters
• Transactional email and confirmation messages
APPLICATION USABILITY
• Application design showcase: case studies of 10 award-winning app UIs
• Customization usability
• iPad apps usability
• Flash and Rich Internet Applications (RIA)
SPECIAL USER SEGMENTS
• Usability of websites for children (age 5–12)
• Teenagers on the Web (age 13–17)
• Web usability for senior citizens (age 65+)
• Beyond ALT text: improving usability for users with disabilities
USER-CENTERED DESIGN METHODOLOGY
• Agile usability: Best practices for user experience on Agile development projects
• Return on investment (ROI) for usability
• Paper prototyping: a how-to video (32 minute DVD)
• 230 tips to improve the way you run user tests
• Recruiting test participants for user testing
• Testing users with disabilities
• How to conduct eyetracking studies
OTHER
• Mobile web usability
• Streams, Walls, and Feeds: notifications, messages, and alerts sent through
social networks and RSS
• Donation usability for non-profit and charity websites

August 9-14 October 3-8 October 18-22 October 25-29

The Usability Week 2010 Conference Who Will You Meet
at the Conference?
Many conferences offer cavernous exhibit halls, brief seminars on
second-hand discoveries, and a sense of anonymity that can be truly Companies that sent the
alienating. most people in 2009 and
2010:
Usability Week takes a different approach.
Apple
AQA (Assessment and
Knowledge, Directly from the Source Qualifications Alliance)
In place of scattered, shallow talks, Usability Week offers 5 or 6 days BBC
of deep learning as international experts lead full-day tutorials on Cambridge University Press
topics such as: Cheapflights Ltd
Christian Broadcasting
• Fundamental guidelines for Web usability Network
• Applying information architecture (IA) principles Cisco Systems
• Writing for the Web The College Board
• Application design Deloitte
• Integrating social features with mainstream websites Denplan Ltd
Department of Education
• How basic psychology determines design guidelines Employment and
Workplace Relations
Course levels range from introductory to advanced; you can sign up for Deutsche Bank
as few as 1 or 2 days or as many as 6. eBay
Elsevier
Esurance
Many sessions include hands-on training exercises that let you apply FD Kinesis
what you learn immediately; all ensure that you’ll learn tools you can Fiserv
use to improve your website, intranet, or application as soon as you Foolproof
Herbalife International
get home. Hewitt Associates
House of Commons
Networking Opportunities Informatica
Infosys
Because you’ll spend each day in a group with in-depth focus on a Insurance Institute for
single topic, you can discuss problems, share solutions, and make Highway Safety
lasting connections with your peers. Intuit
JUICE Pharma Advertising
Kaiser Permanente
Pay only for the days you need. The more days you attend, the Kaspersky Lab
deeper the discount. Early bird rates save even more, so sign up KCI Medical Products (UK)
early! Ltd
Kent County Council
Lloyds Banking Group
Choose your city at http://www.nngroup.com/events for agendas, McKesson
location, pricing, and registration information: McMaster Carr Supply
Company
• Toronto, Canada, August 9-14, 2010 MercadoLibre S.A.
Microsoft
• San Francisco, CA: October 3-8, 2010 Netherlands Nutrition Centre
• Copenhagen, Denmark: October 18-22, 2010 Nokia
• Edinburgh, Scotland: October 25-29 Office for National Statistics
Organisation for Economic

Co-operation &
Development (OECD)
Overstock.com
You can also book most of our tutorials for in-house presentation at PayPal
your company or interest group. Please see Pearson
http://www.nngroup.com/services/workshops/ Princeton University
Quest Diagnostics
Rainbow Media
Sandia National Laboratories
Siemens
Social Security
Administration
Sony
Stanford University
SWIFT
Teach For America
Telenor
Thomson Reuters
Torre Lazur McCann
UCAS (Universities and
Colleges Admissions
Service)
VeriSign
Verizon
WebMD
Wells Fargo Bank
Wheels, Inc.
World Bank
Yahoo!
zooplus AG

August 9-14 October 3-8 October 18-22

Application Usability 1:
Page-Level Building Blocks for Feature Design

• Toronto: Thursday, August 12
• San Francisco: Thursday, October 7
• Copenhagen: Thursday, October 21

Kara Pernice and Garrett Goldfield
Full-Day Tutorial

The basics of any application are the screen elements that users interact with to make the
application do their bidding.

Graphical user interfaces have a rich vocabulary, with design components for many different
situations. Each of these building blocks might seem simple, but people don’t always use them
correctly. Also, some website controls deviate from standard designs, complicating usability.
Both situations have profound implications for the overall user experience.

In this seminar, we’ll explore the behavior of each application screen component, or widget,
including both standard behaviors that users expect and novel interface components designed for
specific interactions.

What You’ll Learn

• How people think, and why this impacts screen element design
• Which screen element (widget) to use in which circumstance
• How to choose between different widgets that perform similar functions
• The design patterns that users expect for common tasks
• The best ways to communicate information back to your users

Course Outline
• Design primitives: When to use which widget, and how
o Selection: Menus, hierarchies, long lists, tabs
o Data entry: Form fields, label placement, in-line descriptions and assistance
o Buttons: Button behavior, radio buttons, checkboxes, tool bars, command links
o Manipulation: Scrollbars and sliders, multimedia controls, item manipulation
controls (handles, frames, rotators)

o Editing: Standard edit controls, selection behaviors
o Progressive disclosure: Expandable areas on the screen, scrolling areas within the
screen
o Grouping: Group boxes, white space
o Hybrid controls: Menu and split buttons, choosing exactly n options, linked
controls, timeline controls, image maps as selectors
o Notifications: Tool tips, balloons, system notifications
• Variations of the standard controls
o How to handle borderline cases
o When is it appropriate to “roll your own” controls?
• Window types: Which type to use, and when
o Kiosk-style, full-screen windows
o Primary windows
o Secondary windows: Dialogs, alerts
• Communicating with users
o Progress indicators
o Communicating errors
• Design patterns: Layout guidelines for common tasks
o Structuring and navigating commands and features: Grouping principles, cognitive
principles, layout basics
o Managing and selecting from object lists
o Form-filling
o Working with tables
o Searching
o Editing
o Printing
o Saving
o Dialog boxes
o Error messages
o User assistance

Format
This full-day tutorial includes lectures, exercises, and discussion.

Handouts
Copies of all presentation slides

Who Should Attend
Whether you’re designing website applets or creating a full-blown enterprise application, the
fundamental guidelines described in this full-day session will help you better understand your
users’ needs and create more efficient and effective applications.

Designers, program managers, usability engineers, and developers can all benefit from this
course, which covers interaction design and task analysis, in addition to widget guidelines. No
prior knowledge of usability methods is assumed, and the day is intended to appeal to all
disciplines. The focus is on the user experience of applications, so no code samples will be
discussed; a programming background is not required.

See Also:
Application Usability 2: Dialogue and Workflow Design details how to combine the interaction
primitives explained in Application Usability 1 into a full-fledged application that optimally
supports user tasks. Each of the tutorials is a full-day, self-contained seminar and can be taken
independently. Taken together, however, they will cover the full range of usability issues
encountered in application design. If you’re designing for mobile devices such as the iPhone,
Android, or iPad, consider our specialized seminar on Touchscreen Apps Usability.

Instructors

Kara Pernice is the Managing Director of Research at Nielsen Norman Group
and heads the company’s East Coast operations. She has led many of NN/g’s
major intercontinental research studies, generated the resulting design
guidelines, and coauthored several reports, including Designing Corporate
Intranets, Designing for Accessibility, Designing for People Over the Age of
65, and Designing Websites to Maximize Press Relations. She is a leading
authority on intranet usability and eyetracking usability (The Wall Street
Journal called her “an intranet guru”). She judged the submissions for and
coauthored NN/g’s Government Intranets Report and its Intranet Design
Annuals in 2001, 2002, 2003, 2005, 2006, 2007, 2008, and 2009. She has also done extensive
research in evaluating emotion and design, given presentations on a wide range of topics, and
worked with clients in various industries, including publishing, entertainment, technology,
finance, pharmaceuticals, and government. She has more than 15 years of experience in
evaluating usability and has established successful usability programs at Lotus Development, Iris
Associates (an IBM subsidiary), and Interleaf. She chaired the Usability Professionals’ Association
2000 and 2001 conferences, and served as 2002 conference advisor. She holds an M.B.A. from
Northeastern University and a B.A. from Simmons College. Presenting in Toronto and San
Francisco.

Garrett Goldfield is a User Experience Specialist at Nielsen Norman Group,
where he consults with clients in a broad range of industries, including
ecommerce, automotive, health care, finance, media, telecommunications,
education, and nonprofits, as well as highly specialized B2B sites. Previously,
Garrett managed the User-Centered Design group for Intuit's Tax Division,
focusing on incorporating UCD processes within Intuit's development cycle for
TurboTax software and its Web applications. Prior to working at Intuit,
Goldfield worked at General Electric’s Information Systems Division, where he
conducted ground-breaking work in ecommerce interactions for marketplace transactions; and at
The Aerospace Corporation, where he pioneered standards for HCI telemetry data presentation
for Space and Naval Warfare Systems Command. Goldfield's research focuses on usability
testing, contextual inquiry, and ethnographic user studies. He has also published and presented
on cost justification and ROI for usability practices, brainstorming methodologies, analysis, and
interpretation of qualitative user data. Presenting in Copenhagen.

August 9-14 October 3-8 October 18-22

Application Usability 2: Dialogue and Workflow Design

• Toronto: Friday, August 13
• San Francisco: Friday, October 8
• Copenhagen: Friday, October 22

Kara Pernice and Garrett Goldfield
Full-Day Tutorial

When building an application, one rule applies above all others: If users are to succeed, they
must be able to effectively navigate your UI. This holds for all applications—whether you’re
building a complex business workflow suite or designing a Flash applet to display ecommerce
product-configuration options.

Keeping such requirements and challenges in mind, this course uses real-world examples and
results from our user testing to show you not only how to develop effective interface
components, but how to assemble them into highly usable and coherent designs. When you
accomplish both, users can engage in a dialog with the application. They quickly understand
what they need to do and how to do it, and can feel confident that they’ve completed their tasks
successfully.

This seminar moves beyond understanding UI components (as covered in Application Usability
1), and shows you how to apply UI components to create more effective flows for different tasks.

What You’ll Learn
In this session, you’ll learn:

• Templates and techniques for handling common tasks
• Principles to help you overcome any design problems you encounter
• Principles for diagnosing and overcoming usability challenges specific to your own
projects
• Methods for integrating flows into applications, drawing on diverse product examples
• How to address internationalization issues and accessibility concerns
• How to make your applications enjoyable to use

Course Outline
• User-centered application design
o Tasks versus technology

o Techniques for determining how users work: Users aren’t designers, but they can
help
o What users say vs. what they do
o Task analysis
o Turning user tasks into applications
• Four key workflow concepts explained
o Smart defaults
o Control vs. being led
o Progressive disclosure
o Inductive UI
• Workflow structures: Design considerations for different task types
o Cyclical tasks
o Checklists and forms
o Answering known questions
o Iterate/problem solve to find answers
o Respond to an anomaly event
o Share a task
o Research and buy something
o Be entertained
• Specific guidelines by application type
o Wizards
o Native applications
o Hosted (client/server and Web) applications
o Customizing off-the-shelf products
o Personal applications (such as photo management)
o Ecommerce applications
o Collaborative workflow
o Complex problem solving
o Mini-applications (applets), ephemeral applications
• Application usability guidance
o Making the UI seem fast and responsive
o Error handling
o Archiving
o Shortcuts and accelerators, including keyboard commands vs. mouse use
o Catering to novices and experts in one UI
o International and multi-language considerations
o Accessibility concerns
• Integrating a website and an associated application
o Maintaining user experience continuity
• Rich Internet Applications (RIAs)

o New tools, new techniques, same users: User-comprehension issues/how to teach
your visitors what your RIA does
• Designing for user experience
o Design is everyone’s responsibility
o How to differentiate your application
o Voice
o Delighting users

Format
This full-day tutorial includes lectures, exercises, and discussion.

Handouts
Copies of all presentation slides

Who Should Attend
Whether you’re designing applets for a website or creating a full-blown enterprise application,
the fundamental guidelines described in this full-day session will help you better understand your
users’ needs and thus create more efficient and effective applications.

Designers, program managers, usability engineers, and developers can all benefit from this
guidance, as the class covers interaction design and task analysis along with guidelines. No prior
knowledge of usability methods is assumed, and the day is intended to appeal to all disciplines.
The focus is on how users experience applications, so we won’t discuss code samples and you
don’t need a programming background.

This tutorial does assume knowledge of the user experience implications of basic design
components for applications, such as buttons, scrolling, notification dialogs, and windows. This
information is covered in the companion tutorial, Application Usability 1: Page-Level Building
Blocks for Feature Design.

See Also:
This tutorial is the sequel to Application Usability 1: Page-Level Building Blocks for Feature
Design, which covers the page-level components of dialogue design. Each of the tutorials is a
full-day, self-contained seminar that you can take independently. Taken together, however,
they’ll cover the full range of usability issues encountered in application design. If you’re
designing for mobile devices such as the iPhone, Android, or iPad, consider our specialized
seminar on Touchscreen Apps Usability.

Instructors

Kara Pernice is the Managing Director of Research at Nielsen Norman Group
and heads the company’s East Coast operations. She has led many of NN/g’s
major intercontinental research studies, generated the resulting design
guidelines, and coauthored several reports, including Designing Corporate
Intranets, Designing for Accessibility, Designing for People Over the Age of
65, and Designing Websites to Maximize Press Relations. She is a leading
authority on intranet usability and eyetracking usability (The Wall Street
Journal called her “an intranet guru”). She judged the submissions for and
coauthored NN/g’s Government Intranets Report and its Intranet Design
Annuals in 2001, 2002, 2003, 2005, 2006, 2007, 2008, and 2009. She has also done extensive

research in evaluating emotion and design, given presentations on a wide range of topics, and
worked with clients in various industries, including publishing, entertainment, technology,
finance, pharmaceuticals, and government. She has more than 15 years of experience in
evaluating usability and has established successful usability programs at Lotus Development, Iris
Associates (an IBM subsidiary), and Interleaf. She chaired the Usability Professionals’ Association
2000 and 2001 conferences, and served as 2002 conference advisor. She holds an M.B.A. from
Northeastern University and a B.A. from Simmons College. Presenting in Toronto and San
Francisco.

Garrett Goldfield is a User Experience Specialist at Nielsen Norman Group,
where he consults with clients in a broad range of industries, including
ecommerce, automotive, health care, finance, media, telecommunications,
education, and nonprofits, as well as highly specialized B2B sites. Previously,
Garrett managed the User-Centered Design group for Intuit's Tax Division,
focusing on incorporating UCD processes within Intuit's development cycle for
TurboTax software and its Web applications. Prior to working at Intuit,
Goldfield worked at General Electric’s Information Systems Division, where he
conducted ground-breaking work in ecommerce interactions for marketplace transactions; and at
The Aerospace Corporation, where he pioneered standards for HCI telemetry data presentation
for Space and Naval Warfare Systems Command. Goldfield's research focuses on usability
testing, contextual inquiry, and ethnographic user studies. He has also published and presented
on cost justification and ROI for usability practices, brainstorming methodologies, analysis, and
interpretation of qualitative user data. Presenting in Copenhagen.

October 3-8

Mobile User Experience 1:
Usability of Websites and Apps on Mobile Devices

• San Francisco: Tuesday, October 5

Raluca Budiu

Full-Day Tutorial

How do we create a satisfactory user experience when limited to a small device?

This seminar is based on expert reviews, as well as international studies with participants
ranging from students to early technology adopters and business people using websites on a
variety of mobile devices. We also report on the latest findings from articles published in
prestigious journals and conferences.

Our user research included smartphones, touchphones, as well as feature phones from several
different vendors. The seminar will discuss the issues in designing for this range of devices, with
a focus on smartphones and touchphones, since research indicates that these are the primary
devices used for mobile Internet access.

In this seminar we target basic mobile usability principles that go beyond any specific phone
model.

What You’ll Learn

• What behaviors users engage in when using mobile devices
• Mobile app versus mobile website: which is better
• Guidelines and best practices about how to make your website mobile-friendly, with
emphasis on:
o Features that make mobile sites usable
o Easy navigation on mobile devices
o Writing and producing content for mobile device

Course Outline

Mobile user behaviors:

• What kinds of activities people do on mobile devices

o Differences between apps and websites
• Browsing for news, entertainment, sports
• Finding specific information (weather, movie times, etc.)
• Transactions (such as online banking and other financial operations)
• Shopping: what do users shop for on mobile
• Designing to support user behaviors

Design strategy considerations:

• Creating a dedicated mobile site vs. having mobile users access your regular website
• Designing for high-end models vs. the lowest common denominator
o Direct manipulation UI for touchphones (e.g., iPhone, BlackBerry Storm)
o Indirect manipulation for low-end devices
• Creating a mobile application vs. a mobile website; when to use what
o Differences in designing an app versus a mobile website

Specific design guidelines for mobile sites and services:

• Basic interaction
o Typing
o Dropdown Boxes, Buttons, and Links
o Lists and Scrolling
o Menus
o Carousels
• Forms
• Logging in and Registering
• Search
• Navigation and information architecture (IA)
• Errors
• Page layout
• Search
• Homepages
• Images, Animation, and Videos
• Content usability
o How users read on mobile devices
o Writing for mobile use
o Presenting text: legibility and readability
• Designing for feature phones: differences from smartphones and touchphones
• How to perform usability testing with mobile devices

Format
This full-day tutorial includes lectures, video highlights from user testing, and some exercises.

Handouts
Copies of the presentation slides

Who Should Attend
Anybody who designs websites, intranets, or online services that have mobile users. People in
charge of mobile strategy, including the question of whether to develop dedicated mobile
services or simply make the main site more mobile-friendly.

See Also:
This seminar is about the basic usability principles that are valid for both mobile websites and
apps and for the full range of mobile devices. A companion seminar, Mobile User Experience 2
focuses on issues specific to designing applications for touchscreen devices.

Instructor

Raluca Budiu is a User Experience Specialist with Nielsen Norman Group,
where she presents tutorials on academic research findings, mobile usability,
and cognitive psychology for designers, and conducts research worldwide on
usability for mobile websites and children’s websites. She coauthored the
NN/g report on mobile usability. Previously, Budiu worked at Xerox PARC,
doing HCI research. At PARC, she built computational models of how people
search for information in visualizations of large data structures. She also
explored new ways of measuring information scent and conducted research
on interfaces for social bookmarking systems and on the cognitive benefits of
tagging. Budiu was also a user researcher at Microsoft Corporation, where she explored future
directions and made strategic recommendations for incorporating user-generated content and
social Web features into MSN. Budiu has authored more than 20 articles and conference
presentations on HCI, psychology, and cognitive science. She has a PhD from Carnegie Mellon
University.

October 3-8

Mobile User Experience 2: Touchscreen Application Usability

• San Francisco: Wednesday, October 6

Raluca Budiu

Full-Day Tutorial

What makes a good touch-driven application? A new, cool interface? Ease of use? Responding to
users’ needs? Why do some applications become part of the everyday life of their users, while
others are downloaded and never used?

This seminar addresses these questions. In discussing the secrets of a successful iPhone, iPad, or
Android app, we use data from our own ethnographic and user-research studies, and from expert
reviews. This seminar complements our seminar Mobile User Experience 1, which is focused on
basic mobile usability principles that are valid on all platforms. In this seminar we will use
examples from existing iPhone, iPad, and Android apps and will focus on the challenges that are
specific to designing native apps for touchscreen devices.

What You’ll Learn
In this session, you’ll learn:

• How touchscreen users think and what they expect from an application
• Differences between iPhone, iPad, and Android users
• What types of mobile applications people use repeatedly, and which are one-time
wonders
• Patterns of application usage
• Design guidelines and best practices for making a touch-driven application useful and
usable
• How to avoid usability pitfalls in mobile user interfaces, including design mistakes made
by some pretty famous apps

Course Outline
• Types of applications : immersive, productivity, utility applications
• Using the device hardware to your advantage:
o How to design for the touch screen
o Using the gestures and multi-touch in your application
o Accelerometer

o Sound and voice recognition
o User’s location
• Consistency with other applications designed for the same device and conventions
o How to handle borderline cases
o When can you depart from conventions
• Design primitives
o Menus and lists
o Form fields
o Buttons and controls
• Design guidelines for common tasks
o Startup screen
o Logging in
o Configuration and settings
o Data input and form-filling guidelines;
o Content: text, images, graphics, animation
o Error messages and help
o Saving state and “printing”
o Editing
o Search
o Displaying ads
• Alerts and notifications; online versus offline mode; push versus pull
• Customization and Personalization
o History
o Preserving state
• Moving from a computer application to a mobile application

Format
This full-day tutorial includes lectures, video highlights from user testing, and some exercises.

Handouts
Copies of the presentation slides

Who Should Attend
Anybody who designs or considers designing iPhone/iPad or Android applications. A secondary
audience would be people who target other high-end mobile devices and want their apps to equal
the usability of the best iPhone or Android apps. This seminar is solely focused on the user
experience and does not cover programming. Although we do discuss nonconventional app
interfaces, this seminar is not intended for game developers.

See Also:
The companion seminar Mobile User Experience 1 covers basic mobile usability principles,
applicable to all mobile devices.

Separate seminars that focus on application design in general:

• Application Usability 1: Page-Level Building Blocks for Feature Design
• Application Usability 2: Dialogue and Workflow Design
• Designing Complex Applications and Websites (note: complex apps will rarely be suited
for mobile use)

Instructor

Raluca Budiu is a User Experience Specialist with Nielsen Norman Group,
where she presents tutorials on academic research findings, mobile usability,
and cognitive psychology for designers, and conducts research worldwide on
usability for mobile websites and children’s websites. She coauthored the
NN/g report on mobile usability. Previously, Budiu worked at Xerox PARC,
doing HCI research. At PARC, she built computational models of how people
search for information in visualizations of large data structures. She also
explored new ways of measuring information scent and conducted research
on interfaces for social bookmarking systems and on the cognitive benefits of
tagging. Budiu was also a user researcher at Microsoft Corporation, where she explored future
directions and made strategic recommendations for incorporating user-generated content and
social Web features into MSN. Budiu has authored more than 20 articles and conference
presentations on HCI, psychology, and cognitive science. She has a PhD from Carnegie Mellon
University.

Nielsen Norman Group Report:

Agile Usability: Best Practices for User
Experience on Agile Development Projects
2nd edition
119 pages PDF format

$144 for a single report,
$298 for the report with a site license and the right to make copies
within your organization and place on your intranet.
(No shipping/handling fees will be added: it's an immediate download
directly from the server.)

Summary Rapid Application Development (RAD) processes such as Agile, Scrum, and
the like, simultaneously pose an opportunity and a threat to achieving a
quality user experience. It all depends on how it's handled. The standard
methodologies as described in books don't work in practice, if you care about
the usability of your products. But small modifications work wonders, as we
found when studying how Agile works on real projects.

The report contains detailed analyses of five trends we saw in most successful
organizations:

• UX people are bridges: embedded with the team but also involved
in high level/early planning
• UX work is early, flexible: done up-front to storyboard level with
good expectation setting that changes will happen
• Low-fi prototype is the ongoing spec: owned by UX, agreed by
stakeholders
• UX work happens in a parallel track: pair complex back-end
sprints with UX intensive work
• Guerilla style UX validation: fast, discount methods run frequently
and regularly on early code

The report is based on case studies from 16 organizations that have
embraced Agile while also caring about user experience. Further adding to
the empirical evidence in the report are the findings from surveying 174
professionals.

Table of 119-page report.
Contents
1. Executive Summary
o The promise of Agile methods
o The threat of Agile methods
o Making Agile and usability work
2. Introduction
3. Agile — theory and history
o What is Agile/Rapid Application Development?
o The main elements of Agile

o Differences from other development processes
o Agile benefits for UX practitioners
4. Agile in practice
o Partial Agile implementations
o Being the only Agile kid on the block
o The effects of poor Agile implementations
o Just do it!
o Agile in practice: Case study
5. Challenges for UX practitioners
o Little up-front design time
o It's hard to talk about users when they are poorly defined
o Agile is developer-centric
o There is little time to test
o Agile is not conducive to a centralized UX team
o We have to do Agile by the book, and UX isn't in that book.
o Challenges: Case study
6. Integrating UX into Agile teams
o User Experience people are bridges
o UX work is early, flexible
o Low-fidelity prototypes as specification document
o User Experience work happens in parallel
o Guerilla-style UX validation
o Integrating into teams: Case study
7. Guerilla usability: quick-and-dirty techniques
o Early work
o Sprint-specific work
o Decoupled (holistic) work
o Post-sprint work
8. Making it happen
o UX people have to embrace Agile too!
o Showing user needs to a fast-moving team
o Showing your value
o Essential techniques for short-staffed teams
o Special challenges for large and distributed teams
o Making it happen: Case Study
o Always room to grow

What You • Information about what actually worked (and didn't work) in 16
Get companies that moved to Agile and still cared about user experience.
o Additional experience from the 174 professionals we
surveyed.
• Many best practices you can follow when adapting Agile as described
in books to actual development practices such that you won't suffer a
loss of usability.

Comparing If you already own the 1st edition of this report, should you buy the 2nd
the edition? Probably not, because the main conclusions in the first edition were
Editions confirmed in Study Two (though some were refined or extended in the new
edition).

Comparison of the editions:

1st edition 2nd edition
Case Studies 12 16
Professionals Surveyed 105 174
Page count 95 119
Report file size 1 MB 2 MB

Who This report has important information for:
Should
Read This • Usability specialists, interaction designers, and other user experience
Report? professionals in organizations that have moved (or are thinking of
moving) to an Agile development methodology.
• Anybody in charge of an organization's development methodology, if
they don't want to see drastically reduced user experience quality
after moving to Agile.

Application designshowcase 1st_edition

More Related Content

What's hot (20)

Similar to Application designshowcase 1st_edition (20)

More from Jeffrey Katz (17)

Application designshowcase 1st_edition