Modal View
- Contributors
A modal view is a child window to a main window. Modal views are used to draw a user's attention to an issue or suggestion and will disable interaction between the user and main window until the modal view is dismissed.
Typical Appearance
Generally speaking, a modal view will appear as a dialogue box in the center of a window or application and prompt the user with a choice, requiring the selection of a decision through a button or an exit action.
Typical Behavior
Modal views typically prompt the user to perform an action before allowing the user to continue interacting with said window or application.
Modal views will usually be prompted when a window or application requires the user’s attention before continuing, such as when a user is able to update their system or if the window chooses to warn the user about committing an action. Modal views are also used by websites to inform the user about logins, advertisements, updates to the site, etc.
Component in Action
Priority Metrics
Modal view pop ups are incredibly intuitive to new users if used correctly. Modal view pop ups are most typically used as a reaction to something the user is currently doing, has just done, or probably wants to do. If used correctly and labeled properly, new users should not be confused by the purpose of a modal view pop up because of this. The second place where learnability issues could arise is during the user interaction with the pop up. Again, if used properly, a modal view pop up should contain only a few basic buttons or, if necessary, a very short form. If the user will not be able to continue what they are doing until the pop up has been addressed, it should be required for the pop up to be addressed before it can be collapsed. If the pop up is providing an essential piece of information or a form, and the user can continue doing what they are doing without addressing the pop up, it should be very easy to collapse the form. These two guidelines are aimed to ensure new users are not led into a confusing application state.
If used properly, modal view pop ups should almost be unnoticeable to frequent users. There should only be a few buttons and forms should be very short. The most commonly used button should be highlighted so a user can simply hit the ‘Enter’ key to trigger it or so it can easily be identified. The pop up should also consistently appear at the same time during the use of an application, so frequent users become accustomed to the timing of when the pop up will appear. The pop up should also consistently appear in the same location, so it can easily be identified by frequent users.
All buttons, forms, labels, and icons should follow the same guidelines as those the application triggering the modal view pop up uses. Modal view pop ups should also not be cluttered with a lot of interactable objects to ensure the user’s mental model is correct. Since modal view pop ups collapse after they are addressed, it is more difficult to undo an action.
If the guidelines for learnability and efficiency are met, modal view pop ups should not have memorability issues.
Satisfaction is a very difficult usability metric to measure, but for a modal view pop up to be satisfying to interact with, it should be able to be quickly addressed and should be easily identifiable. It should also give meaningful feedback to the user, with nice opening and closing animations as modal view pop ups are inherently objects that a user must look at and interact with.
Events
One of two main events required of any modal views. Modal views are triggered often by the user performing an action or the system requiring a task to be completed by the user. When the view is triggered, a modal window will appear on the screen.
The second main event required of a modal view. A modal view disappears after a user performs a task required by the view or if the user closes the window through an exit action.
A user is sometimes able to leave a modal window without entering any input or selecting an option. Users can typically press the esc key to perform this function.
Once a user has inputted a correct string into a text box or selected an option on the modal view, users can then usually press a submit type button on the modal view or press the enter key to leave the modal view and complete the task asked by the modal view.
On many systems requiring passwords, users will be prompted with a modal window and are expected to fill in string input onto a text box to close the modal view.
The user can select an option or press on a button to have the window, application, or system perform a certain action. Clicking may also allow for the selection of multiple options.
State Diagram
The typical flow of a modal window appearing on a user’s screen is as follows:
- A user will perform an action that prompts the modal window’s popup.
- The modal window will ask for user input.
- If the user is able and decides to, the user may close the view.
- Else the user may perform the task asked by the window and thereby closing the window by either pressing the enter key or a submit button provided by the modal.
- The user is then returned to the main, parent, window.
Variants
It’s common for document editors to have some sort of modal variant. These modal views are usually triggered when a user tries to leave a editor without saving their work. The modal will ask the user if they would like to continue and leave their work unsaved or save their work. For example, an instance of a modal view appears in google docs when a user tries to share a document. The information about who to share to must be completed or exited out of first before continuing.
Many websites have advertisement pop ups to provide income for the site. Pop ups may include: becoming a member to the site, a video of a film/game coming out soon, suggested hair products for the user, etc. These pop ups are not always necessary for the user to notice. Users can typically click back to the main window to close these views, because it isn’t always necessary for a user to interact with the advertisement.
If a user decides to download something like an application from a website onto the system, the system will usually prompt the user with a modal view. This view must typically be interacted with by the user, because the view will directly cause a change to the user’s system. The modal view typically asks the users to either cancel the download or continue before allowing the user to continue.
If a process is unable to be completed or ran into issues during execution, it is important to convey that information to the user, and thus a modal view is a good way to ensure the user receives that information. For example, if a user attempts to print a document and the printer is unavailable, a modal view can notify the user that there was an issue printing the document. A modal view conveying an error or a warning will not typically have a form for the user to fill out, but will simply use text to notify the user of the warning, perhaps using a few buttons to give the option to send an error report if the application they were using was being run through the network.
If a process requires verification of the user, a modal view can be used to ask for that information. Since the process cannot be completed until the user has been verified, using a modal view is appropriate. Typically in this case, only the user’s name and password is required in a very simple form. If the user is frequently verifying processes, some user information can be saved and filled out on the form to increase the efficiency of frequent users.
Platform Specifics
iOS
The modal view on the Iphone is a small white box that appears in the center of the screen. Any clickable items are in blue text to highlight that they are interactable. There is very little text to keep the modal view compact and there are very few clickable items to make the modal view easy to interpret and interact with. The background behind the modal view is grayed out to signify that the modal view must be interacted with. Modal views on the Iphone can also be interacted with using the thumbprint technology.
macOS Sierra
The typical modal view that appears on Mac OS X is a light gray text box providing the user with an option, such as to update or to sign in. A modal view appears on the screen to receive information from the user. The view will provide a blue button, labeled with the action the modal will perform if pressed by the user. The modal view will also typically provide a light gray cancel button for the user to press if the user doesn’t wish the modal view to perform the action the modal can execute.
