27 lines
933 B
Markdown
27 lines
933 B
Markdown
# Instructions UI design
|
|
|
|
## Placement
|
|
The instructions banner sits above the primary action button so new users can read the steps before interacting with the popup.
|
|
|
|
## Structure
|
|
- Short kicker: “Quick start”
|
|
- Heading: “How to use VidPlex”
|
|
- Expand/collapse toggle for users who want a smaller popup
|
|
- Ordered list of the core tasks
|
|
- One warning line for edge cases
|
|
- One short learn-more line that points to the README and audit notes
|
|
|
|
## Copy strategy
|
|
The microcopy avoids jargon and keeps each step tied to a visible control:
|
|
- Find Videos
|
|
- Open Viewer
|
|
- Clear
|
|
|
|
## Accessibility strategy
|
|
- A labelled region exposes the whole panel to assistive tech
|
|
- The toggle reflects the current visibility state
|
|
- The collapsed state removes the body from the layout entirely
|
|
|
|
## Notes
|
|
This design intentionally favors clarity over density because extension popups are small and users typically need the instructions only once.
|