INTERACTION DESIGN

Mobile Navigation Patterns

[Link]

What Mobile Navigation Patterns?

“Mobile Navigation Patterns” are design patterns for navigation on mobile devices, meaning the
way components are organized and displayed so that users can move between screens,
sections, or functions within a mobile app or website.

In short: they are reusable “formulas” that create an easy-to-understand, intuitive, and
convenient navigation experience on the small screens of mobile devices.

“Why mobile navigation is important”

Mobile navigation is important because it determines how users interact with an app, find
information, and experience the interface on a small screen. Specifically:

1. Helps users find information quickly

Mobile screens are small and cannot display all content at once.

Intuitive navigation allows users to reach the desired section directly without wasting time.

2. Optimizes the experience on small screens

Mobile users primarily use their thumbs.

Navigation patterns help place menus, buttons, and tabs in easily reachable positions.

3. Reduces the chance of users getting lost in the app

Confusing or unclear navigation → users may struggle to find their way and leave the app.

Standard patterns help show the current location and the next steps.

4. Increases interaction and retention

Good navigation → users can access features and content easily → improves engagement and
retention.
5. Follows platform standards

iOS and Android have their own navigation guidelines.

Following them helps users learn the interface quickly and operate naturally.

The differences between desktop and mobile navigation

1. Screen Size

 Desktop: Large screens, can display a lot of information at once.

 Mobile: Small screens, space must be optimized, often hiding content or splitting it across
multiple screens.

2. Interaction Method

 Desktop: Users use mouse and keyboard, easy to operate submenus, hover, and precise clicks.

 Mobile: Users use fingers / thumbs, with gestures like swipe and tap, so elements must be large
and easy to touch.

3. Layout and Display

 Desktop: Navigation is usually fixed at the top or left, can show many submenus at once.

 Mobile: Often uses bottom tab bars, hidden hamburger menus, gesture navigation, prioritizing
important items and hiding secondary ones.

4. User Experience

 Desktop: Can display full content and functions, giving an overview to the user.

 Mobile: Needs to be simplified, clear, and intuitive, avoiding confusion due to limited space.

[Link] Principles for Mobile Navigation

[Link] for the thumb zone

Users primarily interact with their thumbs when holding the phone in one hand.

Important menus, tabs, and buttons should be placed within the thumb’s reachable area.

Avoid placing important buttons in the top corners, where they are hard to reach.
[Link] distinction between primary and secondary navigation

Primary navigation: main navigation items, should always be clearly visible.

Secondary navigation: less important items, can be hidden or placed in a secondary menu.

Clear distinction helps users understand which features are primary and which are secondary.

[Link] over-hiding menus, test across multiple devices

Over-hidden menus → users may struggle to find important features.

Test on multiple devices and screen sizes to ensure:

Buttons are large enough to tap accurately.

Nothing is hidden or too far from the user’s reach.

Consistent experience across different devices.

3️⃣ Các pattern phổ biến ([Link]

Tab menu (or tab bar):

A tab menu sits at the top or bottom of a screen, with icons and labels representing different
app sections. Users can quickly switch between sections by tapping on the corresponding icon.

Bottom navigation

Like a tab menu, the bottom navigation pattern places the primary options at the bottom of the
screen, making it easily accessible for users with one-handed operation.

Top navigation (App bar)

App bars are standard across websites and cross-platform applications, typically featuring a back
button/hamburger menu, page title, and other action buttons.

Hamburger menu (or side drawer)

The three-horizontal line hamburger menu is the standard UI pattern for mobile navigation, like
hidden drawers and modals. Users tap the hamburger icon to reveal the menu’s items.

Navigation rail
A navigation rail is a compact sidebar menu for tablets, but you also see this navigational
pattern in Gmail’s desktop application. Navigation rails offer great space-saving benefits while
keeping menu items visible and easy to access.

Floating action button (FAB)

A FAB is a button floating above the main content, usually in the bottom right of the screen, so
users can easily reach it with their thumb. Designers use FABs for a primary action within the
user interface–for example, Gmail uses a FAB for composing a new email in its mobile app.

[Link] Real-World Examples

Gmail – Navigation Rail + Drawer + FAB

On Android tablets, Gmail uses a navigation rail (a vertical navigation column on the left) to
display items such as Gmail, Chat, Spaces, and Meet.
The Compose action is placed as a Floating Action Button (FAB) so users can easily reach it with
their thumb.

YouTube – Bottom Navigation

In a recent Android UI update, YouTube moved its navigation tabs from the top of the screen to
the bottom.
Tabs like Home, Trending, Subscriptions, and Library are now placed at the bottom, making
them easier to access with one-handed use.
Instagram – Tab Bar (Bottom)

Instagram uses a bottom tab bar with items such as Home, Search, Reels, and Profile (previously
also Shop).
Recently, Instagram removed the Shop tab and moved the Create button to the center of the
bottom navigation bar.
Facebook – Hamburger Menu

Facebook uses a hamburger menu (side drawer) to store secondary items such as Events, Saved
Posts, and Settings, keeping the main interface clean.
This pattern is also documented in navigation design guidelines, which recommend using
drawers when there are many high-level options.
Responsive Frameworks & Libraries
1. Definition of Responsive Frameworks & Libraries

Responsive frameworks and libraries are tools that help build web interfaces that automatically
adapt to different screen sizes (mobile, tablet, desktop).
They speed up UI development and ensure consistent, device-friendly layouts.

2. Benefits

 Faster development with ready-made components.

 Consistent UI across all pages and screens.

 Optimized for all devices with automatic responsiveness.

 Reduced manual CSS effort.

3. Popular Responsive Frameworks

 Bootstrap: Easy to use, many components, large community.

 Tailwind CSS: Utility-first, flexible, highly customizable.

 Foundation: Strong responsive grid system.

 Bulma: Lightweight, based entirely on Flexbox.

 Material UI / Materialize: Modern Material Design interface.

4. Responsive Support Libraries

 [Link], AOS: Smooth animations on all devices.

 [Link]: Mobile-friendly sliders/carousels.

 Flexbox Grid, CSS Grid libraries: Simple and lightweight grid systems.

5. Key Principles

 Grid system for flexible layout structure.

 Breakpoints for changing UI based on screen width.

 Flexbox & CSS Grid as core layout technologies.

 Mobile-first design approach.

6. When to Use a Framework

 Team-based UI development.

 Need for consistent interface design.

 MVP development with limited time.

7. When Not to Use a Framework

 Very simple UI.

 Highly unique or custom design.

 Need maximum performance and minimal file size.

8. Quick Comparison

 Ease of use: Bootstrap > Bulma > Tailwind.

 File size: Tailwind (small with purge) < Bulma < Bootstrap.

 Customization: Tailwind is highest.

 Community support: Bootstrap & Tailwind are strongest.

9. Best Practices

 Only import what you need.

 Keep class usage organized, avoid overload.

 Test layouts on real devices.

 Optimize CSS with purge or tree-shaking.

10. Conclusion

Responsive frameworks significantly speed up development, improve user experience, and

Tools for Testing & Supporting Responsive

Role: Tools help detect layout issues, breakpoints, and UI/UX problems, ensuring an optimal
user experience on all devices.

2. Browser DevTools

 Tools: Chrome DevTools, Firefox Developer Tools, Edge DevTools.

 Functions: Change viewport, test breakpoints, simulate devices and resolutions.

 Benefit: Quickly test directly in the browser without needing real devices.

3. Online Testing Tools

 Responsinator: Preview website on popular devices.

 BrowserStack & LambdaTest: Test responsive design on multiple real devices and
browsers.

 Screenfly: Simulate different screen sizes from mobile to desktop.

 Benefit: Save time and test cross-browser responsiveness efficiently.

4. Framework & Library Helpers

 Bootstrap / Tailwind: Prebuilt responsive classes, grids, and breakpoints.

 Flexbox & CSS Grid inspectors: Visualize responsive layout.

 Media query debugging tools: Verify CSS media queries are working correctly.

 Benefit: Easier optimization and debugging, saves development time.

5. Cross-Device Testing

 Test directly on phones, tablets, desktops to catch real-world issues.

 Simulate multiple browsers and operating systems.

 Benefit: Ensure consistent UI/UX across all devices.

6. Automated Testing Tools

 Percy, BackstopJS: Visual regression testing to detect layout shifts.

 Selenium / Cypress: Automated functional and responsive testing.

 Benefit: Reduce human error and save time testing multiple screens.
7. Performance & Accessibility Testing

 Lighthouse (Google): Checks performance, SEO, and accessibility.

 PageSpeed Insights: Optimize page loading speed.

 Axe / WAVE: Detect accessibility issues.

 Benefit: Ensure the site is not only responsive but fast and usable for everyone.

8. Best Practices

 Test on various screen sizes and browsers.

 Combine DevTools + real devices for thorough testing.

 Check UI and UX to ensure good user experience.

 Use both automated and manual testing to optimize quality.