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?
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?
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.
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.