Co.Design

Facebook Home Breaks The Fourth Wall Of Mobile Design

Facebook Home sets itself apart from Android and Apple by taking full advantage of a layered UI. It’s about time.

Inside Apple, Jony Ive is pushing designers to rethink iOS, the software that runs on the iPhone and iPad. Apple’s new direction? Like Microsoft, which has distanced itself from skeuomorphic design, Ive has been pushing "flat design" in Apple’s mobile products. But just because Apple and Microsoft are embracing flatness, don’t let that fool you into thinking the future of mobile user interface design will also be shallow.

To wit: Yesterday, at Facebook’s headquarters in Menlo Park, CEO Mark Zuckerberg unveiled Facebook Home, the company’s next-gen mobile product. Built on top of Google’s Android platform, Home is all about layers of immersive content. Instead of forcing users to jump in and out of apps, Facebook’s new experience integrates services on top of one another, enabling users to slide seamlessly from one piece of content to the next. There are no separate home windows or lock screens to enter or exit. What you see on your screen--whether a status update, news feed, or Instagram photo--is Home. Facebook has woven traditionally disparate content and services together into a single, unified experience. "We’re building something much deeper than an app," Zuckerberg said.

"Deeper" is an appropriate way to describe Home, because the key to Facebook’s new mobile paradigm is depth. Consider traditional navigation on Apple’s mobile products. Before, if you wanted to meet up with a friend somewhere, you’d likely have to open the Safari app on your iPhone and search for a location; then, upon clicking the address, bounce over to a map application to find directions; and finally, hop to a messaging app to text your friend the best time and place to meet: three separate apps to deliver three separate experiences.

In Home, Facebook has combined these separate experiences and apps. You can chat with your friends while searching for an address, looking up directions, or changing a song--the messages will be overlaid on top of your other content. You can also stay up-to-date with notifications like check-ins or missed calls while sitting through Instagram photos. Facebook has even combined the home and lock screens, eliminating the traditional steps of having to turn on your phone, go to the home screen, and open apps to see content. Essentially, content, services, and notifications are forever humming in the background, ready to be surfaced to Home without disrupting your experience. "It’s all right there as soon as you look at your phone," Zuckerberg explained.

Various screens from Windows Phone 8

Historically, most mobile operating systems are modeled like 8-bit side-scrolling video games. They’re based on x- and y- axes, where users can move up and down, or in and out, of apps and content. The z-axis has been the untapped part of the user experience. "If you think of x- and y-[axes] as ways to sort larger buckets of information, and using z- to go in deeper to information--that to me is a unique use of a truly digital experience, which breaks from the tradition of reading books or scrolling or panning on the digital experiences that we’ve known up to this point," Dan Kraemer, creative director at design firm IA Collaborative, told me not long ago. Kraemer was impressed by the strides Microsoft had made with Windows 8 and Windows Phone, but he saw the potential for far more novel experiences, which would "leapfrog" over current paradigms and "do things that are even more immersive" and potentially more "spatial."

ChatHeads is a perfect example. It’s not an app but rather a new messaging component of Home that Facebook integrated to other services. It allows users to respond to messages without quitting other applications. "We’ve all had this experience where you’ll be watching a video or playing a game or in the middle of writing something, and someone sends you a message, and then you have to make this decision: Do I completely stop what I’m doing and switch to a different app just to read the message? Or do I just ignore my friend?" said Facebook designer Joey Flynn. "Both of those are bad experiences. Your friends shouldn’t be siloed off into these apps." The conversations are overlaid on top of whatever you’re doing, and extremely flexible. "With a simple gesture, I can swipe the conversation up and it would collapse it," Flynn said. "It’s so lightweight."

Indeed, we heard Facebook’s designers flick at the weight and malleability of these experiences throughout the presentation. Facebook product director Adam Mosseri called them "thin, light, in-line," as if they just float on top of other experiences when needed, and slide aside when not. "It feels physical and real," said engineer Cory Ondrejka, before Zuckerberg touted "how natural and smooth the interactions are." Even the app launcher, which is a more traditional app screen, is surfaced with a quick swipe rather than having to quit an app to go to a different screen. When present, the app screen simply rests on top.

So does Facebook Home represent the paradigm shift Kraemer anticipates? Not completely--the app launcher still feels molded after traditional mobile experiences--but it’s yet another step in that design direction. Only months ago, we saw BlackBerry head down this path with its new operating system. BlackBerry 10, its mobile OS, features BlackBerry Flow and Peek, two experiences which eschew what CEO Thorsten Heins referred to as "the in-and-out paradigm." He called it a "blended" experience where users don’t have to leave the camera app to shoot a video, don’t have to exit work services to get to personal ones, and don’t have to quit game apps to get social updates. Everything is layered.

Vivek Bhardwaj, BlackBerry’s software head, described the philosophy at the time: "It’s about moving between applications, not about home buttons, opening and closing…This is real-time true multitasking…All of my applications are running real time. I’ve never left the experience--nothing is paused; nothing is compromised. It continues to operate, fast and fluid. You’re not looking for a settings menu buried under certain controls--it’s very easy to just move between both of these spaces."

Facebook takes this one step further. "You don’t need to do any swipes or gestures in order to see this content," Zuckerberg said. "It’s a new category of experiences."

Kelly Rakowski/Co.Design (illustration)

Add New Comment

24 Comments

  • selonmoi

    This article is so very, very wrong, in so many ways.

    "ChatHeads is a perfect example. It’s not an app but rather a new
    messaging component of Home that Facebook integrated to other services."

    No, chat heads is an app: Facebook Messenger to be precise. You can go to the Play Store and install it on pretty much any Android phone, and you'll get chat heads. Uninstall it, and they go away. And Facebook Messenger is by no means the first or only Android app that can draw over top of another app. It's not even the first chat app to do that.

    At least in the Android world, this mystical fourth wall you describe isn't in a new frontier at all. It's just something that designers should (and do) approach cautiously, since a small smartphone screen doesn't provide a ton of space for multiple different contexts. There are other mechanisms, chiefly notifications, that are (at least theoretically) less annoying and better suited to the space constraints.

    Facebook kind of threw caution to the wind with chat heads, but they're not really doing anything new. We'll see if people like it or not.

  • Suzartisan

    Annoying.  I am already interrupted all day long now while I am driving, talking, texting. 

  • Aurelio De Oliveira

    Hey AUSTIN...

    Excellent contain post for Facebook wall design of mobile compatibility. Now mobile device are so populate for all user and owner.

  • juant

    The last part of the video is not real. It should show a bunch of i***ts all looking at their phones like sombies, not talking or laughing at all. That´s the real thing.

  • Andy Nightingale

    The adverts and maybe Facebook seem to assume we all live in a world of cool city apartments, achingly hip and interesting arty friends and a constant round of dinner parties! How about a phone for us boring, solitary people ;)

  • Arman Nobari

    It's nice to think of this in a 100% social networking context, but even though 1/7 of all people on the planet use Facebook, I think that FB needs to realize that their service is not the keystone of communications. People still text, people still call, and most of all, people use their phones for things other than Facebook.

    I can't imagine using a phone for quick research or productivity, or reading the news, and getting bombarded by social updates. If all you do is Like and Comment, and that's your life, go for it - get this phone. If you've got a bit more  depth to your life, maybe another phone is a better option.

  • Martin Deschambault

    You're exactly right, Arman.  

    There's no denying that FB is a significant element of the expansion of the internet, but some of us are choosing to look elsewhere for entertainment and information.  

    I made a conscious effort to leave FB in January.  It wasn't some massive protest against the medium, it was simply a choice to spend my time on other things.  Life is unchanged and I barely think about Facebook - I don't miss it.

    There are better things to do with our lives than socially networked pissing matches over who has the cutest kids or telling people how great you are.  Don't even get me started about the constant bombardment of advertising and marketing.  It's a brilliant mess that used to belong exclusively to television.

  • LIB

    It's an interesting idea, but it has one major flaw. Instead of creating an ios and being able to let it go into the world, knowing that companies like Amazon, Instagram and Google Maps will constantly work at making their ios app more and more user friendly, working day in and day out to improve the experience, they will reinvent the wheel and create an entirely new UI for everything? The reason that the mobile ios is so wonderful is that it's just a shell. So when it comes to the overall experience of using your phone, there are millions of people around the world working collectively to update your apps and create a better experience, because that's what their getting paid for. I don't see Facebook investing that kind of time into their UI when they're not getting anything in return. It's paramount to asking a software company for free updates and support. They're not going to invest the time because it's not making them any money...

  • Sjbisson

    It's a nice idea in a purely social context. But if a user is engaged in a game or some other unrelated personal utility app, and a FB message floats in, the distraction it creates just undermines the user's engagement with other apps.

  • cassette_walkman

     Agree. Multitasking is half-tasking. It's not getting more done it's just getting surface attention spread across many things. A king of Jack-of-No-Trades approach.

  • cassette_walkman

     They forgot to mention the 6th wall. Facebook looking over your shoulder, recording every visit, connection, contact, location.

  • Guest

     If the other walls represent the sides of the display, then wouldn't the glass represent the 5th wall? (other 4 being: left, right, top, bottom)

  • asperous

    Not sure if sarcasm, but the other walls represents the sides of the display, with the forth wall being the imaginary wall that separates the presenter from the audience (in this case, we can pretend that the glass on the front of our phones are the forth wall.

  • tN0

    While it is well designed and interesting I don't see the benefits of Chat Heads. Let's compare it to what we have now on Windows Phone:

    - you get a toast notification with name and short text. This sits on top of every app or game but doesn't hide any controls.
    - you tab on the toast (or slide it away to ignore)
    - you get to the messaging app whatever it may be. Read and respond.
    - tab "back" and you are back were you was before. The game or video did pause for you automatically and will continue.

    With Facebook Home:

    - you get a Chat Head pop up with let's hope a meaningful avatar image. It may also be just green or a red equal icon. The Chat Head seems to hide important controls (most Android apps have an app bar on the default location). You can (or even have to) move the head around.
    - tab on the Chat Head (or drag it down to ignore)
    - a window hides almost the entire screen. This is not multitasking or anything as they claim this to be. Read and respond.
    - swipe the chat up. And maybe drag the head down.

    Again: This works only with Facebook chat and text massaging. Not WhatsApp, not Skype or any other IM service! And the video or game would continue to play. But you can't see anything of it.

  • James Caldwell

    You guys should really do an article about BlackBerry's new UI then. Certainly this new 'launcher' that sits upon the Android OS is not very efficient. And from a UI point of view it is gimmicky and takes up more space that could be used for displaying the content you actually need.