Dismiss
InnovationQ will be updated on Sunday, Oct. 22, from 10am ET - noon. You may experience brief service interruptions during that time.
Browse Prior Art Database

Modal Dialog Box Over Faded Background

IP.com Disclosure Number: IPCOM000031377D
Original Publication Date: 2004-Sep-22
Included in the Prior Art Database: 2004-Sep-22
Document File: 2 page(s) / 114K

Publishing Venue

IBM

Abstract

This article describes a way of visually weighting modal elements (such as pop-ups, dialogues, etc.) in order to emphasize the user is in a modal state, while reducing visual clutter and simplifing the user interface.

This text was extracted from a PDF file.
At least one non-text object (such as an image or picture) has been suppressed.
This is the abbreviated version, containing approximately 94% of the total text.

Page 1 of 2

Modal Dialog Box Over Faded Background

Today, modal elements carry important and relevant information: they can prompt the user of a task that needs to be performed or advise the user of a function that has occurred. The purpose of this type of a element is to force the user to review information and produce a response.

The problem with traditional modal elements is that they visually complete with their background elements on screen. This visual clutter can be confusing especially for novice users and users with visual impairments. These users might spend more time or experience more errors performing tasks due to the lack of visual weight/layering.

Below is a sample of a common appearance of screen where the pop-up dialogue box has the same visual weight as other elements on screen.

To resolve this problem, some or all of the background elements on screen could become visually lighter

1

[This page contains 1 picture or other non-text object]

Page 2 of 2

(for example, partially transparent, grayed, faded, or blurred) when a modal element appears. When the modal element disappears, or when the last of these elements in a series disappears, the background elements would regain their original appearance.

More visual weight is brought to the modal element, bringing it into focus as the top layer element on screen and reducing visual clutter and confusion.

Below is a sample of a screen where the pop-up dialogue box has the more visual weight than other elements on sc...