I'm developing a website which basically contains all the info about a serie 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?

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.
–
cerebriformJul 23 '14 at 1:49

3 Answers
3

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.

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.

+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.
–
GotDibbsAug 13 '12 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 DAug 13 '12 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.
–
LSAAug 13 '12 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.
–
BrianAug 13 '12 at 19:56

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):

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.

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

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.