Navigation Patterns

How users move through your application. Effective navigation is key to user retention.

1. Tab Bar Navigation

A persistent bar at the bottom (or sometimes top) of the screen that allows quick switching between the primary sections of an application. Ideal for applications with a few distinct, equally important top-level features.

Use when: You have 3-5 primary destinations that users need to access frequently.

Pros: Discoverable, always visible, supports quick switching.

Cons: Limited number of items, can take up screen real estate.

2. Drawer (Hamburger Menu) Navigation

A hidden panel that slides in from the side (usually left) of the screen, often triggered by an icon (commonly a "hamburger" icon). Best for secondary navigation or less frequently accessed features.

Use when: You have many navigation items, or when primary navigation is less critical than content.

Pros: Saves screen space, can accommodate many items.

Cons: Less discoverable, requires an extra tap to reveal options.

3. Card-Based Navigation

Content is organized into discrete, scrollable cards. Each card represents a piece of content or a distinct section, allowing users to tap into them for more detail.

Use when: Presenting a collection of distinct content items (e.g., articles, products, user profiles).

Pros: Visually appealing, modular, good for discovery.

Cons: Can lead to deep hierarchies if not managed carefully.

Content Display Patterns

How information is presented to the user.

1. Infinite Scroll

As a user scrolls down a list, new content is automatically loaded and appended to the bottom of the page. This eliminates the need for pagination controls.

Use when: Displaying long lists of content where order doesn't matter significantly (e.g., social media feeds, image galleries).

Pros: Seamless user experience, encourages browsing.

Cons: Can be difficult to return to a specific point, performance issues with very long lists, footer can be inaccessible.

2. Paging (Pagination)

Content is divided into discrete pages, with controls (e.g., "Previous," "Next," page numbers) to navigate between them.

Use when: Order is important, users need to easily reference specific pages, or when it's crucial for the user to be aware of the total content volume.

Pros: Clear structure, easy to jump to specific sections, footer is accessible.

Cons: Can interrupt flow, requires more user interaction.

3. Master-Detail View

A common pattern where a list of items (master) is shown on one side of the screen, and selecting an item reveals its detailed content on the other side (or in a new screen).

Use when: Users need to browse a list and then view details of selected items. Especially effective on larger screens or tablets.

Pros: Efficient for browsing and reviewing, allows contextual switching.

Cons: Can be challenging to implement on small screens without sacrificing usability.

Input & Action Patterns

How users interact with the application to provide input or trigger actions.

1. Floating Action Button (FAB)

A circular button that "floats" above the UI, typically in the bottom-right corner, representing the primary action of a screen. It's visually prominent and easily accessible.

Use when: There is a single, primary action that users perform frequently on a screen (e.g., composing an email, creating a new note).

Pros: Highly visible, easy to reach with thumb.

Cons: Can obstruct content, should only be used for one primary action.

2. Modal (Dialog) Windows

A dialog box that appears on top of the current screen, requiring user interaction before they can return to the underlying app. Used for critical prompts, confirmations, or simple forms.

Use when: You need to interrupt the user flow for an important task or confirmation.

Pros: Grabs user attention, ensures interaction before proceeding.

Cons: Can be disruptive if overused or for non-critical tasks.

3. Swipe Gestures

Users can swipe left or right on list items or cards to reveal contextual actions (e.g., delete, archive, edit). This keeps the main interface clean.

Use when: You have secondary actions associated with individual list items that aren't critical for primary interaction.

Pros: Saves space, provides quick access to secondary actions.

Cons: Discoverability can be an issue if not visually hinted; users might accidentally trigger actions.

Onboarding & First-Time Use

Guiding new users through the application's features and value proposition.

1. Walkthroughs/Carousels

A series of screens presented to new users upon first launch, highlighting key features, benefits, or setup steps. Often includes skip and navigation controls.

Use when: Introducing complex features, explaining the core value proposition, or guiding users through initial setup.

Pros: Educates users, sets expectations, can increase engagement.

Cons: Can be skipped entirely, too many steps can lead to user fatigue.

2. Tooltips & Coach Marks

Small, contextual hints that appear to explain specific UI elements or features as the user encounters them. Coach marks are often larger, more visually distinct elements used for introductory tours.

Use when: Pointing out new features, explaining less intuitive controls, or providing contextual help.

Pros: Contextual, timely information, helps users learn by doing.

Cons: Can be intrusive if overused; requires careful placement and timing.