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.

Context

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.

Question

Have you any feedbacks or advices to improve it?

share|improve this question
1  
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 at 12:15

3 Answers 3

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.

share|improve this answer

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

share|improve this answer

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.

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.