It is ironic that it took web UIs so long to discover the elegance and simplicity of context. Since its dawn, HTML lacked the sophisticated widgets that are present on the desktop and web UIs were always considered more primitive and slow. Contextual, AJAX-based UIs actually seem faster because they do not reveal all possible choices to the user. Instead they focus on surfacing just the bits that are necessary and then surfacing more based on user gestures.
A good example of context-based UIs can be found in modern video players. The controls in these apps are hidden until the user moves the mouse over the player. Depicted below is the player from Vimeo.
Another typical element of contextual UI is modal DHTML dialogs. Regular modal dialogs are annoying to the user, but the modal DHTML ones work great because they bring the actions into the spotlight. For example, the dialog below comes up when the user clicks on Embed option in the screen above.
Note the contextual options in the screen above. The user can either preview the video or customize its look. Neither of these options are required so they appear as closed off toggles. If the user decides to explore the option, the toggle simply expands as shown below.
Another important breakthrough in the contextual UI approach is the realization that function is more important than design. The famous Apple mantra that design is the function is true, but not everyone can design like Apple. Lots of web sites in the nineties ended up with designs that were overwhelming and needlessly flashy. Those designs paid more attention to colors and forms than to the function. The new UIs are different, because a lot of them are purposely plain. They favor CSS over images, and focus on function and context instead of knock-out looks.
Lots of companies got the context bug. Flickr, Digg, and 37 Signals are just a few that use contextual interfaces. Our next example comes from the literary social network Shelfari, which developed a contextual UI for interacting with individual books. The remarkable thing about this UI is that it violates a lot of classic principles yet it succeeds in delivering the necessary functions in a contextual and compact way.
When the user mouses over a book, a contextual popup comes up containing information about the book and a set of associated actions. Part of the popup is a button/menu (sort of like a button and combo box) widget that allows the user to provide information about what he or she did with the book. The first thing to note is that combination of a button in a menu is not standard, yet it makes sense because it saves a click for the most important action. Secondly, the menu is effectively a popup within a popup, which is a big no-no in the classic world, but works well in this context. The elements of the menu are not buttons but check boxes, which allow multiple selection - another violation of classic user interface elements, but which works very well in this context. What is remarkable is how intuitive this gadget is - you are interacting with it in the context of a book and each choice is simple and clear.Such clarity and simplicity was never present in the old interfaces. Clearly, this new approach to UIs is great, and early adopters are loving it. But will it cross over to the mainstream?
