Improving The User Experience Of Your Website With Modal Windows
Tweet With new elements of design trending the web it’s no surprise a large portion of these aim towards enhancing the user experience. What better way to help create a more usable environment then to start by properly structuring the way your users interact with key aspects of your websites (i.e. the login process)? This is where the use of Modal Windows steps in.
These child windows help facilitate the connection between the parent application leaving room for a smoother work flow. That’s a pretty good reason to use one, but why else? Let’s find out!
Where to Use Modal Windows?
Modal windows improve the usability of your website by allowing the user to access a variety of areas on your site without having to load any new pages. You can also use them to turnover higher conversions on sign-up forms. For example, DesignReviver has a Questions and Answers community based on Qhub that allows anyone to ask questions without being registered.
However, whenever a user tries to ask a question without being registered a modal window automatically pops-up asking them to sign-up or continue as a guest. Point being that the users who weren’t planning on registering will consider it because of how “all-to-easy” the process seems.
Apart from sign-up forms, you can place your contact form within a modal window. This can be accomplished by setting up a link within your navigation menu (or anywhere else) that will point to a quick and easy contact form once the user clicks on it. Other common uses are log-in forms, alerts/warnings, videos, and photo galleries. All in all, modal windows create a bridge allowing information to move freely between you and your users.
Creating Your Own
Simple Modal ↓
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.
ColorBox ↓
ColorBox allows users to create a customized lightbox that is unique to their project. You’ll also be able to promote accessibility, W3C standards, and best practices.
Modalbox ↓
ModalBox is a JavaScript technique for creating modern modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs.
Fancybox ↓
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of a web page.
jQuery Dialog ↓
The jQuery Dialog plugin helps you structure components in a dialog window. You can customize the windows to your specification.
Livepipe UI ↓
LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible.
Prototype Window ↓
This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file, but it’s not mandatory.
jQuery Alert Dialogs ↓
These methods simulate a true modal dialog box. They will automatically re-position themselves if you resize the browser window (unlike many existing dialog/lightbox-style plugins). If you include the jQuery UI Draggable plugin, the dialogs can be moved by dragging their title bars. Everything you need to produce the dialogs in the demonstration is included in the download. They are completely customizable via CSS (which can make your apps look much more professional)
MochaUI ↓
MochaUI is a web applications user interface library built on the Mootools JavaScript framework. If you take a look at the demo you’ll find an interactive modal window. Take a look at the documentation and the Mocha framework.
Boxy ↓
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created.
What other techniques and plugins do you know of for developing modal windows?
Modal Design Showcase
DesignersCouch ↓
Versions ↓
Design Reviver Answers ↓
Behance Gallery ↓
Nasi Briyani Lounge ↓
Jango ↓
Vewzi ↓
Pixelmator ↓
Build With Me ↓
Zoo Tool ↓
Yorkdale ↓
Mac Heist ↓
Sales Force ↓
Gowalla ↓
Popscreen ↓
Veritocracy ↓
Kiehls ↓
Dishizzle ↓
Cnet ↓
Remix Jobs ↓
GrooveShark ↓
Pixelight Creative ↓
Accept-Ideas ↓
Iceberg ↓
Mail Chimp ↓
Your Turn To Talk
I hope you enjoyed this post and learned a thing or two about modal windows. Please let us know of any other techniques and plugins we might have missed. See you in the comment section ;)
About the author:
Joel Reyes is a web designer and developer with years of experience in the industry. He runs a development studio called Looney Designer, a design resource site at GrindSmart.com, and an a free file hosting site for designers, developers and creatives at ShareDen.com.
jump to the comment form ↓
May 12th, 2010
Kind of funny…
In the early days of webdesign, nearly everyone hated all those terrible popup windows. And look, now they’re cool! ;)
May 12th, 2010
I like using modal windows. Keeps things nice and simple.
However when a website is being viewed on a mobile device… the modal window is hard to find, especially for those websites that use modal windows as pop-ups when first visiting.
Yuck.
May 12th, 2010
@Marc: hehe well I think everyone still hates pop-ups, but I love modal windows (not to be mistaken with pop-ups) since those modal windows actually help the user perform specific tasks like to login or even for contact forms – all without refreshing the page. It can also be very useful for image galleries where bigger images open in a lightbox. ;)
@Jae Xavier: Very good point there, launching a modal window on an iPhone/iPod Touch is rarely a great experience (the iPad is much nicer for that but it’s a different story) I guess we should have alternatives to modal windows for mobile devices, maybe just loading another page with the same content or something like that.
May 12th, 2010
Using modal windows can definitely increase the usability of a website. But I think in the case of web applications, where there maybe long forms and consistency is an issue. Modals should be used sparingly and left for simple things like validation or alerts.
I would love hear additional thoughts on this.
May 12th, 2010
It sounds like everyone is in agreement. Modal windows serve as a usability shortcut when an entire page may be too much for the interaction or communication. As Peter says, I too find that using them sparingly is best, too many and the user is overwhelmed with functionality that is unnecessary in many cases. If you find yourself constantly looking to this as a solution you may want to look at the over all flow of the interaction being delivered. It may be that a number of shortcuts might actually fair better served together on a page.
May 12th, 2010
Thank you all for your comments!
@Peter
I agree with your comment. Modal windows can truly enhance the usability and even the appearance of your website, however if used in the wrong way (i.e. too many modal windows) it can do much more damage than good.
May 13th, 2010
@Jon
Agreed. Just wanted to start some kind of discussion ;)
I think modal windows are great, e.g. as you say for login screens.
Modal windows have some great advantages: they’re usually nice to see (compared to those ugly pop up windows), and indeed: performance.
Not sure about image galleries, as this seems to become a new kind of hype – which will probably die within a few years. Besides: imagine starting a photo blog with tons of galleries built with modal windows. What will happen within a few years, when the hype is over, and techniques for modal windows will not be developed or supported anymore?
I’m not a techie, so wondering how others think about this question…
May 13th, 2010
Are you sure they should be named *modal* windows? When I hear ‘modal’ I think of Vim’ UI, that is, a single window that can be set to several modes (say, the read mode or the edit mode). Such a modal UI could be interesting. I intensely hate pop-up windows.
May 13th, 2010
I really like modal dialog boxes for user interfaces. I personally like facebox.
May 13th, 2010
Wow i never thought about it :S
With modal forms you are focusing the attention and enhancing the user experience.
May 13th, 2010
Yep, It’s true… Modal Windows are definitely a revolution in User Experience. Thanks Joel for this nice post. As Jordan Walker said Facebook is best example of it.
May 13th, 2010
Will I miss these and other interactive designs if I select asp.net
May 17th, 2010
A quick question: how do these work in terms of accessiblity? Are they still accessible when using screen readers?
May 21st, 2010
@Davina: This was my first thought as well. As with the concerns about mobile browsers, there would have to be a graceful fallback to a simple page containing the same form, alert, etc. that would be accessible. I know a lot of work has been done with the jQuery UI library to make it accessible, might have to explore there a little bit.
May 21st, 2010
I have written about modal dialogs and accessibility on my site, and as part of the Drupal accessibility group.
Can a modal dialog be made to work properly for screen-reader users on the web?
http://zufelt.ca/article/Can-a.....on-the-web
Why Overlay should be disabled by default in all Drupal 7 profiles
http://groups.drupal.org/node/63123
May 21st, 2010
All of which is very lovely, but what about when your non-technical user (who doesn’t understand or care what a light-box or a modal window is) wants to get back to the page they were just viewing, and hit’s the browser’s Back button?
Don’t get me wrong, they have a place, and can be a very nice tool to add to a designer’s library of widgets, especially because they don’t require a whole new page just to convey a couple of lines of text for example, but be very careful when & where you use it, and how the window is designed.
Many of those modal/lightbox elements put the graphic design ahead of clear messaging. It’s imperative that the model window looks like something that has appeared ‘over’ the content, and that it has clear & prominent ‘Close’ calls to action, possible augmented by a ‘Cancel’ secondary call to action if it’s something like a login form (sorry, just having an ‘X’ graphic doesn’t cut it I’m afraid).
The ‘Facebook effect’ has helped this issue to a certain extent: a lot of users now understand that FB alerts appear ‘over the top’ of the current page, so if your site shares a demographic with FB’s, designing an alert modal window that has a passing resemblance to FB alerts (centred, with a rounded shadow like Boxy mentioned above) may solve some usability issues, for some users…
One potential workaround would involve adding an extra element (eg: #) to the page url when the window is triggered, so that hitting the Back button will just load the same page in its initial state, rather than taking the user back to the previous page.
But yeah, they’re very pretty. In the right place. ;)
May 30th, 2010
@Davina: This was my first thought as well. As with the concerns about mobile browsers, there would have to be a graceful fallback to a simple page containing the same form, alert, etc. that would be accessible. I know a lot of work has been done with the jQuery UI library to make it accessible, might have to explore there a little bit.
August 21st, 2010
I recently did some testing of a web app with candidates who were women of age 50 years plus. The prototype had some modal windows of various sizes. Most subjects would use the back button on the browser to make the larger ones go away, but had no problem with the smaller ones, and used the “Close” or other available actions in the modal windows to progress in their journeys.
As has been said above, using modal windows as warnings in validation or to give feedback on certain actions shouldn’t create problems if they’re relatively small, but making them too large, so they almost fill the browser viewport will inevitably have users hitting the browser back button and getting lost and annoyed.
Who Linked To This Post?
Share your thoughts, leave a comment!