In a "stepper" from material design (material-ui) what is the best icon to indicate action is needed
In our application we have a wizard/tool to fill in a "form". It consists of several steps, which can be filled in, in a non linear fashion.
Now each step builds upon the data of the previous step, so changing an earlier step might (most often not but there are some edge cases) make later steps which were valid "incomplete" again.
There is also the case where a step might simply have invalid data. Or where the step is not yet saved to the server.
So that leaves me with 6 different "states" a step can be in:
- Not yet visited: grayed out icon containing step number
- Currently visiting: blue icon containing step number
- Completed and saved on database: blue "checked" icon
- Bad data/server failed: warning exclamation mark icon (in red).
- Incomplete data: grayed icon containing step number (??)
- not yet saved data (waiting on server feedback, or simply the user has not yet pressed the "save" button): ????
Especially the later two I wonder about, they're important since they require user interaction before finishing the wizard: however using the same visuals as a step that is simply "in the future" makes it not stand out and ignorable. Especially the last state (not saved data) might be troublesome.
I try to save data automatically but there are steps when saving can only be done when the whole form is filled and won't be modified anymore. (Think about creating a list of names, where in the end each name must be unique, while typing this is obviously not the case so saving can only be done if we're pretty certain the user won't type anymore).
The example "stepper" I follow is show perfectly on this website:
https://material-ui.com/demos/steppers/#horizontal-non-linear-error-step
I can however fully change the icons (and colours will be changed later by someone else).