Right now I have a form that is broken into multiple sections. Beside the form, there is a sidebar with a list of every section's name.
Each section will experience 5 states:
- unsaved edit(s)
- saved & completed
- saved & incomplete
My thoughts were to show colored icons on the side of each section name. For example, here is unsaved edits right below saved without error:
This all breaks down when I begin to consider what "saved & incomplete" will look like.
Firstly, the concept of "saved" is usually portrayed with green, while "incomplete" is portrayed as something of caution, meaning red/orange/yellow. So what color do I use?
Secondly, the checkmark is used to show success, but that icon obviously shouldn't be used if I'm trying to indicate something isn't quite right. So what icon would I use?
A mechanic of the form that cannot change is the user's ability to save changes as they go along, regardless of completion.
Each section can become fairly long, and may require the user to come back later to fully fill it out, but we want to allow them to enter in what they have at the time, save their changes, move forward, and come back later when they have that missing information.