4

I'm developing a website which basically contains all the info about a series of projects (a few hundreds). Each project has its dedicated page with all info about it (dates, classifications, schedule, budget, employees...). I wanted the data to be very easy to edit, so I used inline editing. You can click on any data to change it, and all the other values update themselves Excel style.

I've tested the prototype version on some of the future users, and each one of them asked me:

How do I edit the data?

None of them thought of clicking.

So my question is, how can make my users click on a text, date, number to edit it?

Improve this question
1
  • To accommodate inline editing with mobile, I've begun adding an "Edit" link to the page wherever other actions reside. Upon click or touch, this link enables the hover effect upon every editable field and a pop-up appears indicating they can touch or click any data to edit it. When the pop-up is closed, the highlights go away. I do not have empirical A/B data to prove this approach is better, but I have not answered many "how do I edit" questions from the user base.
    – bishop
    Commented Jul 23, 2014 at 1:49

3 Answers 3

Reset to default
8

Assuming the link you provided was similar to the prototype you tested, I think the main problem is there's no invitation to edit on hover. There's got to be something that gives a hint that the information is editable. Here's some good information from Patternry.com's inline edit pattern, as well as the referenced hover invitation pattern:

  • Invite the user to click the text providing a tooltip when the mouse is over the text the user wants to edit. Use phrase “Click to edit” or just word “Edit”.
  • On hover, change the mouse cursor to an edit cursor.
  • Highlight the element by changing the background of the element to yellow or add borders around it.
  • See Hover invitation pattern for details on how to provide an invitation.
  • An alternative way to invite the user to edit is to show an edit link beside the element the user needs to edit. If the edit link is always visible, the discoverability of this feature improves. If good readability if essential, show the link only on hover.
Improve this answer
4
  • 3
    +1 good point. Just note that hover alone will not solve all use cases as those using the website from a touch enabled device have no "hover". This may not be an issue for @ALS though depending on what his target audience is.
    – GotDibbs
    Commented Aug 13, 2012 at 19:18
  • Oooh, good call about touch devices and hover. I suppose in those cases you'd have to make it either always look clickable or provide an edit link.
    – Mark D
    Commented Aug 13, 2012 at 19:24
  • Thanks for all your answers. Support for mobile/touch device is not a current objective, so the hover invitation patter will be useful.
    – L. Sanna
    Commented Aug 13, 2012 at 19:40
  • 1
    After following Mark's suggestions, I recommend running a new usability test to verify that users are not still asking, "How do I edit the data." Hover invitations will definitely help...unless the user never tries hovering.
    – Brian
    Commented Aug 13, 2012 at 19:56
3

The way I see it you have a two baisc options (of which I generally prefer the first as it doesn't delay the user's interaction):

  1. You can provide an "Edit" link (possibly with a relevant icon) at the edge of each piece of content which automatically triggers edit mode, or you can add an edit link to the top of the page which flips the whole page to edit mode. This might also help prevent accidental editing from just clicking around/issues with selecting content.

  2. You can provide an introductory tour for people who first sign up, or are first time users of the new version of the site.

Improve this answer
1

One method that I have seen used and I have used a few times personally is to highlight that area when they scroll over it. One of the first places that comes to mind is Google plus. If you are in the edit profile mode, you can just hover or different elements and it gives it a nice shade of blue and in some cases a brief descriptive hover text.

I think this is a pretty slick method and quite simple with the right css styling.

Improve this answer

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.