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.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
You can break it down as two events:
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
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?
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.
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.