Follow

Navigation bar design

This article will guide you through best practices for designing usable and useful navigation bar menus.

A good navigation bar will put most important sections of the app at users' fingertips and make navigation through the app a breeze, guiding them through activities of our event/workspace.

Considerations

  • You can pick any three items from the main menu to appear in the navigation bar
  • Home and More always present (More is not present on Android)
  • App re-colors icons to black when not selected, and to the active theme color when selected
  • Navigation bar is present only on phones

Best practices

Identify often used sections

Screenshot
 

Do

Place often used sections of the app that will stay important during the whole event/workspace lifetime.

Screenshot
 

Don't

Don't place items that are used only once or only during specific timeframe (ex. "Voting"). Use home or notifications for that.

 

Use short call-to-action labels

Screenshot
 

Do

Labels should be short and descriptive. Use nouns that describe the section or the type of information users will interact with.

Screenshot
 

Don't

Long labels might not fit all screens and all platforms, and are not any more descriptive than a single noun. Avoid describing activities or specific functions.

 

Use contrasting colors

Screenshot
 

Do

Use vibrant and contrasting colors to highlight selected section, helping users orient themselves in the app. Ideally match the title bar of the app or another color of your brand if navigation bar is monochrome.

Screenshot
 

Don't

Dark or washed-out colors are not well distinguishable on small icons and text.

 

Don't swap items around

Screenshot
 

Do

Keep items the same during your event/workspace's lifetime.

Screenshot
 

Don't

Changing items or targeting them based on dynamic properties while users are using the app will force them to re-learn how to navigate them app.

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.