About

Modal & Non-modal Dialogs

Hi everyone,

This is one article of Design Patterns Sharing Series which share knowledges

and best practices when using UX/UI patterns for design solution. Modal vs Non-modal Dialogs

This article helps...

Understand dialogs, distinguish modal and non-modal dialogs, avoid confusion

and use them appropriately for each design purpose.

‣ What’s dialog, modal, non-modal?

‣ When to use modal, non-modal?

‣ Modal, non-modal UX/UI Patterns

‣ How do we design better (common pitfalls) ?

‣ REF

Notice: All information is based on personal knowledges & experiences, not an standardize or professional industry

research so correct me by giving feedbacks and feel free to discuss more

1 What’s dialog, modal, non-modal?
What's dialog?
A dialog refers to a conversation between two people.

In user interface, a dialog is a “conversation” between the system and the

user, and often requests information or an action from the user.
- Nielsen Norman Group
Modal vs Non-modal dialogs
Remind:
A popup is a window or a dialog that appears on top of the page content. A popup can be classified according to
two dimensions: user interaction vs overlay

‣ Modal dialog
Users can’t interact with the background content.
Modal can be found in different shapes and sizes: Fullscreen, Popup,
Popovers, Lightbox, Notifications, Multi-step dialog.

‣ Non-modal dialog
Users can interact with the background content.

‣ Lightbox/ Non-lightbox (Overlay)

Background is dimmed or not.
Notice: Lightbox is not only talking about overlay mode, it’s also a pattern name.
‣ Modal examples
Fullscreen Popup Lightbox / Others
‣ Non-modal examples

Popover
2 When to use modal, non-modal?
When to use modal? When to use non-modal?
Grab the user’s attention to prevent or correct critical errors
Show additional information not in context

Use when you want to interrupt a user’s current task to catch the user’s Information that is not directly related to the parent page or other
full attention to something important as a way to prevent or correct options that are “independent” from other pages.

critical errors.

Non-modal use for everything else that doesn't have a clear start- and
Request user to input critical information
endpoint process (self-contained process)
When missing information prevents the system from continuing a user-
initiated process.

Fragment a complex workflow into simpler steps

For time-consuming and mentally, emotionally involved tasks, it can be

overwhelming to ask for lots of information all at once.

Avoid modal dialogs for complex decision making that requires

additional sources of information unavailable in the modal.
Decision making framework
‣ Question 1: How to I know when should use modal or page?
To make things even easier I made those question to consider,

ask your-self these question before jump into design.

Based on 3 factor
Contex
Conten
Complexity of action

View here: Questionnaire: Page or Modal?

Notice: Please request for access.

Questionnaire: Page or Modal?
Decision making framework
‣ Question 2: Use Modal or Non-modal dialogs?
Overlay

Modal Non-modal

Dialogs Navigation drawer Snackbar Banner Menu Tooltips Others

- Alert
 - Notification

- Confirmation
 - Popover

- Simple /Quick input
 - Rating feature

- Lightbox
- Dropdown

- Fullscreen
- Filter

-... -...
3 Modal / Non-modal UX/UI patterns
 Max width

‣ Anatomy Modal
Title Title
By now, we should have a general understanding of when to use modality. Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
is a quick checklist for modal:
eiusmod tempor incididunt ut labore

Overlay: Lightbox/Non-lightbox Label

Size / Fullscreen: max height, max width Value

Max height
Position: placement of modal on the screen Label
Content area

Title: Give context to the user Value

Content area: text or required information, if a scrollbar is needed, you

may consider creating a new page/full screen modal instead. Cancel Save
Escape buttons:


Popular conventions is an ‘X’ icon or a ‘Close’ or ‘Cancel’ button. 


The ESC key is also often a conventional keyboard shortcut to closing Escape button Action button

modals.

Action button: Save, Continue…

Notice: Cancel vs Close: Design to Distinguish the Difference

‣ Anatomy Modal

Notice: Cancel vs Close: Design to Distinguish the Difference

Example: Glow Baby

(Left) Tapping the X icon in a running-timer view dismissed the view without

canceling the timer, and thus, allowed the user to continue using the app to

log other types of events, participate in the community discussions, read

articles, and so on.

(Middle) The status for the running timer was displayed in a banner at the top

of the screen.

(Right) Hitting the X while the timer was paused brought up the Discard or

Cancel buttons to detect the user’s intention.

‣ Popover
Popover is small callout dialogs that help the user complete a task

by giving more information or users need to access additional functions

without losing their current position on the user interface.

Usage:
‣ To provide additional information related to an element on the page
‣ Create a contextual relationship to an element on the screen that a
dialog cannot provide: dropdown types, sub-menu, filter menu...
‣ For feature prompts in guided tours / onboarding / coachmark
‣ When content is too long for a tooltip Popover

Read more:
[Link]

[Link]
‣ Lightbox
Lightbox often used to display galleries or content that should temporarily
take complete focus from the rest of the page.

Usage:
‣ When you have a lot of photos to fit on one page, and you want to
review selected image.
‣ Great for showing different product shots (thumbnail) on an e-commerce site
‣ Photo library and apps that integrate with your camera photo library.
‣ Tooltips
We use tooltips to display additional descriptive information about an
element or item to the user.
Tooltip displayed either by hovering over an element or an ico
Tooltips can appear above, below, and to each side of the UI element Containe
depending on screen real estate and intent. Content:
Explain what the user needs to know in as few words as possible.
Content is concise and sentence case with punctuation.
Do not recommend adding interactive elements (e.g. link or buttons) to a tooltip.
Character count limit: 20
Element / Ico
Position
4 How do we design better ?
Pitfall 1: Handle long/heavy content in a modal

Do
Don’t
Modal should fit on the screen.

Modal is too long and goes outside the viewable window

Priority content and functional elements then use these pattern to optimize for
or deal to cut off information needed.
the space such as Tabs, Accordion, Scrolling bar or Pagination
Pitfall 1: Practices

Đề bài: Sắp xếp các thông tin sau & thiết kế modal dialog cho việc chọn
tài khoản nhận tiền

Yêu cầu
Mỗi danh sách hiển thị ít nhất 3-5 tài khoản, Thể hiện CTA action
“Chọn" rõ ràn
Tài khoản yêu thích phải có dấu hiệu nhận biế
User được phép bỏ chọn tài khoản yêu thíc
User có thể thực hiện tìm kiếm nhanh thông qua Search bar

Click here to join Fig Jam

Pitfall 2: Stacked modals fight each others

Don’t Do

Stacked modals fight each other Mostly use one modal at a time.

Wait to present the modal until it’s contextually relevant to the user.
Pitfall 2: Stacked modals fight each others

Notice: Always having disclaimer for these case. For example

Pitfall 2: Practices

Avoid 

this

?
Don’t Do

Stacked modals fight each other Mostly use one modal at a time.

Wait to present the modal until it’s contextually relevant to the user.
Pitfall 3: Abusing modal pattern in design

Don’t Do
Force users into specific actions Use alternative solution: show pattern inline
Pitfall 3: Abusing modal pattern in design

Vui lòng điển đầy đủ thông tin

Thử lại

Don’t Do
Use modal to alert error/warning message Use inline validation message instead
Pitfall 4: Forget the focus state

Watch the video example

Don’t Do

Forget to set focus for modal
 Make content in a modal window accessible to keyboard users (for desktop)

or only set focus for Exit icon (X) or Buttons Define & set focus of other information need inputting when use Tab key

& document the accessibility of modal for development phase.
5 QnAs
References
Read more:
Popups: 10 Problematic Trends and Alternatives
Overuse of Overlays: How to Avoid Misusing Lightboxes
Modal & Nonmodal Dialogs: When (& When Not) to Use Them
Best Practices for Modals / Overlays / Dialog Windows
Modality Is the One UX Concept That Most Designers Don’t Fully Understand
Design for a reusable system modal
5 best practices for getting modal windows right
Modal vs Page: A decision making framework
Book: Humane Interface, The: New Directions for Designing Interactive
Many thanks for reading. I'm look forward to receive feedbacks or
Systems by By Jef Raskin
hear your experiences about this topic.
Accessibility for modal:
Contact info:
How To Make Modal Windows Better For Everyone
UyenTNP8@[Link] (DES-HCM)
How to improve the accessibility of overlay windows
WCAG 2.4.3 Focus orde