2

We have a bottom bar menu in one of our mobile applications with an overflow icon which currently opens the overflow menu.

Here is what it currently looks like:

enter image description here

We are updating our application UI and have proposed a new look and feel and mechanism for the menu. The new proposal is as follows: when the user selects the overflow icon on the far right of the bottom bar, the menu will slide in from the left and display over 80% of the page. My concern is that it might be a bit odd when the user selects the overflow icon on the right and the menu slides in from the left.

New layout:

enter image description here

My question is - should the overflow menu rather be a full page that appears and does not slide in from any side, or should it remain an overlay but perhaps slide from the bottom bar and not the left of the screen?

2

Keep the animation, slide it in from the bottom

There's an excellent article on A List Apart called 'Motion with Meaning: Semantic Animation in Interface Design'

There are some key points in there that are relevant to your question:

Animations are most useful when they reflect and reinforce the semantic relationships between elements

and

Think of every element of your interface as a single, self-sufficient component with a specific meaning, state, and position in space. Then make sure your animations reflect this. If a popover belongs to a button, it shouldn’t just fade in; it should emerge from that button. When opening an email, the full message should not just slide in from the side, but come from within the preview.

Your menu is connected semantically to the overflow button, and the type and direction of the animation should enforce that relationship.

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.