2

Context

This is a heavily used internal application. Users are on the phone with clients during interaction with the UI. There is a small set of required fields indicated by an asterisk. Since the users are actively involved with a client, I believe a more prominent indicator on required fields will speed their workflow.

Goal

I want to help the agents more rapidly locate the missing fields, without compromising the visibility of error conditions. Does anyone know of research on this topic?

Solution

A red field border highlights errors currently. Should I use the same technique to indicate the field is required and missing? I'm concerned that this should be reserved for actual errors.

Another option is to use a secondary color (like yellow) to help users see the field, but not indicate an error yet. Has anyone seen something like this in use?

5
  • Can you include a screenshot of your current indication to the user?
    – BDD
    May 4, 2015 at 14:32
  • Welcome to UX.SE. Have you tried searching on this site for an answer? Please show what research you've done, because required field indicators have been covered extensively here.
    – tohster
    May 4, 2015 at 14:34
  • 1
    @BDD I don't think that the question you referenced is the same as this one May 4, 2015 at 15:33
  • 1
    @BDD, This doesn't seem like a duplicate to me. That other question is about the coloring of buttons, not the styling of validation. user3656843, if I'm understanding you correctly, your question is whether form fields that are invalid because they haven't had data entered yet should be styled differently from form fields that are invalid because they have had invalid data entered. Is that correct? If so, you may want to edit your post to make this clearer; with its current focus on the colors, it may be closed as being rather broad and subjective. May 4, 2015 at 15:36
  • 1
    Thank you for the edits plainclothes. I need to do a better job posting my questions. @BDD - I can not post a screenshot unfortunately. Yes, I am looking for input on a color code for required, but not yet entered status. Reserving red for an error state if they try to submit it without those elements. At which point it becomes an error.
    – PMcNeil
    May 4, 2015 at 21:35

3 Answers 3

1

It’s always tough hunting for enterprise UX research that’s not horribly out of sync with the transformation of the business. On the one hand, you have to take into account the “consumerization” of the enterprise space. On the other, it’s still not the same set of considerations.

So, working from a base of experience* rather than reference, here’s what I can offer.

Establish order

As you know, agents on the phone interacting with real humans in real time are pushing cognitive load pretty hard. Anything you can do to make the workflow self-evident is a good thing. The trick is to maintain visual order and hierarchy.

Duplicating the error condition for another purpose undermines that hierarchy. So I think it’s safe to say that’s not the right path.

The tricky middle ground

You need to find the visual step between good data and wrong data. Asterisks are easy to miss in a high pressure workflow. An alternate color is a good solution, but it could get noisy in there. The exact solution is going to depend on the rest of the surrounding hierarchy, but there are some simple tactics to use as a starting point.

Possible solutions

Keeping standard fields on the “soft sell” side helps the decisions that follow. Stepping up the priority scale, you can:

  1. Darker field borders. Depending the visual noise of your UI, this might be enough. Unfortunately, it can also interfere with your “focus” solution.
  2. Bold labels. This is stronger than #1, but it’s downside is possibly interfering with form headings.
  3. Change field border color. Similar to errors, but not quite so strong.

As you get stronger with your required data (and other things in the UI), you have to go back and reassess your error condition. A simple border color (no matter how loud) may not be sufficient. I like a stronger error highlight, e.g. what I’ve shown here.

Sample solutions

* I happen to work on a very similar application on an intermittent basis.

1
  • it is indeed tough finding relevant research and samples from enterprise applications. Thank you for the great suggestions.
    – PMcNeil
    May 4, 2015 at 21:39
0

Avoid relying solely on a color. Incorporate a thicker border, text variant and/or icon to add emphasis and call attention to the area.

Luke's article about Web Application Form Design, UX Matters Label Placement Study and Nielsen's 10 Usability Heuristics are good starting points.

Go talk to your users and see what they think. You have the advantage of tailoring the experience to best suit their needs.

0

Plainclothes provided an excellent answer. I want to share some of my findings from usability tests on this exact problem.

We have a web app for internal usage and use a mix of border and background color to indicate required fields and error fields.

input styling

Unlike the * (asterisk), users have to be trained to understand the styling means required. Testing with users unfamiliar with the system, 50% of users can guess what the styling represent. 30% have no idea until they've been explicitly told. But once they've learnt it, it's super easy for them to spot the required fields.

Because we use a horizontal form where all fields align, user can scan down the form quickly to find all the required fields using the left border. Focused field also have an additional background color as a reminder that it's required without overly emphasizing these fields.

So only use for high usage apps. Stick with the asterisk for normal forms.

1
  • 1
    FYI, out in the consumer wild, there is a growing sense that marking required is not the right solution. Instead, indicate in some way if a field is optional. Even better, only ask for required data. Collect the other stuff progressively, as the opportunity arises. Again, this is in consumer land, not business applications. May 4, 2015 at 21:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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