Ideas X Close

{{ category.name }} {{ article.publishedDate | date:'MM.dd.yy' }} {{ author.name.first }} {{ author.name.last }} {{ article.minutesToRead }} min read {{ article.alternateText }}

{{ article.title }}

BLOG

Modal on Mobile

February 12, 2015 / By Chris Wigley

Subscribe

I recently read an article discussing the transition of a call-to-action button that animates into a modal dialog, or a box that forces the user to interact with it before they can go back to whatever parent application they were using. Modal windows are very common. Twitter, for example, uses a modal window for tweeting:

Modal Window on Twitter

Modal windows are used either for:

  • Interruption – Forcing the user to make a decision or complete a task at an important part of their workflow.
  • Feedback or Correction – Confirming decisions. E.g., “are you sure?” moment.
  • Deep Dive – Focusing the user on a single piece of content, be it an article or a video.

The demo included in the article is intuitive and engaging, and I appreciated the natural, contextual clue of a morph transition. And on desktop and larger portable devices, everything looks fine.

It wasn’t until I opened the demo on a smaller device (e.g. iPhone) that I noticed a problem: the close button. An unfortunate, opaque distracting undertone hovers over this clean and modern design. Take a minute to interact with the demo, ideally on a smaller handheld device, to see just what I mean.

So, this got me thinking.
Except for my obstinate 8-year old, people read from top to bottom; some left to right, others right to left. No one reads bottom to top (well, maybe Billy Crystal).

Web pages load with the topmost part of the page in view (linked anchor sections not withstanding). To view any below-the-fold content, you have to scroll down.* As you scroll down, the page content moves up into view.

Making an Exit Strategy
In the demo, there is a reasonable amount of dialog content, so you definitely have to scroll to read the rest of the content. As you scroll the modal dialog, the upper right side of the content “underlaps” the round close button. As such, the last few characters of a few sentences are always obscured by the close button. This is jarring to the reader experience, and simply not conducive to closing the box.

Demo on Mobile

On smaller devices, the modal maximizes the use of the viewable content area by diminishing the whitespace between the content and edge of the dialog. Because the content is so close to the dialog edge, the close button must be semi-transparent to avoid completely obscuring the content.

As an alternative, the design could have pushed the modal button far to the top right while also making it a bit smaller, to minimize or eliminate the interference between the button and the content. Doing the former is questionable. Doing the latter should be unacceptable because of recommended minimum required touch sizes.

Placing the button at the top right corner of the screen places the close button in a hard-to-reach area of the screen. With one-handed use, stretching your thumb to the top right corner of the screen is tough. I have big hands, and it is often difficult for me to thumb-reach the top right corner of the screen on my iPhone 5S. It’s difficult for right-handed people, not to mention virtually impossible for left-handed people.

Utilizing "Touch Targets"
Based on mere human observation, most people hold their phone with their right-hand, predominately using their thumb to navigate their phone interface. Most phone usage emphasizes right-hand thumb usage. Even when two hands are used, the right hand index finger is the pointing device.

As such, generally accepted “touch target” placement recommendations have emerged, based on ergonomics and common usage scenarios.

Tablets
Tablets do afford more room than phones, although the differences are narrowing with the introduction of new models such as the iPhone 6+ and the Samsung Galaxy S5. Nonetheless, even on tablets, the touch targets are similar to what we see on the phone. The top areas of the device are harder to reach, the bottom areas of the device are easier to reach.

Further, on both small and medium-sized handheld devices, the optimal touch targets are at the bottom of the screen. On smaller screens, the entire width of the bottom of the screen is appropriate. On medium-to-large handheld devices, the left and right bottom corners of the most ideal location for interactive elements.

Tablet and Handheld Touchpoints

Finding the Common Denominator
Take a look at this multi-device touch zones graphic. The most common touch area should lead us to our answer.

Common Denominator

My Advice

  1. Place the button in the bottom-right part of the screen. When looking at where all these device touchpoints overlap, this option is clearly the most logical (see the action in this CodePen).
  2. Don’t worry about the overlap. The button will still overlap the content as it does in the current demo, but it will overlap content that you have not yet read, and, as you move the content up, the button will not overlap the content that you are currently reading.
  3. Different button for the bottom of the article. In addition to placing the modal close in the bottom right area of the screen, I would have the button morph from the Circle X shape to a capsule-shaped, full width button with the label “Close Modal” when you reach the bottom of the modal dialog content.

Want to learn more about user experience design? Check out Kalev Peekna’s post about finding the balance between brand-centric and user-centric design in digital marketing.

Interested in learning more or joining the team? Let's talk.

[*] Or up, for you MacOS “natural” scrollers


Chris Wigley
Solutions Architect

At the time of publishing, Chris was a Solutions Architect at One North.

Subscribe to our Blog

Next
Up:

BEST OF JANUARY: The First of 2015!