How to increase visibility of required fields without interfering with error visibility

Question

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?

Answer 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.

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

Answer 2

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.

Answer 3

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.

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.