Instagram proposal: Floating Action Button (FAB)

Thinking about layouts, redesigns and functionalities is a good practice. Related to Instagram, I thought about the possibility of using a Material Design Floating Action Button(FAB). Here is what I discovered.

First I made some research on the topic:

• Material Design: Floating action button.

There are some detractors of FAB:

• Material Design: Why the Floating Action Button is bad UX design — Teo Yu Siang
• 3 alternatives to the floating action button- JusInMind

And other people in favour of Floating Action Button, I like Nick Babich point of view:

• Floating Action Button in UX Design by Nick Babich
• Basic Patterns For Mobile Navigation: Pros And Cons — Nick Babich, Smashing Magazine
• The Golden Rules Of Bottom Navigation Design — Nick Babich, Smashing Magazine

Let´s browse on some Apps! Here four examples of Floating Action Button:

• Dropbox: When user clicks we see a Slide up (up left on the image)
• Trello: A modal window appears when clicking (up right)
• Evernote: When clicked displays a vertical right menu (down left)
• Linkedin: On scroll down FAB dissappears (down right)

This is a fast sketching:

And here some captures:

There are nice proposals for Instagram redesign, here some I collected:

• Designing a New Look for Instagram, Inspired by the Community (Ian — Head of Design at Instagram.)
• I wanted to see how far I could push myself creatively. So I redesigned Instagram — Kim Thuy Tu
• A meticulous critique of the new Instagram logo/UI — Bryan Mamaril

So, from this sketching my purpose is to have a Floating Actions Button (FAB) instead of a Tab Bar. What I will try is to move from the drawing on the left to the right one:

First on the right would be like this screenshot below (I´m using Piero Borgo Instagram Freebie UI Kit), just open your Instagram App and navigate through the Tab Bar, easy:

How would be a Floating Action Button? Something like this:

The question here is: Does this have any sense? My conclusion is: No, probably not. Consider “80% rule.” Do the navigation options which you’re going to hide behind the hamburger icon fall below the 80% of regular usage? If your answer is yes, then putting them in a Floating Action Button is OK. This case the answer is clearly no.

Anyway, there is other option, probably you´ll have seen this if you use many Apps, it is like giving more importance to the main button, in this case: We have five: Home, Search, Share Photo, Likes, Profile. The most important action is clearly the Share one, there is where you can upload photos to share and be liked. So we could do this button a bit bigger than the others. As this: