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

  • Just curious...why do you want to do this? It's a significant departure from convention. Commented Mar 25, 2014 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
    Commented Mar 26, 2014 at 2:22

4 Answers 4


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

  • 6
    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
    Commented Mar 25, 2014 at 14:08
  • @Blindy for tablet, there would have to be the textbox border always visible, or the pencil, or Edit hint text. Commented Mar 25, 2014 at 14:23
  • Yeah, something. Again though, not sure if he's talking about tablets or not, the OP I mean.
    – Blindy
    Commented Mar 25, 2014 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. Commented Mar 25, 2014 at 18:20
  • This is for desktop use.
    – nuwa
    Commented Mar 26, 2014 at 4:29

Does the user have to fill these fields before by using a classic form or is it only an 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.

  • 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
    Commented Mar 25, 2014 at 10:50
  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.


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.

Your Answer

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

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