Modal boxes on a mobile environment?

11 Jul 2011 - 7:02pm
1 year ago
5 replies
3603 reads
amara
2011

Hello!

I'm working on a responsive website and I'm curious to know what is the current best practice is for modal boxes in mobile environments (in specific: smartphones). Does a modal box take away from the experience or enhance it? Thoughts?

Thanks!

Comments

11 Jul 2011 - 7:03pm
amara
2011

There definitely needs to be some research on this!

13 Jul 2011 - 8:06am
Fredrik Matheson
2005

iOS uses modal dialogs, in the form of iOS4 notifications (made more transparent in iOS5), popovers (iPad only) and action sheets.
http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html
Whether it adds or detracts to the experience depends on the context, as always.
On Wed, Jul 13, 2011 at 9:41 AM, amara <ader@habaneros.com> wrote:

Hello!

I'm working on a responsive website and I'm curious to know what is the current best practice is for modal boxes in mobile environments (in specific: smartphones). Does a modal box take away from the experience or enhance it? Thoughts?

Thanks!

13 Jul 2011 - 11:05am
dmitryn
2004

I would say that in most cases modal dialogs on a mobile device detract from the experience. Unless the information or choice represented by the modal dialog is both important and time-sensitive, I would avoid them.

This is the reason why iOS 5 has dispensed with modal alerts in favour of an Android-like "notifications center" experience (although a user can still revert to having modal alerts for individual apps).

There's some good content on when and how to use modal dialogs in a mobile context on the 4ourth mobile design patterns wiki:

http://4ourth.com/wiki/Confirmation
http://4ourth.com/wiki/Exit%20Guard
http://4ourth.com/wiki/Pop-Up

Dmitry

---
Dmitry Nekrasovski // Mobile UX Lead, OpenText // dmitryn.com // twitter.com/dmitryn
 

On Wed, Jul 13, 2011 at 9:25 AM, Fredrik Matheson <fredrik.matheson@gmail.com> wrote:

iOS uses modal dialogs, in the form of iOS4 notifications (made more transparent in iOS5), popovers (iPad only) and action sheets.
http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html [1]
Whether it adds or detracts to the experience depends on the context, as always.
On Wed, Jul 13, 2011 at 9:41 AM, amara <ader@habaneros.com [2]> wrote:

Hello!

I'm working on a responsive website and I'm curious to know what is the current best practice is for modal boxes in mobile environments (in specific: smartphones). Does a modal box take away from the experience or enhance it? Thoughts?

Thanks!

(
13 Jul 2011 - 10:05am
Danny Hope
2008

The red flag word, obviously, is "modal" - do you really need to prevent the person from taking any other action whilst the dialog is showing or might it be possible to achieve what you want in a less restrictive way?

13 Jul 2011 - 11:20am
mschraad
2010

...with the obvious and primary purpose of a modal/layer/pop being to keep the user in the current experience, the size of the screen is critical. Using a layer device that covers the entire screen really doesn't accomplish that goal of 'keeping them in the experience'... and is only marginally better than a full page refresh. The small screen of most handsets restrict how much you can present before you basically take over the entire display - or worse... for the user to scroll within the modal/layer/pop thing.

Syndicate content Get the feed