7

It's very common to indicate to the user that they can "edit in place" by changing the style of the editable content when hovered over (e.g. adding a yellow background, "click to edit" tooltip, pencil icon appearing, etc). This means the user doesn't discover the functionality until they just happen to hover over something editable.

In my web application, I have a page that has upwards of 25 editable fields. I want the user to know just by looking at the page that they can make edits. Additionally indicating the ability via hover would just be an added bonus.

I've thought about dotted underlining each editable content, as this usually implies "hint" or "hover on me" (like the image below):

enter image description here

The problem with this though is that it doesn't imply "i'm editable", it instead just encourages the user to hover (without them knowing why), and then the hover will have the indicator. Maybe this is OK? At least they'll discover it faster. But is there a better way?

NOTES:
The reason the page isn't a permanent edit form is because users want to view-only the information just as often as they want to edit it. But when they do want to edit, they usually just want to quickly edit a single field. Also, I am not worried about mobile, as my users are solely on desktops.

Improve this question
6
  • 2
    Really, the dotted underline is really for <abbr> element - showing abbreviations. It is somewhat misused for hover, so much so that the original purpose is overlooked.
    – JonW ♦
    Jul 23, 2014 at 19:33
  • 3
    If you have 25 elements that's editable and you want the user know it's editable just by looking, that means you could potentially have 25 graphical indicators on the page. Not sure how your page looks now but with that many indicators, it can get clustered.
    – Chairman Meow
    Jul 23, 2014 at 19:44
  • @JonW - I honestly had no idea! What an interesting fact. It's always nice to learn the origins. One of my personal favorites is explaining to kids that the "save icon button" is an image of what actually once was a physical floppy disk that you inserted into the computer and placed your files on.
    – LoveGal8
    Jul 24, 2014 at 14:55
  • 1
    I would question "my users are solely on desktop" - how can you be sure? People probably try using their mobiles. Are you running tests? How can you be sure of the results?
    – ArtOfCode
    Jul 29, 2014 at 18:14
  • 1
    @ArtOfCode - I do appreciate the concern, but yes, I am absolutely sure. Essentially, mobile devices of any sort are not allowed in my users' environment for security purposes. They also literally cannot access the network my application is on via a mobile device.
    – LoveGal8
    Aug 12, 2014 at 22:10

3 Answers 3

Reset to default
3

I would personally use an edit icon like the following

edit http://catalogus-professorum.org/extensions/themes/silverblue/images/icon-edit-grey.png This is your text

By using an icon the users will know that there is an action associated with those contents, without having to interact with the mouse cursor.

This solution works also on touch devices where the absence of a cursor would make it impossible to discover this functionality.

I would also recommend to put the icon before the text and not after it: this way it's immediately discoverable being consistently placed in the same place all the times.

If you could use a small icon with a color that doesn't attract too much the eye -ie a light gray- it will be almost unnoticed during a quick scan of the page, but would be visible enough when searching for it.

Improve this answer
1
  • Thank you for your suggestion! It sparked some ideas. I ended up placing an inset bevel, light gray background behind each editable field (that sort of looks like a grayed out input text field, but more subtle). I also used hover effects. No one has had trouble figuring it out yet! :)
    – LoveGal8
    Sep 12, 2014 at 17:55
1

Is this a form they use often or more like a one deal situation?

Because if they see it once and will never or very seldom would see it again, just stick to form fields which are recognizable and present no usability threats, although at the expense of looking not so nice.

If however, they use this often, and the pretty UI is a valid concern, why not have contextual help, possibly with an animated gif to illustrate the capability? (Think of a mac touchpad or magic mouse preference with the illustrative videos to the side).

My (harsh) recommendation is to err on the side of usability over aesthetics and innovation, particularly on mission critical tasks.

Improve this answer
0

Could you use inline text boxes? They are easily recognized as editable. You could also incorporate masks or typed input like date pickers as needed.

Improve this answer
1
  • 1
    If they were all inputs, then the page would just simply be a form. However, I stated in my NOTES section why I don't want the page to be a form.
    – LoveGal8
    Jul 24, 2014 at 15:00

Your Answer

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

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