I wanted to also take a little time to review navigation styling outcomes on popular apps and have outlined my findings below.

Instagram

Instagram uses stroke system icons in a nearly black these feature at the top and bottom of the screen. When selecting an item from the top bar nav the view moved to a screen that no longer features a top bar nav. However, when selecting an icon on the bottom bar nav the nav remains viable and the icon is highlighted by swapping from stroke to fill.

Snapchat

Snapchat features a bottom bar nav and a vertical right nav a the top of the screen relating to camera features. System icons used in the bottom bar nav are created with strokes and selection is highlighted by a colour change and an arrow appearing below the icon. The various selection states are shown above to the right. Notifications are highlighted by dots.

Ted Talk

Ted Talk uses a really simple bottom navbar with only 4 stroke system icons in grey which appear in white when highlighted. While I think the apps dark grey navbar and black background is minimal enough to carry the icons I would be concerned that if I were to apply a similar approach in my app the icons would struggle to stand out strongly enough against the UI.

What have I learnt?

• It’s important to consider how icons will appear on a nav in a selected and unselected state.
• It’s also important to consider the navigation option at the top of the screen and if they will appear in every screen view etc.
• Navbars don’t always have to run horizontally, this can be helpful for thumb reach also a vertical nav provides more space for additional nav options.
• It’s important to make sure the nav stands out against the rest of the UI.

How can I apply this to my work in future?

• When creating my travel app UI I will ensure that my navbar stands out against the rest of the UI.
• When working on app UI’s in future I will consider highlight options including colour changes and swapping stroke icons to fill.
• When working on future app UI I also should consider flexibility in navigation options with the view that top nav items can be changed however considerations should be made if making changes to the bottom navbar options as they appear to remain static in all of the above examples.