Mobile Header Design

Mobile header design addresses the navigation bar or app bar appearing at the top of mobile application screens. This header typically contains the screen title, navigation controls like back buttons, and contextual actions. iOS and Android have distinct conventions for header design that cross-platform design systems must accommodate.

What Is Mobile Header Design

Mobile headers provide context and controls for the current screen. The header communicates where users are in the application, how to go back, and what actions are available. Effective header design balances information density against clarity, providing necessary controls without overwhelming limited screen space.

iOS navigation bars follow Human Interface Guidelines with specific styling and behavior conventions. Large titles that shrink on scroll, back buttons with previous screen names, and bar button items for actions create the iOS header vocabulary.

Android app bars follow Material Design with top app bar patterns including regular, prominent, and contextual variants. Leading navigation icons, centered or leading titles, and trailing action icons establish Android header patterns.

How Mobile Header Design Works

iOS navigation bars transition between large and inline title modes. Large titles display prominently below the bar initially, collapsing into the standard bar position when users scroll content. This pattern provides strong screen identification while maximizing content space after scrolling.

iOS Navigation Bar Components:
- Back button (leading): Chevron + previous title or "Back"
- Title: Large (34pt) or inline (17pt)
- Bar button items (trailing): 1-3 action buttons
- Background: System blur or opaque color
- Safe area: Extends behind status bar

Android App Bar Components:
- Navigation icon (leading): Back arrow or hamburger
- Title: Left-aligned or centered
- Action icons (trailing): 2-3 priority actions
- Overflow menu: Additional actions in menu
- Elevation: Shadow indicating scroll state

Back navigation treatment differs significantly between platforms. iOS uses a back chevron followed by the previous screen’s title (or “Back” if the title is too long). Android uses a back arrow without accompanying text. This difference affects how much horizontal space headers require.

Action placement in headers requires prioritization. Only the most important actions should appear as header icons. iOS allows one to three bar button items. Android recommends two to three visible actions with an overflow menu for additional options.

Header scrolling behavior affects content visibility. iOS large titles collapse on scroll. Android app bars can be static, scroll with content, or elevate when content scrolls beneath. These behaviors affect how much screen space content receives.

Key Considerations

• Status bar integration requires appropriate background handling
• Safe area insets affect header height and content positioning
• Search bar integration differs between platforms
• Accessibility requires proper labeling of all header controls
• Orientation changes may affect header layout
• Contextual headers for selection or editing modes need specification

Common Questions

How do design systems specify cross-platform header consistency?

Title treatment can remain conceptually consistent while adapting to platform conventions. The same title text appears on both platforms, though iOS might show it as a large title and Android as a standard app bar title.

Action icons can share the same iconography across platforms while following platform-specific placement and overflow patterns. The actions available remain consistent; their presentation adapts to platform.

Back navigation behavior should be consistent even when visual treatment differs. Tapping back on either platform returns to the previous screen. The visual indicator (chevron versus arrow, with or without text) follows platform conventions.

Design systems should provide parallel specifications for each platform, showing how the same information architecture manifests in platform-appropriate headers.

What goes in the header versus elsewhere in the interface?

Primary navigation (back) always belongs in the header. Users expect to find navigation to previous screens in this location on both platforms.

Screen identification (title) belongs in the header. Clear titles help users understand their current context.

Frequent actions for the current context belong in the header. Actions users need regularly while viewing the screen content justify header placement.

Actions used less frequently should move to overflow menus (Android), action sheets (iOS), or inline placement within content. Not every action merits header presence.

Screen-specific content filters or tabs may integrate with headers or appear below them depending on complexity and platform conventions.

How do headers adapt to different screen contexts?

Root screens (initial views in navigation hierarchies) typically omit back buttons since there is nowhere to go back to. They may include navigation drawer buttons or profile access instead.

Detail screens include back navigation to return to list or parent views. Actions are specific to the content being viewed.

Edit modes replace standard headers with contextual headers showing save/done and cancel actions. Selection counts and selection actions appear in contextual headers.

Search activation often transforms headers into search input mode with cancel options. iOS has specific search controller integration. Android uses search views or transforms the app bar.

Modal presentations may modify header treatment, with close buttons replacing back navigation and presentation-specific actions.

Summary

Mobile header design encompasses navigation bars and app bars that provide context and controls at screen top. iOS and Android conventions differ in title treatment, back navigation styling, and action placement. Cross-platform design systems should specify parallel implementations that maintain information consistency while respecting platform conventions. Header design significantly impacts navigation usability and should receive careful design system attention.