5

I am currently designing a screen for an internal business application, in this screen is a table that contains a lot of orders, each of these orders have many entities associate with it. - Two Internal Employee's - Two different external customers

I have been thinking about adopting a tooltip similar to what outlook and gmail does with their contacts. As the user hovers over the name, a tooltip of actions and important information appears.

If I were to adopt something like this do each of these entity names need to be blue resembling a link? or would it be ok for them to remain grey and as the user hovers over the name it turns blue and underlined?

1
  • 1
    Just as a side note, avoid underlining anything (with a solid underline -- dashed underlines mentioned below are fine) that isn't a clickable link. Users expect to be able to click it and go somewhere, and if nothing happens, they'll think the page is broken.
    – Jim Dagg
    Nov 12, 2013 at 19:02

5 Answers 5

4

If your links aren't actually links, but instead are just signals that a tooltip is available, then a pretty widely used approach is to use dashed underlines.

Depending on how much you want these to stick out, you can use blue or something else, but I would use gray. You really just need an indication that these are "hoverable".

4

It should have some indication that you can interact with it. Whether that indication is 'making it blue' is impossible for us to say without knowing the full design of your applications and your users.

FYI, while adding functionality to a hover state is common, do note that in today's increasingly touch-centric world, it may not be the most future-proof solution.

2
  • You do bring up a great point about making something have a hover state when today's world is heavily touch centric. However, we are not targeting any touch devices for our business app. Nov 12, 2013 at 14:40
  • 1
    @JasonFrade fair enough, but remember what you target for isn't always something the end-user may agree with. If you have absolute control over it as an internal product, you might be fine. Just watch out for that one upper executive who insists that IT get his iPad working. :)
    – DA01
    Nov 12, 2013 at 15:08
2

If they're not a link, only a tool-tip hot spot, they shouldn't be link color. But they should have some indication that they're special (that's always visible, not just on hover), perhaps a subtle difference in background color. There could also be a hover change for these hot spots, perhaps a slightly stronger difference in background color, or maybe a border box, to emphasis what the tool-tip pop-up applies to.

2

I think they should have no indication what so ever.

If your reference is Gmail, then you probably noticed that it suggests no indication either. Well, they know something about simple UI at google.

First, I think link-like indication will be misleading. Second, though using very slight modifications as suggested above (background color, underline), they might soon mess up your screen when others to come and, more than that, they "take the place" for other maybe more important indications. There is no way the user, at some early point of time will not, "accidentally", hover over one of the entity names. And when it will, Bang! he learned it forever. The learning curve is very steep in this case.

So, as long as the user has other options to get the important information, I would have give no indication.

1

Without knowing your users, I would ask if this is an application that will be used multiple times daily, or infrequently accessed to get monthly reports?

That should guide your decision. People are in email all day long. Discoverability is greatly increased by frequent use...

Most users on the web assume that links will be navigational. I.e., it will take the user somewhere.

Perhaps if testing indicates that users are missing the tooltip functionality, one work around is to use a dotted underline, indicating not that the user will be sent somewhere else, but there are details on demand.

I imagine (I don't know any designers working on gmail) gmail does not use colors or visual affordances because with dense lists, you could end up with a cluttered UI.

.

2
  • This is an internal application that will be used 8hrs+ daily and something that users will be trained on. Nov 11, 2013 at 21:18
  • I would maybe include a subtle hover state, but wouldn't clutter the UI with a blue color or persistent underline. Thanks for the clarification...
    – Mike M
    Nov 11, 2013 at 21:23

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.