Designers Behind Facebook Timeline: 5 Keys To Creating A UI With Soul

Nick Felton and Joey Flynn say that when creating a page to tell someone's life story, you have to throw out the UI rulebook and study how people recount memories.

For most of computing history, interfaces have been about function. Word processing programs help you compose documents. Banking websites help you make transactions. Sites like Flickr help you display and share photographs.

But Facebook’s Timeline (the new version of the user profile which is slated to be released to the general public “in the next few weeks”) wanted to do something more: It wanted to convey a feeling. Two feelings actually: The feeling of telling someone your life story, and the feeling of memory--of remembering your own life.

If Facebook had simply had utilitarian goals in mind for its new profile, like “Help me identify what happened in 2008,” designing Timeline would have been simple. It could have created a functional interface that allowed you to navigate your life data in a functional way, allowing you to filter items by time, for example, or by event type or data type.

But Facebook didn’t want to do that. It wanted to create an emotional experience. And as such, the design of the Timeline interface was much more challenging. Nick Felton (he of the “Feltron” annual reports, who joined Facebook earlier this year) and Joey Flynn, a Facebook product designer, tell Co.Design about the decisions they made.

Time Is The Most Universal Framework Across Cultures

One of the primary decisions that had to be made was what the basic organizing framework would be. If you ask someone to tell you the story of their life, Flynn explains, they don’t tell it chronologically (“In 1999, this happened, in 2000, this happened,” etc…). Instead, they talk about moments. So the team experimented with a framework around the important moments in a person’s life: When they got married, for example, or special birthdays.

But they soon realized that wouldn’t scale. Facebook has almost a billion users, spread across the whole world. What constitutes an important moment differs across cultures. “It’s really hard to create a common language around that,” Flynn says, a way so that, if you go to anyone’s profile, you understand how to use it immediately. So instead, Facebook decided on time as the organizing framework. It’s a shell on which users themselves can define what they want to highlight. Controls on each individual item (like status updates and photos) allow users to make certain items larger or smaller, or even whether to include them at all.
[Events are shown on either side of a timeline that runs down the middle of the page. Big events go double wide.]

Life Feels Like A Stream; Life’s UI Should Too

The amount of data that will get accumulated over the course of a person’s life will be huge. So the team experimented with chopping that all up into specific years. A Facebook hackathon project called Memories, for example, which was accidentally released to the user base briefly last year, did that very thing. Users navigated between various buckets of content by clicking on years.

But that didn’t achieve the effect Facebook wanted. That’s not how we remember our life, Felton says. We don’t remember it in chunks. We remember it as a stream. “I felt strongly that your life should be shown in one long continuum,” Felton says.

And so in the final design, the Timeline appears on a single page. Up at the top, it looks more like a typical Facebook Wall, with recent events called out. But as you start to scroll back in time, fewer events pop out. A slider ticks off the years as you roll back in time, giving you the feeling of time whizzing by. Or, as Felton puts it, “You gently consume time.”

Self-Expression Is About Content, Not Frills

Facebook wanted the Timeline to be a place for self-expression: A way for users to reveal who they are and what their lives are about. The team experimented with giving a users a lot of control over various design elements on the page--different kinds of photo borders, so you could use an elegant border for a wedding photograph, for example, and a sporty one for an action shot.

But the scale problem made that unwieldy. Facebook wants any user to be able to drop in to any other user’s Timeline and immediately understand the visual language and know how to navigate the Timeline. The more control over visual elements they gave to users, the greater the chance that conflicting languages would emerge, thereby degrading the usability across all users.

So instead, Flynn says, Facebook decided to tightly control the visual language and instead give users control over what to emphasize within that framework. Users can’t decide what borders to use, but they can decide which photographs to emphasize, for example, by making them bigger or smaller. “It’s about being personal through the content, rather than being personal through the veneer,” Flynn says.

We Relate To Old And New Experiences Differently

Timeline doesn’t just need to be a place to reflect back to users all the things they’ve already put into Facebook. It also needs to be a receptacle for all the exponentially growing amount of data that users will likely be putting into the system, both actively, as with status updates and photos, or passively, through new tools that allow the system to automatically capture what songs you’re listening to on sites like Rdio and Earbits, for example, or the runs you’ve taken using RunKeeper.

Facebook could simply have given the same weight to each individual event--a song you listened to or a run you took--as it gives other pieces of data, like status updates, and listed them all in the Timeline. But that doesn’t work well over time. Individual songs are interesting in the moment you’re listening to them. But over time, you’re more interested in patterns. So Facebook created a set of aggregations and reports, to let you “find those individual patterns that define your identity,” Felton says. By seeing aggregate reports on what songs you listened to at particular times in your life, you get to see “the soundtrack of your life.”

[One of Felton’s favorite features: A map that shows pictures wherever they were taken]

The Importance of Dog-Fooding

Felton says the main lesson he learned from the experience of designing and iterating Timeline is that “Photoshop lies.” “You can come into a meeting with a very beautiful comp and it’s like, ‘Oh yes, we should do it that way,’” he says. “But you’re never going to know if you can do it that way until you pump in the real data and live with it for days or weeks.”

To make sure they got it right, Facebook released Timeline to its own employees during the development process, to make sure that the paradigms they were developing worked for all users, those with a ton of status updates, for example, as well as those with just a few.

“As a designer, you have your baby that you want to try and sell. To make it saleable, you might pick someone who has really nice photos in their profile and use that to make your mockups,” Felton says. “But you’re ultimately just lying to yourself and the rest of the group if you think everyone’s page is going to look like that.”

[Image: Drew Anthony Smith]

Add New Comment

67 Comments

  • Alan

    I don't want to tell my life story nor read anyone else's' on FB. If you want my life story you can buy my autobiography when I write it. I just want to keep in touch with old friends. I had timeline force on me a year ago and still don't like it. It's made me use FB much less and delete lots of old posts. I looks terrible - this was not designed by someone with any clue about visual aesthetics.

  • Rey

    Interesting....but TIMELINE SUCKS period.

    I had fun with the old Facebook profile just fine.
    but with Timeline just looking from left to right is frustrating enough.
    And now forcing it to everybody?!
    I accidentally changed mine into timeline, and I can't even change it back.
    no more changes...PLEASE!!!!!!

  • derpoi

    emotional? yes im so emotional right now

    i wanna murder you stupid designers and then poop on your faces  

  • Meridith Tynes

    I don't hate the new design.  I just do not find it as user friendly as the older version.  I somehow managed to take a game update off my wall, and have no idea how to reinstall it.  The main use I have is for entertainment, i.e. games.  If my "neighbors" cannot send me things they see on my wall, what is the point?

     

  • Thomas Nguy

    "...But Facebook didn’t want to do that. It wanted to create an emotional experience."

    I think FB's 'designers' are indulging in the same megalomania and conceit as bureaucratic social engineers who truly believe they can 'create' and interpret the emotional experience of individual millions.

    UIs  do not create 'emotional experience'. People do.

    FB's dozzie of a 'Timeline' contravenes the universal + intuitive view of time as lateral. Graphical timelines are horizontal to better illustrate progression/journey. Perpendicular graphs are best for conveying quantitative loss or gain. A user may wish to go back or move forward in time.  But to scroll up or down in time?

    This UI is failed attempt at merging a lateral 'cinematic' paradigm onto a stacked, aggregated, log entry model.
     

  • boiselass


    facebook was a p.o.s. when it first began...then it got a bit better but no robustness..the purpose of FB originally was to allow people to keep in touch and stay CURRENT IN CURRENT HAPPENINGS...then it became  more commercialized...then a bit more unsecure...crimes occurred because of fb privacy settings and they said "sorry" we'll fix it..and we all looked the other way. then the "stay current" social network now wants to post your history so they can sell your identity info, but not just yours, all your friends too..i'm so sick of greed and people twisting things up to be this WOW! THIS IS SUCH A GREAT THING.  it's not!

  • Rob Bartlett

    I'm afraid the cynic in me agrees with one of the earlier comments about this Timeline being little more than another way of securing future FB revenues. Seriously, how much more of our souls are some of us out there prepared to freely hand over to Zuckerburg and Co.?. I'm in the minority I know, but I'm  one of these FB users who still struggles with this 'Collect-A-Friend', 'Type-A-Life' society we seem to have all blindly subscribed to.

  • Tom Lewek

    I think Nick and Joey did an excellent design and their work deserves the praise it gets in our field, but I can't help but see these small innovations of Facebook as the start of the company's downfall from the top of social networking. Meaning that eventually these new ideas sprouting out from the main focus of Facebook usage will become big enough themselves to replace it.

  • Pilotibus

    I hope a replacement will come very soon, because as a designer myself, I would give Nick & Joey's design a big fat "F."

  • mackx

    as usual with big upheavals in design at facebook, theres going to be and currently actually are millions of haters. they are all crying out for a method to disable facebook timeline as they just dont like it for whatever reason, and there appear to be various reasons as to why people hate this profile ranging from privacy issues to the "busyness/higgledy piggledynesS" of it all. 

    Well luckily for the haters, there is currently a method for disabling facebook timeline, you can check it out here:  http://fbpurity.com/disable-fa...

  • Henk

    Nice work for what is shown above, thise case prooves the old design methode 'form follows funktion' in a new way.

  • empowered1

    I think the concept is interesting. It is neat going back in time and seeing some of the things I've said or shared, especially pictures and videos and that kind of thing. I wouldn't think it's completely unlikely for good friends to use Timeline as a tool for reminiscing. But I was hoping Timeline would be a new feature, not a completely different replacement for the Wall/Profile. To me, this is overkill for quickly going to share a link with a friend or posting a question on a page. From a design and usability perspective, things are muddled and confusing. My biggest problem is the timeline itself: the line that goes down the center of the page. Why do there have to be boxes on both sides of the line! It's hard to read and pay attention to in any logical form and it just seems messy and incoherent. My concern with the covers, while cool for now, is that they may make Facebook the next MySpace where every profile is so completely different that there is no site unification and it gets gaudy and hard to look at.

  • PixzelPusher

    "Felton says the main lesson he learned from the experience of designing and iterating Timeline is that “Photoshop lies.”Really, it is just a page with pixels that you put in there. What you mean is that "I designed it and now they tell me they can't code it." Like a congressman trying to legislate weather. Facebook had a killer web idea and has been working hard to make it more complicated and less usable. Just don't screw up the newsfeed anymore.

  • byprinciple

    in order to make things more useful, usable and educational, why not also stick links to dates and facts on somebody's timeline that feed to inter/nationally historical events. facebook joins google joins wikipedia joins education etc... now that's something to look at in order to make today's youth sit (and feel part of) in world history rather than in their own.

  • Guest

    I must be old.  Back in the day it was considered torture to have to sit through someone's vacation slide show, and now Facebook thinks people want to put together slide shows of their entire LIVES and that others will want to look at it?  I think there are plenty of people in the first camp but very few in the second.  Maybe that's the whole point; Facebook doesn't care if your friends view your life, they just want access to the data so they can charge more for advertising.

    I'll leave the Zuckerberg Kool-Aid to those who adore this kind of thing.  I'll be over here getting older and more crotchety.

  • GoCat

    After working with hundreds of social media end users, I've found the vast majority of them rarely visited another user's Facebook Wall … they live in the news feed. I don't see Timeline changing that.

    Facebook may have to find a way to force people onto those pages, if anyone is to actually see them … and that would be a big mistake. The MySpace comparisons are apropos, I think.

    It seems to me that the folks at Facebook put their energies in the wrong place.