0

In my application, I've a selection drop-down in the main top-header menu. Now, I'm a little confused on how I should have on hover for that element. These are the two options:

Option 1: No background color change. Only the text-color will be darken enter image description here

Option 2: A backgroud-color will be applied

enter image description here

Please, suggest which of the two options is a better one. Or if there's a third even better option?

Improve this question
1
  • Why you need a visual hover state if user already see dropdown menu options under the top bar? First option will do the job I think, especially it is more eye pleasent. – Phil Mobile Jun 8 '15 at 11:28
2

Such drop-down menus can be designed in many ways,

I would prefer 2nd option for sake of clarity for user.

Once a user hovers seeing the small 'down' arrow, the expectation is set that a menu will drop. And the menu corresponds to that label. Hence, they should look unified and appear single unit. Its possible by changing the color or adding contrasting colors.

enter image description here

enter image description here

Event: Important to choose if you bring down the menu on click event or hover.

  1. The drop-down must adhere to the overall style of the website. The look and feel should be consistent across such menus

  2. The trigger events should not surprise users by frequent changing from hover to /or click.

Also, study the navigation design of UX.SE site, right at the top. You will understand that changing subtle colors of of menu is prompting the users to click and not presenting the menu on hover. Its up to users choice to click or leave.

As I said, I would go with Option 2 but enhancing it a bit. enter image description here

Improve this answer
2
  • If I apply this suggested style to the drop-down, should I also apply a similar hover/active style for the icons adjacent to the drop-down? – Yellen Jun 8 '15 at 11:45
  • Yes.If the icons have drop down too, yes you should apply. If the icons are just actions, than the hover colors can change. – Prashant Dubey Jun 8 '15 at 12:35
1

Dark background

In general when it comes to interfaces it's a good idea to make it obvious at a glance where you are. Using a dark background will make it obvious to you and anyone else who may glance at your screen that you are looking at the "Athi Net Solutions" menu item.

I would also fix the width of the dark background so that the whole menu item has a grey background.

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.