Why The Floating Action Button Is Not Always A Good UX Choice
At least when you’re not using it properly.
Not as usual as on Android phones, Floating Action Buttons (FAB) sometimes are incorporated into iPhone apps designs. They’re great offering easy access to key actions of a feature or page, but designers often use it incorrectly. This is the case…and it isn’t. I’ll explain why, but first let me explain what a FAB is.
Floating Action Buttons
Floating Action Buttons were introduced by Google back in 2014, when it launched Material Design, a unified design system which combines tools and resources to creating extraordinary digital experiences. FABs are colorful highlighted buttons, often on the lower right corner of your app. Its job is to easy your access to the most commom action on the screen.
When you open Google Maps, for example, the key action is to search for a place, be it a restaurant, movie theater or a museum. This is what a action button exists for. It’ll be there in your Maps app, waiting for you to search for something.
Linkedin Profile Page
Today I was browsing through Linkedin’s iPhone app, and I noticed something that caught my attention: the Profile Page’s Floating Action Button. When you open the Profile Page, the action button is there, and it’s determined to help you with one simple function: add information to your profile. Until there, it’s a welcome feature that helps you enhance your page. The problem begins in the page’s end.
Swipe up towards the end of your profile, and the app will bring you a section called “People Also Viewed.” The problem is not on the section itself. It shows you people whom other people ended up looking on in their searches. It shows possible connections and recommendations based on what people who viewed your profile searched for. And it’s a good, welcome feature on your profile’s page — I wouldn’t put it there though (sorry Linkedin).
Perfect! “What are you complaining about?”, you’d ask. But let me ask you to stop reading this article and go to the “People Also Viewed” section and see the action button…in action.
Now that you’ve seen it, answer me: what does the action button do on this section? It hides the only button that has an actual meaning. The app’s showing people you might know or want to connect with, but the action button prevents you to get in touch with them. Yes, you could simply swipe up or down and the problem fades out, or it was supposed to. But look what happens with the last person in the list: you’re not able to use the button that was supposed to be used.
Even if you swipe up, the button doesn’t work. It’s useless. In my case, he was a workmate, and I wanted to connect with him. I had to click on him and open his profile, then ask him to add me in his network. However I could search for him manually on Linkedin app’s search bar or click on his profile, it broke my experience. It’s not the end of the world, but in UX, details matter.
Besides that, there’s the problem of context changing. When you’re visualising your profile, the action button makes sense: you can add information. But when you’re looking into a list of people you may find interesting to connect with, the button loses it’s purpose. Worst: it gives you an idea that you can add people to your network, which it doesn’t.
The Solution?
To solve these problems, I’ll show you two solutions. The first one, there’s no changes on the app architecture. The second one, I’ll show you where I’d put that kind of information (and keeping the FAB away from messing up our experience).
What To Do With The FAB?
You know, maybe designers at Linkedin have a good reason to keep the section “People Also Viewed” there, so we shouldn’t remove this section from its original place. But what can we do about the Action Button? The button only makes sense when you’re viewing your profile, so is it supposed to exists when you’re not viewing your profile? No. Then hide it! Easy, huh? As you scroll down to the “People Also Viewed” section, fade out the action button until it isn’t visible.
That way you keep the button active only where it makes sense and don’t break the user experience, both by showing a button that does not add value to the information being showed on the screen, and by stoping you from clicking on the only button that should be used.
Does The Section Have To Be There?
Let’s say we could change the section’s place. Although the designers at Linkedin may have a good reason to keep this section there, looking through other pages of the app, there is a section in “My Network” page called “People you may know.” These two sections could be merged, couldn’t it? Both do the same job, speaking on a high level. You have a section which shows you people you may be interested to connect with, based on your network. On the other hand, you have a section which shows you people you may be interested to connect with, base on people who saw your profile searched for. Why not to blend'em together? Consistency
Conclusion
Particularly, I’m not a big fan of FABs, even though I understand its value and the benefits it brings. Most of the time the button itself isn’t the problem, but where, when and how you use it. It’s a nice feature that, if not used carefuly, can break the app experience.
That’s all, folks! This is my first attempt to follow one of my new year’s resolution: to write! Leave comments bellow, tell me what are your thoughts about using FABs everywhere.
See ya!
