Improving Facebook Friend Requests screen with some FramerJS magic
Last November I have discovered best prototyping tool for interactions- Framer JS. This completely changed the way I design things and the way I spent my nights after I got my nimble kids to bed).
Most of the free time I have nowadays I am trying to play with Framer. Sometimes recreating some fun interaction from the app I use — http://bit.ly/mapsFramer
or creating something new for my current client projects -http://share.framerjs.com/dzne6gf2msdr/
A couple of weeks ago I decided to play with Friend Requests screen in Facebook app on android.
First thing I noticed — there is still Poke button inside Facebook)
It was fun to use in 2008), though even that time I was struggling to understand what’s the purpose of it). So my first suggestion on improvements was to delete poke functionality from this screen.
Deleting Poke button make it possible to have block/reject button accessible within one tap from Friend’s card — no need to tap on more button (3 dots) to see the contextual menu.
Same way I decided to work with respond button — change action to Confirm.
So possible buttons for Friend’s card can be Confirm (friend request), Message, Follow, Reject.
Static improvements are one direction, but what I really wanted — was doing some adjustments on interactions. So I decided I want to play gestures on cards — swiping card to the top to accept friend’s request or swipe card to the bottom to reject it. Gestures make it very easy if you have a big amount of requests sitting waiting for your actions .
On that stage, I just mocked interactive prototype quickly in Framer. http://share.framerjs.com/w00bexub2u26/
Next thing — spice wireframes with graphics.
In order to onboard people with new gestures available for interaction with cards — I decided I can manipulate friend’s card in response to taping of Confirm, Reject buttons same way it’s done with gesture — animating it to top or bottom fading in additional menu with text description. This will drive people to try playing with the card in my opinion.
One thing was confusing for me, in detail view — there are duplicating buttons for same actions — big buttons to confirm delete friend’s request and respond buttons with icons above. My suggestion on that — remove big buttons — and have icon buttons with text still available in detail view.
While working with application on android device — I found out that transition of cards view to card detail view is not fully complaint with material design guidelines. So I tried to fix that, adjusting my Framer prototype with some animation.
While i was writing the post — google has updated motion design guidelines, so need to update my transition then)
Andrew Yanovskiy mentioned that in current app u can dismiss friend requests screen by swiping whole screen to bottom. This interaction becomes unavailable when i make swipe to bottom for dismiss request. So my suggestion here — tap outside of friends card
So final prototype looks like this
You can play with it here http://share.framerjs.com/ji1qw8aij5b6/
I encourage every designer to spend some free time having fun experimenting in Framer. Comments and questions appreciated)
