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 makes navigation through the app a breeze, guiding them through activities of your event/workspace.

Considerations

  • You can pick any three items from the main menu to appear in the navigation bar
  • Home is always present, together with More on iOS and Web
  • Icon colors are controlled by the app and can have only one color
  • 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.