0

Currently we have a sidebar menu with multiple parent and submenus. There is some debate on whether there should be a sliding animation or not. I think because it is not a step by step process, so the user can go through the menu in any order they want, the sliding animation adds unnecessary time. To me, the sliding animation gives the impression of a single long form, but currently it skips all the menus in between so going from submenu 1 -> submenu 3 skips submenu 2 in the sliding animation. I personally think a static change is standard and does not add any extra cognitive load to the user, as they will be switching animations a lot.

3
  • Please create a video or image (GIF) and add them to the question instead of the links. You will easier get answers that way and links will get outdated someday.
    – jazZRo
    Commented Jan 29 at 18:43
  • 1
    @jazZRo Done, thanks for the advice
    – Gene
    Commented Jan 29 at 19:51
  • 1
    What @Danielillo wrote is correct. Rule of thumb - the animation should support the user's understanding of what is happening (like the Figma menu sliding off to the left to look "minimized"), not call attention to itself for no real reason like in your wireframe.
    – Izquierdo
    Commented Jan 29 at 21:51

1 Answer 1

1

The problem is not animation yes or no, the problem is the type of animation chosen depending on the content. I would recommend studying basic transition types and choosing the one that least disturbs the perception of the page.


If the content of the page is a two-field form, like the example in the image, the parallax-type transition, as if it were a vertically extensive page, produces a rather ineffective effect due to the large empty space to be covered. If this is the case I would opt for another type of transition, such as wipe or reveal from left to right or top to bottom.


If the content occupies the entire height of the page, the push transition from bottom to top, as in the example, may work. Just as it happens with navigation components on web pages.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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