What is the best way to indicate that text in a text input field is editable?

Question

Imagine an app like yelp. In this case, you select the number of stars that you want to rate something. When you do, a pre-generated text is displayed in the text input field. You can either keep this text, as it is a useful pre-generated review, or you can delete this text and write your own.

I'm trying to decide what the best way is to indicate that this text is something that you don't HAVE to use, that it's an option, not forced upon you. That it is editable.

I can: - have an icon that indicates that it is editable (pencil?) (not very clear) - have text that says e.g. "tap to edit" (a bit messy, having a hint on screen) - have the text be "selected" the moment it appears on the screen. (cleanest way, but is it clear enough?)

Anything obvious I'm missing? What do you think is best?

Answer 1

I think a good way of dealing with this is to add a round close icon found on many search inputs. This indicates that not only is the text editable but can be cleared if they choose not to use it.

Answer 2

The best way in my experience is to do at least the following:

1. The text should be high contrast, for example black on white (preferred) or white on black depending on your design.

2. The text should be visually distinct from labels and other non-editable fields in your application.

3. If your application uses a mouse, ensure that the cursor changes to the I-beam cursor when the mouse hovers over it.

4. If your application does NOT use a mouse, use an additional affordance, such as a fixed rectangular border and differentiating background color to show that the text is different to the rest of the application and can be selected for editing.

Answer 3

I would simply do this:

Whenever the text-area with default text is generated, I would display it as selected text by default. This will clearly make the user feel that the text is editable.

$('#id').select().focus()

You can put this in an afterRender

Answer 4

This is kind of a loaded question that depends on what else is on the screen:

• If you have multiple editable fields, you could have a separate edit state for the app (a common convention in iOS). And then after editing is done, save and take the user back to the initial screen.
• You can set the editable text off with a different color (think about link color conventions) and treat it in a way that is subtle.
• There is nothing wrong with saying "Edit" near the field. It may not be elegant, but there is no mistaking what I can do (This however is English specific, which is where an icon may lend itself as a better solution)

Answer 5

Add a placeholder that says what the user should write (e.g., name)

1. Change the style to have inner shadow
2. On hover you can show a pencil icon inside the text box
3. You can add a pencil icon at the left corner of the input field