1

Our website allows for submitting orders that are incomplete (drafts). Note that this is different from having invalid formatted data or what have you.

When the user is ready to actually submit an order, some validation must happen to make sure everything that is required is filled out.

I'm curious on what would be a good user interface to notify that there are some errors that need to be correct.

Our order form consists of a header form, with buttons to access the line items which pop up in a modal view.

Possibly a static element floating at the top or bottom, with back and forward arrows which the user can use to browse through the errors would be useful? Fields could be highlighted when hitting the back and forward arrows too.

I haven't ran across such a design before. Is there something that would be more familiar to the user? Something simpler to design?

  • Does this sort of post-validation have a name associated with it? – Justin Nov 14 '14 at 19:04
  • It is not clear to me why a standard form validation pattern, seen all around the web, would not work in this case. Why can't I submit a draft and just get a page returned to me describing any validation errors and asking me to fix them? – Evil Closet Monkey Nov 14 '14 at 19:12
  • The area that makes this a bit more challenging is the modal design part. We are showing line items as modal pop ups. Ex. when you want to add a product to an order, a modal view shows asking you for whatever information. When actually submitting the order, if there is an error, the field which has the error isn't necessary displaying on the screen. If there are multiple errors (header level, and spanning across multiple line items), I would like to design something that would walk the user through fixing the errors without overwhelming them. (Sorry for multiple edits!) – Justin Nov 14 '14 at 19:26
  • Are the fields which might not contain enough information on the line item level or in the header? If they are on the line item level, can they be validated before closing the modal "dialog" box? If they are in the header, then what do the modally entered have to do with the situation? If the potentially invalidly entered fields are in both areas, line-item and header, can you treat their validation as separate tasks? – Henry Taylor Nov 14 '14 at 19:29
  • A requirement for the project is that required fields must be able to be left empty in draft mode. We will be continuously saving the data inside the order, so if the user wants to come back to it later they can. So there are to separate issues here, one is "does this field contain valid data" , then , later on, "if this field is required, is it empty?" We still can notify the user a field is required/invalid, but it shouldn't prevent them from saving. (Sort of like gmail, you can write an email and fill out the "To" field later). – Justin Nov 14 '14 at 19:32
2

Mark the fields that are required for submitting the order.

I work on a project with a similar situation. Users can Save the order any time (for completion later) or they can Submit the order to be processed.

Saving the order triggers the usual invalid format errors inline and such and is triggered with a Save button at the bottom of the form. This is mostly limited to errors with dates or email addresses or similar things.

Submitting an order triggers validation that looks for certain fields to be filled in before the order can be processed. Instead of making it a guessing game, we show the user which fields those are up front. This action is also triggered through a separate control in the order header.

Example from our style guide:

Example of required fields.

The orange icons serve as a visual checklist for our users so they can see how close they are to being able to submit the order (change the state). They disappear once the associated field is filled in. The important thing is that not every field has them (on a real order).

In edge cases where we need fields complete to be able to save a form there is a subtler highlight. It still has the same color for consistency, but it doesn't have the emphasis because we also disable the Save button if a form is not able to be saved.

  • Awesome, this does sound very similar to my issue. We are indicating which fields need to be required. The checking formatting on save, and required fields on submit is exactly what I need. The only key difference here is that all fields may not be displayed. More or less the line items are shown in a simple table with edit and delete buttons. Maybe instead of this whole walk through wizard I can simply highlight the line items that prevented the order from being submitted, so the user knows he must look there. Once opened the fields will be highlighted. =) Awesome. – Justin Nov 14 '14 at 19:46
  • Awesome, ran it by a few people. The whole wizard thing would be way to involved and unfamiliar to a user. Highlighting the line item rows that contain an error (Or use a message/icon) would be a great simple effective affordance to let the user know that line item contains missing data. They would then click the edit button and the validation stuff will work the same. – Justin Nov 14 '14 at 19:55

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.