Close control “×” (ESC-key via keyboard).The active panel should include the following elements: The page-over-page appearance will help focus the user’s attention on the active sub-task while providing context of this “interruption” to the primary task.Įxample of panel animation Anatomy of Slideout This is achieved by covering the parent page with a transparent shade. The lower parent page is disabled when the slideout is active. In its final position, the panel should not fully obscure the parent page, leaving a portion of the lower parent page in view. The panel should be attached to the top of the browser and match the length of the parent page. When the slideout is triggered (by an action taken on the “parent page”), the panel will appear to slide into position in the viewport from right-to-left. Overlays also refer more specifically to those containers used to present actions, navigation, filtering options, tooltips and contextual help, messages, etc. Overlays, for the purposes of this document, generally refer to any content that appears over the primary page when triggered. Typically modals should be used when the information presented is more concise and the interactions are less complex (than that used in slideouts).
#Slideitout windows#
Modal windows are best used to focus attention either on some particular content (such as a video), or to confirm an action or decision (such as “Do you wish to delete the selected files”). These panels allow for greater content and/or more complex interactions thus behaving much like an additional webpage while maintaining a contextual connection to the primary task. Slide-out panels should be used for tertiary actions or sub-processes related to the user’s primary path. Use of Slide-out Panels (aka “Slideouts”) The active state of any of overlays should occupy the topmost level of the z-index.įor solutions not described in this article or for further information, please contact the Magento UX Design team. The user must then take some required action to be returned to their primary task and continue (in most cases). These are triggered by a particular user action causing their current task to be interrupted. A “Slide-out Panel”, “Modal Window” or “Overlay” is an effective way to achieve this. Within the Magento application it is often necessary to focus the user’s attention on some particular bit of content or isolated action, process or sub-process. Slide-out Panels, Modal Windows, and Overlays See Migrated topics for the complete list. This page has moved and will be redirected soon.
0 kommentar(er)
