Facebook Messenger Redux
Chat Heads Were Good, Let’s Do More of That
I loved the idea of Chat Heads when Facebook launched the new Messenger app in April of last year. It made perfect sense to be able to quickly respond to a new message with the simple tap of a face all without leaving your current app. Of course this luxury is only available in the Android version of Messenger as overlaying one app on top of another is not possible in iOS. This means that on iOS we’re relegated to Chat Heads only in the Facebook App while the Messenger App receives no juicy Chat Head love.
It’s saddening that all the great design and forward thoughtfulness of Chat Heads is lost to a simple UITableView! When the user taps into a conversation they leave the context of their other conversations. All the open conversations slide off the screen never to be seen again until the user leaves the current conversation by hitting the back button. At this point the other conversations are revealed and a whole new world may have emerged. New messages may have arrived while the user was in another conversation and only a push notification could have warned them. Wouldn’t it be great to empower the user with the current state of their conversations at all times?
Messenger Redux
I’m going to break down the design goals here first but if you want to skip ahead and try out the prototype then here you go (Please view on a phone sized device or resize browser to phone size) http://messenger-redux.herokuapp.com/. I apologize if it takes a minute to boot. It’s running on Heroku’s free tier…
Right Toolbar > Top Toolbar
The key to Messenger Redux’s design is to remove the standard top toolbar of most apps and adopted a right side toolbar instead. This gives us a simple hierarchy starting with the plus icon to start a new conversation, then a large scrollable area for all the user’s open conversations, and finally the menu button to see more details. With this design the user retains the context of all their current conversations while still viewing and taking action on the open conversation. Their is no constant in and out that the current messenger app(s) suffers from, just a simple bubble tap.
Meaningful Menus & Logical Interactions
The menu can be accessed by a tap or a simple swipe left on the toolbar and then closed again by doing the inverse. Putting the toolbar and menu on the right side of the screen has a few bonus advantages. First there is no overloading of the swipe back gesture to open the menu/go back a step that was introduced in iOS 7. Second the toolbar gives the user a large logical surface area to swipe against (feels more like a drag) compared to the common swipe right somewhere to the left side of the screen.
Bottom is So Much Easier
Another differentiator of the design is the placement of actions on the bottom of the screen (message input, send button, menu button, and settings). I did this because I hate reaching for buttons at the top of the screen! This is not so bad right now on an iPhone 5s but on the Nexus 5 (and most likely iPhone 6) the large screen makes tapping top mounted buttons a chore. I wish I could have also placed the “Add” button on the bottom but the hierarchy and interaction when a new conversation is started (slides in from the top) denotes that it had to be at top.
Real Breadcrumbs
I’ve included settings here to show that Messenger Redux is designed around 85% width panels. This give the user a logical 2D layout that provides enough context to show where they are and how to get back to where they were. The previous panel’s content is made slightly transparent and the button that brought the user to the new panel is lit up to help give a visual cue of an “active” state. To go back the user simple taps (or swipes right) anywhere on the previous panel (not just settings button).
I’ve developed a working prototype that you can try yourself. The design is for phone sized devices so things will look and function strangely on anything larger than a phone (resize browser to phone size to get the correct design) http://messenger-redux.herokuapp.com/. Enjoy!
