The Modal Window Debate

chrome advert

The modal window is a familiar feature for all web users, and they vary massively in style and application, but is there a better way to avoid the issues they can often cause?

All web users are used to the modal popup or ‘lightbox’ window to display related content without linking away, they give a practical option for reducing clutter on a page and providing detail where needed. But is there a better way? There are many common issues and display bugs that cause problems with popup windows, they have origins the ‘old web’ way of thinking and can even break the user experience flow. Here I want to elaborate these and discuss alternatives.

Why drop the Modal?

Lets begin with its place within the screen, a modal window sits above a dark shadow layer that covers the main site body, and floats centrally with a thinner width box to display content. This takes no account of vertical height, with a popup sometimes having more content that extends beyond the page height and including its own scrollbar, a messy display. The width is also an issue for smaller screens, as either a fixed width or percentage of the screen, they display awfully on tablets and phones and can sometimes become impossible to close. This is not to say popups can’t display well on mobile, such as javascript alert boxes, but the browser doesn’t know it is a popup, it’s an illusion for users due to its CSS-based construction. Most browsers aim to block popups to prevent spamming and they would be a bad inclusion in a modern website, so why are designers trying to emulate them with modal windows?

The notion of being outdated for modern sites is a doubly relevant one for user experience. Modern applications are becoming faster and more intuitive towards displaying minimal content but all the same functionality. Using various clever UI menus and tabs a vast amount of information can quickly be accessed with a touch/hover gesture and folded away the same. This means users can see all information on one page to view comparisons or make decisions, whereas popup boxes involve disabling the main page, browsing the window content, then returning each time. Surely this slower process is rapidly becoming outdated?

JIRA modal window

A good use of modal window in JIRA

New Options

So what are our alternatives? Many cool jQuery and CSS motion effects make foldout and expanding content attractive and logical within a program. Spotify’s new in-browser player uses an example of layered display which enables jumping between pages with a clear navigation, there are cool flyout menus and accordian displays to consider, all of which enable to same function of modal windows without some of the key flaws.

Spotify browser

The ‘layered’ view in Spotify browser app

A point to consider, which was debated during a recent scoping meeting for a potential client within SSA, was about the aims of the page and site itself. Would users need to refer to main page and modal content at once? Would users suffer from a reduced page width to allow indented content? Despite the wider variety of choices and implementations now available, a design choice should remain user focused rather than based on the whims of an exciting motions effect.

Best Modal Tips

So if the modal window is your best bet, there are definitely some best practices to enact. Fix the background when modal is open, this prevents user confusion as to a double scrolling effect. Fix the height of your modal to a sensible common amount (say around 600-650px) and make content scrollable within, this avoids that page overflow issue. Give a clear close button, perhaps even a simple clicking of the dark window background to return, and try not to give any content that could create a ‘real’ popup on the page to avoid confusion. Keep all entered content saved so nothing is lost if user needs to switch between main page view and popup, this again should avoid an ‘are you sure’ warning. Fade and slide effects are only likely to enhance the user understanding and expectations, but a consideration should be kept for that balance between usability and aesthetic. A good piece of web design shouldn’t be noticed by its satisfied users.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s