| UI or UX | UI + UX - Current-view top bar with title, navigation affordance, actions, and overflow | UI + UX - Persistent top-level navigation shell | UI + UX - Persistent mobile primary navigation |
| UI guidance | Render a top surface that clearly identifies the current view, provides one leading navigation affordance when needed, exposes a small number of view-level actions, and groups secondary actions behind a labeled overflow control. | Render product or service identity, a compact set of top-level destination links, current-section state, separate utility controls, and responsive overflow behavior. | Render three to five bottom destinations with stable touch targets, labels or accessible names, reinforcing icons, selected state, optional badges, and safe-area spacing. |
| UX guidance | Use the header/top app bar to orient users inside the current view and make the most important safe commands reachable without confusing them with global destinations. | Help users move between major product or service areas while preserving orientation, local state, and confidence that they are in the right service. | Support rapid switching between top-level mobile sections while preserving each section's local navigation, scroll, filters, and drafts. |
| Good UI | A project detail screen shows Back, Project Apollo, Search, Share, and a More menu for secondary commands. | A header shows the product name, Dashboard, Projects, Reports, Billing, a More overflow, and separate Help and account controls. | Five labeled destinations stay fixed at the bottom with Home selected, Alerts showing a small badge, and no action button mixed into the bar. |
| Bad UI | A header shows the app brand, five section links, account settings, export, delete, help, and sign out in one row. | A crowded row mixes every page, account action, language selector, and sign-out link. | Six tiny icon-only items and a center plus button compete for space. |
| Good UX | Users switch from Details to Files and the title and primary action change together from Share to Upload. | Users switch from Projects to Reports, return to Projects, and find their project draft count preserved. | Switching from Home to Saved and back preserves each section's scroll count and draft state. |
| Bad UX | The same Save icon appears in the header on screens where it saves, exports, or opens settings. | Switching top-level sections clears filters or drafts without notice. | Tapping Search clears the Home feed position and opens a one-off command instead of a destination. |
| Best fit | A screen needs a current title plus back, close, menu, search, save, share, edit, or overflow actions. | Users revisit several top-level product or service areas. | A compact mobile app has three to five high-frequency top-level destinations. |
| Avoid when | The interface only needs top-level destination switching and no current-view actions. | The flow has a single ordered transaction where navigation would distract or cause abandonment. | There are fewer than three or more than five primary destinations. |
| Required state | Default state with current view title and correct leading affordance. | Default state with product or service identity and top-level links. | Default state with all primary destinations visible. |
| Accessibility burden | Use semantic header, banner, navigation, and button roles only where their landmarks match the page structure. | Use a labeled navigation landmark for primary navigation. | Every icon must have a visible label or accessible name. |
| Common misuse | Using the top app bar as a dumping ground for every global destination and account utility. | Listing every page or admin object in the global nav. | Putting too many destinations into the bar. |