Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Get exclusive access to thought-provoking articles, bonus podcast content, and cutting-edge whitepapers. Become a member of the UX Magazine community today!

Home ›› Analytics and Tracking ›› Modals on Mobile: How to use them wisely

Modals on Mobile: How to use them wisely

by Chris Wigley
5 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Modal dialogs have become a ubiquitous feature of mobile web design, but designers need to put more thought into when to use them, and when to leave them out.

Somewhere along the line, modal dialogs have become a ubiquitous feature of web design. We’ve become used to modal windows popping up everywhere, including on mobile devices. Given their pervasiveness, one would think we would have mastered better ways to design and incorporate modals on mobile that don’t detract from the user experience. If modals are becoming commonplace, they should be designed the best way possible: easy to use, easy to understand, and easy to dismiss. So why aren’t they?

More often than not, modal overlays just don’t work well on tablets and mobile devices. They take some work to get right, and it takes time to address the different phone operating systems and resolve any glitches. They also have to be maintained to relate to the parent page. In many applications, they aren’t scaled properly to be optimized for mobile, or the window stutters as it starts up, which can throw off the position of the close button.

Have a Modal Exit Strategy

When it comes to exit strategy and placement, mobile modals defy logic and contradict everything we know about how people consume content. Based on human observation and analysis from some pretty smart people (like Luke Wroblewski) people generally hold their phone one-handed, using their thumb as the primary navigation tool. The design of most phones and apps actually emphasizes right-hand thumb usage.

Yet modal close buttons are typically placed in the upper right corner, which forces the user to avert their attention back to the top of the window to close the window. With one-handed use, stretching your thumb to the top right corner of the screen is tough. I have big hands, and it’s difficult for me to thumb-reach the top right corner of the screen. Forget being left-handed; unless you read bottom to top, this movement is not intuitive or ideal.

Upper right placement of the close button also increases the likelihood of the dreaded accidental refresh (when I fat-finger the refresh button instead of the close button because they’re both so small and on Safari they’re right next to each other).

This poor close button placement also applies to tablets. Although the screen and the button are larger, it’s still unnatural to avert my eyes back to the top of the window in order to continue reading.

Global marketers also need to understand how modals come across on older devices. Phones with Android 2.3 and below are going to have browser issues that lead to odd screen behavior, and millions of people around the world are still using these phones.

It’s ironic: brands give so much thought to their online presence and place tremendous emphasis on design, features, and functionality, yet they don’t carry the same consideration through to modal windows.

“Don’t Know Where to Put it? Throw it In a Modal!”

This brings me to the underlying, more ominous issue: somewhere along the way, modals have gone from being a logical confirmation of an action to a popup dumping ground for content that doesn’t readily fit anywhere else. Too often, modals have become a hack to avoid thinking about content placement. In some cases, they reflect poor judgment and thoughtlessness on the part of developers, who see them as a gift of newfound space, an easy out. In other cases, last minute requests for additions, coupled with a lack of technical skill or resources to edit or pare down existing page content can be the underlying motive for creating a modal.

Regardless, brands, content managers, and developers need to put more thought into when to use modals, and when to leave them out.

Brands, content managers, and developers need to put more thought into when to use modals

Modal windows are great at showing users new information on the same page they’re currently on, thereby eliminating page reloads and conventional pop-ups.

Conversely, there are occasions when you want to disrupt the flow and refocus your site visitor’s attention on a single, critical action. They’re also a useful tool for displaying images and videos. But even intentional and purposeful interruptions need to be intuitive, easy to complete and fluid.

Modals should be applied only to meet the following objectives:

  • Interruption: Forcing the user to make a decision or complete a task at an important part of their workflow. Ask yourself, “do I really want to interrupt the user?”
  • 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 image, article, or a video.

Well-thought out modal content and placement will ensure that your site visitor’s journey flows intuitively and provides the experience he or she expects. And it will help to steer us away from the constant bombardment of modals that are particularly disruptive on mobile devices.

Save the Modals!

Modals aren’t going anywhere, and although they can be beneficial, more restraint should be shown for their deployment on mobile sites. Modals are a very deliberate UX technique, and the responsibility to use them wisely rests largely on the UX designer’s shoulders. If you’re convinced you’re using a modal for the right reasons, keep these design tips in mind:

  • Utilize “touch targets” placement recommendations based on ergonomics and common usage scenarios.
  • Reexamine and justify the use of every modal dialog. Is it appropriate? If so, does it render properly on every device?
  • Avoid making users scroll in modal windows.
  • Place the close button on the lower right of the screen. It will still overlap content but it will be content you haven’t read and as you scroll up, it won’t overlap or interfere with content you’re currently reading.
  • Follow the industry standard for button sizes. Tiny buttons are frustrating as heck.
  • Design modal close buttons so that when you mouse over it on a desktop computer, it morphs from a circle X into a capsule-shaped, full width button that reads CLOSE WINDOW. This makes closing modal windows more contextual.
  • Use a genie (or other) effect to open and close modal boxes to provide a contextual understanding of where the window came from so users can see where they are on the site.

 

Image of shipping crates courtesy Shutterstock.

post authorChris Wigley

Chris Wigley
Chris Wigley has spent 14 years in the information technology and services industry, with experience in software engineering and product support. He works at One North Interactive, a digital marketing agency in Chicago, where he provides logical, sound, and atypical reasoning to complex problems as well as assistance with digital analytics, responsive web design, mobile development and performance optimization.

Tweet
Share
Post
Share
Email
Print

Related Articles

The role of the Head of Design is transforming. Dive into how modern design leaders amplify impact, foster innovation, and shape strategic culture, redefining what it means to lead design today.

Article by Darren Smith
Head of Design is Dead, Long Live the Head of Design!
  • The article examines the evolving role of the Head of Design, highlighting shifts in expectations, responsibilities, and leadership impact within design teams.
  • It discusses how design leaders amplify team performance, foster innovation, and align design initiatives with broader business goals, especially under changing demands in leadership roles.
  • The piece emphasizes the critical value of design leadership as a multiplier for organizational success, offering insights into the unique contributions that design leaders bring to strategy, culture, and team cohesion.
Share:Head of Design is Dead, Long Live the Head of Design!
9 min read

Discover how digital twins are transforming industries by enabling innovation and reducing waste. This article delves into the power of digital twins to create virtual replicas, allowing companies to improve products, processes, and sustainability efforts before physical resources are used. Read on to see how this cutting-edge technology helps streamline operations and drive smarter, eco-friendly decisions

Article by Alla Slesarenko
How Digital Twins Drive Innovation and Minimize Waste
  • The article explores how digital twins—virtual models of physical objects—enable organizations to drive innovation by allowing testing and improvements before physical implementation.
  • It discusses how digital twins can minimize waste and increase efficiency by identifying potential issues early, ultimately optimizing resource use.
  • The piece emphasizes the role of digital twins in various sectors, showcasing their capacity to improve processes, product development, and sustainability initiatives.
Share:How Digital Twins Drive Innovation and Minimize Waste
5 min read

Discover how venture capital firms are shaping the future of product design — and why experienced design leaders need to be consulted to ensure creativity and strategy aren’t left behind. This article delves into the power VCs hold in talent acquisition and team dynamics, highlighting the need for a collaborative approach to foster true innovation.

Article by Darren Smith
How Venture Capital Firms Are Shaping the Future of Product Design, & Why Design Leaders Need to Be Part of the Solution
  • The article explores how venture capital (VC) firms shape product design by providing startups with critical resources like funding, strategic advice, and network access, but often lack an understanding of design’s strategic value.
  • It discusses the impact of VC-led hiring practices in design, which can lead to misaligned job roles, undervalued design leadership, and teams focused more on output than innovation.
  • The piece calls for a collaborative approach where design leaders work alongside VCs in talent acquisition and strategic planning, establishing design as a key partner to drive product innovation and long-term brand success.
Share:How Venture Capital Firms Are Shaping the Future of Product Design, & Why Design Leaders Need to Be Part of the Solution
8 min read

Join the UX Magazine community!

Stay informed with exclusive content on the intersection of UX, AI agents, and agentic automation—essential reading for future-focused professionals.

Hello!

You're officially a member of the UX Magazine Community.
We're excited to have you with us!

Thank you!

To begin viewing member content, please verify your email.

Tell us about you. Enroll in the course.

    This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and