-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
513 lines (446 loc) · 18.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=680, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>10 things I learnt from 2 years at the Government Digital Service</title>
<link rel="stylesheet" href="styles/gds.css">
</head>
<body class="list">
<header class="caption">
<h1>10 things I learnt from 2 years at the Government Digital Service</h1>
<p>
A talk at
<a href="http://redevelop.io/">Redevelop.io</a>
by
<a href="https://github.com/tombye">Tom Byers</a>
on the 22th of August 2014.
</p>
</header>
<section class="slide intro" id="intro">
<div>
<h2 class="visuallyhidden">Slide 1</h2>
<p>Tom Byers</p>
<p>Front-end lead</p>
<p>Government Digital Service</p>
<p>@tombaromba</p>
</div>
</section>
<section class="slide" id="2">
<div>
<h2 class="visuallyhidden">Slide 2</h2>
<p class="one-line-large centred">10 things</p>
</div>
</section>
<section class="slide" id="3">
<div>
<h2 class="visuallyhidden">Slide 3</h2>
<p class="three-lines-large">I'm from the Government Digital Service</p>
</div>
</section>
<section class="slide" id="4">
<div>
<h2 class="visuallyhidden">Slide 4</h2>
<p class="three-lines-small centered">We're a team at the heart of government building digital public services</p>
</div>
</section>
<section class="slide" id="5">
<div>
<h2 class="visuallyhidden">Slide 5</h2>
<p class="two-lines-medium centered two-thirds">We started by building GOV.UK</p>
</div>
</section>
<section class="slide" id="6">
<div>
<h2 class="visuallyhidden">Slide 6</h2>
<div class="scroller">
<h3 class="scroller-title">Introduction to GOV.UK (video)</h3>
<p>We launched GOV.UK in October 2012. It replaced the two big central government websites: Directgov and Businesslink.</p>
<p>The idea was to make something simpler, clearer and faster. Something focused on users.</p>
<p>Firstly, we took a careful look and worked out what services and information we actually needed to deliver. We eliminated thousands of pages that no one ever visited. Then we made sure that the information we were providing was as easy to find and to follow as possible.</p>
<p>This, for example, is the page on Directgov that tells you about bank holidays. Now it has all the information you need and you’d think it would be hard to do it better. But looking at how people actually use the site we realised that what most people were searching for was the date of the next bank holiday so we put that right at the top of the page, big and bold.</p>
<p>We’ve done the same thing to more complex tasks, like working out how much maternity pay you’re entitled to. Before, on Directgov, you’d need to read all this information. On GOV.UK, you just need to answer a few simple questions and the site calculates the answer for you.</p>
<p>In April 2013 we finished moving all departmental sites to GOV.UK. Together with the sites for Number 10 and the Deputy Prime Minister’s office. So instead of every government page having a different design and different navigation, every site now looks and works the same way.</p>
<p>GOV.UK is not perfect and it’s not finished. It’s never going to be. It’s designed to improve, to react to user needs. We’ve made thousands of changes to GOV.UK and we make small improvements almost every day. This idea: iterative, responsive change is at the heart of everything we do.</p>
<p>You should visit us at www.gov.uk. Hopefully, you’ll see something you like. Something simpler, clearer and faster.</p>
</div>
</div>
</section>
<section class="slide" id="7">
<div>
<h2 class="visuallyhidden">Slide 7</h2>
<p class="two-lines-small">We're now transforming government services</p>
</div>
</section>
<section class="slide" id="8">
<div>
<h2 class="visuallyhidden">Slide 8</h2>
<p class="five-lines-small two-thirds">25 of the government's biggest services redesigned to meet the needs of users</p>
</div>
</section>
<section class="slide" id="9">
<div>
<h2 class="visuallyhidden">Slide 9</h2>
<p class="three-lines-small">To do that we're working in digital teams in departments all over the country…</p>
</div>
</section>
<section class="slide" id="10">
<div>
<h2 class="visuallyhidden">Slide 9</h2>
<p class="six-lines-small">As well as building common tools for analytics and signing in, improving the way government buys technology, and making sure civil servants have the right skills to run digital services</p>
</div>
</section>
<section class="slide" id="11">
<div>
<h2 class="visuallyhidden">Slide 10</h2>
<p class="four-lines-small">We work in open, agile, multidisciplinary teams, relentlessly focused on user needs</p>
</div>
</section>
<section class="slide" id="12">
<div>
<h2 class="visuallyhidden">Slide 11</h2>
<p class="one-line-medium">1. Think about access first</p>
</div>
</section>
<section class="slide" id="13">
<div>
<h2 class="visuallyhidden">Slide 12</h2>
<p class="one-line-medium">1. Think about access first</p>
</div>
</section>
<section class="slide" id="14">
<div>
<h2 class="visuallyhidden">Slide 13</h2>
<p class="one-line-medium">How do they get to your content?</p>
</div>
</section>
<section class="slide" id="15">
<div>
<h2 class="visuallyhidden">Slide 14</h2>
<p class="two-lines-medium">Picture of voter registration letter</p>
</div>
</section>
<section class="slide" id="16">
<div>
<h2 class="visuallyhidden">Slide 15</h2>
<p class="two-lines-medium">Picture of google search for www.gov.uk/register-to-vote</p>
</div>
</section>
<section class="slide" id="17">
<div>
<h2 class="visuallyhidden">Slide 16</h2>
<p class="one-line-medium">Learn the tools your users have</p>
</div>
</section>
<section class="slide" id="18">
<div>
<h2 class="visuallyhidden">Slide 17</h2>
<p class="one-line-medium">How do they use their machines?</p>
</div>
</section>
<section class="slide" id="19">
<div>
<h2 class="visuallyhidden">Slide 18</h2>
<p class="four-lines-small">Pictures of people using desktop and laptop computers and laptops using mice or stylus pens for interaction</p>
</div>
</section>
<section class="slide" id="20">
<div>
<h2 class="visuallyhidden">Slide 19</h2>
<p class="three-lines-small">Pictures of people using laptops and tablets with either separate or built-in keyboards</p>
</div>
</section>
<section class="slide" id="21">
<div>
<h2 class="visuallyhidden">Slide 20</h2>
<p class="three-lines-small">Pictures of tablets and mobile phones being used to browse www.gov.uk</p>
</div>
</section>
<section class="slide" id="22">
<div>
<h2 class="visuallyhidden">Slide 22</h2>
<p class="four-lines-small">Pictures of Voiceover, the screenreader for Mac OSX, being used to browse www.gov.uk/bank-holidays</p>
</div>
</section>
<section class="slide" id="23">
<div>
<h2 class="visuallyhidden">Slide 23</h2>
<p class="five-lines-small">Mock-up picture of Dragon natural voice, speech recognition software, being used to select a link on www.gov.uk/bank-holidays</p>
</div>
</section>
<section class="slide" id="24">
<div>
<h2 class="visuallyhidden">Slide 24</h2>
<p class="five-lines-small">Mock-up picture of Dragon natural voice, speech recognition software, being used to select a link on www.gov.uk/bank-holidays</p>
</div>
</section>
<section class="slide" id="25">
<div>
<h2 class="visuallyhidden">Slide 25</h2>
<p class="five-lines-small">Mock-up picture of Dragon natural voice, speech recognition software, being used to select a link on www.gov.uk/bank-holidays using grid selection</p>
</div>
</section>
<section class="slide" id="26">
<div>
<h2 class="visuallyhidden">Slide 27</h2>
<p class="three-lines-small">Pictures of TV's and e-readers being used to browse www.gov.uk</p>
</div>
</section>
<section class="slide" id="27">
<div>
<h2 class="visuallyhidden">Slide 27</h2>
<p class="one-line-medium">2. Your design is a tool too</p>
</div>
</section>
<section class="slide" id="28">
<div>
<h2 class="visuallyhidden">Slide 28</h2>
<p class="three-lines-small">How easy does your page design make it to access your information?</p>
</div>
</section>
<section class="slide" id="29">
<div>
<h2 class="visuallyhidden">Slide 28</h2>
<p class="six-lines-small">Picture of a heat map showing how users read the text in a web page, from left-to-right, in ever-decreasing line lengths. Generated using eye-tracking software</p>
</div>
</section>
<section class="slide" id="30">
<div>
<h2 class="visuallyhidden">Slide 29</h2>
<p class="five-lines-small">Picture of a page from the register to vote service asking users to confirm the information they have entered in the transaction so far</p >
</div>
</section>
<section class="slide" id="31">
<div>
<h2 class="visuallyhidden">Slide 30</h2>
<p class="six-lines-small">Picture of the www.gov.uk/types-of-school page before and after design changes. It had a left-hand navigation which is now moved to be above the page article</p>
</div>
</section>
<section class="slide" id="32">
<div>
<h2 class="visuallyhidden">Slide 31</h2>
<blockquote class="four-lines-small">The web is, by it's nature stateless so your design needs to give users some context</blockquote>
<p class="attribution-small">@markhurrell</p>
</div>
</section>
<section class="slide" id="33">
<div>
<h2 class="visuallyhidden">Slide 32</h2>
<p class="six-lines-small">Picture of the www.gov.uk/government/publications?publication_filter_option=consultations page, highlighting the heading for the main search results which describes the filters applied</p>
</div>
</section>
<section class="slide" id="34">
<div>
<h2 class="visuallyhidden">Slide 33</h2>
<p class="one-line-medium">4. Don't ask bad questions</p>
</div>
</section>
<section class="slide" id="35">
<div>
<h2 class="visuallyhidden">Slide 34</h2>
<p class="two-lines-medium">Picture of the form from https://esta.cbp.dhs.gov/esta/</p>
</div>
</section>
<section class="slide" id="36">
<div>
<h2 class="visuallyhidden">Slide 35</h2>
<blockquote class="one-line-small">Does your form work as a conversation?</blockquote>
<p class="attribution-small">@cjforms</p>
</div>
</section>
<section class="slide" id="37">
<div>
<h2 class="visuallyhidden">Slide 36</h2>
<p class="two-lines-small-1">Don't underestimate how hard a single task can be</p>
<p class="two-lines-small-2">Think about someone with no prior experience of websites using your forms</p>
</div>
</section>
<section class="slide" id="38">
<div>
<h2 class="visuallyhidden">Slide 37</h2>
<p class="three-lines-small">Picture of the page on the register to vote service where you enter your date of birth</p>
</div>
</section>
<section class="slide" id="39">
<div>
<h2 class="visuallyhidden">Slide 38</h2>
<p class="three-lines-small">Video of a user having trouble using selectboxes to enter their date of birth</p>
</div>
</section>
<section class="slide" id="40">
<div>
<h2 class="visuallyhidden">Slide 39</h2>
<p class="two-lines-medium">5. Tasks cannot be too simple</p>
</div>
</section>
<section class="slide" id="41">
<div>
<h2 class="visuallyhidden">Slide 40</h2>
<p class="six-lines-small">Picture of custom radio buttons on the register to vote service and one of someone using a numeric keyboard on a mobile phone with the date of birth page</p>
</div>
</section>
<section class="slide" id="42">
<div>
<h2 class="visuallyhidden">Slide 41</h2>
<p class="two-lines-medium">6. Text is the primary visual interface</p>
</div>
</section>
<section class="slide" id="43">
<div>
<h2 class="visuallyhidden">Slide 42</h2>
<p class="two-lines-small">https://www.gov.uk/service-manual</p>
</div>
</section>
<section class="slide" id="44">
<div>
<h2 class="visuallyhidden">Slide 42</h2>
<p class="two-lines-small">https://www.gov.uk/service-manual/user-centred-design/how-users-read</p>
</div>
</section>
<section class="slide" id="45">
<div>
<h2 class="visuallyhidden">Slide 43</h2>
<blockquote class="two-lines-medium">Users only really read 20 to 28% of a web page</blockquote>
</div>
</section>
<section class="slide" id="46">
<div>
<h2 class="visuallyhidden">Slide 44</h2>
<blockquote class="three-lines-small-1">
You don't read one word at a time. You bounce around. You anticipate words and fill them in.
</blockquote>
<blockquote class="three-lines-small-2">
By the time you're 9 years old, your brain can drop up to 30% of the text and still understand.
</blockquote>
</div>
</section>
<section class="slide" id="47">
<div>
<h2 class="visuallyhidden">Slide 44</h2>
<p class="two-lines-medium">7. How well you write affects everything you do</p>
</div>
</section>
<section class="slide" id="48">
<div>
<h2 class="visuallyhidden">Slide 45</h2>
<p class="three-lines-medium">Picture of the top of a 3 page long commit on github</p>
</div>
</section>
<section class="slide" id="49">
<div>
<h2 class="visuallyhidden">Slide 46</h2>
<p class="four-lines-small">Picture of the bottom of the same 3 page long commit on github, showing one line had changed</p>
</div>
</section>
<section class="slide" id="50">
<div>
<h2 class="visuallyhidden">Slide 47</h2>
<p class="two-lines-medium">8. Screen readers show how good your markup is</p>
</div>
</section>
<section class="slide" id="51">
<div>
<h2 class="visuallyhidden">Slide 48</h2>
<p class="six-lines-small">Picture of the XCode accessibility inspector being used to view the properties a web page text box is exposing to the accessibility API of the operating system</p>
</div>
</section>
<section class="slide" id="52">
<div>
<h2 class="visuallyhidden">Slide 49</h2>
<p class="three-lines-medium">The OS gets this information from your HTML</p>
</div>
</section>
<section class="slide" id="53">
<div>
<h2 class="visuallyhidden">Slide 50</h2>
<div class="three-lines-small">
9.<blockquote>Progressive enhancement is about resilience as much as it is about inclusiveness</blockquote>
</div>
<p class="three-lines-small-2">@bradwright</p>
</div>
</section>
<section class="slide" id="54">
<div>
<h2 class="visuallyhidden">Slide 51</h2>
<p class="three-lines-small">https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/</p>
</div>
</section>
<section class="slide" id="55">
<div>
<h2 class="visuallyhidden">Slide 52</h2>
<p class="two-lines-medium">10. What you don't know yet has the highest value</p>
</div>
</section>
<section class="slide" id="56">
<div>
<h2 class="visuallyhidden">Slide 53</h2>
<p class="one-line-medium">11. Publish, don't send</p>
</div>
</section>
<section class="slide" id="57">
<div>
<h2 class="visuallyhidden">Slide 54</h2>
<p class="four-lines-small">Picture of a pull request on www.gov.uk/bank-holidays to correct the dates: https://github.com/alphagov/calendars/pull/1</p>
</div>
</section>
<section class="slide" id="58">
<div>
<h2 class="visuallyhidden">Slide 55</h2>
<p class="four-lines-small">We believe sharing what we do will make it better, so you can see lots of our thinking and working online…</p>
</div>
</section>
<section class="slide" id="60">
<div>
<h2 class="visuallyhidden">Slide 56</h2>
<p class="list-intro-medium">Read more</p>
<ul class="list-medium">
<li>GDS Blog – http://gds.blog.gov.uk</li>
<li>Design Principles – www.gov.uk/design-principles</li>
<li>Digital Strategy – www.gov.uk/digitalstrategy</li>
<li>Service Manual – www.gov.uk/service-manual</li>
<li>Performance – www.gov.uk/performance</li>
<li>Assisted Digital – http://assisteddigital.blog.gov.uk</li>
<li>Digital Inclusion – http://digitalinclusion.blog.gov.uk</li>
<li>Our code – www.github.com/alphagov</li>
</ul>
</div>
</section>
<section class="slide" id="61">
<div>
<h2 class="visuallyhidden">Slide 57</h2>
<p class="list-intro-small">Attribution</p>
<ul class="list-small">
<li>Slide 18 (left)</br>
https://www.flickr.com/photos/barkbud/4220648321</li>
<li>Slide 18 (right)</br>
https://www.flickr.com/photos/larskflem/503118033</li>
<li>Slide 19 (left)</br>
https://www.flickr.com/photos/larskflem/5088121460</li>
<li>Slide 19 (centre)</br>
https://www.flickr.com/photos/kimsandiego/8168063548</li>
<li>Slide 19 (right)</br>
https://www.flickr.com/photos/66879463@N00/4946025923</li>
<li>Slide 25</br>
https://www.flickr.com/photos/jason-morrison/1954452273</li>
</ul>
</div>
</section>
<section class="slide outro" id="outro">
<div>
<h2 class="visuallyhidden">Slide 58</h2>
<p class="message">Thanks!</p>
<p>Tom Byers</p>
<p>@tombaromba</p>
</div>
</section>
<script>
var footerText = {
left: 'Tom Byers',
right: 'GDS'
};
</script>
<script src="scripts/gds.js"></script>
<script src="shower/shower.min.js"></script>
</body>
</html>