Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Imagine an app like yelp. In this case, you select the amount 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 screen. (cleanest way, but is it clear enough?)

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

share|improve this question
add comment

4 Answers 4

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.

share|improve this answer
1  
That's interesting - I like that. Rather than trying to hint at the functionality directly from the text itself, you hint indirectly via another control that also adds value by clearly defining a call to action in the event that the user wants to use a different message. Good answer! –  Roger Attrill Feb 6 '13 at 10:06
    
Interesting idea indeed! Thank you! (thanks everybody for all the answers by the way :) –  arnold Feb 6 '13 at 19:03
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
1  
That's fine for single field but what if there are several editable fields on the same page? You can't have all of them selected at once. –  JonW Feb 6 '13 at 12:13
    
Yes, you cannot have all of them selected at once. The idea is to make the user think that the text is editable. All the fields would mostly be similar-looking. The first among them would have the focus and so the text would be selected. In addition to that, whenever user hovers on the field, a pencil icon can be made visible somewhere around the text-area/box. –  Krunal Rasik Patel Feb 6 '13 at 12:30
add comment

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)
share|improve this answer
    
Yes, it seems that often the less elegant solutions are the most clear and most communicative ones. –  arnold Feb 6 '13 at 19:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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