3

There is a form which contains inline-edit fields, but some fields don't have any value. Currently I'm displaying just red label with value "Empty field".

enter image description here

But some people say, that this isn't clear for an user. So, is there any better solution? For example, just changing text in inline-edit to "No value" or something else? Or display a button which will be used to show input for entering initial value?

4

This can be done a couple different ways.

1. Sample Values as placeholders

If your fields you can set default values as placeholders <input type ="text" placeholder="John Doe">. This will give your users immediate context in what data you want them to fill out. The placeholder is typically a lighter color to give it a "ghost" effect of what content is supposed to go inside of the input field.

enter image description here

If you are giving instructions ie. "Password must be at least 6 characters" this should be done as small text above or below the input field. People have short term memories and losing instructions on input focus is not user friendly.

2. 'Insert Value' or 'None'

Use the phrase 'insert value' as it is more assertive and will help guide the user to give you sufficient meta data. Empty Field may confuse the more simple user

enter image description here

Linkedin uses 'None'

enter image description here

3. No Values

According to Nielson Norman Group users eyes are attracted to empty input fields and may even end up skipping fields or be confused with default values

  1. Fields with stuff in them are less noticeable. Eyetracking studies show that users’ eyes are drawn to empty fields. At the minimum, users will spend more time locating a non-empty field — a nuisance. At the worst, they will overlook the field completely—a potential business-killing disaster.

  2. Users may mistake a placeholder for data that was automatically filled in. When there is already text in the field, people are less likely to realize that they can type there. Some users assume the placeholder text is a default value and skip the field completely.

enter image description here

Additional UX

I can see an accessibility issue with your form buttons. People who are red green color blind will see those buttons as the same color. It is best if you give your user the preferred action as a Button with cancel as a link. It is debatable whether to place cancel to the right or to the left however with my own experience doing user testing we have found that the save button to the right is preferred. It makes sense as it is the flow of how people look at the page (most call to actions are bottom right) and also is positioned better for mobile use.

  • 1
    Unfortunately, I can't use placeholder for my inline-edit or just show input because of specific area of our system. So, I chose option 1. And thanks for your comments about "Cancel" button it was really interesting for me! – Ilya Dmitriev May 29 '15 at 13:12
  • 1
    I have also observed empty fields when having values are put in a different color from the normal input. This gives subtle cues to the user that the field is empty and also informs of a possible format. – rohan Jun 16 '15 at 10:59

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.