A Modal Window, also referred to as a dialog box, is used to display subtasks that must be completed before the user continues with the main task. A Modal Window is a pop-up window. It is launched from the primary page (by a button, a hyperlink, or an image), and is displayed on top of the primary page which remains shaded in the background. This keeps the user within the context of the primary page and main task while performing an action in the Modal Window. The Modal Window closes when the user performs whatever action was displayed or when the user cancels it entirely.
Modal Window Elements
The following are some of the Modal Window Elements with a brief explanation of each and how they are used.
Title Bar: The title bar identifies the Modal Window and the task it is performing. The title bar text should mirror the button name or hyperlink that invoked the Modal Window. There should be no reference to the primary page component in the title as this will cause confusion.
Iconic Close Button: The iconic close button closes the Modal Window. If the Modal window has unsaved changes, a message will be displayed prompting the user to save the changes.
Action Buttons: Action Buttons act upon changes in the window. Examples include Submit, Save for Later, OK.
The following figures show the Modal Window and its elements on top of the grayed-out primary page.
It is recommended that the maximum size of a Modal Window (width as well as height) should not be larger than half of the usable area on the primary page.
Vertical scrollable grids allow the user to see as many rows as possible in the grid before it begins to scroll. However, any use of horizontal scrolling in a Modal Window should be strictly avoided.
If the page has data entry, use OK and Cancel, or Save and Cancel buttons and describe what the buttons do. OK or Save saves the userâ€™s changes and then closes the window. Cancel discards any changes and then closes the window. Do not use Reset or Clear buttons because these buttons can be misleading.
If the Modal Window is read-only, use a Close button.
In general, do not crowd objects in the Modal Window.
A Mouseover Window is a small window that pops up when the user moves their mouse pointer over an object that has a dash underline as shown in Figure 3 below. Mouseover Windows are used to display additional read-only, context sensitive information that would otherwise clutter the main page. The Mouseover Window remains open over the main page as long as the user leaves their mouse over the activating control. The Mouseover Window is visible or active while the mouse is in the window or hovered over the object, phrase, or word that launches the window.
The following figures show the Mouseover Window being activated by placing the mouse over the dashed underline.
Mouseover Windows should be used sparingly. Using too many of them on a transactional page will create confusion because any movement of the mouse will cause them to continually display and close.
Mouseover Windows should be small (maximum 500x400 pixels) and should not be scrollable.
Mouseover Windows should contain read-only information, and should have very low user interactivity with minimal or no links at all.
Mouseover Windows should not be used to replace a tool tip. PeopleTools provides tool tips without any overhead, whereas, Mouseover Windows need to be created and maintained.
Mouseover Windows should not be used as navigational tools. There should not be links to open another transaction page or component as this may cause the user to lose focus from the main transaction.
Mouseover Windows may use external links that open up a .doc file, an email client, PDF, etc. These should also be used sparingly to keep the user focused on the main transaction.
Mouseover Windows should not be used as a preview of another transactional page, especially if the other page expects user interaction. Creating and maintaining such pop-ups will be costly as a new pop-up page will be needed to emulate the transactional page.
Mouseover Windows should not be used within another Mouseover Window.
Every effort should be made to design a Mouseover Window that can be used in multiple places. For example, the Mouseover Window used in Figure 3 can be used to display additional information about Customers, Employees, Applicants, Partners, etc.