Tab bar navigation Mobile app

Switch between main areas according to your device's habits.

7 checks · 3 content groups

Checklist contents

Review progress

Compare information and presentation in context of use.

Scroll in a tab, open deep content, then switch back and forth. Keep the currently selected tab clear, preserve appropriate context, and avoid using tabs as action buttons.Example Switching from “Explore” to “Saved” and back keeps the scroll position; The new create button is separate so it won't be mistaken for a tab.Keep names short and check when translating into long languages; Less familiar icons need labels so users don't guess the destination.The default tab should be immediately recognizable when opening the screen; The selected state needs to be read correctly by the support tool.

Try the operation, change the status and continue working.

Try your hand on small screens and devices with a system navigation area; The touch area needs to be larger than the visible icon.Use dots when you just need to indicate an update, use numbers when the quantity helps decide; Don't present the total as unread.Keep tab bars on main level screens and clearly define snoozing situations; Tab switching should not silently delete the history of the area just left.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Check the status when changing tabs

Scroll in a tab, open deep content, then switch back and forth. Keep the currently selected tab clear, preserve appropriate context, and avoid using tabs as action buttons.

EXAMPLES

Usage examples

Return to the reading list

Switching from “Explore” to “Saved” and back keeps the scroll position; The new create button is separate so it won't be mistaken for a tab.

Tab bar navigation Mobile app

Screen and context

Action and feedback

Complete the experience

How to review

Check the status when changing tabs

Usage examples

Return to the reading list

Find a checklist

No checklists found