Modal boxes on a mobile environment?

11 Jul 2011 - 6:02pm
1 year ago
6 replies
6401 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 - 6:03pm
amara
2011

There definitely needs to be some research on this!

13 Jul 2011 - 7: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 - 10: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 - 9: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 - 10: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.

15 Aug 2013 - 9:43am
kbrowning
2012

You can do both.  Have the modal for the desktop experience and then for mobile, use a full-page version.  That full-page version of the form can also be helpful fallback for alternative flows where maybe someone needs to log in (or create an account) before proceeding to inputs required on the modal.

Syndicate content Get the feed