How to illustrate a "saved, but incomplete" state

Question

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)
• saving
• saved & completed
• saved & incomplete
• error

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.

Answer 1

I think you could simply use regular iconography for these states, no need for anything special. See the image below, I'm taking these icons from Material Design Icons. While you may or may not like them, it's a known fact they had ran through extensive testing, so you know that part is covered.

I have added some color to them so you can see how you can reinforce the message. While the subject of totally different discussion, color is a very useful way to convey a message, despite the "color blindness" factor: it affects a very small fraction of people and the icons are clear enough to be recognized even without any color help. Additionally, you could use tooltips with more info like "you have 5 fields that require attention".

In your case an error would be the red icon, a "saved with errors" status would be a warning icon (because that's what it is, a warning), "done" would mean a satisfactory completed task and "done all" is optional and you can conditionally use when ALL tasks are successfully performed. This way, user won't need to look if there's something incomplete between the green icons. If they see the purple "done all" icons, they will know everything is done. Again, this is entirely optional, and just an idea.

As per your new comment, an error is an error and it's very difficult to make a qualitative distinction (probably impossible with iconography or short wording). Most people would only accept a binary status: it's an error or it's not an error. So, again, error is the red icon (you actually MADE an error), saved with errors is a warning (the error status is undetermined since the system is still expecting some input from the user).

Nevertheless, I think that rather than "saved with errors" (which should NEVER happen), your safest best is INCOMPLETE

Please be aware that I'm using Material just to illustrate a point of a well thought and tested library, you can find this kind of icons anywhere else, including fonts like Font Awesome, Glyphicons and the likes, so don't take this as "it has to be Material or nothing"!

finally, if you're concerned about the "rainbow scale" to convey a message, you could try the following resources:

• The rainbow is dead…long live the rainbow!
• CMRmap.m at MathWorks
• How We Created Color Scales

Answer 2

Yes! Finally someone with a requirement for a paradigm that I encountered for the first time over 10 years ago: the ability to save incomplete forms and not bother users about invalid stuff when they wanted to safeguard the work they had put in so far.

In my case tax return forms. You wouldn't want to require a user to complete a tax return in one session, so they had to have the ability to save and only send it in when the form met the minimum standards to be submitted to the tax agency.

What we did there was just always save.

There was no progress indication on the form's section as such, but the - always visible - list of "messages" served as that.

It showed errors, warnings and information. Errors prevented submission. Warnings indicated highly unlikely but valid situations. Information messages were about stuff a user might not yet have considered, but could be applicable and maybe even safe them some money.

Oh and all the messages in that list were "jumps": when clicked they would take the user to the question on the form that the messages was about.

When the list did not show any errors, the submit functionality (and its related buttons, menu items etc) became available.

Answer 3

Seems like the preferred optimal state is saved without errors. Display items in that state at full opacity (i.e., black or dark gray). Everything else is at a lower opacity (mid-gray), indicating a suboptimal state. Then there are reasons given with icons as to why they are incomplete.

In other words, the plain, unadorned presentation needs no icon: it is saved, complete and the standard.

Answer 4

My thoughts on the dilemma of how to show saved with errors is that the warning icon should not show on the list side panel. When the user saves with errors, to me, it is the same as just a regular save. The form is basically incomplete and will be completed when the errors in the form are taken care of. The errors should show when the user returns to the form to complete the form. Knowing there are errors when looking at the list of incomplete forms makes the user think, which is not what we want them to do at that point. We want them to quickly find the forms that are incomplete and deal with that situation individually. Just my two cents.