-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
858 lines (618 loc) · 31.5 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
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="images/favicon/favicon.ico">
<meta name="generator" content="mkdocs-1.4.2, mkdocs-material-8.5.10">
<title>Data platform | Developers design guide</title>
<link rel="stylesheet" href="assets/stylesheets/main.975780f9.min.css">
<link rel="stylesheet" href="assets/stylesheets/palette.2505c338.min.css">
<meta name="theme-color" content="#4051b5">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arial:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Arial";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="extra.css">
<script>__md_scope=new URL(".",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#build-user-centred-products-for-the-data-platform" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="." title="Data platform | Developers design guide" class="md-header__button md-logo" aria-label="Data platform | Developers design guide" data-md-component="logo">
<img src="images/nhs-blue-on-white.jpg" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Data platform | Developers design guide
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Home
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/baracoffice/pagetest" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
Design guide page test
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--integrated" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="." title="Data platform | Developers design guide" class="md-nav__button md-logo" aria-label="Data platform | Developers design guide" data-md-component="logo">
<img src="images/nhs-blue-on-white.jpg" alt="logo">
</a>
Data platform | Developers design guide
</label>
<div class="md-nav__source">
<a href="https://github.com/baracoffice/pagetest" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
Design guide page test
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
Home
<span class="md-nav__icon md-icon"></span>
</label>
<a href="." class="md-nav__link md-nav__link--active">
Home
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#how-to-use-this-guide" class="md-nav__link">
How to use this guide
</a>
</li>
<li class="md-nav__item">
<a href="#top-five-things-to-consider" class="md-nav__link">
Top five things to consider
</a>
<nav class="md-nav" aria-label="Top five things to consider">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-core-colours" class="md-nav__link">
1. Core colours
</a>
</li>
<li class="md-nav__item">
<a href="#2-type-sizes" class="md-nav__link">
2. Type sizes
</a>
</li>
<li class="md-nav__item">
<a href="#3-accessibility" class="md-nav__link">
3. Accessibility
</a>
</li>
<li class="md-nav__item">
<a href="#4-headings" class="md-nav__link">
4. Headings
</a>
</li>
<li class="md-nav__item">
<a href="#5-links" class="md-nav__link">
5. Links
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#guidance-on-use-of-colour" class="md-nav__link">
Guidance on use of colour
</a>
<nav class="md-nav" aria-label="Guidance on use of colour">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#core-colours" class="md-nav__link">
Core colours
</a>
</li>
<li class="md-nav__item">
<a href="#buttons" class="md-nav__link">
Buttons
</a>
</li>
<li class="md-nav__item">
<a href="#nhs-blue-grey-background" class="md-nav__link">
NHS blue-grey background
</a>
</li>
<li class="md-nav__item">
<a href="#error-state" class="md-nav__link">
Error state
</a>
</li>
<li class="md-nav__item">
<a href="#link-colours" class="md-nav__link">
Link colours
</a>
</li>
<li class="md-nav__item">
<a href="#border" class="md-nav__link">
Border
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#written-content" class="md-nav__link">
Written Content
</a>
<nav class="md-nav" aria-label="Written Content">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#when-to-use-capital-letters" class="md-nav__link">
When to use Capital letters
</a>
</li>
<li class="md-nav__item">
<a href="#tone-of-voice" class="md-nav__link">
Tone of voice
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#numbers-dates-and-time" class="md-nav__link">
Numbers, dates and time
</a>
<nav class="md-nav" aria-label="Numbers, dates and time">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#dates" class="md-nav__link">
Dates
</a>
</li>
<li class="md-nav__item">
<a href="#time" class="md-nav__link">
Time
</a>
</li>
<li class="md-nav__item">
<a href="#other-numbers" class="md-nav__link">
Other numbers
</a>
</li>
<li class="md-nav__item">
<a href="#typography" class="md-nav__link">
Typography
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#links-and-buttons" class="md-nav__link">
Links and buttons
</a>
</li>
<li class="md-nav__item">
<a href="#tool-tips" class="md-nav__link">
Tool Tips
</a>
</li>
<li class="md-nav__item">
<a href="#images" class="md-nav__link">
Images
</a>
<nav class="md-nav" aria-label="Images">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#informative-images" class="md-nav__link">
Informative images
</a>
</li>
<li class="md-nav__item">
<a href="#decorative-images" class="md-nav__link">
Decorative images
</a>
</li>
<li class="md-nav__item">
<a href="#product-tiles-and-other-large-buttons" class="md-nav__link">
Product tiles and other large buttons
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#data-visualisations" class="md-nav__link">
Data Visualisations
</a>
<nav class="md-nav" aria-label="Data Visualisations">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#chart-colours" class="md-nav__link">
Chart colours
</a>
</li>
<li class="md-nav__item">
<a href="#gridlines" class="md-nav__link">
Gridlines
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#templates-and-widgets" class="md-nav__link">
Templates and Widgets
</a>
</li>
<li class="md-nav__item">
<a href="#further-information" class="md-nav__link">
Further information
</a>
<nav class="md-nav" aria-label="Further information">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#accessibility" class="md-nav__link">
Accessibility
</a>
</li>
<li class="md-nav__item">
<a href="#data-visualisation" class="md-nav__link">
Data visualisation
</a>
</li>
<li class="md-nav__item">
<a href="#content-design" class="md-nav__link">
Content design
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/baracoffice/pagetest/edit/main/docs/index.md" title="Edit this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"/></svg>
</a>
<h1 id="build-user-centred-products-for-the-data-platform">Build user centred products for the Data Platform</h1>
<h2 id="how-to-use-this-guide">How to use this guide</h2>
<p>By using this guide, you can ensure that the user of your product sees a familiar and easy-to-use user-interface, and will find it similar to other products they use at work.</p>
<p>It’s important to ensure that all products can be used as intended and that end-users understand the interface and can get the outcome they need easily. This guide contains clear and consistent guidelines on core design elements, including colour palettes, typography, and layout structures.</p>
<!-- <p>In the final version you will also find screengrabs of templates to be used in Workshop - with annotations to explain which Workshop widgets to use.</p> -->
<h2 id="top-five-things-to-consider">Top five things to consider</h2>
<h3 id="1-core-colours">1. Core colours</h3>
<ul>
<li>
<p><p class="inline-container">NHS Blue<span class="colour-rect" style="--colour: #005EB8; --txt_clr: white">#005EB8</span> Use this for logos, straps</p></p>
</li>
<li>
<p><p class="inline-container">White<span class="colour-rect" style="--colour: #FFFFFF; --txt_clr: black">#FFFFFF</span> Use this for labels on buttons, NHS logo, headings on NHS blue</p></p>
</li>
</ul>
<p>Users think that when colour is used it is trying to convey information, so make sure the use of colour is intentional and consistent. Don't use colour just for decoration: </p>
<ul>
<li>see the section on Guidance on use of colour - to ensure consistent experience for users across all products </li>
<li>a proportion of users cannot differentiate different colours. To communicate with people who cannot see well or distinguish colours, you may need to: <ul>
<li>ensure that the contrast between colours is high enough using a colour tool</li>
<li>word things differently</li>
<li>use more than one visual cue, for example, text and an icon as well as colour</li>
</ul>
</li>
</ul>
<h3 id="2-type-sizes">2. Type sizes</h3>
<ul>
<li>the Workshop tool uses type sizes Small, Medium and Large. We believe that the “small” size is unreadable for many users.</li>
<li>if specifying text in points or pixels, the optimal default font size for maximum readability for most users is 19px on large screens and 16px on small screens. Font size should not be smaller than size 10px.</li>
</ul>
<h3 id="3-accessibility">3. Accessibility</h3>
<ul>
<li>In the UK, almost 1 in 5 people have a disability of some kind. Many more have temporary or situational disabilities, like an illness or injury. When you're working on NHS internal services, think about how people with different needs might use what you're making. </li>
<li>set up automated accessibility testing and fix issues you identify</li>
<li>use the NHS <a href="https://nhsdigital.github.io/accessibility-checklist/">accessibility checklist</a> to carry out an initial Web Content Accessibility Guidelines (WCAG) evaluation</li>
</ul>
<h3 id="4-headings">4. Headings</h3>
<ul>
<li>make headings meaningful, let readers know where they are and what they are looking at </li>
<li>use “Sentence Case” for headings </li>
<li>make proper use of the Semantic page structure used in Workshop to make it readable by screen-readers</li>
</ul>
<h3 id="5-links">5. Links</h3>
<ul>
<li>make links meaningful, do not say “click here”. Provide context where it will take the user</li>
<li>when a link will open a new tab for the user, add the words “opens in new tab” (or window) to the line</li>
</ul>
<h2 id="guidance-on-use-of-colour">Guidance on use of colour</h2>
<p>Users find colours indicative of meaning, therefore, we need to use colour intentionally and consistently. Don't use colour just for decoration.</p>
<ul>
<li><strong>Accessibility:</strong> make sure that what the colour is "saying" is available in other ways. To communicate with people who cannot see well or distinguish colours, you may need to:<ul>
<li>word things differently </li>
<li>use more than one visual cue, for example, text and an icon as well as colour</li>
<li>ensure that the contrast between colours is high enough using a testing tool <ul>
<li><a href="https://webaim.org/resources/contrastchecker/">WebAIM's colour contrast checker</a> (opens in a new window)</li>
<li><a href="https://colororacle.org/">Color Oracle</a> (free colour-blindness simulator) (opens in a new window)</li>
<li><a href="https://silktide.com/">Silktide</a> (opens in a new window)</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="core-colours">Core colours</h3>
<ul>
<li><p class="inline-container">NHS Blue<span class="colour-rect" style="--colour: #005EB8; --txt_clr: white">#005EB8</span> Use this for logos, straps</p> </li>
<li><p class="inline-container">White<span class="colour-rect" style="--colour: #FFFFFF; --txt_clr: black">#FFFFFF</span></p></li>
</ul>
<h3 id="buttons">Buttons</h3>
<ul>
<li><p class="inline-container">Button colour<span class="colour-rect" style="--colour: #007F3B; --txt_clr: white">#007F3B</span></p></li>
</ul>
<p>A primary button is for the user’s main action on a page. There may not be a main action and in that case use the secondary or tertiary buttons</p>
<ul>
<li><p class="inline-container">Secondary button colour<span class="colour-rect" style="--colour: #4C6272; --txt_clr: white">#4C6272</span></p> </li>
</ul>
<p>Use a secondary button on pages that have more than 1 action or when users aren't noticing standard link text.</p>
<p>- <p class="inline-container">Button labels <span class="colour-rect" style="--colour: #FFFFFF; --txt_clr: black">#FFFFFF</span></p></p>
<h3 id="nhs-blue-grey-background">NHS blue-grey background</h3>
<ul>
<li><p class="inline-container">Page background<span class="colour-rect" style="--colour: #F0F4F5; --txt_clr: black">#F0F4F5</span></p></li>
</ul>
<h3 id="error-state">Error state</h3>
<ul>
<li><p class="inline-container">Error state colour<span class="colour-rect" style="--colour: #D5281B; --txt_clr: white">#D5281B</span></p></li>
</ul>
<!--
### RAG colours (Red Amber Green)
- <p class="inline-container">Red colour<span class="colour-rect" style="--colour: #DA291C; --txt_clr: white">#DA291C</span></p>
- <p class="inline-container">Amber colour<span class="colour-rect" style="--colour: #ED8B00; --txt_clr: white">#ED8B00</span></p>
- <p class="inline-container">Green colour<span class="colour-rect" style="--colour: #006747; --txt_clr: white">#006747</span></p>
!-->
<h3 id="link-colours">Link colours</h3>
<ul>
<li><p class="inline-container">Link colour<span class="colour-rect" style="--colour: #005EB8; --txt_clr: white">#005EB8</span></p> </li>
<li><p class="inline-container">Hover link colour<span class="colour-rect" style="--colour: #7C2855; --txt_clr: white">#7C2855</span></p> </li>
<li><p class="inline-container">Visited link colour<span class="colour-rect" style="--colour: #330072; --txt_clr: white">#330072</span></p> </li>
<li><p class="inline-container">Active link colour<span class="colour-rect" style="--colour: #002F5C; --txt_clr: white">#002F5C</span></p> </li>
</ul>
<h3 id="border">Border</h3>
<ul>
<li><p class="inline-container">Border colour<span class="colour-rect" style="--colour: #D8DDE0; --txt_clr: white">#D8DDE0</span></p> </li>
<li><p class="inline-container">Form border colour<span class="colour-rect" style="--colour: #4C6272; --txt_clr: white">#4C6272</span></p> </li>
</ul>
<h2 id="written-content">Written Content</h2>
<p>Use plain language. Research has shown that most people prefer to read plain English, and that the more specialist a person's knowledge is, the greater their preference. </p>
<p>Our content is factual, neutral and unambiguous. We do not use metaphors - we say what we mean.</p>
<ul>
<li>spell out abbreviations and acronyms when first used</li>
<li>don’t use jargon, rather than saying ‘free text’ say ‘notes’</li>
<li>use short sentences - up to 20 words, and short paragraphs - up to 3 sentences</li>
<li>write descriptive headings and subheadings </li>
<li>do not assume our audience will be familiar with the topic </li>
</ul>
<h3 id="when-to-use-capital-letters">When to use Capital letters</h3>
<ul>
<li>use “Sentence case” for headings (capital letter at the start of the sentence only, except for proper nouns e.g. names, company names)</li>
<li>use “Title case” for the names of organisations, training programmes, schemes, and specialties (Capital letters for each word in a title)</li>
</ul>
<h3 id="tone-of-voice">Tone of voice</h3>
<ul>
<li>use the active voice - "Book an operating theatre" rather than "an operating theatre can be booked" </li>
<li>there’s usually no need to say "please" or "please note"</li>
<li>there’s usually no need to say thank you</li>
<li>say "sorry" if something serious has gone wrong - for example, the service has stopped working completely</li>
</ul>
<h2 id="numbers-dates-and-time">Numbers, dates and time</h2>
<ul>
<li>we use numerals for numbers (including 1 and 2)</li>
<li>for numbers over 999, use a comma for clarity (for example, 1,000)</li>
<li>always start with zero for values less than 1 (for example: 0.75 not .75)</li>
<li>ensure negative values are indicated by a minus sign (for example: -65)</li>
<li>we spell out "one" when it means "a" or to avoid repeating a word</li>
</ul>
<h3 id="dates">Dates</h3>
<ul>
<li>always use UK format for dates, do not use American format</li>
<li>use this format for dates: 6 August 2018</li>
<li>if you need to include the day of the week, use this format: Wednesday 6 August 2018</li>
<li>short dates should be formatted DD-Mmm-YYYY: 6-Aug-2018 </li>
</ul>
<h3 id="time">Time</h3>
<ul>
<li>check what time format the users and Trust use, but it's likely to be 24 hour clock</li>
<li>"6 hours 30 minutes", not "6.5hrs" </li>
</ul>
<h3 id="other-numbers">Other numbers</h3>
<ul>
<li>when showing the age of a patient it is important to be accurate and express the age in years and months not decimals</li>
</ul>
<h3 id="typography">Typography</h3>
<ul>
<li>do not use italics or underlining (except for links, which are underlined by default). Use bold sparingly. </li>
<li>do not use bold to emphasise text, instead use front-loaded sentences, headers, or bullet points </li>
</ul>
<h2 id="links-and-buttons">Links and buttons</h2>
<ul>
<li>when placing links in body text, hyperlink the title of the content only </li>
<li>do not hyperlink the verb, the preceding article (the, a, our and so on) or the punctuation after the anchor text </li>
<li>make your link descriptive and clear. Tell users where the link will take them </li>
<li>do not hyperlink headings or subheadings </li>
<li>use meaningful links, do not say “click here” </li>
<li>if a link opens in a new screen, say “opens in a new window”</li>
<li>do not use "raw" or "naked" URLs. These will be read out in full by screen readers</li>
<li>links should open in the same window, unless <ul>
<li>You are providing help information, and you don’t want to take the user away from the process they are in </li>
<li>The user is on a login screen when you don’t want to take them away from the login process. In these situations, “opens in a new window” needs to be included in the link text. </li>
</ul>
</li>
</ul>
<h2 id="tool-tips">Tool Tips</h2>
<ul>
<li>the tooltip must be usable with both keyboards and screen readers</li>
<li>where possible, ensure that the tool tip does not obscure what the user is focused on</li>
</ul>
<h2 id="images">Images</h2>
<h3 id="informative-images">Informative images</h3>
<ul>
<li>do not use text in images </li>
<li>provide alt-text when images convey meaning or information.</li>
<li>keep alt-text to around 125 characters or 2 sentences </li>
<li>if there's important information that you cannot fit in 125 characters (for example, you're describing a complex chart), include this information in the alt-text or consider linking to more information for screen reader users. </li>
</ul>
<h3 id="decorative-images">Decorative images</h3>
<ul>
<li>avoid them in data products unless they convey useful information</li>
<li>if an image is decorative, give it a null text alternative like this: (alt="") </li>
</ul>
<h3 id="product-tiles-and-other-large-buttons">Product tiles and other large buttons</h3>
<ul>
<li>if there is a need to add an image to a large button or "tile", ensure that it is a copyright free image that is meaningful to users, and not a screengrab of a product page</li>
</ul>
<h2 id="data-visualisations">Data Visualisations</h2>
<ul>
<li>every chart or other visualization must have a title. This benefits all users, and particularly those using a screen-reader. [type size medium]</li>
<li>keep axis titles as short as possible [type size medium]</li>
<li>category names on a chart axis or in a legend should be clear and concise [type size medium]</li>
<li>for data from two or more time periods, put the older values before the newer values</li>
<li>always include some written explanation for the chart and an accompanying table for those who cannot use the data visualisation</li>
<li>include a source so that a user can track back to the original data</li>
</ul>
<h3 id="chart-colours">Chart colours</h3>
<p>We recommend to stick to no more than 6 different variables (colours or tints) on a graph or other chart type, otherwise your visualisation will be confusing. If you need to plot more than 6 variables, you should consider alternative ways to visualise this information.</p>
<p>Use the colours listed below, which have been tested for accessibility, in this order:</p>
<ul>
<li><p class="inline-container">Dark Blue<span class="colour-rect" style="--colour: #12436D; --txt_clr: white">#12436D</span></p> </li>
<li><p class="inline-container">Turquoise<span class="colour-rect" style="--colour: #28A197; --txt_clr: white">#28A197</span></p> </li>
<li><p class="inline-container">Dark Pink<span class="colour-rect" style="--colour: #801650; --txt_clr: white">#801650</span></p></li>
<li><p class="inline-container">Orange<span class="colour-rect" style="--colour: #F46A25; --txt_clr: white">#F46A25</span></p> </li>
<li><p class="inline-container">Dark Grey<span class="colour-rect" style="--colour: #3D3D3D; --txt_clr: white">#3D3D3D</span></p> </li>
<li><p class="inline-container">Light Purple<span class="colour-rect" style="--colour: #A285D1; --txt_clr: white">#A285D1</span></p> </li>
</ul>
<h3 id="gridlines">Gridlines</h3>
<ul>
<li>most chart types should have gridlines on at least one axis </li>
<li>all numeric axes, except for those showing time or bands of values, should have gridlines </li>
<li>time axes should have tick marks, but not gridlines </li>
<li>axes showing discrete categories should not have tick marks or gridlines </li>
<li>the line at the zero point on your axis should have more emphasis than standard gridlines </li>
<li>gridlines should be at sensible, round-number, intervals </li>
<li>gridlines should always be labelled with the value they represent </li>
</ul>
<h2 id="templates-and-widgets">Templates and Widgets</h2>
<p>In future versions of this guide, there will be guidance here on use of widgets and templates in Workshop, and where possible, direct links to the templates. We will also include annotated images of available templates to make them easier to work with. </p>
<p>The templates, widgets and code will be accessed in Foundry as usual</p>
<h2 id="further-information">Further information</h2>
<h4 id="accessibility">Accessibility</h4>
<ul>
<li>
<p><a href="https://www.w3.org/mission/accessibility/">W3C accessibility pages</a></p>
</li>
<li>
<p><a href="https://service-manual.nhs.uk/accessibility">NHS Design guide accessibility pages</a></p>
</li>
</ul>
<h4 id="data-visualisation">Data visualisation</h4>
<ul>
<li><a href="https://analysisfunction.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/">ONS and Civil Service research based data visualisation guidance</a></li>
</ul>
<h4 id="content-design">Content design</h4>
<ul>
<li><a href="https://service-manual.nhs.uk/content">NHS Content Design guide</a></li>
</ul>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": ".", "features": ["toc.integrate"], "search": "assets/javascripts/workers/search.16e2a7d4.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version.title": "Select version"}}</script>
<script src="assets/javascripts/bundle.5a2dcb6a.min.js"></script>
</body>
</html>