3

I would like to allow the user to view stats or add tags to links on a website but that's a very rare use case since most users would never interact with the links beyond just clicking on them to go to their destination. What's an unobtrusive way to present the actions without distracting the primary use case?

Example:

Let's say I have a link to UX stack exchange on a page, most users would click on the link to go to http://ux.stackexchange.com, but I want to also allow users to go to http://mydomain.com/link/1/ to view stats and tags associated with the link, or click http://mydomain.com/link/1/edit to add tags to the link. 1 represents the unique id for that link in the db. I currently handle that by displaying two small icons under the link on hover but I was wondering if there is a more elegant way to do that.

Improve this question
8
  • Can you provide a bit more information? Based on what you've said, putting the stats/tags on a separate (clearly marked) page or using show/hide links would seem to be the easiest approach.
    – Peter
    Jul 2, 2012 at 5:41
  • Added an example to clarify my question.
    – shinzui
    Jul 2, 2012 at 6:04
  • Very interesting question. Is there any reason you can't inject some small links into the DOM right after the link (as seen on MediaWiki here) so the user doesn't need to hover over it (which may affect keyboard accessibility)?
    – Kit Grose
    Jul 2, 2012 at 8:47
  • Because those links are not part of the regular user flow and I don't want them to clutter the interface.
    – shinzui
    Jul 2, 2012 at 8:57
  • 3
    @shinzui in that case, how about display that function only two these users instead of all the users. I think you should have included this in the main problem description
    – zinking
    Jul 3, 2012 at 1:19

6 Answers 6

Reset to default
4

I suggest you incorporate the interaction and a modified style of a split button. Remove the button aspects of the visual design so the link appears normal. The link (Left side of the split) goes to the href. The pulldown (right side of the split) appears on link hover, it darkens when hovered and reveals a tiny menu of options when clicked. Mouseout of any of these elements and they disappear.

enter image description here

The options can be links or perhaps icons or icons and links. I was too lazy to make icons in this example.

Improve this answer
1

How about showing a small (pencil?) icon next to the link? When clicked, it shows an inline popup with your 2 actions (view stats and tags, add tags). This would also make it more touch-screen-friendly.

Also, if these actions only applicable to site editors and maintainers then I'd hide the icon from other user types.

Improve this answer
1
  • I would associate a pencil icon with the ability to edit the associated content, and I suspect others might, too (YMMV on this one obviously).
    – kastark
    Aug 2, 2012 at 8:35
1

I ended up implementing a context-sensitive keyboard shortcut that allows power users to press it when they hover over the link in order to bring the menu. I like the solution since it does not clutter the link heavy pages while allowing power users to easily interact with the links.

Improve this answer
4
  • Thanks for updating your post with what option you went with. Glad to know there's a solution. Out of curiosity, how do the users find out about these keyboard shortcuts? Is it just a training thing or are there any on-screen prompts?
    – JonW ♦
    Aug 5, 2012 at 9:07
  • Sounds like you implemented a solution that matches the knowledge you have of your user base. Not every feature has to be demonstrated to every user, does it?
    – Itumac
    Aug 5, 2012 at 14:21
  • @JonW: Users discover the shortcuts with the '?' shortcut, similar to gmail. As far as knowing about the existence of keyboard shortcuts and other power user features, they are documented and linked to from the tips section.
    – shinzui
    Aug 9, 2012 at 14:43
  • @Itumac Exactly. Most users don't care about it so it's ok if they eventually discover it.
    – shinzui
    Aug 9, 2012 at 14:44
0

if you think the two small icons under the link are distracting the primary usage, I would think this might be helpful, say: if the user hang the cursor on the link for more than an interval (say 5 seconds) then we just display that small icon indicating another usage.

Improve this answer
4
  • 2
    How would the user know that they can hover the cursor over the link to get more options? Hovering over a link is not standard behaviour so the only way users would notice that this has additional functionality is if they accidentally left the cursor over the link. That isn't very discoverable.
    – JonW ♦
    Jul 2, 2012 at 10:56
  • That's how it's currently implemented and I was hoping for a more discoverable pattern.
    – shinzui
    Jul 2, 2012 at 23:39
  • @shinzui that's pretty contradictory then, I thought you were mainly concerned about the distraction of the primary usage. say if we tell user there are there two usages of the link would that be a "distraction" ?
    – zinking
    Jul 3, 2012 at 1:18
  • I actually find intervals quite useful in certain occasions. But they have to be short to be effective, I wouldn't go beyond 2 seconds, which is neither invasive nor fast enough to be ignored...
    – Yisela
    Aug 2, 2012 at 3:08
0

I think you are doing the correct thing with your current ui. If you have space to contemplate extra icons or information appearing in the layout, this is the less obtrusive way to do it. Hovering is turning into a very common practise, but to create familiarity it's better to reinforce it by using it in different parts of the page. This way hovering turn into the equivalent of "show more actions / information" and becomes natural to the user. Always showing an icon (for edit, for example) is not bad practise, but it's less subtle. And since this behaviour is more of a specific use, I don't see the need to have it always present.

Improve this answer
0

Have you considered a tool-tip the user can interact with to put the links in? The only caveat would be that you should make it as easy as possible to use - don't make it a challenge for the user to move their cursor from the link to the tooltip without the tooltip being de-triggered and disappearing!

Example below: The upper state is the link the lower state is with the tooltip

Example tooltip

Improve this answer
2
  • Do you have any views on how this might be made accessible and not require a mouse?
    – Andrew Leach
    Aug 2, 2012 at 8:48
  • That's easily done using :focus as well as :hover - I always do this as a habit just in case!
    – TJH
    Aug 2, 2012 at 11:36

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.