Documentation
Folding Bottom Sidebar User Interface Structure Basics
Let’s look on Folding Bottom Sidebar on example of redesigned and simplified social network user interface VK.ru.
Sidebar in the unfolded state.
It is better to start an application in this state as a part of onboarding. To close it user tab on close icon or on section icon. Note that section signs are rather big and readable.
After user selected the section (tap on icon of any section), sidebar animated to minimize folded state with displaying of vertical sign “Menu” and simplified hamburger menu icon. Vertical sign “Menu” help to inexperienced users understand the UI.
On scrolling down the content, sidebar minimize further (hide the vertical sign Menu) and display just hamburger icon. In this stage sidebar takes minimum space of the screen, just getting the space of natural content indent.
To expand back the sidebar user need to tap on sidebar or swipe it left.
On scrolling content down and reaching bottom, I recommend to show “Menu” sign again. So it will remind a structure user at list on the beginning using this type of user interface.