Motive [Home].Glossary.

Guides

The Motive Web Design Glossary

pop-up, pop-under windows

A pop-up window is a new browser window created (launched or opened), either by the user clicking a button/link, or automatically: when a webpage is first viewed (loaded) or is linked away from (unloaded).

Based on the negative response to new windows that obscure content, web-marketers have also introduced a less intrusive variation. A pop-under is first opened, then moved behind the content window. The new window is then only visible if the user systematically closes content windows before quitting/closing their browser, or if the content windows do not fill the screen.

Although pop-up windows have been overused, they can be an effective way to display help information for web-based applications, such as online stores―support information can be displayed alongside the webpage it applies to.

Creating pop-up windows

Validation and target attribute

The target attribute of the <a> element is deprecated, and will not validate against HTML 4.01 Strict and XHTML 1.0 Strict doctypes (or any future specification).

X(HTML) pop-up windows

A new browser window is opened in X(HTML) by adding a target attribute to a link (anchor), for example:

<a href="index.html" target="windowName"> Glossary index </a>

The value of the target attribute, in this case windowName, can be assigned any value.

Links assigned the same target value will open in the same browser window rather than create additional windows. The target value (or ‘name’) of the new window is not visible to the user.

<a href="index.php" target="example">Glossary index</a>
Glossary index
<a href="usable.php" target="example">Usability (definition)</a>
Usability (definition)

X(HTML) pop-up: Code and corresponding links for opening two separate webpages in the window example. Depending on the browser, the new window may not be brought to the front if the target value is reused―content will be refreshed, but the new window will remain behind the parent window.

JavaScript pop-up windows

Web-marketers and Flash designers often create new windows using JavaScript. The advantages of using JavaScript include:

JavaScript pop-up window gotchas

Browsers differ in their behaviour when linking to a new window, once opened. Some will bring it to the front of the parent window, and other browsers will only reload its content. To ensure that focus returns to the pop-up: check whether it is already open and, if it is, first close and then (re)open the window.

Due to security issues, a new window can only be closed:

Common reasons for opening new windows

Opening a new window often reflects the author’s desire to control the user experience.

Visual design

Using JavaScript to open a new window enables greater control of content presentation.

Opening Flash elements in a new window may signal that conventional, HTML modes of navigation no longer apply.

Flash elements are often designed to non-standard dimensions/proportions and may be more aesthetically pleasing in a customised browser window. In addition, opening Flash elements in a new window may be effective (if unintended) means of signalling to the user that conventional (HTML) modes of navigation no longer apply, for example;

Linking to external websites

Links to external websites can be created so that they automatically open in a new window. In the mind of the author/business owner, the user will:

  1. Come to their website.
  2. Follow a link to an external website (which opens in a new window).
  3. Read the relevant information in the external website.
  4. Close the new window.
  5. Continue to browse the original website.

This view of how people use the web is typically held by those who are familiar with opening new windows (or tabs) when browsing; or those with high expectations as to the significance of their website. If the later is indeed the case, and a website has attained a hallowed status, it begs the questions:

Linking to external websites from within the text of a webpage often arises from an informal or discussion-based approach to content creation, exemplified by bulletin boards and online journals (blogs). These types of content often reference online sources, such as tutorials, related articles or referring blog entries. In many ways, this content it is similar to a search engine results page—an entry-point to content rather than a destination.

How web browsers behave when a new window is opened varies. However people are always familiar with how the [Back] button should work. Assuming that a person is part-way through completing a task, typical browsing behaviour is to link to an external website – browse the content – and then use [Back] button to go ‘back to where they were before’.

Automatically opening a link in a new window ‘breaks’ the [Back] button. When ‘things stop working’, and especially when even the [Back] button doesn’t seem to work, less-experienced people will often close their web browser completely and ‘start over again’. This can have a significant impact on the liklihood of the person returning to your website, as they may need to complete the series of steps that led them to your website in the first place: enter keywords into a search engine; page through results; navigate your website, etc.

Linking to non-web documents

Linking to non-web content formats such as PDF, Word or Excel files can cause ‘interface confusion’: although (at least in Internet Explorer) the document is displayed inside a browser window, the user cannot interact using the standard browser controls. For example, if linking to a PDF, the Back and Forward buttons do not page through the document, the browser Text Size option will not resize the text of the PDF, etc.

Users may also revert to behaviours commensurate with the application they would normally use to create or edit the document. For example, if linked to a Word document, users may edit text and Save the document (believing the changes have been made to the document on the server, rather than to the copy they have downloaded). They may also close the document when they have finished reading—not intending to quit the browser.

When linking to non-web content formats, usability advocate Jacob Neilsen recommends:

  • [Opening] a new browser window.
  • [Warning] users in advance that a new window will appear.
  • [Removing] the browser chrome (such as the Back button) from the new window. [1]

In addition, making the new window smaller than the parent window will:

Opening non-native web format files in a new window

Note that some file types cannot be opened in a new window by all browsers. With web-native file formats such as GIF and JPEG (image file types) it is possible to link directly to a file using the same method as linking to a webpage. Even without the context of an HTML document, the browser recognises the file type and displays the image. This not the case with PDF files.

Using Internet Explorer (IE), although the PDF appears to have been opened by the browser, in reality a separate PDF-reader program is opened inside the browser window. If the browser does not include the PDF-reader plug-in, then a blank window is opened and the PDF may be downloaded instead.

Help

Pop-up windows can also be used to provide information to support user understanding or interaction. For example, to provide a key to symbols or instructions on how to use a web service.

When providing help, consider whether the supporting information would be best displayed in a new window, or if providing help inline may be more appropriate. For example, a user guide may benefit from diagrams and explanation that would impede interaction if shown inline, while indicating required form fields is best provided on the form itself.

Usability: Why pop-up windows frustrate users

Pop-up windows have been over-used, to the point that contemporary browsers (such as Firefox), have built-in pop-up window content blockers.

Mass practice: Google doesn’t…

Opening a link in the same window matches the (baseline) expectation that a person has of ‘how the web works’. Opening a link in a new window doesn’t happen all of the time - some sites do it - and some don’t. In terms of mass practice, a link opening in the same window is more common than opening a link in a new window.

Or to put it a another way, Google doesn’t automatically open links in a new window - and it’s entirely about linking away to different websites.

Running interference

To place banner ads in front of users, pop-up windows are often automatically opened either when a user links to- or away from- a content webpage. The user has to click the content webpage or close the new window before they can continue reading.

Breaking the Back button

…the path the user has followed is severed …

The path the user has followed, their history, is severed at the point that a new window is opened. Depending on the browser and platform, it may not be apparent that a new window has been opened. The user simply finds that they are unable to use the Back button to retrace their steps.

Usurping control

JavaScript can be used to open new windows without the browser toolbar. Removing visible access to options such as ‘add to Favorites’ and ‘Print’ requires the user to modify their normal behaviour to complete a common task.

Most browsers enable the user to control where linked webpages should be displayed; in the current window (the default behaviour) or, using a contextual menu, in a new window or new tab. Both the X(HTML) and JavaScript methods remove this control, or ‘hi-jack’ the user-experience.

Broken links

Without JavaScript the link is broken.

If a user has disabled JavaScript and the webpage has not been coded to provide a suitable alternative, they will be unable to link to the content. Without JavaScript the link is, in effect, broken. Search engines may also be unable to follow links that rely on JavaScript and consequently will not index content opened in new windows.

Common web-authoring tools such as Dreamweaver are also unable to detect broken links when JavaScript is the only method used to link webpages.

Device dependence

The smaller screens used on personal digital assistants (PDA) and cell phones limit the utility of browsing in multiple windows. It may not be possible on such devices to open a new window. An interface that relies on new windows will not work if accessed using these technologies.

Macintosh and Windows interface treatment of new browser windows

How an operating system browser signals to a user that a new window has been opened may be the root cause of many of the usability and accessibility issues associated with pop-ups.

In the Macintosh operating system, new windows are typically offset from the parent window. The parent window can easily be clicked to be returned to the front.

In the Windows operating system, the new window typically fills the screen, hiding the launching (parent) window. The only visible cue that a new window has been opened is the addition of a tab to the Start Menu at the bottom of the screen.

Mac vs Windows interface handling of popup windows

Comparing Macintosh OS X (left) with Windows 2000 interfaces when a new browser window is opened. In Windows, the only visible indication that a new window has been opened may be an additional tab in the Start menu (detail).

Users may not know to click on the tabs in the Start menu to move between browser windows and may also have launched a number of new windows, from which they must now choose to ‘reconnect’ their path. Many users will simply close all the open windows and begin again.

Related terms: banner ad, browser, Flash, interstitial, mass practice, JavaScript, splash page.

 

Motive Web Design Glossary Trivia