2

Even after designing hundreds of sites I can't understand why it is good to change the direction of arrow in menu dropdowns.

Here I'm talking about hover event.

enter image description here

  • 1
    By the way i've never changed the arrow direction (on hover) in any projects I've done. – Jivan Nov 16 '16 at 9:02
2

You can break it down as two events:

  1. HOVER -IN
  2. HOVER -OUT

Both events has same purpose to show the direction of the UI element.

It is just an indicator of the direction the UI element will go, that could also reference a real-world handler. The sub-menu is hidden over the parent and so the arrow points down. When it is opened the arrow shows the menu will go up again

1

I can't explain why this would be useful in a hover event but...

The direction of the arrow is used to indicate what will happen when an event is triggered - in this case, triggering the event causes the menu to open downwards and, once the menu is open, this can then be re-triggered to collapse the menu upwards.

However, there is another issue: prior to interaction, how does the user know if these indicate the current state or the outcome of the trigger? Binary indicators (up/down, on/off, etc) are fraught with cognitive issues around their interpretation - just looking at one, you can't always tell if it's showing that action that will be preformed or the current state of the object or element it relates to. If you see a single button marked "on" does it mean that clicking the button will turn something on or that something is already on and clicking it will turn it off?

  • you are much right, Andrew . And I think most users don't even notice the change of arrow cause they were desperately searching for right link – Jivan Nov 16 '16 at 10:31
0

It is just an indicator of the direction the UI element will go. When it points down the user can expect that clicking/hovering will show something that will come down, and when up it will bring that same element up.

Another idea is it could also reference a real-world handler. It indicates the direction the UI element would go. Imagine yourself dragging this up or down.

menu

For simplicity and considering the Parent is in a context with other parents it stays in its original place instead of going down with its sub-menu.

Animating the opening/closing with microinteractions helps the user-expectation and understanding of its functionality.

  • I request you to read question again. please – Jivan Nov 16 '16 at 10:27
  • Of course :) As some sub-menus "open" when you hover the Parent and at the same time the arrow changes direction I thought that was the case. Now I guess you mean in cases where the sub-menu doesn't open but the arrow changes direction? – Alvaro Nov 16 '16 at 10:32
  • sorry, may be my mistake, i couldn't explain well. the issue here is NOT down arrow. After hover, why shopify changed the direction of that down-arrow to upward. For clarity, Go to shopify.com – Jivan Nov 16 '16 at 10:38
  • I checked the web. I still think the answer is "It is just an indicator of the direction the UI element will go, that could also reference a real-world handler". The sub-menu is hidden over the parent and so the arrow points down. When it is opened the arrow shows the menu will go up again. – Alvaro Nov 16 '16 at 12:08

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.