1

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.

the sidebar

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:

Saved without error, edited, and current

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.

  • 2
    is there a requirement to allow 'save, with errors' - would it not be easier to validate any errors on save? – Midas Mar 14 '16 at 16:08
  • To add to @Midas comment, what scenario would allow an error that's saved with what ever is implemented? – Majo0od Mar 14 '16 at 16:23
  • 1
    @Midas please view my edit :) – invot Mar 15 '16 at 14:17
  • Do I understand it correctly, that it is meant like a LinkedIn-profile that I potentially could fill up but I do not HAVE to? If so, this would not be an error, but an "incomplete, yet correct" progress. If so, I'd play with focus: Put special attention to items yet unfilled: Put them in the front, highlight them somewhere else, etc. If that's not what you meant, I am not completely sure what you meant! :) – Jan Mar 15 '16 at 15:09
  • 1
    @Jan - The required fields have to be filled out before the entire form can be submitted, but you can move on to any section you want at any time, and save whatever changes you made at any time. This is a requirement that we cannot change. Because of this, we would like to user to know which sections have saved changes, but still have required fields that need to be filled out before the entire form can be submitted. – invot Mar 15 '16 at 15:16
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.

enter image description here

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:

  • You make a great point, but it doesn't answer my question. How do I specifically indicate "saved, with errors" and "saved without error"? Would the double-checkmark be "without error" while the single checkmark indicates "with error"? – invot Mar 15 '16 at 15:54
  • no, 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 teh purple "done all" icons, they will know everything is done. Again, this is entirely optional, and just an idea – Devin Mar 15 '16 at 16:00
  • Can you adjust your answer a bit to better answer the question? You make a good point there. Also, you made me realize something just now. How would I make a distinction between a "general error", and "saved, with error"? – invot Mar 15 '16 at 16:06
  • Thanks for your great resources in your answer. I had to change my question a bit to clarify exactly what I'm going for. Maybe "error" isn't the term I'm going for, but "incomplete." – invot Mar 15 '16 at 22:12
1

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.

0

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.

enter image description here

  • I had to change my question a bit to clarify exactly what I'm going for. Maybe "error" isn't the term I'm going for, but "incomplete." – invot Mar 15 '16 at 22:12
  • 1
    Added a graphic to be a little clearer! – Eric Stoltz Mar 15 '16 at 22:13
  • I think that's an interesting approach. How would a "hovered" and "active"/"current" section look? – invot Mar 15 '16 at 22:20
  • 1
    Edited the graphic to show that. Of course I'm just using black and white; use whatever colors have the same effect that fit in your application. – Eric Stoltz Mar 15 '16 at 22:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.