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.

A new approach we adopted for one of our applications is that all our editable text such as name, a description that was once filled out to be border-less. To edit the text the users simply click on top of the text again and it becomes editable.

The border shows in these instances.

  • Border shows on roll over
  • Border shows while editing the text

My question is, will this make sense to users? Should I keep this method? Is there anything else I can do to improve this?

The border-less state vs with the border

share|improve this question
    
Just curious...why do you want to do this? It's a significant departure from convention. –  Josh Mar 25 at 17:35
    
@Josh Why we thought of using this approach is to reduce the amount of vertical lines. We want the interface to have a sort of word-document feel to it. –  nuwa Mar 26 at 2:22

4 Answers 4

up vote 13 down vote accepted

A possible solution would be to do it like JIRA does.

Normal: enter image description here

While hovering over it: enter image description here

When clicked on it: enter image description here

share|improve this answer
5  
Just as long as you understand this wouldn't be at all clear on a tablet since there's no "hover" to hint that it's editable. Nobody mentioned if this is HTML or not. –  Blindy Mar 25 at 14:08
    
@Blindy for tablet, there would have to be the textbox border always visible, or the pencil, or Edit hint text. –  user1306322 Mar 25 at 14:23
    
Yeah, something. Again though, not sure if he's talking about tablets or not, the OP I mean. –  Blindy Mar 25 at 15:12
    
You could keep the pencil icon there even on normal state. Then if a user clicks the icon or hovers over the area (on desktop) they would see the editable area. –  JDelossantos Mar 25 at 18:20
    
This is for desktop use. –  nuwa Mar 26 at 4:29

Is the user have to fill these fields before by using a classic form or is it the only edition method ? In the first case, users have a clue to understand that the completion of these field are belong to them

You can also write an explicit placeholder like "Description : Add a new description..."

Or, instead a border, slightly change the background color of the editable area to indicate there is something different. Interaction on roll over is still a good idea.

share|improve this answer
    
At the very beginning yeah a placeholder as you said will be there. But afterwards they will only see the text they added. Our assumption is that they will know that area is editable since they edited the text once before at the beginning. –  nuwa Mar 25 at 10:50
    
+1 for mentioning the placeholder. –  Bart Gijssens Mar 25 at 11:55

The user needs to know if text is editable or not. He will look for interactive elements and if he can not find any, he will not use it.

If this is an application used by users a lot of time, sometimes it might be useful to introduce a new concept to increase usability. In this case: borders for editable text are a really well-established UI behaviour and I ask you, what is the trade-off for the user in terms of usability, user experience and design?

I would advice, stick with the borders or find a good alternative, which is clear to the user.

share|improve this answer

Personal experience:

  1. I find text fields which show no clear hint that they are editable (different static text color or font is not clear hint IMO), very annoying.
  2. I find text fields which show edit hint when hovered moderately annoying.
  3. I find text fields which have some pen icon or something as hint slightly annoying.
  4. I find text fields which have some "fresh-looking" but clear hint such as underline or different solid background without border just fine.
  5. I find text fields which traditional border slightly boring but still just fine.

I think the answer depends on what is the most common use case? If it is looking, then optimize for looking, and 2 or even 1 might be fine. If it is for a data entry, then 4 or 5 seem solid approach. If it's page which is both for looking and "integrated" updating, then 2 or 3 or some discreet version of 4 would work.

Above does not consider case where field is empty. Right placeholder text might make even option 1 bearable. But the important situation is, when user wants to edit already filled field, if that is possible.

share|improve this answer

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.