User Experience Lessons From the New Facebook iOS App
Yesterday Facebook released a brand new version of their app. Replacing many of the web views with native code. Their update is focused on improving the speed wherever possible. Let’s walk through the changes and see what we can learn about designing a great user experience for iOS.
Performance and Perceived Performance
When you first launch the new app the first thing you see is a new launch screen. Instead of being a logo like before, it is now a simplified version of the interface (just like Apple does on all of their apps). This allows the user an extra second to know where the navigation will load in and where to tap next. It feels like the interface shell has loaded and we are just waiting for the details to come in. Apple has always recommended this in the Human Interface Guidelines, but few apps followed it.
Cached News Feed
Rather than wait for the latest content to show Facebook now displays a previously cached news feed. This shows you content right away, rather than forcing you to watch a spinning animation. It does clearly display a Loading animation at the top, to let you know when the new content is downloaded.
Always try to show the user something as quickly as possible.
The side menu now slides open considerably faster. This doesn’t have anything to do with data loading or connection speed, just that the animation duration is decreased. Several other animations are sped up throughout the application as well. When adding a comment to a photo the comments view animates to fill the view very quickly. They really increased the animation speeds in quite a few areas.
This just shows that speed isn’t all about load times. Instead it has to do with the users perception of how fast the app is reacting to their commands.
Immediately Push to a New View
If you tap on a photo it immediately loads the photo details view, but with the thumbnail photo just scaled larger. It then replaces the scaled version with a higher resolution photo as soon as the resource is loaded.
In a similar way if you tap on a status update it immediately pushes to the status view, showing the data it already knows, then loading in the comments. The old Facebook app would display a loading icon for the entire screen while waiting for the new content to load.
React as quickly as possible to a users inputs. When it helps improve perceived speed use data you already have to fill in the content while you wait for the new data to load.
There are also a few miscellaneous changes that help to improve the usability of the application.
New Menu Dividers
The section dividers on the side menu are now larger and easier to read. In addition to that they also pin to the top of the view when scrolling just like headers on UITableViews. Makes it easier to keep track of which section you are in.
“New Story” Message
If you are scrolled part way down the news feed it will display a banner across the top of the page letting you know a New Story has loaded. Just tap this and you scroll back up to the top.
There are also a handful of minor design. While they don’t necessarily improve the usability of the application it is interesting to observe the small changes over time.
The new icon is only slightly different. They removed the gloss and increased the shadows and gradients to keep it from looking so flat.
Increased Corner Radius on Header Buttons
The buttons in the header now have a slightly larger corner radius than before. This makes them more closely match the default UIKit style found in other apps.
Restyled Status Buttons
The Status, Photo, Check In buttons across the top have a new style now. The icon style they are using now better matches an iOS style. Though they are still using the older, more detailed style in in the side menu (I think it looks good).
New Active Header Icons
The active buttons in the header now have a silver selected state. Before the icons didn’t change change when selected. You only knew which one was active from the popover arrow.
When sliding to a new view the app used to slide it out on top of the current view. Leaving the current content in place, but hidden underneath the new view. At least that is what their animation implied. Now it uses the standard animation where it pushes into the new view. I mocked up this quick graphic to show you what I mean.
Give the app a try.
Download the app and see if you notice an improvement. They fixed a lot of little things that gave the perception of a slow and buggy application. Then try to see if you can apply any of these lessons to your own designs.
Oh, and the new app has only crashed on me once. Unfortunately that is an improvement.
What do you think of the new app? Are there any other design improvements you’ve found? Let me know in the comments. Also consider signing up to hear about The App Design Handbook launch.