• iOS

Navigation

Contents

Header Navigation

Limit icons, space evenly

Navigation icons should be evenly spaced and not overcrowded.

Header Nav - Correct
Icons are evenly spaced
Header Nav - Incorrect
Icons are crowded, reducing the tap area

Maintain color consistency

Navigation icons should maintain the correct color consistency throughout the app.

Header Nav - Correct
Colors are consistent throughout the navigation
Header Nav - Incorrect
Colors are inconsistent, looking disjointed

Give users an exit

For secondary screens, such as replying to conversations, ensure that users have a clear path to returning to the previous screen.

Header Nav - Correct
Close icon is clearly established to the user
Header Nav - Incorrect
Navigation is missing a close icon

Follow established patterns

Patterns throughout the app should be followed, let common sense be your guide when building new views.

Header Nav - Correct
Navigation buttons are always located to the right
Header Nav - Incorrect
Screen does not follow established patterns

Footer navigation patterns should closely align with header navigation elements.

Spacing

As with the header navigation, refrain from overcrowding the footer navigation with icons.

Footer Nav - Correct
Icons are nicely spaced, easy to tap
Footer Nav - Incorrect
Icons are crowded and difficult to tap

Labels

To maintain consistency, avoid adding labels to icons in the footer navigation.

Footer Nav - Correct
Consistent use of icons across footers
Footer Nav - Incorrect
Navigation is not consistent with other footers