Thursday, July 19, 2007

Pop-ups, dialogs, panels, oh my!

So I ran into a dilemma the other day when I needed to show content that had originally existed as tabs, in a pop-up browser window. It led me to thinking of how we might be able to do user interaction better than creating new browser windows for content. This then led me to an exploration of the different ways that we can temporarily display extra content or ask for user input.

Traditionally it was common to use a pop-up browser window to grab extra input from a user, such as log-in information or advanced or uncommon searches with multiple fields. With the advent of AJAX and more sophisticated JavaScript and DOM manipulation, the pop-up window has gone the way of the ghost for the most part. Some of the techniques that I have used recently include sidebar or panel areas of the browser, fly-out layers (ie: pop-up DIVs), modal dialogs, tabbed content and inline collapsible layers.

Sidebars
Google makes extensive use of sidebars in most of its applications, particularly in so called 'one page' applications where the user has a workspace (such as a map or document) and the panel provides a place for controls or user input based on that content. I have found that for maps especially, the panel interface is extremely valuable. One thing that Google does well and is becoming more commonplace, is creating collapsible sidebars that the user can easily close and open. Although no toolkit currently exists for performing this action, I did find this article on a step by step method of creating them. It would be somewhat easy to roll your own using script.aculo.us or YUI animation libraries after creating and placing the panel.

Flyouts
Flyouts can take on any number of forms and started with modest beginnings as the alt tags on images in websites. Now, they are a very effective method of providing extra information to the user about a specific object such as a place of interest on a map or an icon or widget. Another use that has come about recently are flyouts which do not depend on user interaction to activate them but remain on the page statically to give extra information about a thing or as a text bubble as seen on Jaiku. Flyouts are probably the most used and useful in mapping applications where keeping the map itself as uncluttered as possible is key but users also demand increasingly more information on the items they see on the map. Google again makes great use of flyouts in their mapping application for everything from the address of a business to displaying street view images. The key for making flyouts useful again is giving the user clear and easy control over when the pop-ups appear or the ability to collapse them easily when they want to unclutter their display. Finally, it is generally best to only allow the user the ability to have one flyout open at a time.

Dialogs
Dialogs, aka Pop-ups have seen varied usage in the time that I have been developing web-applications. I have generally stayed far away from the traditional browser window pop-ups as they have been exceedingly blocked by browsers as well as can be 'lost' by the user when clicking back to the main window (unless tricks are used to keep them active). The types of interaction typically leading to the use of dialogs can generally be handled better with the use of side-panels, tabbed content or even flyouts for simple user input. If the input is complex enough to not be reasonable in one of those containers, a new page is generally a better idea. The reasoning for this is you force the focus of the user on the input and can give them more meaningful help and error messages to get them through the input and back to whatever they were doing. When I have needed to use dialogs, I have found the YUI Panel to be quite good as it can be readily styled and made modal or not.

Tabbed Content
Finally, tabbed content is sort of a hybrid that can be used within any of these containers and is an effective way to give control to the user over what they see on the page. For example a map legend might be the first thing a new user wants to see on the page but as they get more comfortable with the application a more advanced widget such as a layer control might be what they want to see most often. It is important to consider that when using tabs the application should remember how the user left the application so they see it like that on their next visit. Again, the YUI interface provides a nice TabView control that I have used in designing past applications such as the iFactor StormCenter interface.

So in conclusion, while I'm no expert in User Interaction design I have found the above methods to be useful ways of conveying additional information or soliciting user input. If anyone has other ideas or suggestions I'd love to hear about them.

No comments: