Floating Action Button (FAB)
A Floating Action Button (FAB) highlights the most important action in an interface, giving users quick, visible, and consistent access to core functionality.
A Floating Action Button, often abbreviated as FAB, is a circular interface element that hovers above content and promotes a primary action. Popularized by Google’s Material Design system, the FAB is now widely used in mobile and web applications to give users a consistent entry point for high-value actions. It is designed to be visually distinct, usually through placement, color, and shape, so that users can recognize its purpose instantly.
In UX design, FABs simplify navigation by drawing attention to one core action per screen. They reduce decision-making by making the next step obvious, which improves efficiency and task completion. A clear example is Gmail’s FAB on mobile, which allows users to compose a new email instantly. Its visibility ensures that the most important function is always within reach, supporting a smoother workflow.
Accessibility is an essential consideration when designing FABs. Their placement must account for reachability, especially on mobile screens, where thumb comfort zones determine usability. Color contrast must be sufficient to support visibility for users with visual impairments. Labels or tooltips also ensure that the FAB’s purpose is clear, both for screen readers and for users unfamiliar with the iconography.
Real-world use cases demonstrate the adaptability of FABs. In Google Maps, the FAB provides quick access to directions, the app’s primary function. In task management apps like Todoist, it creates new tasks, aligning with the product’s main purpose. These examples show how FABs work best when tied directly to the most common or most valuable action a user will take.
Designing with FABs requires restraint. Overuse or adding multiple FABs to a single screen reduces their impact, creating confusion rather than clarity. When implemented correctly, they provide consistency and focus. When implemented poorly, they clutter the interface and undermine usability. Careful testing ensures that FABs truly support user priorities rather than simply highlighting business interests.
Learn more about this in the Floating Action Button (FAB) Exercise, taken from the Common UI Button Styles Lesson, a part of the UI Components I Course.
Key Takeaways
- FABs highlight the most important action on a screen.
- UX designers use them to improve clarity and task completion.
- Accessibility requires proper placement, color contrast, and labels.
- Examples include Gmail, Google Maps, and productivity apps.
- Overuse or unclear purpose reduces effectiveness.
Recommended resources
FAQs
FABs work well in mobile contexts because they provide a quick, visible shortcut to the most important action. Mobile interfaces have limited space, and users often prefer gestures or simple taps over complex navigation. FABs reduce the need for multiple steps by keeping a critical function always accessible.
This approach not only improves efficiency but also reduces cognitive load. Users no longer wonder what to do next—they can rely on the FAB to provide a clear path toward completing the app’s primary task.
If poorly designed, FABs can block underlying content or be positioned outside comfortable reach zones, especially on larger devices. Users with motor impairments may struggle if the button is too small or placed awkwardly. Visual accessibility is also a concern; low-contrast FABs may be hard to distinguish from the background.
To address this, designers ensure that FABs are large enough, positioned within thumb-friendly zones, and accompanied by clear labels for assistive technologies. These practices make FABs more inclusive without sacrificing design intent.
Teams should consider whether their product has one primary action that stands above the rest. If yes, a FAB provides a strong visual signal for that action. If multiple actions compete for attention, a FAB may create confusion rather than clarity. For example, an e-commerce app might use a FAB for “add to cart,” but using it for both “add to wishlist” and “checkout” would dilute focus.
By grounding decisions in user behavior data and product goals, teams can confirm whether a FAB enhances usability or whether alternative patterns, like toolbars or menus, make more sense.