Monday, April 24, 2017

website design - Invite users to inline edit not only on hover?


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.



Answer



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.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...