Iterating on a Design Component

The subtitle “Navigation Bar” appears in caps above the title “Iteration Walkthrough” against a purple background.

Component Details

A bottom tab bar with 4 options: photos, memories, shared, and albums. Albums — the Active State — is highlighted in blue.
A bottom tab bar in Apple’s Human Interface Guidelines
A bottom navigation bar with 4 options and a purple background. The music tab is highlighted to signify the Active State.
A bottom navigation bar in Google’s Material Design Guidelines

Purpose

Best Practice

Current State

A tab bar with 3 options: goals, my impact, and lifestyle. The icons are bright purple set against a dark indigo background.
Current tab bar

Questioning and Identifying Areas of Improvement

  • Does readability take a backseat here? Both the icons and text are rather small
  • The icons look to be incorporating a two-tone style, but is that the right decision?
  • Is there a clear differentiation between Active and Focus states? Doesn’t look like it.
  • Are there any systems in place here? Let’s incorporate a grid, consistent spacing and a clearer layout.
  • Is this consistent with interaction and UI patterns seen in other apps?

Iteration Process

Two screens side-by-side depicting where to place UI elements and guides/rulers for several iPhone devices.
Guides/rulers for the iPhone X/XS/11 Pro
An iPhone screen highlighting the 8pt grid system in red.
8pt grid system for an iPhone
3 tabs — 125px each — in red, blue, and yellow respectively.
Bounding boxes for tabs
  • A common pattern is to have an icon with a label
  • Some apps opt not to use a label, but I think we’re better off using a label to add extra clarity to our tab bar
  • The inactive tabs are hard to read and present accessibility issues. To solve this, some apps highlighted the active tab with a brand color while maintaining a successful color contrast for the inactive tabs.
The Google News mobile app on iOS with the “Headlines” tab highlighted in blue as the Active State.
Source: Mobbin.design
The Airbnb mobile app on iOS with the “Saved” tab highlighted in pink as the Active State.
Source: Mobbin.design

Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain consistent visual proportions across system icons.

3 tabs (goals, my impact, lifestyle) in red, blue, and yellow respectively.
Tab bounding boxes with icons and labels horizontally centered
The new tab bar design with an indigo background and the goals tab highlighted in periwinkle as the Active State.
The new tab bar design
An arrow pointing to the use of a baseline grid to align text.
Baseline grid
The layers panel in Figma showing the tab bar component grouped and named successfully.
Layers panel in Figma

Results

Before and After

A before and after comparison of the tab bar component in question throughout this article.
Tab bar — before vs. after
The new tab bar design with an indigo background and the goals tab highlighted in periwinkle as the Active State.
Redesigned tab bar
Another tab bar design, this time with an indigo background and the goals tab highlighted in volt green as the Active State.
New tab bar with green as the Active State

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store