AjaxPatterns
Balloon, Dialog, Hover, Popup, Transparent, Tooltip
Frank is monitoring the factory equipment online and notices the T1000 machine is acting a little funny. He clicks on the icon, holds the mouse button down for a second, and up pops an information sheet about the T1000 model. The sheet is partially transparent and overlayed on top of a region of the plant diagram.
Users often need to make a quick change, which requires some extra controls to interact with.
Users often need to perform a quick lookup, to get further details about an object in the application, or just to find some general information. This requires extra information to appear.
Screen real estate is limited and minor quick changes don't warrant a major change to the user-interface.
Support quick tasks and lookups with transient Popups, blocks of content that appear "in front of" the standard content. Usually, the content is partially transparent, about the size of a standard dialog, and hovers above the page until the user explicitly closes it. A more subtle variant is the tooltip, a solid block usually containing content between one word and a paragraph long. The tooltip itself has a trendy new variant, a cartoonish balloon. For “Progress Indicator”s, a popular idiom is to use a small label in the corner, with a message like "Saving...". Figure 1.68, “Popup Styles” illustrates several popular styles.
Popup is suitable for a particular situation:
You expect the task to be quick, because the Popup is limited in space and its transparent appearance makes it difficult to work with for a long time.
You expect the user to perform the task immediately:, because the rest of the document is partially blocked, making it difficult to work with while the Popup is around.
Often, a Popup has no permanent state; the user needs it becomes visible and destroyed upon close. With many Popups, there can be only one of its kind at any time.
Popups are usually divs.To ensure only one of its kind can appear, you can ensure the Popups are always created when the Popup is required and deleted on close. On opening, you just need to check if the Popup already exists on the page. Alternatively, you can simply create the Popup on startup and toggle between showing and hiding it - show it when the user needs a Popup and hide it afterwards. The only catch here is the state won't be cleared, and often it's more effective to treat each Popup as a new entity.
The following CSS styles are often useful for creating a Popup.
opacity (alpha filter in IE) is used to produce a transparent feel.
zIndex is used to place it "in front of" the rest of the document. A solid (opacity=1) element will complete occlude everything else when its zIndex is higher.
visibility can be used to toggle whether the Popup's being shown or not.
Once the Popup is styled and popping up at the right times, interaction proceeds as with any div element - the Popup just happens to look different to most content. Often, the interaction is similar to that of a “Portlet” - each user action leads to an “XMLHttpRequest Call”, with responses morphing the Popup.
The Popup's appearance is a compromise which allows you to present some different content without losing the original content. There's a tension between ease of Popup interaction and ease of comprehension and interaction with the rest of the page. Opacity and size will improve interaction with the Popup, but at the expense of the rest of the display. Different colours will also have an impact, and the best colour depends on what content lies behind the Popup.
Things to consider:
Does the user need to see other page information while the Popup is present? If so, ensure the Popup doesn't block it.
How long will the Popup be present? If it will be a long time, consider making it less intrusive.
There are two common approaches to opening the Popup:
Click a button or an object related to the Popup content.
Hover over something for a while. Because this can happen quite often, it's more appropriate for a small, tooltip-style, Popup.
There are a few approaches to closing the Popup:
Explicitly close it with a button. Some Popups appear as desktop-like Popups, with an "X" on the top border of the window.
Close it when the interaction has come to a natural conclusion, such as a user submitting a form. In an Ajax App, the results of submitting it will soon be visible anyway, so there's still ample feedback.
If the Popup was initiated with a hover event, close it when the cursor hovers away from the underlying object.
Close it upon a timeout. This can be frustrating as it reduces user control, and you need to determine if the user is in the middle of interacting with the Popup. If you use a timeout, consider providing a way to explicitly close it too.
Cameron Adams' JSCalc provides a Popup calculator (Figure 1.69, “JSCalc”). You can use it while surfing on any site, because the calculator is actually a "bookmarklet" - a small Javascript program which you add as a bookmark, and can then be run by selecting it like a regular bookmark. The calculator appears as a grey, partially transparent display, centered in front of the current page. You can type in equations, and when you eventually click on the rest of the page, the display fades away.
Flickr lets registered users add "notes" to anyone's photographs (Figure 1.70, “Flickr Notes”). A note initially appears as just a square outline over a region over the photo. When you hover over it, the full text of the note appears underneath. Creating a new note also uses a Popup effect to show a text field where you can enter the note.
The NetFlix Top 100 ranks films by all-time popularity (Mystic River is first right now, in case you're wondering). When you hover the mouse over a title, a speech balloon appears with a photo and summary. The effect is achieved with an “XMLHttpRequest Call”. When you move the mouse away, the balloon disappears.
HoverSearch (or "HoverSmack") is a Popup search. When you click on a hyperlink connected to an appropriate script, a transparent Popup appears and starts searching for a term, with the results soon populated in the Popup. The framework is capable of searching through different engines, including images, which are shown in the Popup.
Being a bookmarket, JSCalc is compressed into one line and has been reformatted below. A div holds most of the calculator display and is appended to the page body. Since all pages have a body, the bookmarklet will work on any web page.
function JSC(){
var d=document
var b=d.getElementsByTagName('body')[0]
var dv=d.createElement('div')
...
b.appendChild(dv)
...
}
The calculator is positioned in the centre of the document, with a slightly transparent opacity.
dvs.position='absolute'
dvs.top='50%'
dvs.left='50%'
dvs.width='300px'
dvs.height='60px'
...
dvs.opacity='0.95'
dvs.backgroundColor='#CCC'
Inside the div is a standard text input, also absolutely positioned on the page. Its given initial focus and registered with an onkeypress handler to track the calculation.
var inp=d.createElement('input')
...
inp.focus()
inp.onkeypress=function(e){
...
}
The Popup finishes when the user clicks anywhere outside it. An onblur event is there registered. The Popup then fades out and is eventually destroyed, in a “One-Second Spotlight”-style effect.
inp.onblur=function(e){ op(this.parentNode) }
function op(t){
(Fades out and removes the calculator elements)
}
“Portlet” is another way to set up a parallel conversation. It differs in two ways: (a) it's usually permanent or present for a long period of time; (b) it's usually not transparent. Because of their different characteristics, a “Portlet” is more like a short detour, whereas a “Portlet” is like a completely parallel track.
“Microlink” also opens up new content, but mixes it directly on, as opposed to in front of, the existing content.
“Sprite” and Popup both appear "in front of" the rest of the document, but as the Related Patterns section of “Sprite” points out, their intent is different.
A “Drag-And-Drop” mechanism is a good thing for most Popups, to help users reveal content underneath.