Guest Experience on iOS7
By Zane Claes
Airbnb has always been a company focused on design and pixel-perfection. The iOS7 redesign represented an opportunity to break the mobile application down and build it back up again. We developed an internal suite of tools to allow our design team to select from a predefined set of swatches (fonts, colors, paddings, etc.), which leads to increased cohesion by decreasing the number of “one-off” design elements. In addition, the code is cleaner than ever; designers and programmers alike can know at-a-glance that the spec and the implementation are at parity.
Flat design has become mainstream with the introduction of iOS7, and in our redesign of the Airbnb application we certainly wanted to adjust to this new paradigm. That said, flat design does not mean that apps need to completely avoid any sense of depth. The Z-axis can be used sparingly to increase its effectiveness, while avoiding cluttering screens with drop-shadows. Used properly, depth can create a sense of boundless space, which ultimately leads to more exploration by the user. The new Airbnb navigation system, dubbed AirNav, flies open to reveal the two halves of the Airbnb experience (Hosting and Traveling):
The search results, discover section and wishlists have all been redesigned to take maximum advantage of the beautiful photography of many Airbnb listings. Our color picking algorithm can select relevant hues to serve as backgrounds to title bars; it runs asynchronously to quickly select bright colors from the image while ignoring the white/black extremes (check out the GitHub link for more details). Such techniques can be challenging to calibrate, but the effect is to create an experience which is simultaneously polychromatic and cohesive:
When a user opens up a listing, the header image is blurred and placed behind a semi-transparent white background. This creates more procedurally generated variety: each listing has a unique look and feel, yet the effect is subtle enough to not be jarring. Proprietary blurring algorithms (since Apple has not release theirs) cannot be executed real-time (eg, even on high end devices it takes more than 1/30th of a second to blur an image). In addition, blurring adds a second step to downloading an image from our content servers (it would be visually jarring to show a sharp image, and then replace it with a blurred version). However, these steps are hidden through use of fade animations.
Not only is visual impact maximized through large images, but the lack of dividing lines and other constraining UI elements leads to a boundless feel. As the user scrolls down, many views use a parallax effect and rule of thirds to hide header images and make even more room for content.
As the guest proceeds through the booking process, the app has one last surprise. Modal windows (such as the share, book, and contact views) take advantage of animations to smoothly morph one screen into the next. UIDynamics anchors the experience to the real world, through the detection of gravity and acceleration, in a subtle but compelling way.
Increasingly, good app design has become about showing only the right things at the right time (especially important on small screens). This tactic is only effective, however, if users are encouraged through enjoyable interactions to explore the application: otherwise the true power will never be discovered. The iOS7 redesign of the Airbnb application accomplishes this by staying out of the user’s way as much as possible, while calling attention to the most compelling aspects of travel.
Check out all of our open source projects over at airbnb.io and follow us on Twitter: @AirbnbEng + @AirbnbData
Originally published at nerds.airbnb.com on November 11, 2013.
