Skip to main content
Accidental Dismissal of Overlays: A Common Mobile Usability Problem

Accidental Dismissal of Overlays: A Common Mobile Usability Problem

Overlays have become a ubiquitous UI element on mobile: beyond the annoying popups for cookie permissions, chat bubbles, coupons offerings, and marketing-subscription offers, you will also find them used for navigation menus, bottom sheets, product-detail pages, or in-app browsers. While many mobile overlays take up only a section of the page (partial overlays), allowing some content to be visible in the background, others occupy the full screen and are practically indistinguishable from a regular page or view. Macy’s app (left) used a partial overlay for displaying the shopping cart, while Nordstrom.com (right) used a full overlay for showing product images. HM.com used a  partial overlay to implement the sequential menu used for the main navigation. Facebook for iOS: Tapping on an article in the newsfeed (left) displayed it in a full-page overlay (right). Depending on whether the user can interact with the background (that is, with the content beneath the overlay), overlays can be modal or nonmodal. In modal overlays, users cannot interact with the background, while in nonmodal overlays, they can do so. The Google Maps mobile app used a modal overlay to display sorting options (left) and a nonmodal overlay for displaying information about a particular location (in this case, Nielsen Norman Group — right). Both these overlays are examples of bottom sheets — application-specific overlays that appear at the bottom of the screen. One of the major problems with mobile overlays is that dismissing them can be done through one of the following overlay-dismissal methods: a dedicated button included in the overlay (usually a Close or a Back button) tapping outside the overlay area, in the case of modal overlays that do not take up the whole page swiping down on the overlay handle, in the case of bottom sheets the browser’s Back button (on the web) the horizontal swipe gesture used for Back on both iOS and Android (or the phone’s Back button for Android phones)  Because designers vary in which of these overlay-dismissal methods they’ll allow, users sometimes will pick the wrong method, with unexpected and costly consequences. Things are even more complicated when several overlays are stacked on top of each other — in those cases, an overlay-dismissal method may dismiss only the top overlay or the entire stack, with no easy way for users to predict which behavior they’ll get. Let’s start with an example. In a recent usability study, we had 8 participants interact with a variety of mobile sites and applications that used overlays.  One of our study participants used Walmart’s mobile app to shop for a light fixture. When the participant selected a product from the product-listing page, the product description was shown in an overlay. In that overlay, he further tapped on Customer reviews, which displayed another overlay on top of the first one. To go back to the product description, the participant tapped the Close icon at the top. Unfortunately, that action dismissed the stack of overlays, and the participant was taken back to the list of products, losing his selection. Through no fault of his own, the participant had picked the wrong overlay-dismissal method. In order to navigate back, he was supposed to use either the on-screen Back button or the horizontal swipe gesture.  » Read More

Like to keep reading?

This article first appeared on nngroup.com. If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

#Dev
How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?

#All

Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.