eBay

Flyout Notice

High and low priority flyout notices

Introduction

The flyout notice pattern is a system-activated flyout. It draws the user's attention to a specific element or region on the page.

A flyout notice is typically classified as either high or low priority.

An error that prevents an action or task is high-priority, anything else can be considered low priority.


Working Examples

A flyout notice example is in progress. Check back again soon.

For a real world example, you can also see the pattern in action over on eBay Skin.


Terminology

flyout
the composite pattern as a *whole*, containing an overlay and it's host
host
the element that *hosts* the overlay
overlay
the non-modal overlay that contains the content related to it's host
expanded/collapses
the overlay state (visible or hidden)

Best Practices

Overlay must contain a button to dismiss the flyout.

Overlay must remain on screen until explicitly dismissed by user.

Please refer to the flyout pattern for all inherited best practices.


Interaction Design

This section provides guidance for keyboard, screen reader and pointing devices.

Keyboard

Please refer to the flyout pattern for all inherited keyboard interactions.

Screen Reader

If high-priority, notice must be announced.

If high-priority, notice must be listed as a region/landmark.

Please refer to the flyout pattern for all inherited screen reader interactions.

Pointer

Please refer to the flyout pattern for all inherited pointer interactions.


Developer Guide

Developer guide coming soon.

results matching ""

    No results matching ""