UX Drill 05 — Modal vs. Non-Modal
This is part of my drill-down journey of UX design during my graduate program in Human Computer Interaction. Despite rigorous 4 years of work experience, I realized that there are “some gaps” in my knowledge… Still!
My work was primarily focused on branding and user engagement. Besides that, working in the advertising agency for big tech company like Samsung meant that most of my work revolved around meeting our clients’ needs rather than focusing on usability or accessibility of our end users. This motivated me to return to school to study Human-Centered Design.
From today, I will try to hone my skills in UI/UX by specifically focusing on the parts that were always confusing or vague to me even as a design practitioner. Just to help my memory — and yours as well!
TL;DR
Modal — blocks the background and requires immediate attention. This forces users to stop what they are doing.
Non-Modal — does not disable the main content. Thus, users can continue interacting with the main content at this point later.
In the previous post, I defined a "modal" as a secondary screen that appears on the same page to provide important information or request a user's action.
However, after some more research,
I learned that “modal” is more of a characteristic than a fixed format.
In order to understand why this is, let's refer to Apple's Human Interface Guidelines.
The way Apple uses the word “modally” is something that caught my attention. It says:
That said, a modal is not a fixed format but a way of presenting the information.
Additionally, Nielsen Norman Group’s article helped me better understand “modal” as an adjective, not a noun.
Modal is not a single format, it is an “adjective” either “modal” or “non-modal.”
So, now I have begun to understand “modality.”
However, what is a “dialog,” then? Why are some companies like Uber deprecating modals and replacing them with dialogs?
Essentially, dialogs are “conversational” elements. Back to Nielsen Norman Group, a dialog is a “conversation” between the system and the user and often requests information or an action from the user.
Just like a human dialog.
So, dialog is something that floats on top of anything to grab the user’s attention and allow a single action.
Then, a dialog can be either modal or non-modal, depending on the level of interruption. Because modal stops everything else to make the user focus on a single task (what dialog is supposed to focus the user’s attention on), modal dialogs are something more urgent & critical than non-modal ones.
Here is another simple visual example: modal dialogs use dark overlays behind them to stop everything, while non-modal dialogs leave the original content visible.
Now I understand why modal was often used as both nouns and adjectives. When we just call something “modal” it should be the abbreviation of the longer word, such as “modal window, modal dialog, or modal sheets..”
While perusing Apple’s HIG and Uber’s Base design systems, I noticed another term being used: “sheets.”
Ugghh.. What are the sheets?
Apple defines sheets like below:
Which looks very similar to modal dialogs.
However, Apple's design system doesn't use dialogs. This means that we can focus on the term “sheet” and forget about dialogs.
By default, a sheet is modal, presenting a targeted experience that prevents people from interacting with the parent view until they dismiss the sheet
Nevertheless, there are some exceptions. Some sheets are non-modal :
Still, there are other design systems that use sheets and dialogs at the same time, like uber. I will continue studying the sheets vs. dialogs tomorrow!
