As Ajax spreads new UI conventions to the masses, it’s important to apply a critical eye to the usability of those conventions. Several big-name sites have launched extensive redesigns in the last few months, from Twitter and FriendFeed to Flickr and Facebook. Certain trends are solidifying, especially the use of context menus that are hidden until a user mouses over an item, then displayed as a series of icons, text or both.
First up we have Flickr, whose homepage redesign emphasizes the social networking aspects of the service. A Recent Activity feed, modeled on Facebook’s iconic News Feed, showcases favorites and comments from your contacts. The default view for each item displays its age. When the user hovers, though, the same real estate becomes home to two icons. One allows you to add your own comment; the other “mutes” activity related to that photo and removes it from your feed. Neither option is represented by an industry-standard icon, and no tooltip is provided. Even the status bar shows only an inscrutable URL: a hash sign.
Next up we have Twitter, whose new homepage provides a similar user experience to that of Flickr, with two important differences: Rather than re-use existing real estate for its clickable context commands, Twitter re-purposes existing whitespace. And instead of cute, mysterious pictograms, Twitter uses industry-standard icons: a trash can and a star. For users schooled in the conventions of Web 2.0, it’s obvious that the two icons, when clicked, will either assign “favorite” status to the item or delete the item altogether. For users without such a background, however, there are still no tooltips.
Finally we have Facebook, whose own News Feed now offers mouseover context commands. Unlike Twitter and Flickr, however, the social networking giant rolls all context options up into a single Options menu which is represented by text AND an icon. Users who click on the word or image see links such as “More about Brian, “Less about Brian, “More Status Stories” or “Fewer Status Stories.”
Based on all of these examples, I’d say only Twitter hits the Web 2.0 sweet spot where simple, clear icons communicate everything you need to know about a feature. Even then, it would be nice if tooltips provided even further context. Facebook’s approach goes further than Twitter’s in guaranteeing that users always know what’s going to happen when they click. But it’s too fussy. Hover to see that there’s a menu, click on the menu header, then finally see the available commands and click on one of them. When there are many options, that makes sense. But when there are two (a paired set of more/less links) it seems like overkill.
Flickr provides the least usable variation on this design pattern. The absence of both recognizable icons and tooltips turns context commands into a guessing game.
In terms of usability, however, there’s another design pattern that trumps all of these options for clarity and usability: FriendFeed, which takes a very different approach to context commands. Items in FriendFeed now offer a very Web 1.0 grocery list of actions, all spelled out plainly in text and all visible regardless of hover state. Newbies and experts alike have instant access to popular commands such as “Comment,” “Like” and “Hide.” There are no wordless icons and no hover states. The only menu option that involves hide/show is the “More” submenu at the end of the list of options. Here, a down-arrow clearly indicates that this is dropdown. As expected, it contains additional, less popular commands for linking or resharing entries.
Nice. This helps prove a good usability point. Thanks.