1. Represent a Hallmark Action
Ideally, FAB should highlight the most relevant or frequently used actions, it should be used for the actions that are the primary characteristics of your app. If you’re going to use FAB in your app, the design of the app must be carefully considered and the user’s possible actions must be boiled down to a single prominent feature. For example, a music app may have FAB that represents ‘Play/Stop’. An Instagram-like app might have a FAB that represents ‘Take a Photo’. A floating action button represents the primary action in an application. Pausing or resuming playback on this screen tells users that it’s a music app. According to research by Steve Jones, FAB demonstrates a slight negative usability impact when users first use the button. However, once users successfully complete a task using the FAB, they are able to use it more efficiently than a traditional action button.2. Be a Way-Finding Tool
FAB is a natural cue for telling users what to do next. Research by Google shows that, when faced with unfamiliar screens many users rely on FAB to navigate. Thus, FAB is very useful as a signpost of what to do next. The use of a Floating Action Button in Twitter encourages you to post content3. Provide a Set of Actions
In some cases, it is appropriate for the button to spin out and expose a few other options as can be seen in the Evernote example below. The FAB can replace itself with a sequence of more specific actions and you can design them to be contextual to your users. As a rule of thumb, provide at least three options upon press but not more than six (including the original floating action button target). Also keep in mind that these actions must be related to the primary action the FAB itself expresses, and be related to each other: do not treat these revealed actions as independent as they could be if positioned on a toolbar. Don’t: ‘Where I am’ action isn’t relevant to create content actions.4. Be Context Aware
Context plays an important role in user interaction. Sometimes users want to consume content, sometimes they want to perform actions. It all depends on context. Using some contextual behavior could bring the best of FAB to the UX of any app. Let’s consider Google+ as an example. Google+ shows the button when the user is engaging with the stream, and hiding it when that engagement is reversed. These two states rely on context : when users are engaging with a social stream, a primary action is to scroll, hence there’s no need for FAB, and when users stop scrolling, they might want to post something.5. Connect Two States Together
FAB is not just a round button, it has some transformative properties that you can use to help ease your users from screen to screen. When morphing the floating action button, make transition between two states in a logical way. The animation in the examples below maintain the user’s sense of orientation and help the user comprehend the change that has just happened in the view’s layout, what has triggered the change, and how to initiate the change again later on if needed. Image credit: Ehsan Rahimi Image credit: DribbbleConclusion
Some might say that FAB is bad UX. It's tempting to say that because users and designers aren’t used to it. We are used to familiar toolbars and the concept of FAB is still fairly new to us. We all know how that new things are hard, but at the same time they encourage a more carefully designed user experience. Used correctly, FAB can be an astoundingly helpful pattern for the end-user.Nick Babich
Fireart Studio is a design studio passionate about creating beautiful design for startups & leading brands. We pay special attention to nuances all the time to create professional while cool products that will not only meet all expectations, but exceed them.
Read Next
Exciting New Tools for Designers, May 2024
This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…
Using AI to Predict Design Trends
Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…
By Simon Sterne
15 Best New Fonts, April 2024
Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…
By Ben Moss
3 Essential Design Trends, May 2024
Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…
How to Write World-Beating Web Content
Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…
By Louise North
20 Best New Websites, April 2024
Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…
Exciting New Tools for Designers, April 2024
Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…
How Web Designers Can Stay Relevant in the Age of AI
The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…
By Louise North
14 Top UX Tools for Designers in 2024
User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…
By Simon Sterne
What Negative Effects Does a Bad Website Design Have On My Business?
Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…