Comments on: Improving The User Experience Of Your Website With Modal Windows http://spyrestudios.com/improving-the-user-experience-of-your-website-with-modal-windows/ Web-Design and Development Magazine Fri, 12 Aug 2011 08:09:18 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: dewex http://spyrestudios.com/improving-the-user-experience-of-your-website-with-modal-windows/#comment-20422 dewex Sat, 21 Aug 2010 22:11:07 +0000 http://spyrestudios.com/?p=8176#comment-20422 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. 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.

]]> By: Emily http://spyrestudios.com/improving-the-user-experience-of-your-website-with-modal-windows/#comment-17603 Emily Sun, 30 May 2010 23:47:26 +0000 http://spyrestudios.com/?p=8176#comment-17603 @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. @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.

]]> By: Barry http://spyrestudios.com/improving-the-user-experience-of-your-website-with-modal-windows/#comment-17272 Barry Fri, 21 May 2010 14:28:45 +0000 http://spyrestudios.com/?p=8176#comment-17272 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. ;) 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. ;)

]]> By: Everett Zufelt http://spyrestudios.com/improving-the-user-experience-of-your-website-with-modal-windows/#comment-17271 Everett Zufelt Fri, 21 May 2010 14:27:51 +0000 http://spyrestudios.com/?p=8176#comment-17271 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-modal-dialog-be-made-to-work-properly-for-screen-reader-users-on-the-web Why Overlay should be disabled by default in all Drupal 7 profiles http://groups.drupal.org/node/63123 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-modal-dialog-be-made-to-work-properly-for-screen-reader-users-on-the-web

Why Overlay should be disabled by default in all Drupal 7 profiles
http://groups.drupal.org/node/63123

]]> By: Shawn http://spyrestudios.com/improving-the-user-experience-of-your-website-with-modal-windows/#comment-17269 Shawn Fri, 21 May 2010 14:01:56 +0000 http://spyrestudios.com/?p=8176#comment-17269 @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. @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.

]]> By: Davina http://spyrestudios.com/improving-the-user-experience-of-your-website-with-modal-windows/#comment-17113 Davina Mon, 17 May 2010 10:50:57 +0000 http://spyrestudios.com/?p=8176#comment-17113 A quick question: how do these work in terms of accessiblity? Are they still accessible when using screen readers? A quick question: how do these work in terms of accessiblity? Are they still accessible when using screen readers?

]]> By: 140+ Fresh Categorized Articles for Web Designers and Developers | tripwire magazine http://spyrestudios.com/improving-the-user-experience-of-your-website-with-modal-windows/#comment-17037 140+ Fresh Categorized Articles for Web Designers and Developers | tripwire magazine Sat, 15 May 2010 07:27:48 +0000 http://spyrestudios.com/?p=8176#comment-17037 [...] Improving The User Experience Of Your Website With Modal Windows [...] [...] Improving The User Experience Of Your Website With Modal Windows [...]

]]> By: Jay Khatri http://spyrestudios.com/improving-the-user-experience-of-your-website-with-modal-windows/#comment-16991 Jay Khatri Thu, 13 May 2010 14:55:13 +0000 http://spyrestudios.com/?p=8176#comment-16991 Will I miss these and other interactive designs if I select asp.net Will I miss these and other interactive designs if I select asp.net

]]> By: Design Earth http://spyrestudios.com/improving-the-user-experience-of-your-website-with-modal-windows/#comment-16990 Design Earth Thu, 13 May 2010 14:44:39 +0000 http://spyrestudios.com/?p=8176#comment-16990 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. 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.

]]> By: Jonathan B http://spyrestudios.com/improving-the-user-experience-of-your-website-with-modal-windows/#comment-16988 Jonathan B Thu, 13 May 2010 14:26:35 +0000 http://spyrestudios.com/?p=8176#comment-16988 Wow i never thought about it :S With modal forms you are focusing the attention and enhancing the user experience. Wow i never thought about it :S
With modal forms you are focusing the attention and enhancing the user experience.

]]>