Environmentally Friendlier Pop-ups

Old fossil Web1.0 technologies (such as pop-ups) continue to pollute our browsing environment and are hampering progressive and sustainable navigation.

So, in one of my previous blogs I declared “War on Pop-Up Pollution“. In this issue I look at some alternative techniques to “display information within information”.

Why Pop-ups Are Evil

Forced Consumption’¦

According to some usability experts pop-ups are not the problem. It is the forcing of them on your users without telling them. I agree, but the temptation is too much for some designers and developers- let’s just end the addiction and get rid of them altogether.

Psychological Damage’¦

Years of preemptive pop-up windows have conditioned users to immediately close windows when they open. I call this “Unpopupular Syndrome”, or ‘US’ for short.

Fragmented Navigation’¦

Pop-ups are a bit like supermarkets- you go there to buy milk and bread, but due to their clever distractions and ever changing layouts (which they do deliberately to orientate you to new products) – you end up buying chocolate and icecream instead, get home and then remember that you didn’t get the flippin’ milk and bread. This is really annoying.

Pop-ups Are Eco-terrorists’¦

Security concerns have made people install counter pop-up terrorism software (and browsers) to include pop-up blocking options. These may even block “friendly pop-ups”.

Google Was Evil’¦

According to Demystifying Usability Google hijacked the pop-up as a form of web advertising- “Google’s text advertising (right column block short phrase with a link) wiped out the pop-up since the click through rates for text based advertising (or contextual advertising) were higher”.

So Everyone Else Wanted to be Evil Too’¦

Thanks to greedy advertisers forcing automated pop-ups onto us for almost every site visited, most modern browsers and search engine toolbars these days use a pop-up blocker (including the Google and Yahoo toolbars, and the newer versions of Internet Explorer and Firefox).

Pop-ups That Aren’t Pop-ups

A confession, the new pop-ups are actually pop-ups in drag’¦

The trick is that through fancy new uses of web technologies we can do them a lot smarter, laugh off the pop-up blockers, make them look funkier and keep our weary web travellers on the yellow brick road.

Link to a New Page

Sounds simple doesn’t it? Many pop-ups (and their alternatives) are unnecessary in the first place. Why not simply link to the content in a new page? (and without opening a new window). However, if the user is in the middle of an important taskflow (such as a wizard), you do need to save what they’ve done so far and then clearly give them a way back into the taskflow.

• Good: Better for usability and accessibility.
• Bad: A flatter more linear experience. Not very whizzy.

The Slider

A layer which slides from the bottom of the page to display the related content. The user can then choose to keep browsing the current page and leave the slider open (e.g for a guide or help text), or close it and continue.

• Good: Can be user initiated. Uses full width of the browser window. User can keep on keeping on.
• Bad: Possible accessibility issues for screen readers. Tricky to get working across browsers.

In-Window ‘Pop-up’

Much of what can be done with new windows can also be done with “In-window” pop-ups. This can look just like a pop-up, but is actually a layer on top of the current screen which locks the originating ‘layer’ underneath it. If using this technique then it’s also preferable to add visual cues (such as darkening the background layer) to help the user focus on the ‘virtual pop-up’.

• Good: Suited to viewing large chunks of content, or edge-cases for taskflows.
• Bad: Possible accessibility issues for screen readers.

MouseOver

This is a contextual box or bubble which displays when the user hovers over a link or icon (or any other element) to display additional information about the element.

• Good: Keeps the user on the current page.
• Bad: Breaks the simple rule that a hyperlink should look and dance like a link. Suited only to small chunks of content.

Reveal then Hide

This uses JavaScript to create a new layer with the content of the document. If JavaScript isn’t used it simply links to the page instead. DOMInclude is a library that allows you to add inline dynamic includes of content rather than using window pop-ups.

• Good: User initiated. Easy to use.
• Bad: Suited mainly to small chunks of content, but it can use a scrollbar if there’s no other option. Possible accessibility issues for screen readers.

I have no doubt the above pop-up alternatives are not perfect and have some usability issues. These are emerging technologies and techniques which we need to test drive in the real world.

The key here is to:

• Research the current/potential users of your system.
• Choose what you consider the most appropriate pop-up alternative for your users tasks/needs/expectations.
• Prototype it.
• Do usability testing!