10 Best Application UIs

 

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 two 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.

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:

Lightbox design for displaying a dialog box in an application UI from Xero

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 I’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.
MENU