From Ajax Patterns

Evidence: 2/3

Tags: Balloon Dialog Hover Popup Transparent Tooltip

Contents 1 Goal Story 2 Problem 3 Forces 4 Decisions 4.1 How will the popup look? 4.2 How will the user open and close the Popup? 5 Real-World Examples 5.1 Flickr 5.2 JSCalc 5.3 NetFlix 5.4 Hoversearch 6 Code Examples 6.1 JSCalculator! 7 Alternatives 7.1 Portlet 7.2 Microlink 8 Related Patterns 8.1 Sprite 8.2 Drag-And-Drop 8.3 Slider 9 Visual Metaphor 10 Want to Know More?

Ajax/Javascript Programming and Usability in "Ajax Design Patterns" Book

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.

Problem

Forces

• 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 These quick tasks do not warrant a major change to the user-interface.

Decisions

How will the popup look?

How will the user open and close the Popup?

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 Ajaxian application, 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.

Real-World Examples

Flickr

Flickr lets registered users add "notes" to anyone's photographs. 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.

JSCalc

Cameron Adams' JSCalc provides a popup calculator. 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.

NetFlix

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

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.

Code Examples

JSCalculator!

Being a bookmarket, the JSCalculator 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 JSC1(){
   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.style.position='absolute'
 dvs.style.top='50%'
 dvs.style.left='50%'
 dvs.style.width='300px'
 dvs.style.height='60px'
 ...
 dvs.style.opacity='0.95'
 dvs.style.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. ***
 }

Alternatives

Portlet

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 Popup is more like a short detour, whereas a Portlet is like a completely parallel track.

Microlink

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

Related Patterns

Sprite

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.

Drag-And-Drop

A Drag-And-Drop mechanism is a good thing for most Popups, to help users reveal content underneath. good one for testing

Slider

The degree of transparence is often a matter of personal taste and also depends on what the user's working on. Include a Slider to let the user explore opacity along the spectrum from completely transparent to completely opaque.

Visual Metaphor

Opening up a Popup is like throwing a menu on top of a book your friend's reading. They can move it aside and keep reading, but they probably won't.

Want to Know More?

In my application i am getting the window back to the popup accessed in IE but not in other browsers like mozilla. how can i solve this?