How to indicate a text field does not contain content?

Question

In the wireframe below, the three containers could contain text. The user can add text to empty containers and edit existing text. Note that this form is not just for entering text, but often the user will be just reading the text previously inputted by her or one of her co-workers.

Two questions:

1) How do I communicate to the user that a container (i.e. Section 2) does not contain any content? i.e. it blank because no content has been added, and not because there has been some display error.

2) Should the Call to Action for an empty container be "edit" or "add"?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

For the first question : How do you make it obvious to the user that a text area is blank in the series of text areas ? I would do something like this, a faded tool tip/label inside the text area that is on display by default for an 'empty' state. This is popular in forms. As you type, key in, that messages goes away. When made empty again, its displayed. You can change the text to what fits your requirement. Kind of like a watermark.

You can see same approach for search field in StackOverflow page above.

Second question was do you use Add or Edit for empty text areas ? I would say why do you even need a link to say that? You can use inline edit, so on click inside the text area, those text areas can be made editable. If you really require a link to clearly say Edit or Add, then I think for a blank field Add makes more sense. For me an Edit is more in the case of making changes to existing content.

Answer 2

Provide context

No matter what you do, it's no good idea to leave empty elements just like that, trusting that users will understand the affordance. Even if they do (and any test will show you form elements are rarely understood by default by 100% of people), you will create another set of questions for the user: why are these elements empty? Did they forget something? Do they expect ME to do anything?

The good news is there are hundreds or probably thousands of resources to deal with this very common problem, including theory, examples and research. You can get some insight on what to do with an empty field depending on a wide variety of situations, quite probably yours will be included:

• Designing For The Empty States
• Google Material Design Guidelines: Empty states
• UI Design for Empty States, Zero Data, and Onboarding
• Empty States Patterns
• pattrns: Empty States

Conclusion

You'll see there are many ways to approach your issue depending on your specific needs, but you'll see there's always something in common: you NEVER leave anything to user's imagination if you can avoid it. In short: if an element that might or might not be empty is empty, then explain to the user why, and what to do (assuming there's an expected action)

Answer 3

A blank text box (what you have now) is sufficient.

In most contexts, it will be clear that a blank, labelled text box is empty. Users will understand that text can be entered here (particularly when there is an edit link, which further reinforces that they can enter something there).

Answer 4

You should use a <textarea> for the field and a <label> element for your Section 1, Section 2 and Section 3.

You can now link the <label> to the <textarea> using the for attribute in the <label> element, which must point to the id of the text area. For example:

<label for="name">Section 1</label>
<textarea id="name" rows="4" cols="50"></textarea>

This will really help you support accessibility for blind users who might be using an audio screen reader. Also, if you do this, when you click the label the text area will now automatically take keyboard focus.

From a user experience point of view, if it looks like a field a user will treat it like a field, so there is no need to add anything, as long as the field shows that it has focus, i.e. when you click it or use the tab keyboard key to navigate to it.

Answer 5

You could distinct 2 different states solving for:

• reading
• editing

For reading, use header and text. If empty, use placeholder explaining that there's no content yet Editing could be triggered for each section separately or all together. Then it changes from text to textarea.