6

I want to use contenteditable as an edit-in-place mechanism. However, I'm struggling with the usability of it. The problem is that once a user clicks on the area, it's not obvious that they can edit it.

What's the right way to make this more obvious. I've thought about giving it a border, or changing the background color. Unfortunately the box is on a white background, so giving it any other background color might look a bit odd.

Improve this question
1
  • Able to share a screenshot? We could help more specifically then otherwise the answer will be more general.
    – Chris Janssen
    Nov 16, 2011 at 19:35

3 Answers 3

Reset to default
9

Flickr seems to do this well. Anything that is editable turns butter yellow on rollover and becomes an editable field once you click.

Here is a field on its own. enter image description here

Here is a field on rollover (hover state). enter image description here

And here is the field after clicking. enter image description here

Improve this answer
2
  • 37Signals wrote a very interesting article about the Yellow Fade Technique (37signals.com/svn/archives/000558.php) in where they describe that you could change the background color of a field whenever you save the changes you've just made. Flickr however is using the yellow background whenever the field is active and ready for the user to change its content. Either way, changing the background color is one of the possible solutions. Another one would be to use an icon of a writing pen next to the field making it clear that you can alter its content.
    – Paul Olyslager
    Nov 17, 2011 at 9:54
  • Nice article, @PaulOlyslager The same technique is used on this website (orange fade) to show what is updated when you click a notification link.
    – Taj Moore
    Nov 17, 2011 at 22:55
1

If the user wasn't frequent I would supply a stronger visual que to let them know this field is editable (pencil icon is the classic choice). If this is planned for frequent use you would have affordance for something more subtle, such as a tinted background.

I'd be inclined to try some quick guerilla testing to see which approach you choose to do works best.

Improve this answer
0

So until there is a screenshot, here is my general answer. As you have indicated, a visual difference is usually the indicator here. A key thing to play off of is the users mental model that an input on a page means that I can, well, input data there.

So the simple answer is make it look like (or use) a standard input once in the inline edit mode.

One key here, for my own preference, is make sure you size the area to support the border, padding etc. for the input style so that the information, and layout do not move as you go between editable fields.

The other thing to consider, if you arn't having them click edit to put everything in edit mode, is how do I know what objects are editable. My favorite pattern for this is to provide the mouseover that exposes the input like style in a faded manner. That way I am invited to click (to turn it into a input which I can edit). If you have an edit button and everything becomes editable then this is a moot point.

In this example the top is hover, the bottom is clicking in and editing.

Example of Hover and Edit (for inline editing)

Make sure you use the border to help create the input effect, and this is a place you can add color to indicate it is active. Also don't underestimate the ability to change the background to just off white (either with a splash of color or without) that is enough for the brain to sense, but doesn't cause the input to look odd. You can also add a tiny drop shadow to help emphasize that it is an editable input. Just don't go overboard with the drop shadow :-)

Improve this answer

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.