The winners of the first competition to identify the 10 best-designed application user interfaces are:
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 usability is definitively the trend to watch, and any application owner should think hard about whether and how to add mobile features.
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.
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.)
Several winners employed a ribbon as their main control , taking a lead from Microsoft Office 2007 's 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.
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.
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 .
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.
Several winners were construction kits that let users create something for a different set of end users:
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 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.)
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.
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:
(Full report with all award-winning application designs is available for download.)
联系客服
