H6 Pop-Up Windows

H6 Pop-Up Windows

graphics/common.jpg Background

Some PROCESS FUNNELS (H1), CONTEXT-SENSITIVE HELP (H8), and EMBEDDED LINKS (K7) need to display information in addition to the current page, without taking visitors to another Web page. This pattern describes how pop-up windows can be used for this purpose.

graphics/common.jpg Problem

You need to show the customer extra information, while maintaining context and keeping the customer's Web browser on the same page.

Sometimes customers need additional information that is not on the current Web page, but at the same time they need to stay there. For example, you want customers to remain on the main path of a PROCESS FUNNEL (H1), but you also want them to read extra information that might be useful.

As another example, you want to use EMBEDDED LINKS (K7) to let your customers see potentially useful and interesting content on other sites. At the same time, however, you want to keep your customers on the same page, to maintain coherence in the text and to keep them on your site.

One solution is to use pop-up windows to create new browser windows, letting customers see other Web pages while keeping their original browser windows on the same page. However, too many pop-up windows can be confusing and overwhelming. In this section we describe some ideas for using pop-up windows.

Use Automatic Pop-Up Windows for Showing Unrelated Information When People Enter or Exit a Web Site

There are two kinds of pop-up windows: automatic and link based. Automatic pop-ups appear simply as a result of a customer's arrival at or departure from a Web site. These kinds of pop-up windows usually contain advertisements or surveys for improving the quality of a Web site.

Many people find advertisements in automatic pop-up windows annoying, but some Web sites have found success with them. One recent innovation is the pop-under advertisement, which places an advertisement pop-up window under the customer's browser window so that customers will not see the window until they close their browsers. If you want to show pop-up advertisements, there are many factors to consider, including usability, customer satisfaction, and business revenues. We cannot say for sure whether pop-up windows are good or bad for a Web site. This is something that has to be judged on a case-by-case basis.

Another use of pop-up windows is for surveying your customers, a powerful tool for understanding the needs of customers and how well the Web site is meeting those needs. Using a bit of JavaScript, you can randomly select customers so that only a few will be shown the pop-up survey. Figure H6.1 shows an example of a pop-up survey.

Figure H6.1. Use pop-up windows to keep the main browser window visible while displaying another page. Pop-up windows are useful for surveys and advertisements, and for showing extra information while maintaining a specific context. In this example, a survey window asks visitors to evaluate the usefulness and usability of the Web site.

(guir.berkeley.edu, May 18, 2002)


Use Link-Based Pop-Up Windows to Show Related Information in a New Window, While Maintaining Context

A link-based pop-up appears when customers click on a link designed to open a new window. Use link-based pop-ups with EMBEDDED LINKS (K7), EXTERNAL LINKS (K8), and PROCESS FUNNELS (H1) to display information related to the current page.

Figure H6.2 shows an example of how to use pop-up windows with EMBEDDED LINKS (K7). Clicking on the link opens a new window to the specified Web page, letting customers see and explore related information without having to leave the original Web site.

Figure H6.2. This magazine article has an embedded link to another Web site. The site opens a new Web browser window rather than going directly to that Web site, letting visitors continue reading the main article.

(www.java-pro.com, xml.apache.org, May 17, 2002)


Pop-up windows are especially useful for PROCESS FUNNELS (H1), like QUICK-FLOW CHECKOUT (F1) and SIGN-IN/NEW ACCOUNT (H2). Pop-up windows let customers see extra information, such as CONTEXT-SENSITIVE HELP (H8) or an answer to a FREQUENTLY ASKED QUESTION (H7), while keeping them in the funnel. Figure H6.3 shows how Dell uses pop-up windows to show extra details about a laptop computer, while not leading customers off the Web page where purchases are made.

Figure H6.3. Dell uses pop-up windows to show context-sensitive help in a process funnel, while maintaining context.

(www.dell.com, October 24, 2001)


Use Pop-Up Windows Sparingly

Minimize the number of automatic and link-based pop-up windows your Web site creates because they can quickly overwhelm and frustrate visitors.

Use automatic pop-ups when visitors first come to your site and when they leave. Also consider using cookies and PERSISTENT CUSTOMER SESSIONS (H5) so that people see your pop-up windows only once.

If you're using link-based pop-ups, you can reuse previously opened pop-up windows. This makes it easier for customers because only two browser windows are open at a time. You can do this with both JavaScript and plain links. The following JavaScript fragment is an example of how to create a new pop-up window, in this case a window from this book's Web site:

window.open ('http://designofsites.com', 'wnd') 

The part labeled 'wnd' is the internal name of this window. You can make this new pop-up window go to another site with the following fragment:

<A TARGET="wnd" HREF="http://anothersite.com">link</a> 

Alternatively, if the pop-up window 'wnd' does not already exist, this link will create a new pop-up window for you.

graphics/common.jpg Solution

Use automatic pop-up windows for showing unrelated information when customers enter or exit your Web site. Use link-based pop-up windows to show related information in a new window, while maintaining context. Minimize the use of pop-up windows.

Figure H6.4. Use pop-up windows to display extra information while still maintaining context.


graphics/common.jpg Consider These Other Patterns

Use link-based pop-up windows whenever you need to display information related to the current page, such as a FREQUENTLY ASKED QUESTION (H7) or CONTEXT-SENSITIVE HELP (H8), but do not want visitors to leave the current page. This is an issue in the PROCESS FUNNEL (H1), EMBEDDED LINKS (K7), and EXTERNAL LINKS (K8) patterns.

     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows