2

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"?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

3
3

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.

enter image description here

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

enter image description here

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.

2
  • In HTML spec, that is called 'placeholder' w3schools.com/tags/att_input_placeholder.asp – Midas May 3 '16 at 19:31
  • Often the user will just want to read the previously inputted the text and will not be editing or adding text, and as such, I feel some stronger action such as clicking an edit button should be used to put it into "edit" mode. The placeholder idea when empty makes sense, and can be improved by giving instructions. Thanks! – user1032531 May 3 '16 at 19:38
3

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:

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)

2
  • Great list of resources. I didn't know there was so much written on the topic. – user1032531 May 3 '16 at 18:59
  • By the way, I was very torn about not selecting this answer as it is great. – user1032531 May 5 '16 at 2:55
0

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

2
  • If all were initially empty, what makes then think it is a text box, and not just some strange rectangle? – user1032531 May 3 '16 at 13:34
  • @user1032531 If everything can be empty that is slightly different than one field that can be empty. You might need to communicate somehow that editing the information is possible (however, you are already doing this to some extent with the links that say "add" and "edit"). Ultimately this depends on the context...if you edit your question with more specifics about the application, that would help. – user31143 May 3 '16 at 13:50
0

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.

0

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.

1

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.