Why?

Half year ago, during development of mobile design of one App I found myself uncomfortable.

It was staff management application, consists of 9 sections of almost equal priority and I need to make it one hand usable. Another thing was that one section of an app was a chat, so I needed as much vertical space as possible.

To make it one hand usable I tried bottom navigation bar. Because of maximum amount of buttons on bottom nav bar can be maximum five, I had to select 4 sections of high priority and move other sections buttons to separate section. So in that case I broke equal priority principle and break simple logic of an app. Another thing was that sections had rather specific names so I had to write explanation signs in bottom nav bar. But signs was too small that it was peaty hard to read… One more disadvantage of that solution was that bottom nav bar took precious space! So bottom nav bar was not the simple and usable solution.

Another way was to use hamburger menu. On one hand it solved problem with equal priority and vertical space. But problem was that it was hard to navigate an app with one hand. No one can touch hamburger menu icon on top left corner of the screen and navigate all icons just with thumb finger.

At those time I decided to separate sections and break equal priority principle use both bottom bar and hamburger.

Solution

But later I started to develop alternative UI structure which should feet all the requirements. During design process I tried nearly six different variations to make it usable, simple and intuitive.

I didn’t get good results from the scratch. During user tests of first variations I found problems with understanding of principle of UI. Sure best results I’ve got with 14 years old user testers. With fallowing variations I’ve got 20 seconds success with group 30+. And finally I’ve got variation which worked with even 60+ years old group testers who mostly didn’t used mobile smartphones. At those tests users needed up to 20 sec. to get how it works (get the mental model).

Spacious — Intuitive — Ergonomic

That is my proposal: I offer to put open bar button to the right bottom corner with simplified hamburger two dots icon.

It free vertical screen space for the content. In fact there is just very small element of the navigation functionality in indent area. On the other hand — quick and easy access to menu with thumb finger tap or left swipe. So user could navigate an app just with one hand even on fablet screens.

I called that structure “Folding Bottom Sidebar

Sure compare to bottom navigation bar it is not possible to switch sections with one tap. But, combination of swipe left and fallowing tap — is bio-mechanically the same action with one click. And user would percept it very close to one tap.

Is it really intuitive?

So we’ve got the minimalistic, ergonomic solution which give maximum space of screen, and the next question: is it really intuitive?

It’s pretty simple interface to study how it works and main question here is how fast and easy user will understand how it works from the scratch.

I offer to start the application with open menu, so the user will be able to select the section he (she) want to go. After clicking on particular section icon, user should see an animation with menu to smaller size which would also help the user to find how to open it back. But if user would lose attention while animation?

So after tests on different groups I found that vertical sign “Menu” gave clear vision where to tap to open menu. I think, vertical sign visually separates it from all the content on the screen and focus attention on it.

Not to take too much attention and space, the sign vanish when scrolling content down.

Elder testers (from 60+ age) mostly lost animation, didn’t randomly tap like young testers (just to find out how UI works) but they mostly see the vertical sign “Menu”.

That way users from different age target groups were able to define how it works from the scratch in nearly 20 seconds.

Readability

If I mention about elder group, I should mention readability of UI. Mostly that problem is about bottom bar UIs. Sometimes we have rather specific sections without well-known and intuitive icons. For example, I had such section like “Shifts” (working time of staff in staff management app). For sure I need explanation sign under the icon. And the size of signs in bottom nav bar is so small that some users aren’t able to read it. Unlike it in Folding Bottom Sidebar, there enough space for signs of even 18px size.

I think that UI structure may find it’s place in some cases when your application contains more than equal priority 5 sections (up to 20). Some specific functionality apps where icons need explanation signs.

Now this structure is on patent pending. But I offer get license for free! You will be able to use it for your particular apps forever. I would say, getting license is a sort of feedback for me :)…

To get one, and get more information please visit the Landing page: https://fbs-ui.com

I also started facebook group here: https://www.facebook.com/groups/1788812741238804. Here we will publish and discuss new designs based on Folding Bottom Sidebar. I think there is a space to invent some new solutions within this structure for you! Let’s design and invent together!

Why not to discuss it on Telegram channel? https://t.me/fbs_ui

Visit landing and get free license!

Thank You!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade