Modaless Overlay

Interaction Specs

Interaction Specs: 
1. Note Content area of Overlay.

Modaless overlay can be displayed on top left, top right or bottom, left, bottom right by default depending on project requirement. Never in the center of the screen.

Modaless overlay can be moved around by drag and dropped to desire location on the screen.

2. Note 'Minimize' and 'Close' controls buttons.

The modaless overlay has two controls: 'Minimize' or 'Close'. User can minimize the overlay to focus on other tasks on the screen, or close the overlay to dismiss the current task on the overlay.

3. Note the Primary and secondary buttons.

Modaless overlay can have up to three buttons: Primary and two Secondary buttons. In this case for the image on the left, the buttons could be displayed as 'Next' (Primary button), 'Cancel' (Secondary button), 'Back' (Secondary button)

4. To Minimize the Overlay.

Modaless overlay could be minimized by clicking on the minimized icon. The overlay window will be scaled down in size and displayed on the lower right corner of the sceen. An example is shown on the image on the left.

User could be downloading in progress and minimize the overlay to focus on other tasks on the page.

5. To Expand the Overlay.

Minimized overlay could be expanded again upon click on the pop up icon.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why use this pattern

Modaless overlay can be moved to any corner of the screen. Depending on the use, it can be enlarged, or be scaled down to allow for work on another screen. Modal dialog boxes will not permit users to work with the parent window once they are invoked; while modeless dialog boxes will permit users to access the parent window, even after they are invoked. They are unintrusive and allow a user to work in their own way and at their own pace.

What's the solution

The Modaless overlay purpose is to get a message relayed. An expanded modaless screen is moveable, and when minimized, the modaless will sit in the lower right corner of the screen allowing the user to continue work on the screen. An example of a modeless element - social media sites allow the user to open up mini menus.

Modeless boxes are used if the requested information is not mandatory to proceed, so the window may be left open while the work is continued. For instance, a toolbar is a modeless dialog box,
and its items can be used to choose particular features of the application. They do not compel the user to any specific mode of operation, the user can work at their own pace.

Common modeless design elements might include:

  • Toolbars
  • Accordion Menus
  • Social Media Docks
  • Advanced Search Menus

When to use this pattern

  • For interactions where a strict workflow and timing is not required.
  • For providing the user an enhanced experience by enabling a flow or tasks that is not time bound and can remain idle until the user choses to return it.

Do not use this pattern

  • For long or multi-step tasks.


GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015