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