Return to Video

How giant websites design for you (and a billion others, too)

  • 0:01 - 0:04
    What do you think of when I say the word "design"?
  • 0:04 - 0:07
    You probably think of things like this,
  • 0:07 - 0:10
    finely crafted objects that you can hold in your hand,
  • 0:10 - 0:13
    or maybe logos and posters and maps
  • 0:13 - 0:15
    that visually explain things,
  • 0:15 - 0:18
    classic icons of timeless design.
  • 0:18 - 0:21
    But I'm not here to talk about that kind of design.
  • 0:21 - 0:22
    I want to talk about the kind
  • 0:22 - 0:24
    that you probably use every day
  • 0:24 - 0:26
    and may not give much thought to,
  • 0:26 - 0:28
    designs that change all the time
  • 0:28 - 0:31
    and that live inside your pocket.
  • 0:31 - 0:33
    I'm talking about the design
  • 0:33 - 0:35
    of digital experiences
  • 0:35 - 0:37
    and specifically the design of systems
  • 0:37 - 0:39
    that are so big that their scale
  • 0:39 - 0:41
    can be hard to comprehend.
  • 0:41 - 0:43
    Consider the fact that Google processes
  • 0:43 - 0:47
    over one billion search queries every day,
  • 0:47 - 0:49
    that every minute, over 100 hours
  • 0:49 - 0:52
    of footage are uploaded to YouTube.
  • 0:52 - 0:53
    That's more in a single day
  • 0:53 - 0:56
    than all three major U.S. networks broadcast
  • 0:56 - 0:59
    in the last five years combined.
  • 0:59 - 1:02
    And Facebook transmitting the photos,
  • 1:02 - 1:03
    messages and stories
  • 1:03 - 1:06
    of over 1.23 billion people.
  • 1:06 - 1:09
    That's almost half of the Internet population,
  • 1:09 - 1:11
    and a sixth of humanity.
  • 1:11 - 1:12
    These are some of the products
  • 1:12 - 1:15
    that I've helped design over the course of my career,
  • 1:15 - 1:17
    and their scale is so massive
  • 1:17 - 1:19
    that they've produced unprecedented
  • 1:19 - 1:21
    design challenges.
  • 1:21 - 1:23
    But what is really hard
  • 1:23 - 1:26
    about designing at scale is this:
  • 1:26 - 1:28
    It's hard in part because
  • 1:28 - 1:31
    it requires a combination of two things,
  • 1:31 - 1:34
    audacity and humility —
  • 1:34 - 1:37
    audacity to believe that the thing that you're making
  • 1:37 - 1:41
    is something that the entire world wants and needs,
  • 1:41 - 1:44
    and humility to understand that as a designer,
  • 1:44 - 1:46
    it's not about you or your portfolio,
  • 1:46 - 1:49
    it's about the people that you're designing for,
  • 1:49 - 1:51
    and how your work just might help them
  • 1:51 - 1:52
    live better lives.
  • 1:52 - 1:55
    Now, unfortunately, there's no school
  • 1:55 - 1:59
    that offers the course Designing for Humanity 101.
  • 1:59 - 2:01
    I and the other designers
  • 2:01 - 2:02
    who work on these kinds of products
  • 2:02 - 2:06
    have had to invent it as we go along,
  • 2:06 - 2:07
    and we are teaching ourselves
  • 2:07 - 2:09
    the emerging best practices
  • 2:09 - 2:11
    of designing at scale,
  • 2:11 - 2:13
    and today I'd like share some of the things
  • 2:13 - 2:15
    that we've learned over the years.
  • 2:15 - 2:17
    Now, the first thing that you need to know
  • 2:17 - 2:18
    about designing at scale
  • 2:18 - 2:21
    is that the little things really matter.
  • 2:21 - 2:23
    Here's a really good example of how
  • 2:23 - 2:26
    a very tiny design element can make a big impact.
  • 2:26 - 2:29
    The team at Facebook that manages
  • 2:29 - 2:31
    the Facebook "Like" button
  • 2:31 - 2:34
    decided that it needed to be redesigned.
  • 2:34 - 2:36
    The button had kind of gotten out of sync
  • 2:36 - 2:38
    with the evolution of our brand
  • 2:38 - 2:39
    and it needed to be modernized.
  • 2:39 - 2:41
    Now you might think, well, it's a tiny little button,
  • 2:41 - 2:43
    it probably is a pretty straightforward,
  • 2:43 - 2:46
    easy design assignment, but it wasn't.
  • 2:46 - 2:48
    Turns out, there were all kinds of constraints
  • 2:48 - 2:50
    for the design of this button.
  • 2:50 - 2:54
    You had to work within specific
    height and width parameters.
  • 2:54 - 2:56
    You had to be careful to make it work
  • 2:56 - 2:58
    in a bunch of different languages,
  • 2:58 - 3:01
    and be careful about using
    fancy gradients or borders
  • 3:01 - 3:03
    because it has to degrade gracefully
  • 3:03 - 3:05
    in old web browsers.
  • 3:05 - 3:07
    The truth is, designing this tiny little button
  • 3:07 - 3:10
    was a huge pain in the butt.
  • 3:10 - 3:12
    Now, this is the new version of the button,
  • 3:12 - 3:14
    and the designer who led this project estimates
  • 3:14 - 3:18
    that he spent over 280 hours
  • 3:18 - 3:21
    redesigning this button over the course of months.
  • 3:21 - 3:24
    Now, why would we spend so much time
  • 3:24 - 3:26
    on something so small?
  • 3:26 - 3:28
    It's because when you're designing at scale,
  • 3:28 - 3:31
    there's no such thing as a small detail.
  • 3:31 - 3:32
    This innocent little button
  • 3:32 - 3:36
    is seen on average 22 billion times a day
  • 3:36 - 3:40
    and on over 7.5 million websites.
  • 3:40 - 3:44
    It's one of the single most viewed
    design elements ever created.
  • 3:44 - 3:46
    Now that's a lot of pressure for a little button
  • 3:46 - 3:48
    and the designer behind it,
  • 3:48 - 3:49
    but with these kinds of products,
  • 3:49 - 3:52
    you need to get even the tiny things right.
  • 3:52 - 3:55
    Now, the next thing that you need to understand
  • 3:55 - 3:57
    is how to design with data.
  • 3:57 - 3:59
    Now, when you're working on products like this,
  • 3:59 - 4:02
    you have incredible amounts of information
  • 4:02 - 4:04
    about how people are using your product
  • 4:04 - 4:05
    that you can then use to influence
  • 4:05 - 4:07
    your design decisions,
  • 4:07 - 4:10
    but it's not just as simple as following the numbers.
  • 4:10 - 4:11
    Let me give you an example
  • 4:11 - 4:13
    so that you can understand what I mean.
  • 4:13 - 4:15
    Facebook has had a tool for a long time
  • 4:15 - 4:18
    that allowed people to report photos
  • 4:18 - 4:20
    that may be in violation of our community standards,
  • 4:20 - 4:23
    things like spam and abuse.
  • 4:23 - 4:25
    And there were a ton of photos reported,
  • 4:25 - 4:27
    but as it turns out,
  • 4:27 - 4:28
    only a small percentage were actually
  • 4:28 - 4:31
    in violation of those community standards.
  • 4:31 - 4:34
    Most of them were just your typical party photo.
  • 4:34 - 4:37
    Now, to give you a specific hypothetical example,
  • 4:37 - 4:39
    let's say my friend Laura hypothetically
  • 4:39 - 4:41
    uploads a picture of me
  • 4:41 - 4:44
    from a drunken night of karaoke.
  • 4:44 - 4:47
    This is purely hypothetical, I can assure you.
  • 4:47 - 4:49
    (Laughter)
  • 4:49 - 4:50
    Now, incidentally,
  • 4:50 - 4:52
    you know how some people are kind of worried
  • 4:52 - 4:53
    that their boss or employee
  • 4:53 - 4:55
    is going to discover embarrassing photos of them
  • 4:55 - 4:57
    on Facebook?
  • 4:57 - 4:59
    Do you know how hard that is to avoid
  • 4:59 - 5:02
    when you actually work at Facebook?
  • 5:02 - 5:04
    So anyway, there are lots of these photos
  • 5:04 - 5:08
    being erroneously reported as spam and abuse,
  • 5:08 - 5:10
    and one of the engineers on the team had a hunch.
  • 5:10 - 5:12
    He really thought there was something else going on
  • 5:12 - 5:14
    and he was right,
  • 5:14 - 5:16
    because when he looked
    through a bunch of the cases,
  • 5:16 - 5:17
    he found that most of them
  • 5:17 - 5:19
    were from people who were requesting
  • 5:19 - 5:22
    the takedown of a photo of themselves.
  • 5:22 - 5:24
    Now this was a scenario that the team
  • 5:24 - 5:27
    never even took into account before.
  • 5:27 - 5:28
    So they added a new feature
  • 5:28 - 5:31
    that allowed people to message their friend
  • 5:31 - 5:33
    to ask them to take the photo down.
  • 5:33 - 5:34
    But it didn't work.
  • 5:34 - 5:35
    Only 20 percent of people
  • 5:35 - 5:38
    sent the message to their friend.
  • 5:38 - 5:40
    So the team went back at it.
  • 5:40 - 5:43
    They consulted with experts in conflict resolution.
  • 5:43 - 5:46
    They even studied the universal principles
  • 5:46 - 5:48
    of polite language,
  • 5:48 - 5:49
    which I didn't even actually know existed
  • 5:49 - 5:51
    until this research happened.
  • 5:51 - 5:54
    And they found something really interesting.
  • 5:54 - 5:56
    They had to go beyond just helping people
  • 5:56 - 5:58
    ask their friend to take the photo down.
  • 5:58 - 6:01
    They had to help people express to their friend
  • 6:01 - 6:03
    how the photo made them feel.
  • 6:03 - 6:05
    Here's how the experience works today.
  • 6:05 - 6:08
    So I find this hypothetical photo of myself,
  • 6:08 - 6:11
    and it's not spam, it's not abuse,
  • 6:11 - 6:14
    but I really wish it weren't on the site.
  • 6:14 - 6:17
    So I report it and I say,
  • 6:17 - 6:19
    "I'm in this photo and I don't like it,"
  • 6:19 - 6:22
    and then we dig deeper.
  • 6:22 - 6:25
    Why don't you like this photo of yourself?
  • 6:25 - 6:27
    And I select "It's embarrassing."
  • 6:27 - 6:31
    And then I'm encouraged to message my friend,
  • 6:31 - 6:33
    but here's the critical difference.
  • 6:33 - 6:36
    I'm provided specific suggested language
  • 6:36 - 6:39
    that helps me communicate to Laura
  • 6:39 - 6:41
    how the photo makes me feel.
  • 6:41 - 6:44
    Now the team found that this relatively small change
  • 6:44 - 6:45
    had a huge impact.
  • 6:45 - 6:48
    Before, only 20 percent of people
  • 6:48 - 6:49
    were sending the message,
  • 6:49 - 6:51
    and now 60 percent were,
  • 6:51 - 6:52
    and surveys showed that people
  • 6:52 - 6:54
    on both sides of the conversation
  • 6:54 - 6:56
    felt better as a result.
  • 6:56 - 6:58
    That same survey showed
  • 6:58 - 7:00
    that 90 percent of your friends
  • 7:00 - 7:03
    want to know if they've done something to upset you.
  • 7:03 - 7:05
    Now I don't know who the other 10 percent are,
  • 7:05 - 7:07
    but maybe that's where our "Unfriend" feature
  • 7:07 - 7:08
    can come in handy.
  • 7:08 - 7:10
    So as you can see,
  • 7:10 - 7:13
    these decisions are highly nuanced.
  • 7:13 - 7:15
    Of course we use a lot of data
  • 7:15 - 7:16
    to inform our decisions,
  • 7:16 - 7:19
    but we also rely very heavily on iteration,
  • 7:19 - 7:23
    research, testing, intuition, human empathy.
  • 7:23 - 7:25
    It's both art and science.
  • 7:25 - 7:28
    Now, sometimes the designers
    who work on these products
  • 7:28 - 7:30
    are called "data-driven,"
  • 7:30 - 7:32
    which is a term that totally drives us bonkers.
  • 7:32 - 7:35
    The fact is, it would be irresponsible of us
  • 7:35 - 7:38
    not to rigorously test our designs
  • 7:38 - 7:40
    when so many people are counting on us
  • 7:40 - 7:41
    to get it right,
  • 7:41 - 7:43
    but data analytics
  • 7:43 - 7:46
    will never be a substitute for design intuition.
  • 7:46 - 7:50
    Data can help you make a good design great,
  • 7:50 - 7:53
    but it will never made a bad design good.
  • 7:53 - 7:56
    The next thing that you need
    to understand as a principle
  • 7:56 - 7:58
    is that when you introduce change,
  • 7:58 - 8:00
    you need to do it extraordinarily carefully.
  • 8:00 - 8:02
    Now I often have joked that
  • 8:02 - 8:04
    I spend almost as much time
  • 8:04 - 8:06
    designing the introduction of change
  • 8:06 - 8:08
    as I do the change itself,
  • 8:08 - 8:11
    and I'm sure that we can all relate to that
  • 8:11 - 8:13
    when something that we use a lot changes
  • 8:13 - 8:15
    and then we have to adjust.
  • 8:15 - 8:17
    The fact is, people can become
  • 8:17 - 8:20
    very efficient at using bad design,
  • 8:20 - 8:23
    and so even if the change is
    good for them in the long run,
  • 8:23 - 8:26
    it's still incredibly frustrating when it happens,
  • 8:26 - 8:28
    and this is particularly true
  • 8:28 - 8:30
    with user-generated content platforms,
  • 8:30 - 8:34
    because people can rightfully
    claim a sense of ownership.
  • 8:34 - 8:37
    It is, after all, their content.
  • 8:37 - 8:40
    Now, years ago, when I was working at YouTube,
  • 8:40 - 8:42
    we were looking for ways to
  • 8:42 - 8:44
    encourage more people to rate videos,
  • 8:44 - 8:47
    and it was interesting because
    when we looked into the data,
  • 8:47 - 8:50
    we found that almost everyone was exclusively using
  • 8:50 - 8:52
    the highest five-star rating,
  • 8:52 - 8:54
    a handful of people were using
  • 8:54 - 8:56
    the lowest one-star,
  • 8:56 - 8:57
    and virtually no one
  • 8:57 - 8:59
    was using two, three or four stars.
  • 8:59 - 9:01
    So we decided to simplify
  • 9:01 - 9:05
    into an up-down kind of voting binary model.
  • 9:05 - 9:08
    It's going to be much easier
    for people to engage with.
  • 9:08 - 9:10
    But people were very attached
  • 9:10 - 9:12
    to the five-star rating system.
  • 9:12 - 9:14
    Video creators really loved their ratings.
  • 9:14 - 9:16
    Millions and millions of people
  • 9:16 - 9:18
    were accustomed to the old design.
  • 9:18 - 9:20
    So in order to help people
  • 9:20 - 9:21
    prepare themselves for change
  • 9:21 - 9:24
    and acclimate to the new design more quickly,
  • 9:24 - 9:26
    we actually published the data graph
  • 9:26 - 9:28
    sharing with the community
  • 9:28 - 9:30
    the rationale for what we were going to do,
  • 9:30 - 9:33
    and it even engaged the larger industry
  • 9:33 - 9:34
    in a conversation, which resulted in
  • 9:34 - 9:37
    my favorite TechCrunch headline of all time:
  • 9:37 - 9:41
    "YouTube Comes to a 5-Star Realization:
  • 9:41 - 9:44
    Its Ratings Are Useless."
  • 9:44 - 9:46
    Now, it's impossible to completely avoid
  • 9:46 - 9:49
    change aversion when you're making changes
  • 9:49 - 9:51
    to products that so many people use.
  • 9:51 - 9:53
    Even though we tried to do all the right things,
  • 9:53 - 9:55
    we still received our customary flood
  • 9:55 - 9:57
    of video protests and angry emails
  • 9:57 - 10:02
    and even a package that had
    to be scanned by security,
  • 10:02 - 10:04
    but we have to remember
  • 10:04 - 10:06
    people care intensely about this stuff,
  • 10:06 - 10:09
    and it's because these products, this work,
  • 10:09 - 10:12
    really, really matters to them.
  • 10:12 - 10:15
    Now, we know that we have to be careful
  • 10:15 - 10:17
    about paying attention to the details,
  • 10:17 - 10:19
    we have to be cognizant about how we use data
  • 10:19 - 10:21
    in our design process,
  • 10:21 - 10:23
    and we have to introduce change
  • 10:23 - 10:25
    very, very carefully.
  • 10:25 - 10:27
    Now, these things are all really useful.
  • 10:27 - 10:30
    They're good best practices for designing at scale.
  • 10:30 - 10:32
    But they don't mean anything
  • 10:32 - 10:33
    if you don't understand something
  • 10:33 - 10:35
    much more fundamental.
  • 10:35 - 10:40
    You have to understand who you are designing for.
  • 10:40 - 10:41
    Now, when you set a goal to design
  • 10:41 - 10:43
    for the entire human race,
  • 10:43 - 10:46
    and you start to engage in that goal in earnest,
  • 10:46 - 10:49
    at some point you run into the walls
  • 10:49 - 10:51
    of the bubble that you're living in.
  • 10:51 - 10:53
    Now, in San Francisco, we get a little miffed
  • 10:53 - 10:55
    when we hit a dead cell zone
  • 10:55 - 10:57
    because we can't use our phones to navigate
  • 10:57 - 10:59
    to the new hipster coffee shop.
  • 10:59 - 11:02
    But what if you had to drive four hours
  • 11:02 - 11:04
    to charge your phone
  • 11:04 - 11:07
    because you had no reliable source of electricity?
  • 11:07 - 11:10
    What if you had no access to public libraries?
  • 11:10 - 11:13
    What if your country had no free press?
  • 11:13 - 11:17
    What would these products start to mean to you?
  • 11:17 - 11:20
    This is what Google, YouTube and Facebook
  • 11:20 - 11:21
    look like to most of the world,
  • 11:21 - 11:22
    and it's what they'll look like
  • 11:22 - 11:24
    to most of the next five billion people
  • 11:24 - 11:26
    to come online.
  • 11:26 - 11:28
    Designing for low-end cell phones
  • 11:28 - 11:31
    is not glamorous design work,
  • 11:31 - 11:33
    but if you want to design for the whole world,
  • 11:33 - 11:35
    you have to design for where people are,
  • 11:35 - 11:36
    and not where you are.
  • 11:36 - 11:40
    So how do we keep this big, big picture in mind?
  • 11:40 - 11:43
    We try to travel outside of our bubble to see, hear
  • 11:43 - 11:45
    and understand the people we're designing for.
  • 11:45 - 11:48
    We use our products in non-English languages
  • 11:48 - 11:50
    to make sure that they work just as well.
  • 11:50 - 11:53
    And we try to use one of these
    phones from time to time
  • 11:53 - 11:56
    to keep in touch with their reality.
  • 11:56 - 12:00
    So what does it mean to design at a global scale?
  • 12:00 - 12:04
    It means difficult and sometimes exasperating work
  • 12:04 - 12:08
    to try to improve and evolve products.
  • 12:08 - 12:11
    Finding the audacity and the
    humility to do right by them
  • 12:11 - 12:12
    can be pretty exhausting,
  • 12:12 - 12:14
    and the humility part,
  • 12:14 - 12:16
    it's a little tough on the design ego.
  • 12:16 - 12:18
    Because these products are always changing,
  • 12:18 - 12:21
    everything that I've designed in my career
  • 12:21 - 12:22
    is pretty much gone,
  • 12:22 - 12:25
    and everything that I will design will fade away.
  • 12:25 - 12:27
    But here's what remains:
  • 12:27 - 12:29
    the never-ending thrill
  • 12:29 - 12:32
    of being a part of something that is so big,
  • 12:32 - 12:35
    you can hardly get your head around it,
  • 12:35 - 12:38
    and the promise that it just might change the world.
  • 12:38 - 12:40
    Thank you.
  • 12:40 - 12:43
    (Applause)
Title:
How giant websites design for you (and a billion others, too)
Speaker:
Margaret Gould Stewart
Description:

Facebook’s “like” and “share” buttons are seen 22 billion times a day, making them some of the most-viewed design elements ever created. Margaret Gould Stewart, Facebook’s director of product design, outlines three rules for design at such a massive scale—one so big that the tiniest of tweaks can cause global outrage, but also so large that the subtlest of improvements can positively impact the lives of many.

more » « less
Video Language:
English
Team:
closed TED
Project:
TEDTalks
Duration:
13:00

English subtitles

Revisions Compare revisions