Spotlight
A spotlight focuses attention on a specific part of the UI to educate users about key features or workflows.
When to use
- Introducing something genuinely new that a reader would not find on their own.
- A short sequence of at most three steps, shown once.
- A change to something familiar, where the reader would otherwise look for what moved.
When not to use
- Teaching the whole product. A tour nobody asked for is closed rather than read.
- Anything the interface could explain by being clearer. A spotlight is a patch over a design problem.
- Something required. If a reader must act, the interface should ask them, not point at it.
- Every visit. Show it once and remember that it was shown.
Guidance
Do
Queues moved
They now live in the sidebar so you can reach them from anywhere.
Say how many steps there are and let the reader leave. Both cost nothing and make the rest bearable.
Don't
Welcome!
Let us show you around the product so you can get the most out of every feature.
Do not open with a tour and no way out. There is no step count, no escape and nothing said that the reader needed.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| spotlight | purple-bold | 0.503Marked | 0.722Marked |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Name what changed. Queues moved, not Welcome.
- Say why it matters to the reader, not what the team built.
- Always give the position when there is more than one step.
- Label the last action for what it does, so Done rather than Got it.