UX Drill 07 — How does Uber use “Dialogs” in the Base design system?
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!
What is a Dialog?
TL;DR,
Dialog is a modal or non-modal message that floats on top of a surface. Uber calls modal windows “dialogs” when communicating single-step tasks to users, such as alerts, confirmations, acknowledgment, and simple selections.
Sometimes, it’s better to remember with use cases.
These are all dialogs:
The important thing is that dialogs are interruptive, which come on top of the user’s action, so they must be very simple and succinct. And the message in the dialogs has to be “important.”
Uber emphasizes that when a task is more than 2–3 steps, we should use full screen instead of a modal dialog.
So, how does Uber compare “sheets” vs. “dialogs”?
Dialog is more critical information like alerts & confirmation, but sheets are more complementary and additional.
As a designer, I find the questions below very useful when we need to make a decision about which one to use.
Now, let’s look at what “sheets” look like.
Sheets (often) come with a grabber on top.
Why come with a “grabber”?
So that a user can adjust the size instead of hiding the background entirely like modals.
This is a perfect example of how “sheets” provide additional information related to the original content and how a “grabber” is used to collapse or expand the sheet.
When we try to remember everything… it is chaotic and confusing as hell.
This is because “dialogs” are “messages” in essence!
So, whether it must include dismissal buttons like “X” or not relies on the content.
In best practices, you should decide whether the task should be in the form of “dialogs” or “sheets” based on the context, importance, and simplicity of the given task. Then, you should check if your design fits into the existing design guidelines and system.
This is why big companies have a design system and teams dedicated to that! As a designer, I believe it is more important to keep track of broader concepts and use cases and be able to find the resources when you need to apply them to your designs. There are no genius designers, but only meticulous designers!
