Mobile UX Anti-Patterns: Pinterest’s Confusing Tab Bar
Yes, doing bottom navigation using tab bars is really handy. Tab bars are easy to access, make navigation fast and save you from using the evil hamburger menu. In fact, 10 years after the iPhone’s original announcement, even Google has concluded that tab bars might really be a good idea in many cases.
Tab Bars — A Powerful Design Tool
Moreover, tab bars have a very important characteristic: They build habits. Whenever I want to see new updates on the App Store, I start spamming the lower-right part of my screen immediately after tapping the App Store icon. Of course I do! The update tab has been there for 10 years, and I don’t have to look for it. Simple and straightforward. It’s so easy to use!
But wait, it’s 2017 now and the App Store tab bar was never redesigned since the old days of iOS skeuomorphism, right? You, on the other hand, are building a modern product that’s changing the way we use [category]! This tab bar has to be more minimal.
Here you go. No labels. No one reads them anyway. It’s much better now!
No. You just made your app worse.
Take a minute to imagine looking at those icons as a new user who never really got into Pinterest until now. You downloaded the app two weeks ago and didn’t really use it since, but now you’re opening it again and really want to try it out because a friend told you they really liked it.
Two of those icons look really straightforward. You can search for stuff, and you have some kind of profile. Seems a little weird that there’s a profile even though your friend said this was a bookmarking app, but you’re okay with that.
The left one is the Pinterest icon, okay. Not sure what exactly it does, but seems to be showing some rather mildly interesting things you could bookmark.
But what’s up with the third icon? 21 messages? Huh? Is this app somehow also a messenger? Why are there so many messages? You decide to click on it to find out…
Oh, alright. Seems like no one actually texted you, and maybe this app doesn’t even include a messenger after all. It says Notifications on top, but you are still not sure why you have so many of them. Anyway, you don’t have any more time now to figure this out… Let’s just leave this confusing app for now and get back to work.
As a UX designer, you have to imagine being this user.
Talking to real users is still one of the most important things for you to do, but it’s very, very hard to talk to new users without triggering an observer effect, changing the way the user is behaving by watching him. Besides talking to actual users and using qualitative app metrics, imagination is the thing you need.
It seems like a UX designer at Pinterest recently also noticed the problems described above. This is what the tab bar looks like right now:
But even this doesn’t magically fix it. Looks like the “Profile” tab is actually a list of things the user bookmarked. Furthermore, the Notifications tab is still confusing, as the icon suggests a different meaning.
Icons and labels should always play together, be consistent, and most importantly: They should not surprise the user.
Ultimately, an app’s tab bar is its central and therefore most important navigation interface. It’s the one place in your app where everything has to work without requiring your users to think.
If you want to start building habits, fix your tab bar. Make it straightforward, descriptive and avoid surprises at all costs.
Don’t do this.
About the author: I’m Patrick, a computer science student in Karlsruhe, Germany and maker of a 20k MAU side project called Jodel Stats. Currently, I’m also working at Jodel as a Backend Developer in Berlin. Despite my big passion for coding, I enjoy following UX Design as one of the most creative and personal topics in tech. If you’d like to get in touch or receive new posts from time to time, please consider following me on Twitter or on Facebook!
