Usage:
To choose the right pattern for your UI, keep in mind the content you need to surface, specifically:
- Urgency
- Need for the user’s focus
- Layout needs that can’t be avoided
- Whether it requires multiple steps
- Whether the user needs the current page context
Follow these guidelines as much as possible for consistency, but keep in mind that specific cases trump general guidelines if they are in the user’s benefit.
Dialogue
A dialogue goes by many names: Dialogue, Popup, Modal window. It displays content that requires user interaction, in a layer above the page.
Side panel
Focus the user's attention on several tasks or pieces of information via a modal that sits on top of the page content
Child page
A full page experience not included in the primary navigation. It focuses the user in the task at hand by not showing the information in context of the previous page.