forked from dof-dss/nidirect-uxguide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathuser_centred_design.html
238 lines (219 loc) · 12.6 KB
/
user_centred_design.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
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
<head>
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-P6KWBKV');</script>
<!-- End Google Tag Manager -->
<meta charset="utf-8">
<title> User-centred design | User Experience Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#0b0c0c">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="assets/images/favicon.ico" type="image/x-icon">
<link href="css/nidirect-all.css" rel="stylesheet">
</head>
<body class="govuk-template__body ">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P6KWBKV" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<script>
document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
</script>
<a href="#main-content" class="govuk-skip-link">Skip to main content</a>
<header role="banner" data-module="govuk-header">
<div class="nidirect-header">
<div class="govuk-width-container flex-parent">
<div class="nidirect-header__logo govuk-header__container">
<span class="govuk-header__logo nidirect-logo__container">
<svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="133" height="32"
viewbox="0 0 133 32">
<path fill="currentColor"
d="M0,8.93l7-.41a31.54,31.54,0,0,1,.62,4.64,10.06,10.06,0,0,1,3.31-3.43,8.4,8.4,0,0,1,4.34-1.15,6.65,6.65,0,0,1,3.49.83A5.74,5.74,0,0,1,21,12a9.17,9.17,0,0,1,.86,4V26.17a2.24,2.24,0,0,0,.5,1.63,2.48,2.48,0,0,0,1.71.47h.68a2,2,0,0,0,1.45-.47,1.93,1.93,0,0,0,.47-1.42V13.15A2.42,2.42,0,0,0,26,11.26a3,3,0,0,0-2.13-.65H22.17V8.93l8.36-.24V26.78a1.36,1.36,0,0,0,.35,1.06,1.92,1.92,0,0,0,1.3.44h2V30H14.54V28.28H15.6a3.34,3.34,0,0,0,2.07-.47,1.78,1.78,0,0,0,.59-1.42v-9A8.37,8.37,0,0,0,17.37,13a4.13,4.13,0,0,0-3.81-2,5.39,5.39,0,0,0-4.26,2,8,8,0,0,0-1.68,5.32v7.8a2.24,2.24,0,0,0,.5,1.63,2.56,2.56,0,0,0,1.74.47h1.42V30H.21V28.29H1.66a2.58,2.58,0,0,0,1.66-.44,1.38,1.38,0,0,0,.59-1.12V13.12a2.66,2.66,0,0,0-.74-2,2.88,2.88,0,0,0-2.1-.71H0Z">
</path>
<path fill="currentColor" d="M24.29,3.75A3.66,3.66,0,1,1,28,7.41h0a3.65,3.65,0,0,1-3.66-3.66"></path>
<path fill="currentColor"
d="M46.61,24.3a3.89,3.89,0,0,1-3,1.51c-2.39,0-3.31-2-3.31-6.3,0-4.41.95-6.5,3.43-6.5a3.82,3.82,0,0,1,2.87,1.63ZM54,0H46.61V11.23a8.06,8.06,0,0,0-5.94-2.66c-4.73,0-8.13,4.26-8.13,11s3.25,10.85,8,10.85a9.25,9.25,0,0,0,6.09-2.54V30H54V0">
</path>
<rect fill="currentColor" x="55.3" y="8.84" width="7.36" height="21.1"></rect>
<path fill="currentColor"
d="M64,30h7.39V16c1.25-1,3.69-1.92,7.48-.53V8.37c-3.13.21-5.59.53-7.48,2.84V8.85H64Z"></path>
<path fill="currentColor"
d="M116.33,22.11c-.74,2.39-2.16,3.66-4,3.66-2.66,0-3.54-2.13-3.54-6.53,0-4.08.8-6,3.19-6,1.51,0,2.25,1,2.6,3.07l6.59-.5c-1.27-4.76-4.73-7.42-9.55-7.42-6.21,0-10.58,4.49-10.58,11.23s4.2,11,10.55,11a9.76,9.76,0,0,0,10-7.51Z">
</path>
<path fill="currentColor"
d="M133,29.91v-5a9.67,9.67,0,0,1-1.86.24c-1.39,0-2-.59-2-1.92V13.49H133V8.85h-3.84V1.39H122V25c0,3.72,2.28,5.5,7,5.5a15,15,0,0,0,4.1-.57">
</path>
<path fill="currentColor" d="M55.3,3.75A3.66,3.66,0,1,1,59,7.41,3.66,3.66,0,0,1,55.3,3.75h0"></path>
<path fill="currentColor"
d="M100.49,20.93c0-.44,0-.83,0-1.21,0-7.06-4.2-11.32-10.79-11.32S78.56,12.81,78.56,19.69c0,6.68,4.37,11,11.17,11,5,0,8.48-2,10.58-5.79L95.58,22.7a5,5,0,0,1-4.73,3c-2.84,0-4.52-1.68-4.52-4.61v-.12ZM89.76,12.77c2.1,0,3.34,1.51,3.34,4.14H86.54C86.6,14.19,87.72,12.77,89.76,12.77Z">
</path>
</svg>
<span class="govuk-visually-hidden">(n i direct government services)</span>
</span>
</div>
<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation"
aria-label="Show or hide Top Level Navigation">Menu</button>
<nav role="navigation" aria-label="Top Level Navigation">
<ul id="navigation" class="govuk-header__navigation nidirect-header__navigation">
<li class="govuk-header__navigation-item nidirect-header__navigation-item">
<a class="govuk-header__link" href="index.html">
Home
</a>
</li>
<li
class="govuk-header__navigation-item nidirect-header__navigation-item nidirect-header__navigation-item--active">
<a class="govuk-header__link" href="user_centred_design.html">
User-centred design
</a>
</li>
<li class="govuk-header__navigation-item nidirect-header__navigation-item">
<a class="govuk-header__link" href="usability_testing.html">
Usability testing
</a>
</li>
<li class="govuk-header__navigation-item nidirect-header__navigation-item ">
<a class="govuk-header__link" href="applying_brand.html">
Applying the brand
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="nidirect-servicename-container">
<div class="govuk-width-container">
<span class="govuk-body govuk-!-font-size-27 nidirect-servicename">User Experience Guide</span>
</div>
</div>
</header>
<div class="govuk-width-container">
<main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
User-centred design
</h1>
<p class="govuk-body-l">
User-centred design is a design methodology that will help you find out who your users are and what they
need.
</p>
<h2 class="govuk-heading-l">Why it’s important</h2>
<p class="govuk-body">If you understand who your users are and what they need, you will:</p>
<ul class="govuk-list govuk-list--bullet">
<li>understand what the application needs to do</li>
<li>know if your design is the right one before coding</li>
<li>reduce your initial development time and costs</li>
<li>reduce the risk of costly changes in production</li>
<li>improve user satisfaction</li>
</ul>
<h2 class="govuk-heading-l">The user-centred design approach</h2>
<p class="govuk-body">User-centred design is made up of three techniques:</p>
<ul class="govuk-list govuk-list--bullet">
<li>user research</li>
<li>prototyping</li>
<li>usability testing</li>
</ul>
<h3 class="govuk-heading-m">User research</h3>
<p class="govuk-body">Your project should always start with user research.</p>
<p class="govuk-body">If you don’t know who your users are or what they need, how can you be sure you’re
building the right thing?
</p>
<p class="govuk-body">You should find out:</p>
<ul class="govuk-list govuk-list--bullet">
<li>who your users are</li>
<li>the tasks they’re trying to do</li>
<li>why they need to do them</li>
<li>the problems they’re facing when doing those tasks</li>
</ul>
<p class="govuk-body">User research will help you to:</p>
<ul class="govuk-list govuk-list--bullet">
<li>see the problems your application needs to fix</li>
<li>make design decisions based on evidence</li>
<li>understand what your users need the application for</li>
</ul>
<p class="govuk-body">To make sure your application continues to meet your users’ needs, you should continue
to do research throughout the project.</p>
<p class="govuk-body">You can learn more about doing user research for government services, in the <a
class="govuk-link" href="https://www.gov.uk/service-manual/user-research" target="_self">GOV.UK Service
Manual – User Research</a></p>
<h3 class="govuk-heading-m">Prototyping</h3>
<p class="govuk-body">Before you start coding, prototyping should be used to explore and test which of your
design ideas is the best one for your users.</p>
<p class="govuk-body">A prototype is a mock-up of how you picture your design working. It can be as simple as
drawing a series of sketches to developing an interactive prototype.</p>
<p class="govuk-body">Sketches are ideal for exploring and testing design ideas with your team.</p>
<p class="govuk-body"><img class="nidirect-uxg--image" src="assets/images/prototype-sketch_1-660x440.jpg"
alt="a series of sketches that lay out each step of the design idea"></p>
<p class="govuk-body">Interactive prototypes are better for usability testing because they look like a real
application.</p>
<p class="govuk-body"><img class="nidirect-uxg--image" src="assets/images/prototype-interactive_1-660x440.jpg"
alt="a user using an interactive prototype of the design idea on a mobile phone"></p>
<p class="govuk-body">Prototyping will help you to:</p>
<ul class="govuk-list govuk-list--bullet">
<li>explore and test design ideas much faster and at lower risk than using code</li>
<li>ensure your design is the right one for your users before coding</li>
<li>reduce the risk of costly changes in production</li>
</ul>
<h3 class="govuk-heading-m">Usability testing</h3>
<p class="govuk-body">Usability testing allows you to see if your users can use your application or prototype.
</p>
<p class="govuk-body">Whilst an application will go through a series of tests when it’s being built, usability
testing is the only one that tests it with real users.</p>
<p class="govuk-body">Usability testing will help you to:</p>
<ul class="govuk-list govuk-list--bullet">
<li>decide which prototype is the best one to develop</li>
<li>see if your application meets your users’ needs</li>
<li>find which parts of your application are hard to use</li>
<li>come up with ideas on how to improve your application</li>
</ul>
<p class="govuk-body">Usability testing is often overlooked, but it is essential if you want to make sure you
are building the right thing for your users.</p>
<p class="govuk-body">You can learn more about usability testing and how to request a usability study on our
<a class="govuk-link" href="usability_testing.html" target="_self">usability testing page</a>.</p>
</div>
</div>
</main>
</div>
<footer class="nidirect_footer" role="contentinfo">
<div class="govuk-width-container ">
<p class="govuk-body">
<ul>
<li> <a class="govuk-link" href="http://www.nidirect.gov.uk/crown-copyright" target="_blank" rel="nofollow">
© Crown copyright (opens in a new tab)
</a>
</li>
<li> <a class="govuk-link" href="http://www.nidirect.gov.uk/terms-and-conditions" target="_blank"
rel="nofollow">
Terms and conditions (opens in a new tab)
</a>
</li>
<li> <a class="govuk-link" href="cookies.html">
Cookies
</a>
</li>
<li> <a class="govuk-link" href="contact.html">
Contact us
</a>
</li>
<li> <a class="govuk-link" href="accessibility.html">
Accessibility
</a>
</li>
</ul>
</p>
</div>
</footer>
<script src="./javascript/all.js"></script>
<script>
window.GOVUKFrontend.initAll()
</script>
</body>
</html>