Best bottom navigation elements order?

Question

I'm creating the prototype of a mobile app, and I decided to include a bottom navigation bar.

I'm trying to figure out what is the best order for the elements on the bar (in my case: home, favourites, search, checklists). I've been looking and reading some articles, but the best thing I've found is this image from this article. Also this other one, but it just talks about websites, not apps. This leads me to think that the best order is by importance (from left to right).

What do you think? How can I come up with the best order before testing with users? Is there any recommendation or best practice?

Answer 1

You could apply serial-position effect to your navigation.

The serial position effect, a term coined by Herman Ebbinghaus, describes how the position of an item in a sequence affects recall accuracy. The two concepts involved, the primacy effect and the recency effect, explains how items presented at the beginning of a sequence and the end of a sequence are recalled with greater accuracy than items in the middle of a list. Manipulation of the serial position effect to create better user experiences is reflected in many popular designs by successful companies like Apple, Electronic Arts, and Nike.

https://medium.com/coffee-and-junk/design-psychology-serial-position-effect-ca0e4cf299cb

https://en.wikipedia.org/wiki/Serial-position_effect

https://baymard.com/blog/serial-position-effect

Answer 2

My two cents: 'Home' is nearly always on the left to anchor navigation. That's where users have been trained to look for it since the early days of web design.

Other than that, which content areas do you want/expect your users to spend most of their time? 'Checklists?' If so, that should probably be placed next after 'Home.'

'Search' and 'Favorites' are generally paired, with 'Favorites' or its equivalent placed last. (This is not a rule, just a pattern I've noticed. See 'Saved' in Apple's News app, 'Library' in Spotify, etc. The rationale seems to be that 'Search' is the more active interaction and occurs first. The 'Saved' area functions as a sort of drawer for items discovered while searching the app, so it's stuck at the end.)

I wish I had something to cite for you beyond the few examples I mentioned, but this does represent my thinking on the subject.

Answer 3

I don't think there's a correct answer other than test validation. I'd suggest you run a multivariate test and get your own conclusions. However, I think you can start with ergonomics considering the physical dimension of devices and how users interact with such devices. In that scenario, you may find different results even on same brands. Take a look below:

There are other "reach area maps" depending on device. But you'll notice that in most cases, bottom-right is a bit harder to reach, so you should place the element of less interest there, right?

Well... yes as long as all users are right handed (most are, yet not all). So the solution that works for both left and right handed is as follows:

You can see now how bottom middle area is best at the time of considering all users, while bottom left was perfect for right handed users. Here you'll need to define: should you improve usability for 90% of users or make things a bit harder for 90% of users but provide same ease of element reaching to all? It's a numbers game. If you're going after CTR and sales, you'll probably choose to "ignore" 10% of population. On a more neutral app, maybe you could consider all users.

Back to testing

Finally, if you don't have any specific target you wish users to click, then I think the best approach is to still consider ergonomics, but place navigation elements according to what users click most. For example, if you see that search and favorites are the most commonly clicked elements, then I'd place those in the middle, and leave the other elements at the side, with home on the left since it's a very common placement.

Also, consider that around 50% of apps don't have a Home link on bottom, so maybe that could clean up things for you. For example, if you check the article 5 must-know mobile UI navigation patterns to consider in your next interactive prototype , which is kind of specific to your problem, you'll find that out of 4 examples, only one of those has a home link. Even Material Bottom Navigation guidelines kind of ignore Home on the bottom

In short: it will depend on your needs, but consider ergonomics and make sure you really need those elements in that place, and the weight of such elements to get to a decision

Answer 4

If you're doing user-centered design, ordering should also be based on user needs coming out of the research, e.g., are most users looking to access the checklists function more than the others? It might make sense for checklists to be first in nav, then. Hard to generalize too much here.

You theorize "the best order is by importance" -- perhaps, but "importance" meaning most important to business goals, or most important to user needs? Good UX is fundamentally about striking a balance between these two elements.

Answer 5

Bottom Navigation bars make easy to explore and switch between top-level views in a single tap.Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view. and yes bottom navigation is primarily for use on mobile. To achieve a similar effect for desktop, use side navigation. for more details and Guidelines refer Google material design.