Flaws in FACEBOOK design

Varun R Panambur
Aug 23, 2017 · 5 min read

We all are very familiar with big product companies and most of their product designs are the reference or inspiration(New way of telling ‘copy’) for many designers including myself. It is true that top companies usually do a lot of research or UX study(both in terms of qualitative & quantitative) before making any changes. Sometimes, in spite of having some proven data to redesign, they fail miserably and fall into the pit of memes.

some random meme I found

Nowadays update notifications from apps are so common, that even people wouldn’t get ping so frequently from their loved ones.

A couple of weeks back(early June), I was surfing through Facebook from my iPhone at the office, the video I was watching played loudly and suddenly realized that there is no mute option in full-screen view. I was very frustrated with this incident and with the same suspicious eye, continued exploring the Facebook app and took screen shots of issues found.

Disclaimer: Below mentioned are my perspective, I agree, there might be some strong reason behind it. Experts can surely comment, so that I could learn from your expertise.

Video in full screen

#1 Issue: missing mute option in full screen video player.

Category: user control and freedom

Note: Provide mute option like in preview mode

.

.

.

.

.

.

.

.

.

Feed screen

.

#2 Issue: Redundancy of messenger feature

Category: user control and freedom

Note: Resolved in Version 93.0. The intention might be like A/B testing for introducing new messenger feature.

feed screen & Feed details screen

.

.

.

.

.

.

.

.

#3 Issue: Differentiate clickable and non clickable.

Category: consistency and standard issues

Note: Differentiate between clickable and not clickable actions.

.

.

.

.

feed screen

#4 Issue: ‘1.5k’ and emoji triggers a different set of actions but placed together. Since it triggers different actions, the distance between buttons is not comfortable to click.

Category: consistency and standard issues

Note: Differentiate the two different action items

.

.

Feed > Share in messenger

#5 Issue: Both ‘cancel’ and ‘Facebook’ button serves the same purpose i.e redirects to feed page, hence confuses the user.

Category: consistency and standard issues

.

.

.

.

.

.

.

.

.

Feed > Share in messenger

#6 Issue: Again have to scroll top to search friends, When the list is scrolled down.

Category: Flexibility & efficiency of use, Recognition rather than recall

Note: Could have made search static or display list alphabetically

.

.

.

Feed > Share in messenger > find people

#7 Issue: ‘Done’ button doesn’t seem acceptable there, as the user has not selected/typed anything.

Category: consistency & standard

Note: Instead of ‘Done’ could have made ‘Cancel’, once user selects any recipient, the button could change to ‘Done’

.

.

.

.

.

.

.

.

#8 Issue: consistency in ‘Share’ button

Category: consistency & standard

Note: Consistency in icons help user’s to identify action items quickly.

friend request > ‘+’ > contact

.

.

.

#9 Issue: Consistency in‘back’ button

Category: consistency & standard

Note: Consistency in icons help user’s to identify action items quickly.

friend request > ‘+’ > search

.

.

.

#10 Issue: Could have used the empty screen in the better way.

Category: Help and documentation

Note: Suggest some new friends, so that it would delight the user.

friend request > ‘+’ > contact

.

.

.

.

.

.

.

.

.

#11 Issue: Additional effort of tapping buttons for user to see set of similar actions.

Category: Flexibility and efficiency of use

Note: Combine similar categories under same action button.

Groups > Discover > Add

.

.

.

#12 Issue: ‘Requested’ button here cancels the request. So it is confusing for the user unless tapped on the ‘Requested’ button.

Category: Match between system and real world

Note: Once the user sends a request for any group to join, text button changes to ‘Cancel request’ rather than ‘requested’.

.

.

#13 Issue: Redundancy of ‘search’ option confuses the user

Category: Consistency and standard

Note: Provide either one option.

.

.

.

.

.

.

.

.

.

Conclusion:

Though other’s shoe looks better, doesn’t mean that fits you.


I have been just reading Medium for a while now and addicted reading to many amazing articles. Due to which, I got the courage to convert those screenshots into my first article. I hope my honest critiques with Facebook provided helpful advice and encourages everyone to continue sharing and learning from one another. Thanks to Suresh (my lead) for pushing me to write this article. Some references I took from Norbi, Nick and Peek Inside a Facebook Design Critique by Tanner.

PS: Please bear those unnecessary dots :) that I have used to maintain layout alignment.

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade