Onboarding
Setting something up: stations along a groove (done ones with their lamp lit, the current one a raised cap) and a checklist of check keys with a progress slot.
Kit parts
Setup dial
Onboarding as the program dial of an appliance on its first run. Each step is a detent on a rotary dial, its number and name engraved round it, and the panel beside it shows that step’s few fields. A step that is done lights a green lamp by its mark, and the one you are on an amber one. The dial turns back freely, and forward only as far as the first step not yet done.
Seats open in 11 days. Want one email that morning?
Anatomy
Each step is a section of your own. The fluting round its skirt is a repeating conic gradient that starts at that angle, under a light that does not move. The grip bar across the cap is rotated by it, and its own gradients are turned back by the same angle, so its lit edge stays toward the lamp at every step. The marks are placed round the middle with the sine and cosine of each detent, their words running away from the dial on either side. What the dial may do is pure.
Variants
- Two steps done
- Three steps
- Five steps
- The face alone, as a picture of progress
States
- Done
- Current
- To do
- Locked
Props and options
| Name | Kind | Description |
|---|---|---|
| step · done | property | Where the dial points, and the steps that are done. |
| go(n) · next() · back() | method | Turn to step n if the dial may go there; check this step’s fields and move on; go back one. Each says whether it moved. |
| Arrows · Page Up · Page Down · Home · End | keyboard | A step back or on, the first step, and the furthest it may reach. Enter in a field is Next. |
| setupDialFaceHTML · setupDialReach · setupDialTurn · setupDialState · setupDialAngle · setupDialNearest · setupDialText · setupDialMark | function | The face as markup, and the rules under it, pure: how far the dial may go, where a turn ends, what each step is, a detent’s angle and the one nearest a drag, the slider’s words, and where a mark sits. |
Usage notes
Fill in the account and press Next: its lamp goes green and the dial turns. Then try turning past a step that is not done. Drag the knob, scroll on it, press a step’s name, or tab to it and use the arrow keys.
Accessibility
- The knob is a slider from 1 to the number of steps, and says where it is in words: “Step 2 of 4, Workspace”. The arrows and Page keys turn it a step; Home goes to the first and End as far as it may.
- The marks are an ordered list and each says its state after its name: “Account, done”, “Workspace, current step”, “Invite, locked”.
- A turn that meets the stop is said in a polite status line, in words that name the step to finish first. The knob giving a little and coming back is only a second signal.
- Next checks the step with the form’s own validity and shows the browser’s message on the first field that is wrong, so a screen reader says what is missing.
- Lamps are never alone: a done step is green and lit, the current one amber and lit, and both are said in words.
- Without the script every step is on the page, one after another, as a plain form.
- With reduced motion the knob drops into its detent with no swing and meets its stop without the bump.
