Overlays and Popups in UI

Here’s to something that hovers above the existing UI view. Some call it overlay, others popups, dialogs, box, etc. It’s widely used for confirmation, notification, or some input actions.

Let’s just call them popups for convenience.

Two Dimensions

Here’s a simple way to categorize them using only 2 dimensions:

  • Interruptive vs. non-interruptive
  • Informational vs. actionable

Interruptive popup blocks what you’re doing and you can’t ignore it. You have to act upon it to get rid of it.

Non-interruptive popup can be ignored. It may stay there but you can always choose to continue whatever you’re doing.

Informational popup informs more and demand less. It simply tries to tell you something and you don’t have to act upon it.

Actionable popups demands your actions. Some input may be required.

So in total there are four types of popups.

Four Types of Popups

Interruptive + Informational: There’s some really critical information you MUST know. System-level critical errors usually would use what’s traditionally called a modal dialog popup to do that. You must confirm (by clicking “OK”) to dismiss it.

Interruptive + Actionable: You MUST take action to address an issue that’s usually outside the normal action flow of whatever you’re doing. A critical transaction may need you to confirm or decide which option to use, and without your decisions, the action can’t be carried out.

Non-interruptive + Informational: Most of what we normally call notifications are such type. We can ignore it even it stays there until we close it.

Non-interruptive + Actionable: Sometimes a popup originated from a local area is meant to allow you to do some further input, but not necessarily a critical action of your task. You can just let it stay there and get back to it later.

 

Conclusion

Those 4 types of popups cover most common cases. They’re not mutually exclusive. Sometimes they overlap. There are exceptions that are beyond the reach of the 2 dimensions used as our framework. But they’re rare.

Perhaps more importantly, the 2 dimensions and 4 types help us elaborate about what we need and why we need them.

 

{END}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s