Section 15.3. Popup

15.3. Popup

Balloon, Dialog, Hover, Popup, Transparent, Tooltip

Figure 15-5. Popup

15.3.1. Goal Story

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.

15.3.2. Problem

How can the user perform a quick task without distracting from the main flow?

15.3.3. Forces

• Users often need to make a quick change, which requires that they have some extra controls with which to interact.

• Users often need to perform a quick lookup, get further details about an object in the application, or just find some general information. This requires that extra information appear.

• Screen real estate is limited, and minor, quick changes don't warrant a major change to the user interface.

15.3.4. Solution

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, is 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 in length. The tooltip itself has a trendy new variant, a cartoonish balloon. For Progress Indicators (Chapter 14), a popular idiom is to use a small label in the corner with a message like "Saving . . . ." Figure 15-6 illustrates several popular styles.

Figure 15-6. Popup styles

Popup is suitable for particular situations:

You expect the task to be quick

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

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; it becomes visible, and then is destroyed upon close. With many Popups, there can be only one of its kind at any given time.

Popups are usually divs. To ensure that only one Popup of a particular kind can appear, you can ensure that Popups are always created at the time they are required and deleted on close. On opening, you just need to check whether the Popup already exists on the page. Alternatively, you can simply create the Popup on startup and toggle between showing and hiding itshow it when the user needs a Popup and hide it afterwards. The only catch here is that 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)

Used to produce a transparent feel.

zIndex

Used to place a Popup "in front of" the rest of the document. A solid (opacity=1) element will completely occlude everything that its zIndex is higher than.

visibility

Used to toggle whether the Popup is being shown.

Once the Popup is styled and is popping up at the right times, interaction proceeds as with any div elementthe Popup just happens to look different that most content. Often, the interaction is similar to that of a Portlet (see later in this chapter)i.e., each user action leads to an XMLHttpRequest Call (Chapter 6), with responses morphing the Popup.

15.3.5. Decisions

15.3.5.1. How will the Popup look?

The Popup's appearance is a compromise that 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 colors will also have an impact, and which color is the best depends on the content behind the Popup.

Here are some things to consider:

• Does the user need to see other page information while the Popup is present? If so, ensure that 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.

15.3.5.2. How will the user open and close the Popup?

There are two common approaches to opening the Popup:

• Clicking a button or an object related to the Popup content.

• Hovering over something for a while. Because this can happen quite often, it's more appropriate for a small, tooltip-style Popup.

There are several approaches to closing the Popup:

• Explicitly closing it with a button. Some Popups appear as desktop-like Popups, with an "X" on the top border of the window.

• Closing it when the interaction has come to a natural conclusione.g., 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, closing it when the cursor hovers away from the underlying object.

• Closing it upon a timeout. This can be frustrating as it reduces user control. It also requires you to determine whether 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.

15.3.6. Real-World Examples

15.3.6.1. JSCalc

Cameron Adams' JSCalc (http://www.themaninblue.com/experiment/JSCalc/) provides a Popup calculator (Figure 15-7). 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 then 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.

Figure 15-7. JSCalc

15.3.6.2. Flickr

Flickr (http://flickr.com) lets registered users add "notes" to anyone's photographs (Figure 15-8). A note initially appears as just a square outline over a region of the photo. When you hover over the note, its full text appears underneath. Creating a new note also uses a Popup effect to show a text field in which you can enter the note.

Figure 15-8. Flickr notes

15.3.6.3. Netflix

The Netflix Top 100 (http://www.netflix.com/Top100) 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 (Chapter 6). When you move the mouse away, the balloon disappears.

15.3.6.4. Hoversearch

HoverSearch (or "HoverSmack") (http://www.forgetfoo.com/?blogid=3436) 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. The results soon populate the Popup. The framework is capable of searching through different engines, including images, which are then shown in the Popup.

15.3.7. Code Example: JSCalc

Being a bookmarklet, JSCalc is compressed into one line and has been reformatted in the following example. 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 center of the document and has 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. It's 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 of it. An onblur event is therefore registered. The Popup then fades out and is eventually destroyed in a One-Second Spotlight-style (Chapter 16) effect.

   inp.onblur=function(e){ op(this.parentNode) }   function op(t){     //(Fades out and removes the calculator elements)   } 

15.3.8. Alternatives

15.3.8.1. Portlet

Portlet (see later) is another way to set up a parallel conversation. It differs from Popup in two ways: it's usually permanent or present for a long period of time, and it's usually not transparent. Because of their different characteristics, a Popup is more like a short detour, whereas a Portlet is like a completely parallel track.

15.3.8.2. Microlink

Microlink (see later) also opens up new content but mixes it directly on, as opposed to in front of, the existing content.

15.3.9. Related Patterns

15.3.9.1. Sprite

Sprite (see earlier) and Popup both appear "in front of" the rest of the document, but as the section "Related Patterns" in Sprite points out, their intent is different.

15.3.9.2. Drag-And-Drop

A Drag-And-Drop (see earlier) mechanism is a good thing for most Popups because it helps users reveal content that is underneath.

15.3.9.3. Slider

How transparent should the Popup be? The optimal value depends on the user's taste and the task he's working on. Thus, tie a Popup's opacity factor to a Slider (Chapter 14)ranging from "invisible" to "solid"for maximum flexibility.

15.3.10. Metaphor

Think of Terminator-style augmented reality, with a heads-up display helping you explore the world as you move through it.