“On Wizards
and State Machines” [EN]
Illarion Koperski
2019-02-13
A wizard is a step-by-step process that allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones.
— Raluca Budiu, Nielsen Norman Group
A state machine is a mathematical model of computation that can have different states, but fulfils only one of them at a given time.
— Krasimir Tsonev, creator of Stent
A perfect wizard would:
- be deterministic
- insulate itself from external factors
- support logical step "jumping"
- save and restore user progress
- handle asynchronous actions
- be self-documenting and easy to test
What didn't work for me
- Route-based wizards
- Redux-only implementation
- History blocking or preventing the user from navigating away
Links
Krasimir Tsonev. "The Rise Of The State Machines"
David Khourshid. "Reactive State Machines & Statecharts"
Raluca Budiu. "Wizard Design Recommendations"
Stent, finite state machine library
xstate, popular alternative to Stent
Reach Router's ServerLocation or React Router's StaticRouter