2

In our system, currently we have good styling and effects for buttons, for example submit button, cancel button etc.

enter image description here

Now we have a different element. Let's say it is a summary tag element. Which acts as the summary information holder of a table.

But, on hover, it shows up a dropdown/tooltip with more information. Thats it, no fancy stuff. PLEASE NOTE THAT THE TAG IS NOT CLICKABLE AND DOES NOT LEAD ANYWHERE

So here we have 2 options.

1. With hover having styling or faded effect. But my dilemma here is that wouldn't the user feel that it's clickable?

enter image description here

2. With no styling on hover.

enter image description here

What do you think is the best option here? Is there any better/standard solution here?

Improve this question

3 Answers 3

Reset to default
2

I believe that you already know it but the element just could look like a button if it is a button and this is not the case.

I would like to see more than the buttons, I would like to see where and in which situation you are implementing these elements. Is difficult to give you a good answer without this.

Otherwise my viewpoint you have 2 alternatives:

  1. Make them light grey to looks inactive buttons.
  2. Make them info icons like the examples below. About icon usability, you can read this article.

My question for you: If you make the elements look like an inactive button the user will mouse over them? Then the user will read your hover information?

enter image description here enter image description here

You must take care to prevent the grey inactive button look like another (less important) button like on this image:

enter image description here

Improve this answer
2

As others have said, that control looks like a button, so users will expect to click it. Adding hover effects will only reinforce that expectation.

In any case, I would be wary of using hover to expose this information, for a few reasons:

  • Hover is not a thing on touch devices, so anyone on a phone, tablet, or touch-notebook won't be able to access it.
  • It makes it impossible (or at least very difficult) to select/copy+paste that information.
  • It makes it impossible to compare the information in two of those summaries.
  • It adds complexity because you need to take into account where the control is on the screen (so your tool-tip doesn't extend out of view).

For simplicity, I would probably use a more traditional disclosure control, which has a toggle to expand/collapse. If you can't (space restrictions, etc), I would at least add some other indicator which shows there is more information hidden - perhaps a ▼ arrow or ... indicator, and make the expanded info toggle on click (to 'lock' it in place).

Compact disclosure control example

Improve this answer
1
  • I agree with everything except the down arrow (which is the standard indicator for a selector). Upvoted.
    – Barnyard
    Commented Sep 20, 2019 at 14:05
1

"Faded" suggests greyed out/disabled, so is less likely to suggest clickability than "highlighted", which is what your buttons show.

However, hover styling may be appropriate to draw attention to the tooltip; possibly setting the background colouring or border of the selected summary element the same as the tool-tip to produce a visual connection between the two.

Do not use the same hover styling for buttons and your summary elements, as this can lead to the confusion you mention.

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.