Summary: Winning app UIs include domain-specific solutions that allow humans to focus on deeper issues while the software takes care of the mechanics.
The winners for best application user interfaces of the year are:
- The web-based BondWorks wealth management platform (BondDesk Group LLC) provides financial advisors with a streamlined system to trade fixed-income assets.
- The portable GEN2i (Hottinger Baldwin Messtechnik GmbH, Germany) lets users record engineering data in the field.
- OEConnection (OEConnection LLC) lets parts department employees at auto dealerships and repair facilities process more than 6 million original equipment parts transactions monthly.
- CycleStreets Mobile (CycleStreets Ltd. and Anna Powell-Smith, UK) helps cyclists plan safe, fast routes for cycle journeys using crowd-sourced map data.
- VitreaTeach (Vital Images, Inc.) is an educational tool that radiology residents and practicing radiologists can use to save, manage, and share medical images.
- Wakelicious (Utopian Army, The Netherlands) is an alarm clock that wakes you up by playing YouTube videos sent by your friends.
- The Climate Action Planning Tool (National Renewable Energy Laboratory) helps organizations reduce their carbon emissions.
- eReview (International Monetary Fund, IMF) integrates complex business functions into an organization's intranet.
- The self-service Eventbrite (Eventbrite Inc.) software tool helps event hosts organize, sell, and manage tickets for events. The Create Event workflow, which won the award, helps users set up a new event within Eventbrite's online system.
- The Hobsons CRM (Hobsons, Inc.) product-suggestion portal tool lets customers make comments and suggestions.
- Dixio (Semantix Group SL, Spain) offers users multiplatform lookup capabilities.
- Highlight (Cohdoo, LLC) lets users with iOS devices make audio recordings, mark interesting points, and share recordings with others.
- The Mobile Unified Communication client (Verizon Wireless) lets business customers link their mobile and business lines.
In contrast to our other design awards, we decided to split the application award into categories. It doesn't make sense to judge small consumer apps that do a single thing together with huge enterprise applications that manipulate immense sets of convoluted data—such as the 4 million different bonds that traders manage through BondWorks. Workflow applications that integrate many steps or coordinate several user roles have still different requirements, as do multi-platform apps that work across several devices.
Solving a big problem is more difficult than solving a small problem. However, if your app does only one thing, it had better to it really, really well. So, the criteria for polish are stricter for small applications than for enterprise applications. With thousands of screens in some applications, they can't all be perfect, but the flow between screens and the ability to select the correct feature for any given situation must be great. So, instead of comparing apples and oranges, we decided to judge each application style in relation to its peers and select the best designs in each category.
That we would ever classify a radiology application as "lightweight" defies the imagination, but it's appropriate in the case of VitreaTeach because it focuses on one thing: allowing residents and experienced radiologists to manage images for learning purposes. We might even call it the Pinterest of medical science. But, of course, Pinterest itself wouldn't work for radiologists — partly because of the privacy concerns for any medical information and partly because of the benefits that domain-specific features provide.
For example, VitreaTeach both offers special access to cases from the user's own hospital and knows something about anatomy and pathology. Interestingly, one of the things that make the design cleaner than other medical systems is the simple tagging that provides much of the taxonomy support for the images. Designers simplified tagging after user research found that full, formal anatomy and pathology taxonomy hierarchies added too much overhead.
Augmenting Human Capabilities
Software's real goal should not be to simply process transactions in a system where users are nothing more than data operators who click required buttons to make things happen. Rather, software should work to augment human capabilities, helping us to overcome weaknesses and emphasize our strengths.
A vital way for computers to help users is to direct their attention to a smaller number of important issues instead of overwhelming them with all possible options. For example, BondWorks originally presented 85 attributes of tradable bonds on the search results screen. However, search log analysis showed that nearly three quarters of users were searching on only 10 of the attributes, so the screen was redesigned to focus on those attributes.
OEConnection proactively takes the next step when a spare part is backordered from the manufacturer: the software automatically proceeds to search other dealers' inventory for the desired part. Traditionally, users would have had to issue each type of search separately from separate application areas. But that's exactly the approach that turns humans into robotic button-ushers; better to turn the computer into a problem-solving tool that understands the domain and lets users expend their brainpower on higher-level issues.
As another example, the Highlight application's basic feature is to make audio recordings searchable by letting users add a marker when something interesting occurs. For real-world tasks — such as conducting interviews or sitting in a foreign-language class — users wouldn't actually know that "something interesting" was being recorded until after it happened. To accommodate this common scenario, the application has an offset feature that automatically places the marker into the recording a certain number of seconds before the button is pushed. Instant time travel.
More to the point, Highlight uses the computer's flexibility to augment human skills by taking over the tedious job of rewinding the recording when users realize that something interesting should have been marked. This reduces users' cognitive load and frees them to concentrate on listening to the event they're recording instead of attending to the device.
Another simple way Highlight augments human capabilities is in its ability to associate a picture with each recording. This is particularly simple when doing interviews, where users can snap a photo of the interviewee with the same phone that's recording the audio. These photos come in handy later when retrieving recordings from long lists, because it's often easier for our poor brains to associate an interview with the person's photo instead of relying on a textual description.
We also saw a trend to focus screen real-estate allocations on the information that's most important in the current context, while showing less UI chrome. More content, less application overhead.
Some winning applications had special small control panels for direct access to important operations that would usually have required a switch in context. This doesn't quite equate to a modeless design, because complex applications do tend to have several distinct stages or areas of workflow and data. But surfacing crucial features to live above the regular UI architecture is yet another way of empowering users to act on their insights instead of delaying them by the rigid demands of the way the application is structured.
Linear Workflow and Wizards
We want to empower users to be creative and accomplish advanced things with our software. But we should also recognize that users sometimes just want to get their tasks done without having to explore numerous options and new ideas.
To speed users through infrequent or complicated tasks, it's often good to present a linear workflow with minimal disruptions or alternatives. Yes, the lack of flexibility can feel constraining, but it can be faster to just power through all the steps instead of having to ponder which steps are needed. Also, the cost of too much freedom is that users have to decide the order of the steps — something that they're often happy enough to delegate to the computer.
Wizards are the classic approach to linear workflows, and several winning applications include nicely designed wizards. The Climate Action Planning Tool uses the simpler approach of offering numbered steps to guide users. An early design included a Before You Start step, but user studies showed that people ignored it. In the final design, the Before activities appear under Step 1: Gather Baseline Energy Consumption Data . Users just want to get going, so you need to be somewhat heavy-handed if setup work is required before starting the real activity.
Wizards don't work for everything. In user testing, Eventbrite developers discovered problems with a wizard for creating new events in the system. Because users' mental models of setting up a new event didn't include all the necessary steps, they often dropped off and didn't complete the wizard. So, the team decided instead to go with a 2-step process in which users first entered all the information and then customized their pages.
When creating a linear workflow, take care not to signal to users that they can ignore subsequent steps — unless it's true. For example, after the first 6 steps, Eventbrite's workflow was as follows:
- Step 7: Change the color scheme on the registration page.
- Step 8: Choose privacy settings.
It might have seemed logical to first fully create the thing that the privacy would apply to, and then to choose the privacy settings. To some users, however, Step 7 signaled that all the "real" set-up was done and that the remaining steps would be frivolous decorating. If they didn't care about the decor or were satisfied with the default colors, some people simply stopped at Step 7 and never got to the privacy options.
Living in an Ecosystem
A major trend among the winning applications is a modularized approach to the total user experience, with major features outsourced to other applications. Designers accept that their product will live in an ecosystem of other applications (and websites) and that users will often prefer to do certain things elsewhere in that ecosystem.
Relying on other applications to perform work for your app is obviously not a new idea. Having applications work together goes back at least to the pipes in Unix. But we see this done more often now than in years past, when a more monolithic approach was common.
Unless you're IBM or Google, you'll never build a spreadsheet that rivals Excel. Furthermore, most business users already own Excel and know how to use it. Thus, instead of building spreadsheet-like features into your application, it might be better to find a smooth way to integrate with Excel through data export and import. Many data-rich applications among our winners chose this course.
As another example, Wakelicious didn't implement a complete system for uploading and storing videos for Internet playback. Instead, it offers a simple integration with YouTube, which not only saved the team tremendous development effort but also gives users access to a pre-populated content library from which to choose wakeup calls to send their friends.
One caveat about relying on other software is that it's often best to modify or simplify the user interfaces to fit the needs of your users; because of its broader purview, 3rd-party software often embodies unneeded complexity that it's best to hide. eReview, for example, built on top of SharePoint but designed a more streamlined process than the one provided out-of-the-box.
Although it's great to leverage existing applications and Internet resources, applications must also provide their own value-add in their core domain. This was most clearly shown by the Climate Action Planning Tool, which actually started out as a regular Excel spreadsheet that could perform the necessary calculations. Developing it into a real application to guide facilities managers through the workflow — and explain and illustrate the complicated concepts involved in reducing CO2 — made the experience much more successful.
Super-Tooltips: Interaction Design Technique of the Year
In Application Design Showcase #1, we declared the lightbox to be the interaction design technique of the year. This time, we saw improvements in a broad range of interaction techniques but no single new widget that was widely used.
Several applications, however, enhanced an old idea: the tooltip. These "super" tooltips stretch far beyond their original intent and thus earned the spot as the year's most improved interaction design technique. Emerging in the 1990s, tooltips (or "bubble help") started off by providing small explanatory texts that appeared as contextual help when the user pointed to a command button or other interface element.
The new super-tooltip isn't really a "tip," but we'll stick to this well-established name with its long history in GUI development. A super-tooltip is actually an explanatory pop-up that appears as a rollover effect when users point to an item in the user interface. This "item" might be a command or a button — as with traditional tooltips — but it can also be a user-created object, such as a message or product order. The following screenshot shows a typical super-tooltip visual design:
Example of a super-tooltip from Eventbrite.
In addition to static help text, super-tooltips usually contain dynamic status information about the object that users are pointing to. This lets users see the information in the context of a larger overview screen, instead of having to click through to a separate screen with detailed object properties and editing options. Super-tooltips are thus particularly suited to complex applications with many data objects that users must consider together.
The super-tooltip shouldn't include editing options; it should be for information only, since it appears on hover and disappears when users move the mouse. Users should also retain the option to click through to a specific screen that's optimized for viewing and revising an object's properties in greater detail.
The entire Dixio application could be viewed as an even more souped-up super-tooltip. However, that wouldn't be entirely accurate because Dixio explanations appear when users double-tap (or long-tap) a word. Thus, it's not a rollover/hover effect and has to be explicitly dismissed.
Most winners extensively employed a wide variety of usability methods , which is certainly one reason they ended up with such good user interfaces. Iterative design and user testing were particularly common and frequently used to grind down complexity relative to early design ideas that seemed good but proved too difficult. Another common trend was the steady reduction in documentation and help text throughout the iterations, as user testing repeatedly revealed the old lesson that users don't read very much.
Simple user testing with a handful of users can often substantially improve product success, and was used by 85% of the winning projects. For example, an early design for the Mobile Unified Communication client used the command Add Call for placing a new phone call while putting the current party on hold. Although this seems logical enough, it was confusing to users who thought the command was for conference calls. Changing the command label to New Line did the trick.
One-third of the winners used field studies (also known as ethnography ), venturing onsite to observe users' natural behaviors in their own environments. From BondWorks sitting with brokers as they made deals, to OEConnection hanging out in dealership parts departments, to VitreaTeach watching radiologists at hospitals, domain-specific applications require domain-specific user research.
Although it seems obvious that domain-specific applications need field studies, most design projects in the past typically did without them. When we analyzed the first decade of Intranet Design Annual winners, we found that field studies were used by only 10% of the winners from 2001–2003 and just 23% of winners from 2007–2009. Although this represented more than a doubling within a single decade, it's still sad that less than a quarter of good intranet teams ran field studies at decade's end. Going from a quarter of projects to a third in a few years shows continued progress for this important method.
In addition to field studies, we also saw substantial growth in a usability method that was often overlooked in the past: sitting in on support calls. Knowing why customers call with problems is a prime way to discover pain points — as long as you recognize that a customer's description of the problem might be far afield from the underlying root cause that the redesign must address.
(Full report with all award-winning application designs is available for download.)