I want to use the ContentEditable attribut instead of classic inputs.

It sounds like a duplicate of Affordance of Edit In Place functionality, but actually I would like to avoid the changing of background-color as suggered by the answer. Also, the linked question is dated from 2011 and UX practices evolve constantly, so maybe there are new approaches and solutions for this subject.

This is my currently approach : a different color in addition of a bottom border.

enter image description here

(sorry for the french on this gif)

You can try it with this demo : http://jsfiddle.net/Lazgp/6

I chose the blue and the dotted border for no really good reason, just like that.


Have you any feedbacks or advices to improve it?

  • 2
    It looks fine, I think in the context of having triggered the edit mode user will easily spot the difference and proceed to editing fields data. However, this is rather opinion-based question. – Dominik Oslizlo Feb 17 '14 at 12:15

Looks great! Dotted and dashed lines actually work great to give affordance. But the best thing you can do, to make people really understand that it is in fact editable, is to make the first field focused automatically.

This will give the user an immediate visual feedback and no guessing is required anymore.


It's really very unusual and have controversial affordance.

Dotted and dashed lines usually used for showing popup with some additional info and it just tells a user - you can click on me but not you can edit me.

I would suggest showing inputs for all editable items after switching to edit mode. It has greater affordance and also inputs motivates users to enter information.


The interaction looks good, here some ideas that must be tested if possible :

  • Why not propose your Modifer button on every section as Wikipedia does in order to improve focus ?

This interaction does not exist yet on English wikipedia, as far as I know

  • Be careful with dashed underlines and blue combinations, they could be misinterpreted as links. Your approach seems fine but you should acknowledge that it is quite unconventional.

  • As an echo to the previous remark : when hover/clicking in one of the inputs, it should look more like an input with the little help of a background as Basecamp does. Focus an make an example on the first input to help understand the interaction.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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