User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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".
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?
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.
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
Linkedin uses 'None'
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
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.
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.
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.
