3

Me and a friend were having a discussion on button design and came across the hover-state of the outline buttons of Marvel.

Marvel outline-button hover state example

I believe this is not the right approach as an outline button is designed that way for a reason. When an outline button is no longer outline, I believe users might experience a loss of context.

As an alternative, I'd choose for an outline button to have an increase of color vibrancy on the outline as a hover state.

Example of outline button in my approach

What do you think the hover state of an outline-button should look like?

|improve this question
  • Is that change button active or not? It looks like you're clicking it, but nothing is happening. Is that correct? – Majo0od Dec 6 '16 at 14:03
  • 1
    Whatever you decide to do with the hover state (colour inversion, border change, ...), please make sure that each button state has sufficient contrast between foreground and background. You can check the contrast using this free Colour Contrast Analyser (which has a colour picker tool). To find alternative colours, you can use Joe Dolson's Color Contrast Spectrum tool. – Christophe Strobbe Dec 6 '16 at 14:16
  • @Majo0od There are two cycles in the gif. The first is a hover, the second is a hover, active and active with no focus. – amees_me Dec 8 '16 at 20:58
2

I believe this to be a matter of choice. You can check how the different Stackexchange sites apply different styles and hover interactions to the top bar buttons.

Material design doesn't cover these Ghost buttons. However they are quite similar to the Flat buttons and maybe you can take the tips applied to those. For those when the user hovers the button it is supposed to make a subtle change. It only changes the background to a darker/different color but the color of the font is maintained the same.

enter image description here

I have seen software like Photoshop apply the more prominent color outline to buttons because of the importance of an specific button within the others, not when hovering but always (for example: Save, Cancel, Done; the Save has a more outstanding border color).

|improve this answer
1

The problem is not that the button is fill when you hover it but the button is a mix between outline and 3d button. Indeed, you can see border effect below at hover and above at click, that's why you lose context. But the outline button must look like a button, a clickable element so you need to do more than a simple border highlight like fill it with solid color (in preference the same color than the border). Here an interesting article to read more about user experience on buttons : https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6

|improve this answer
1

as an outline button is designed that way for a reason

It is designed that way in order to avoid drawing too much attention to the button compared to other, "thinner" controls. With a filled button, users could get distracted by noticing the button preattentively.

As soon as the button is in hover state, this reasoning does not apply any more, though:

  • Either, the user hovers intentionally. Then, their attention is already focused on the button. In turn, the button must indicate clearly that it is active and a button (rather than, say, another text box).
  • Or, the user accidentally moved the cursor over the button while looking elsewhere. In that case, drawing the user's attention to the button is warranted in order to warn them not to accidentally click now, given that the button might cause a (possibly destructive!) action.

Conclusion: The design with the filled hover state is good.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.