Modals and UX — a fast guide for dummies

Andrea
Andrea
Nov 3 · 2 min read

In early 2019 Google I/O introduced an improved version of Material Design, in this new release some components has been refreshed and some some otherhas been introduced. One of this brand new elements is the Modal bottom sheet.

What’s a modal?

A modal dialog is a dialog that appears on top of the main content (a layer above it) and moves the system into a special mode requiring user interaction. This dialog disables the main content until the user explicitly interacts with the modal dialog.

If originally they were used to alert users (to an error or to some other system state that required immediate user action) and placed in the middle of the screen, now they use is evolved, and modal dialogs are used most often to provide contextual action or to attract user attention on a specific task.


So what?

Here is a list of DO and DON’T about bottom sheet modals.

DO

Use modals for contextual information, such as deep links to another app.

Credits: Medium

DON’T

Open modals in full-screen, this places the top content out of reach for users.

Credits: material.io

DO

Use modals instead of menus to present additional screen actions.

Credits: androidhive.info

DON’T

Don’t use an invisible scrim for modal bottom sheets. This can mislead users about their ability to interact with the rest of the screen.


One more thing

Most important, don’t forget to get to users a great escapes, as Linzi Berry wrote here.

See you soon, thanks for reading.

Andrea

Written by

Andrea

Wev developer and Marketing Manager with a passion for sharing what I learn

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade