Media patterns
4 patterns built for media interfaces.
Voice Transcript
A voice note cannot be skimmed or searched, so there is no way to tell whether it is worth forty seconds until you have already spent them.
FeedbackMessagingMediaAccessibility- Keyboard
- Touch
- Responsive
- Reduced motion
Contextual Toolbar
A toolbar serving two jobs is either wide enough to show both at once and too big to sit over content, or split in two so you have to find the right one first.
LayoutAIMediaEditor- Keyboard
- Responsive
- Reduced motion
Inline Search
Search needs room to type and the browse filters are already using it, so one has to give — and sending search to its own screen takes the filters away with it.
NavigationSearchCommerceMedia- Keyboard
- Touch
- Responsive
- Reduced motion
Speed Dial
A floating action button is reachable one-handed but says nothing about what it does, and a menu that answers that arrives as a detached panel outside the thumb arc.
DisclosureProductivityMediaFiles- Keyboard
- Touch
- Responsive
- Reduced motion