Published on <a href="https://blog.prototypr.io/facebook-app-ui-tab-bar-changes-the-thumb-zone-9a31a151f66a?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> fernandocomet 
This is an exercise I made. I realized Facebook App had changed the Tab Bar position, taking it from top to bottom. Maybe you don´t have it already, I believe updates go related to the device you have. I have a Samsung S7. So at <a href="https://play.google.com/store/apps/details?id=com.facebook.katana">Google Play Market if you just search for Facebook App</a>, you will find this, the previous version with the Tab Bar up:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8GOLiHwsxiFiud_KEinyOA.jpeg">Screenshots of previous Facebook App
And right from my device, these are some screenshots of the same states as captured on the market, the new version with Tab Bar at bottom:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ru-SFkE-eO9gmQoABzMT1w.jpeg">Tab Bar has come to bottom (same as Instagram, same as WhatsApp), actually, it is a draggable Tab Bar.
This is not the first time Facebook changes the tab bar position, in fact, related to this, Nielsen Norman Group says that one of the big challenges of implementing navigation on mobile is how to prioritize content while making navigation accessible and discoverable. Visibility and utility are a must.
“The tab bar is a close relative of the top navigation bar specific to apps. It can appear at the top (Android mostly) or at the bottom of the page (iOS mostly). It is usually present on most pages within an app and has the same disadvantages as the navigation bar. One important difference between tab bars and navigation bars is that tab bars are persistent, that is, they are always visible on the screen, whether the user scrolls down the page or not.” (See more at <a href="https://www.nngroup.com/articles/mobile-navigation-patterns/">”Basic Patterns for Mobile Navigation: A Primer”</a>)
Smashing Magazine has an article on this thread, “<a href="https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/">The Golden Rules Of Bottom Navigation Design</a>”, they talk about user navigation in terms of engagement, similar to a conversation. For them the unbreakeable rules of mobile navigation design are four: Simple, visible, clear and consistent.
<a href="https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php">Steven Hoober at UXMatters</a> and <a href="https://alistapart.com/article/how-we-hold-our-gadgets">A List Apart</a> confirm how people browse on the smartphone:
<img alt="" src="https://cdn-images-1.medium.com/max/1000/1*p-fi-icTTPpn1FvDAgKZRQ.png">Think of a traffic light: green, yellow and red zones (natural, stretching and hard zones).
<ul>
<li>75% of users touch the screen only with one thumb.</li>
<li>Fewer than 50% of users hold their phone with one hand.</li>
<li>36% of users cradle their phone, using their second hand for both greater reach and stability.</li>
<li>10% of users hold their phone in one hand and tap with a finger of the other hand.</li>
</ul>
How do you hold your smartphone? Ups! I am in the “hold and touch” group! I tend to think millennials use both hands to browse, but <a href="https://www.geekwire.com/2017/millennials-use-smartphones-2017-surprising-reason-delete-apps/">a research from ComScore</a> denies this. The eldest are the ones using both hands more. Anyway, whatever you design, do it for the Thumb Zone!
<a href="https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/">Smashing Magazine on a post from 2016</a> (by this time Facebook Tab Bar was at bottom) says: “ The bottom sticky menu items are organized to provide comfortable tapping of popular links… By gathering user data, practicing good design and leveraging the thumb zone, Facebook is owning sticky menus”.
Back to UX Matters, they say: “It’s very important to place top-level and frequently-used actions at the bottom of the screen. This way, they are comfortably reached with one-handed and one-thumb interactions. Bottom navigation should be used for the top-level destinations of similar importance.”
Referring the Tap Bar, “Facebook makes main pieces of core functionality available with one tap, allowing rapid switching between features.” All these features are present in Facebook Tap bar: It shows only the important destinations, avoids scrollable content (there is only scrolling at the right tap bar button, the button with points, but it is a draggable tap bar), the use of icons, avoid color mismatch, correct text labels, target Size, badge (notifications) on Tab, consistency, hidding tab bar on scrolling and visual delight (<a href="https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f">See at UX Planet</a>).
Back to my exercise, as first approach to the Facebook App navigation, I took some screenshots while browsing on first level navigation. I think I took about fifty screenshots. Made a Sitemap for first navigation level. There is no oficial Facebook sitemap, there is the <a href="https://www.facebook.com/business/sitemap">Facebook Business Directory</a> and the <a href="https://www.facebook.com/iq/sitemap">Facebook IQ Sitemap</a> but have nothing to do with the oficial App.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TWl3zbr6--jWLl3kmLJ2uw.png">Some kind of Facebook App sitemap
Jumped into Sketch, here you can see a screenshot of my file using Craft for the interaction. As the artboards are screenshots I just used invisible buttons, what you see here is both interaction and buttons (just before changing buttons´opacity to 0). So it looked like this:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yGRAOTnRXH46Ueh0Ct5o6g.png">Facebook App Screenshots prototype in Sketch + Craft
Finally I synced to My Invision prototype. Here you can see the demo online: <a href="https://invis.io/V9EFRBP5G#/263567788_00_Loading_Screen">https://invis.io/V9EFRBP5G#/263567788_00_Loading_Screen</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xLLBoKF6eqVGJdo4uM9utQ.png">Facebook App Prototype in invisionApp
Conclusions:
<ul>
<li>Design for the Thumb Zone.</li>
<li>Facebook is unifying the design of different Apps: Instagram, WhatsApp, Facebook App, what´s the reason for this? I´m not really sure, maybe iPhoneX.</li>
<li>We only use about the 10% of Facebook, as you can see in the Sitemap.</li>
<li>Prototyping is fast if you use Sketch + Craft + InvisionApp. I will post about this comparing to AdobeXD, Figma + Zeplin and others in the future.</li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9a31a151f66a" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/facebook-app-ui-tab-bar-changes-the-thumb-zone-9a31a151f66a">Facebook App UI, Tab Bar changes, the Thumb Zone.</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Facebook App UI, Tab Bar changes, the Thumb Zone.

Top Stories