Getting Modals Right

Getting Modals Right ☝

Courtesy of @_ayushjangra_
⠀
If people have been trained to automatically try to close modals, why would you want to use them? 🤔
⠀
Poorly implemented overlays and lightboxes are not only frustrating for users but can also be disastrous for conversion and task completion.
⠀
Use the five W’s — Who, What, When, Where, and Why — to determine whether an overlay is truly the most appropriate design solution, and how you should implement it 💁‍♂️
⠀
You may consider using a modal window when you need to:
⠀
◽ Grab the user’s attention.
◽ Need user input.
◽ Show additional information in context.
◽ Show additional information (not in context)
⠀
Before considering an overlay, carefully investigate your motivations and think about the five Ws.
⠀
If you still think that overlays are the right design solution for you, proceed with care ❕
⠀
Test repeatedly on a variety of browsers and devices to make sure that your design does not break.

Modal/Pop-up Usage

You may consider using a modal window when you need to:

• Grab the user’s attention.
• Need user input.
• Show additional information in context.
• Show additional information (not in context)

Many times modals get…

disruptive, invasive, confusing, and poorly accessible.
Blocking the user’s interaction with the “parent window”.

Alternatives for modals.

Non-modal dialogs
Use them for non-critical interactions that don’t block the user (like toasters).

Go inline
Present your content inline to be less disruptive.

Alternatives for modals.

Expanding elements
Use expanding elements such as accordions, toolbars, tooltips, or sliding sidebars (or other modeless elements).

New page
Lead the user to a different page to isolate the interaction without losing access to functionality such as navigation.

Getting modals right.

Easy to close:
Make it simple to get rid of — by escape key, clicking outside the modal window, and a clearly labeled close button.

Single purpose:
Limit the interaction to one, straightforward task.

Getting modals right.

Keep it short:
Be brief and concise in your content. Grab their full attention & focus on a single task before continuing.

Avoid Fullscreen modals:
You might as well navigate to a new page then.

Remember to always ask, “Why does this have to be a modal?”

Bonus — tools that may be useful in your designer way:

Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Designmodo — a timesaving tool that helps create websites and email builders designed for developers, designers, marketers, and non-tech users.
LPgenerator — professional landing page platform for your business to generate new leads and increase sales.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Leadpages — lets you build beautiful, high-converting websites, unlimited landing pages, pop-up forms you can add to your other websites.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.