A guide to modal windows and mobile design

 

Who do you design for? Is your end user a mobile centric startup, a desktop heavy corporation, a regular consumer or a store clerk? How old is your typical user, what do they do with your app and when do they need to access it?

If developers want their app, tool or website to be a success, their target audience should always be their first consideration. From the wireframe to the finished product, it’s absolutely essential to keep your end user in mind throughout the process. Keep asking “under what circumstances will they use the app?”; “from what type of device?” “what do they need from it?”.

Certain UI elements are great in certain situations, but can be less than helpful in others. Modal windows are a good example here. They offer a perfect solution to specific design situations, yet in other contexts can be a real failure. So, how and when should you use them? We’ll look at this issue in more detail below, but the most important thing to consider when using modal windows are your users.

Double glazing

A modal window is a little like double glazing - quite simply, it’s one window that sits on top of another, without getting rid of the first. Technically speaking it’s a little more complicated than that. Modal windows are typically boxes which contain information relevant to the current page but which don’t require the user to leave the page they’re on to view that information.

Modal windows usually appear in the center of the user’s screen and disable the functionality of the rest of the page. They grab the reader’s attention to inform them of an issue relating to the page. To ensure the reader notices the window, web designers generally blur out the page behind the modal box. Users can get rid of the notification by either clicking outside the window, pressing the enter key or closing the window using a ‘close’ icon which normally appears in the top right hand corner.

Why would you use one? There’s a variety of reasons you’d introduce a modal box to your design:

• Images and videos - so the user doesn’t have to go to a new page to see the photo or film you’re discussing.

• Contact forms - meaning visitors to your website don’t have to leave the page they’re on.

• Sign up/login pages - allowing faster access from the page the user is viewing.

• Alerts or notices - for example, to let them know a download has begun.

• Tips, help elements and search boxes to make site navigation faster.

• PDFs - so users can avoid downloading the document or leaving the main page.

Modal win-do, modal win-don’t

As we’ve just seen, using a modal window has a lot of benefits. They save users from the hassle of loading new pages when they want to find out more information. They also offer improvements to the general usability of a page and they save you space - if you want to avoid filling a window with large heavy elements, you can contain it within modal windows.

However, modal windows aren't always appropriate. If overused, modal windows interrupt the user from what they’re doing and are likely to cause annoyance - especially if they pop up automatically. It’s also important to remember that most people dismiss dialog boxes without reading them - it’s become an almost instinctive reaction to anything which is perceived as a pop up, meaning the information you want to convey may well not be read. Finally, modal windows tend to pose major UX problems on mobile devices.

Modal windows in a mobile first world

Put bluntly, modal windows on a mobile screen are not great UI features. Given the physical dimensions of most pocket-sized devices, modal windows rarely display well.

• Because a modal window sits on top another window, the information displayed is already smaller in size - on a 3 inch mobile screen this just doesn’t work

• The modal window will have to take up almost all the space available on the device’s screen, meaning users may confusedly think they’ve been taken to a new page

• You might have to include unwieldy elements such as scroll boxes on the side of the modal window which don’t feel natural on a touchscreen

Now, as we pointed out above, as a developer you should know your audience. If they’re most likely to view your design from a desktop or laptop, modal windows can be a really useful UX feature. On the other hand, you might want to look at alternatives for the mobile end user - either by containing information in a new page, or by using a different UI option.

What we recommend

Whether you’re working with a client who’s particularly keen on modal windows or your designer has included modal windows for your webpage forgetting that many users will view the site from a mobile, it’s worth bearing in mind that there are always UI alternatives. Importantly, these alternative options often convey information just as well as a modal window. At Infragistics we’ve developed a range of widgets, including slide tabs, overlay and slide menus which offer substitute methods of displaying additional information.

Whatever the UI features you go for, remember the golden rule of design - put the user’s needs at the centre. Once that’s in place, everything else will follow.

Try our jQuery HTML5 controls for your web apps and take immediate advantage of their stunning data visualization capabilities. Download Free Trial today or contact us.