Anatomy of an Optimally Designed Modal

Designing a modal is no easy task when there’s a lot to fit in such a tiny window. Throwing content inside and hoping it works is what most designers do. However, users can have trouble processing the information without the proper structure. You can make your modals easier for users to process if you design them with the optimal anatomy.

Modal Anatomy

Every modal needs a header and footer. The header is where the title and “close” icon goes. The title is necessary to affirm to the user what task they’re doing if they forget or…

--

--

--

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience. https://uxmovement.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Basecamp 3 refresh is here!

Bringing the power of styles preprocessing to Sketch

Responsive Redesign

2D Tilemap Extras — Animated Tile Sets

Applying Traditional Research Methods to Product Management

A UX Retrospective: Feature Integration

Personas : Trash or Treasure?

My first UX project: an e-commerce website with a social twist

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
UX Movement

UX Movement

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience. https://uxmovement.com

More from Medium

The Optimal Way to Display Modals on Mobile Screens

Perception of color in the interface: why we see it differently

The main image for the article. The character is holding a prism from which a different spectrum of colors comes out. Author: Viktor Salomahin

5 Secrets to creating an awesome UI/UX

Hit the Road: Directional Cues in User Interface Design