Margaret Gould Stewart: How giant websites design for you (and a billion others, too)

253,381 views ・ 2014-08-05

TED


Please double-click on the English subtitles below to play the video.

00:12
What do you think of when I say the word "design"?
0
12779
3721
00:16
You probably think of things like this,
1
16500
2320
00:18
finely crafted objects that you can hold in your hand,
2
18820
3511
00:22
or maybe logos and posters and maps
3
22331
2929
00:25
that visually explain things,
4
25260
1921
00:27
classic icons of timeless design.
5
27181
3158
00:30
But I'm not here to talk about that kind of design.
6
30339
2881
00:33
I want to talk about the kind
7
33220
1155
00:34
that you probably use every day
8
34375
2029
00:36
and may not give much thought to,
9
36404
1761
00:38
designs that change all the time
10
38165
2111
00:40
and that live inside your pocket.
11
40276
2257
00:42
I'm talking about the design
12
42533
2063
00:44
of digital experiences
13
44596
2055
00:46
and specifically the design of systems
14
46651
2736
00:49
that are so big that their scale
15
49387
1633
00:51
can be hard to comprehend.
16
51020
2091
00:53
Consider the fact that Google processes
17
53111
2261
00:55
over one billion search queries every day,
18
55372
3785
00:59
that every minute, over 100 hours
19
59157
2168
01:01
of footage are uploaded to YouTube.
20
61325
2200
01:03
That's more in a single day
21
63525
1767
01:05
than all three major U.S. networks broadcast
22
65292
2750
01:08
in the last five years combined.
23
68042
3275
01:11
And Facebook transmitting the photos,
24
71317
2304
01:13
messages and stories
25
73621
1196
01:14
of over 1.23 billion people.
26
74817
3172
01:17
That's almost half of the Internet population,
27
77989
2744
01:20
and a sixth of humanity.
28
80733
2672
01:23
These are some of the products
29
83405
1014
01:24
that I've helped design over the course of my career,
30
84419
2754
01:27
and their scale is so massive
31
87173
2120
01:29
that they've produced unprecedented
32
89293
1888
01:31
design challenges.
33
91181
1846
01:33
But what is really hard
34
93027
2362
01:35
about designing at scale is this:
35
95389
2731
01:38
It's hard in part because
36
98120
1836
01:39
it requires a combination of two things,
37
99956
2905
01:42
audacity and humility —
38
102861
2777
01:45
audacity to believe that the thing that you're making
39
105638
3844
01:49
is something that the entire world wants and needs,
40
109482
3296
01:52
and humility to understand that as a designer,
41
112778
3096
01:55
it's not about you or your portfolio,
42
115874
2440
01:58
it's about the people that you're designing for,
43
118314
2592
02:00
and how your work just might help them
44
120906
1896
02:02
live better lives.
45
122802
1604
02:04
Now, unfortunately, there's no school
46
124406
2621
02:07
that offers the course Designing for Humanity 101.
47
127027
4093
02:11
I and the other designers
48
131120
1572
02:12
who work on these kinds of products
49
132692
1744
02:14
have had to invent it as we go along,
50
134436
3352
02:17
and we are teaching ourselves
51
137788
1617
02:19
the emerging best practices
52
139405
1868
02:21
of designing at scale,
53
141273
1980
02:23
and today I'd like share some of the things
54
143253
1952
02:25
that we've learned over the years.
55
145205
2080
02:27
Now, the first thing that you need to know
56
147285
1231
02:28
about designing at scale
57
148516
1130
02:29
is that the little things really matter.
58
149646
2974
02:32
Here's a really good example of how
59
152620
1937
02:34
a very tiny design element can make a big impact.
60
154557
3503
02:38
The team at Facebook that manages
61
158060
3080
02:41
the Facebook "Like" button
62
161140
2108
02:43
decided that it needed to be redesigned.
63
163248
2472
02:45
The button had kind of gotten out of sync
64
165720
2427
02:48
with the evolution of our brand
65
168147
1449
02:49
and it needed to be modernized.
66
169596
1788
02:51
Now you might think, well, it's a tiny little button,
67
171384
1868
02:53
it probably is a pretty straightforward,
68
173252
1993
02:55
easy design assignment, but it wasn't.
69
175245
3015
02:58
Turns out, there were all kinds of constraints
70
178260
2121
03:00
for the design of this button.
71
180381
1809
03:02
You had to work within specific height and width parameters.
72
182190
3455
03:05
You had to be careful to make it work
73
185645
2295
03:07
in a bunch of different languages,
74
187940
1761
03:09
and be careful about using fancy gradients or borders
75
189701
3055
03:12
because it has to degrade gracefully
76
192756
2144
03:14
in old web browsers.
77
194900
1753
03:16
The truth is, designing this tiny little button
78
196653
2672
03:19
was a huge pain in the butt.
79
199325
2183
03:21
Now, this is the new version of the button,
80
201508
2052
03:23
and the designer who led this project estimates
81
203560
2514
03:26
that he spent over 280 hours
82
206074
3514
03:29
redesigning this button over the course of months.
83
209588
3650
03:33
Now, why would we spend so much time
84
213238
2344
03:35
on something so small?
85
215582
2304
03:37
It's because when you're designing at scale,
86
217886
1616
03:39
there's no such thing as a small detail.
87
219502
3129
03:42
This innocent little button
88
222631
1516
03:44
is seen on average 22 billion times a day
89
224147
3955
03:48
and on over 7.5 million websites.
90
228102
3500
03:51
It's one of the single most viewed design elements ever created.
91
231602
4084
03:55
Now that's a lot of pressure for a little button
92
235686
2504
03:58
and the designer behind it,
93
238190
1720
03:59
but with these kinds of products,
94
239910
1528
04:01
you need to get even the tiny things right.
95
241438
2736
04:04
Now, the next thing that you need to understand
96
244174
2536
04:06
is how to design with data.
97
246710
2488
04:09
Now, when you're working on products like this,
98
249198
1672
04:10
you have incredible amounts of information
99
250870
2745
04:13
about how people are using your product
100
253615
2088
04:15
that you can then use to influence
101
255703
1655
04:17
your design decisions,
102
257358
1584
04:18
but it's not just as simple as following the numbers.
103
258942
2752
04:21
Let me give you an example
104
261694
1251
04:22
so that you can understand what I mean.
105
262945
2165
04:25
Facebook has had a tool for a long time
106
265110
2157
04:27
that allowed people to report photos
107
267267
2313
04:29
that may be in violation of our community standards,
108
269580
2862
04:32
things like spam and abuse.
109
272442
2420
04:34
And there were a ton of photos reported,
110
274862
2008
04:36
but as it turns out,
111
276870
1636
04:38
only a small percentage were actually
112
278506
1896
04:40
in violation of those community standards.
113
280402
2918
04:43
Most of them were just your typical party photo.
114
283320
2510
04:45
Now, to give you a specific hypothetical example,
115
285830
2908
04:48
let's say my friend Laura hypothetically
116
288738
2496
04:51
uploads a picture of me
117
291234
1658
04:52
from a drunken night of karaoke.
118
292892
2988
04:55
This is purely hypothetical, I can assure you.
119
295880
3266
04:59
(Laughter)
120
299146
1495
05:00
Now, incidentally,
121
300641
1769
05:02
you know how some people are kind of worried
122
302410
1290
05:03
that their boss or employee
123
303700
1643
05:05
is going to discover embarrassing photos of them
124
305343
2007
05:07
on Facebook?
125
307350
1540
05:08
Do you know how hard that is to avoid
126
308890
1936
05:10
when you actually work at Facebook?
127
310826
3254
05:14
So anyway, there are lots of these photos
128
314080
2286
05:16
being erroneously reported as spam and abuse,
129
316366
3434
05:19
and one of the engineers on the team had a hunch.
130
319800
2449
05:22
He really thought there was something else going on
131
322249
2127
05:24
and he was right,
132
324376
1156
05:25
because when he looked through a bunch of the cases,
133
325532
2324
05:27
he found that most of them
134
327856
1600
05:29
were from people who were requesting
135
329456
1875
05:31
the takedown of a photo of themselves.
136
331331
2822
05:34
Now this was a scenario that the team
137
334153
2040
05:36
never even took into account before.
138
336193
2367
05:38
So they added a new feature
139
338560
1809
05:40
that allowed people to message their friend
140
340369
2144
05:42
to ask them to take the photo down.
141
342513
2272
05:44
But it didn't work.
142
344785
1459
05:46
Only 20 percent of people
143
346244
1251
05:47
sent the message to their friend.
144
347495
2218
05:49
So the team went back at it.
145
349713
2251
05:51
They consulted with experts in conflict resolution.
146
351964
3191
05:55
They even studied the universal principles
147
355155
3062
05:58
of polite language,
148
358217
1487
05:59
which I didn't even actually know existed
149
359704
1535
06:01
until this research happened.
150
361239
1937
06:03
And they found something really interesting.
151
363176
2529
06:05
They had to go beyond just helping people
152
365705
2183
06:07
ask their friend to take the photo down.
153
367888
1912
06:09
They had to help people express to their friend
154
369800
2729
06:12
how the photo made them feel.
155
372529
2431
06:14
Here's how the experience works today.
156
374960
2198
06:17
So I find this hypothetical photo of myself,
157
377158
3227
06:20
and it's not spam, it's not abuse,
158
380385
2629
06:23
but I really wish it weren't on the site.
159
383014
2523
06:25
So I report it and I say,
160
385537
3224
06:28
"I'm in this photo and I don't like it,"
161
388761
2040
06:30
and then we dig deeper.
162
390801
3262
06:34
Why don't you like this photo of yourself?
163
394063
2506
06:36
And I select "It's embarrassing."
164
396569
2847
06:39
And then I'm encouraged to message my friend,
165
399416
3326
06:42
but here's the critical difference.
166
402742
1859
06:44
I'm provided specific suggested language
167
404601
3632
06:48
that helps me communicate to Laura
168
408233
2336
06:50
how the photo makes me feel.
169
410569
1935
06:52
Now the team found that this relatively small change
170
412504
3041
06:55
had a huge impact.
171
415545
1679
06:57
Before, only 20 percent of people
172
417224
2400
06:59
were sending the message,
173
419624
1171
07:00
and now 60 percent were,
174
420795
2045
07:02
and surveys showed that people
175
422840
1634
07:04
on both sides of the conversation
176
424474
1928
07:06
felt better as a result.
177
426402
1640
07:08
That same survey showed
178
428042
1655
07:09
that 90 percent of your friends
179
429697
2353
07:12
want to know if they've done something to upset you.
180
432050
2738
07:14
Now I don't know who the other 10 percent are,
181
434788
2097
07:16
but maybe that's where our "Unfriend" feature
182
436885
1774
07:18
can come in handy.
183
438659
1561
07:20
So as you can see,
184
440220
1774
07:21
these decisions are highly nuanced.
185
441994
2608
07:24
Of course we use a lot of data
186
444602
1969
07:26
to inform our decisions,
187
446571
1311
07:27
but we also rely very heavily on iteration,
188
447882
3443
07:31
research, testing, intuition, human empathy.
189
451325
4124
07:35
It's both art and science.
190
455449
1846
07:37
Now, sometimes the designers who work on these products
191
457295
2566
07:39
are called "data-driven,"
192
459861
1688
07:41
which is a term that totally drives us bonkers.
193
461549
2741
07:44
The fact is, it would be irresponsible of us
194
464290
2899
07:47
not to rigorously test our designs
195
467189
2552
07:49
when so many people are counting on us
196
469741
2086
07:51
to get it right,
197
471827
1193
07:53
but data analytics
198
473020
2320
07:55
will never be a substitute for design intuition.
199
475340
3102
07:58
Data can help you make a good design great,
200
478442
3168
08:01
but it will never made a bad design good.
201
481610
3624
08:05
The next thing that you need to understand as a principle
202
485234
3112
08:08
is that when you introduce change,
203
488346
1547
08:09
you need to do it extraordinarily carefully.
204
489893
2606
08:12
Now I often have joked that
205
492499
1667
08:14
I spend almost as much time
206
494166
2238
08:16
designing the introduction of change
207
496404
1814
08:18
as I do the change itself,
208
498218
2200
08:20
and I'm sure that we can all relate to that
209
500418
2296
08:22
when something that we use a lot changes
210
502714
2040
08:24
and then we have to adjust.
211
504754
2232
08:26
The fact is, people can become
212
506986
2204
08:29
very efficient at using bad design,
213
509190
2940
08:32
and so even if the change is good for them in the long run,
214
512130
2672
08:34
it's still incredibly frustrating when it happens,
215
514802
3057
08:37
and this is particularly true
216
517859
1807
08:39
with user-generated content platforms,
217
519666
2696
08:42
because people can rightfully claim a sense of ownership.
218
522362
3441
08:45
It is, after all, their content.
219
525803
3603
08:49
Now, years ago, when I was working at YouTube,
220
529406
2367
08:51
we were looking for ways to
221
531773
2195
08:53
encourage more people to rate videos,
222
533968
2276
08:56
and it was interesting because when we looked into the data,
223
536244
2726
08:58
we found that almost everyone was exclusively using
224
538970
3459
09:02
the highest five-star rating,
225
542429
1967
09:04
a handful of people were using
226
544396
1584
09:05
the lowest one-star,
227
545980
1676
09:07
and virtually no one
228
547656
1419
09:09
was using two, three or four stars.
229
549075
2330
09:11
So we decided to simplify
230
551405
1895
09:13
into an up-down kind of voting binary model.
231
553300
3324
09:16
It's going to be much easier for people to engage with.
232
556624
2996
09:19
But people were very attached
233
559620
2552
09:22
to the five-star rating system.
234
562172
1793
09:23
Video creators really loved their ratings.
235
563965
2431
09:26
Millions and millions of people
236
566396
1222
09:27
were accustomed to the old design.
237
567618
2163
09:29
So in order to help people
238
569781
1935
09:31
prepare themselves for change
239
571716
1704
09:33
and acclimate to the new design more quickly,
240
573420
2233
09:35
we actually published the data graph
241
575653
2463
09:38
sharing with the community
242
578116
1720
09:39
the rationale for what we were going to do,
243
579836
2148
09:41
and it even engaged the larger industry
244
581984
2621
09:44
in a conversation, which resulted in
245
584605
1465
09:46
my favorite TechCrunch headline of all time:
246
586070
3078
09:49
"YouTube Comes to a 5-Star Realization:
247
589148
3464
09:52
Its Ratings Are Useless."
248
592612
3028
09:55
Now, it's impossible to completely avoid
249
595640
2655
09:58
change aversion when you're making changes
250
598295
2500
10:00
to products that so many people use.
251
600795
2128
10:02
Even though we tried to do all the right things,
252
602923
1607
10:04
we still received our customary flood
253
604530
2233
10:06
of video protests and angry emails
254
606763
2624
10:09
and even a package that had to be scanned by security,
255
609387
4248
10:13
but we have to remember
256
613635
1960
10:15
people care intensely about this stuff,
257
615595
2840
10:18
and it's because these products, this work,
258
618435
2938
10:21
really, really matters to them.
259
621373
2220
10:23
Now, we know that we have to be careful
260
623593
3307
10:26
about paying attention to the details,
261
626900
1990
10:28
we have to be cognizant about how we use data
262
628890
2473
10:31
in our design process,
263
631363
1672
10:33
and we have to introduce change
264
633035
1805
10:34
very, very carefully.
265
634840
1691
10:36
Now, these things are all really useful.
266
636531
2096
10:38
They're good best practices for designing at scale.
267
638627
3112
10:41
But they don't mean anything
268
641739
1792
10:43
if you don't understand something
269
643531
1672
10:45
much more fundamental.
270
645203
1662
10:46
You have to understand who you are designing for.
271
646865
4761
10:51
Now, when you set a goal to design
272
651626
1737
10:53
for the entire human race,
273
653363
1866
10:55
and you start to engage in that goal in earnest,
274
655229
3054
10:58
at some point you run into the walls
275
658283
2424
11:00
of the bubble that you're living in.
276
660707
2048
11:02
Now, in San Francisco, we get a little miffed
277
662755
2640
11:05
when we hit a dead cell zone
278
665395
1584
11:06
because we can't use our phones to navigate
279
666979
1649
11:08
to the new hipster coffee shop.
280
668628
2495
11:11
But what if you had to drive four hours
281
671123
3154
11:14
to charge your phone
282
674277
1336
11:15
because you had no reliable source of electricity?
283
675613
3241
11:18
What if you had no access to public libraries?
284
678854
3455
11:22
What if your country had no free press?
285
682309
2824
11:25
What would these products start to mean to you?
286
685133
3740
11:28
This is what Google, YouTube and Facebook
287
688873
2744
11:31
look like to most of the world,
288
691617
1719
11:33
and it's what they'll look like
289
693336
1058
11:34
to most of the next five billion people
290
694394
2102
11:36
to come online.
291
696496
1560
11:38
Designing for low-end cell phones
292
698056
2266
11:40
is not glamorous design work,
293
700322
2367
11:42
but if you want to design for the whole world,
294
702689
1912
11:44
you have to design for where people are,
295
704601
2111
11:46
and not where you are.
296
706712
1753
11:48
So how do we keep this big, big picture in mind?
297
708465
3167
11:51
We try to travel outside of our bubble to see, hear
298
711632
3084
11:54
and understand the people we're designing for.
299
714716
2575
11:57
We use our products in non-English languages
300
717291
2376
11:59
to make sure that they work just as well.
301
719667
2153
12:01
And we try to use one of these phones from time to time
302
721820
3135
12:04
to keep in touch with their reality.
303
724955
2936
12:07
So what does it mean to design at a global scale?
304
727891
4277
12:12
It means difficult and sometimes exasperating work
305
732168
3414
12:15
to try to improve and evolve products.
306
735582
3972
12:19
Finding the audacity and the humility to do right by them
307
739554
3193
12:22
can be pretty exhausting,
308
742747
1363
12:24
and the humility part,
309
744110
1512
12:25
it's a little tough on the design ego.
310
745622
2204
12:27
Because these products are always changing,
311
747826
2472
12:30
everything that I've designed in my career
312
750298
2512
12:32
is pretty much gone,
313
752810
1296
12:34
and everything that I will design will fade away.
314
754106
3280
12:37
But here's what remains:
315
757386
1776
12:39
the never-ending thrill
316
759162
1952
12:41
of being a part of something that is so big,
317
761114
2848
12:43
you can hardly get your head around it,
318
763962
2733
12:46
and the promise that it just might change the world.
319
766695
2897
12:49
Thank you.
320
769592
2398
12:51
(Applause)
321
771990
2971
About this website

This site will introduce you to YouTube videos that are useful for learning English. You will see English lessons taught by top-notch teachers from around the world. Double-click on the English subtitles displayed on each video page to play the video from there. The subtitles scroll in sync with the video playback. If you have any comments or requests, please contact us using this contact form.

https://forms.gle/WvT1wiN1qDtmnspy7