In the earlier versions of the guidelines, there was a model view as one of the UI views among split views and those kind of things. In the latest version of the guidelines, the Apple has changed the concept to modality and put it into the interaction section. So modal view, and modality are really close terms. Let's take a closer look at the modality. modality creates a focus on a certain task or a piece of information designed to keep users until they complete a task or dismiss it. Models are a useful view for tasks that require multiple commands or inputs by the user.
They appear on top of everything else, and while open, block interaction with other elements underneath. In more official words from Apple user model You when you need to offer the ability to accomplish a self contained task. Action sheets, alerts and activity views provide modal experiences. Model View itself though is a bit separate concept and it comes in different forms. It can appear fullscreen, or occupy on the parts of the screen. It can also occupy the whole area of a parent view if it happens to appear in one, for example, in a popover in a split view, etc.
We will take a closer look at this model of you also usually displays a button that completes the task and dismisses the view like a Done button or a Send button and usually contains a Cancel button that abandons the task and dismisses the view. Notice how in this example here, the send button is in inactive state. Because there is not enough data entered yet. Choose a model view style that's used the current task, the current environment, and the visual style of your app, you can use the following styles. fullscreen style covers the entire screen, and is recommended for presenting a potentially complex task that people can complete within the context of the model view. Here's an example from a Gmail app.
Note that this app has a custom cancel and completion buttons in form of the custom icons. Page sheet style. This is used in horizontal regular environments only, like an iPad. These style partially covers the underlying content All uncovered areas are deemed to prevent the user from interacting with them. These style covers the entire screen on smaller devices and in portrait orientations. Here are a couple of examples for printing the content.
Proceed post details. Form sheet style is similar to a page sheet style, but it's usually smaller used for gathering information. It's officially recommends for gathering structured information from the user. Think setting things up writing tweets, emails, new posts, etc. It might cover the entire screen on smaller devices or might not. Here's the example of a form sheet on a smaller screen.
As you see, there is some uncovered area at the top, giving the visual hint of a modality. If necessary, the position of the model view is adjusted when the keyboard is present. The current context style uses the same size as a parent view. This means displaying modal content within the split view pane, popover, or other non fullscreen view. Let's now go over some more guidelines. Apple recommends to minimize the use of modality stating that generally, people prefer to interact with apps in nonlinear ways, and that you should consider creating a modal context only when it's critical to get someone's attention.
When a task must be completed or abandoned. continue using the app or to save important Gotta provide an obvious and safe way to exit a modal task. Make sure people always know the outcome of their action when they dismiss a modal view. Keep modal tasks simple, short and narrowly focused. Don't create an app within your app. If a modal task is too complex, people can lose sight of the task they suspended when they entered the modal context.
Be especially wary of creating modal tasks that involve a hierarchy of use, because users can get lost and forget how to retrace the steps. If a model task must contain sub views, provide a single path through the hierarchy and a clear path to completion. Avoid using done buttons for things other than completing the task. You could use the next buttons for example to switch from screen to screen display a title that identifies the task. if appropriate. You might also display text in other areas of the view that more poorly describes the task, or provides some guidance.
Don't display a modal view on top of a popover. with the possible exception of an alert, nothing should appear over a popover. In rare cases, when you need to present a modal view after action is taken in the popover, close the popover before displaying the modal view. Coordinate the overall look of the modal view with the appearance of your app. For example, a modal view often includes a navigation bar that contains the title and bottoms that cancel or complete the modal use task. When this is the case, the navigation bar should use the same appearance as the navigation bar in the app.
Choosing the appropriate transition style for revealing the model view, uses style that coordinates with your app and enhances the user's awareness of the temporary context shift that the model view represents. To do this, you can specify one of the following transition styles. The default transition vertically slides the modal view up from the bottom of the screen and back down once dismissed. The flip style. In the flip style, the current view flips horizontally from right to left to reveal the modal view. Visually, the model view looks as if it was the back of the current view.
When the model views dismissed, it flips back from left to right, revealing the previous view. You can be simple like in this example, or more custom and complex like here, when it is a part of a more custom UI design. Try to use consistent modal transition styles throughout your app. However, if you vary the transition styles of modal views in an app, do so in a way that makes sense to users. Users are quick to notice behavioral differences in an app. And we'll assume that they mean something.
It's best to establish a logical consistent pattern that users can easily detect and remember, and avoid changing transition styles without necessary reason. Basically, use the default style in most cases, and use the flip style only if it serves a purpose. Facebook used to have a little bit of incorrect design for the model views on smaller screens. Facebook now has changed this to a full screen Model View maximizing the limited screen with However, if this small amount of information or actions and it fits nicely in your UI, you can create model views for the smallest screens that occupy only a portion of those screens. And it is usually quite a popular UI pattern, especially in some custom UI designs.