0

Background

Users may provide various categorized input entries (e.g., danger, warning, avoid, and relax), such as those in the following image (e.g., "Relax #1", "Avoid #1", etc.):

Categorized inputs

Problem

When first shown, the screen appears as:

No categorized inputs

The blank areas (in light blue) below each category turn into autocomplete input fields when they gain focus. However, showing four input fields would clutter the aesthetic.

The idea is to give the user a WYSIWYG experience. Once the user has completed editing, the inputs disappear. The result is what other people will see (who do not have editing privileges).

Invisible input fields are interesting. For example:

  1. The user clicks on "Unknown User".
  2. An input field appears, allowing the user to change the "Unknown User" text.
  3. The input field loses focus, the new value is saved, and the input field disappears.

Question

What would be a good way to indicate that each category can have text added below, without necessarily making the autocomplete field visible all the time?

2 Answers 2

2

If you only had one category I'd suggest using a call to action, such as saying "click here to add". However, having four of these won't look very good, so I would use dummy items instead, indicating that the region is meant to hold items, the kind of items you expect, and providing a way to edit the first item. Something like this:

enter image description here

1
  • I like the notion of making it funny and having an edit (pencil) symbol. Thank you. Sep 30, 2012 at 21:02
1

I could consider some placeholders like so: enter image description here

When any of the place holder is clicked, a textbox/autocompelte box becomes visible: enter image description here

My recommendation is that even if the list already contains 1 item, you keep the place holder so that the user can know here to click to add further items to the list. This way, you have provided affordance so that people know you can click on some area of the list to add more items.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.