-
-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
462 lines (322 loc) · 25.7 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
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="/static/gen/style.css">
<link rel="stylesheet" href="/static/pygments.css">
<meta property="og:site_name" content="Creative Commons" />
<meta property="og:title" content="Usability" />
<meta property="og:description" content="At Creative Commons (CC), our goal is to make our products as easy and delightful to use as possible. To that end, we are constantly talking to our users. Sometimes our sessions involve understanding current experiences and identifying pain points, other times we’re determining upcoming feature prioritization. If we plan to roll out a new product, or design a new interface or feature for an existing product, we do research! We appreciate our users volunteering their time to help us with this research by participating in test sessions." />
<meta property="og:url" content="/contributing-code/usability/" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://cc-og-image.vercel.app/Usability.png?&md=1&fontFamily=roboto-condensed&fontSize=100px&images=https%3A%2F%2Fcc-vocabulary.netlify.app%2Flogos%2Fproducts%2Fopen_source.svg%23opensource" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Usability">
<meta name="twitter:description" content="At Creative Commons (CC), our goal is to make our products as easy and delightful to use as possible. To that end, we are constantly talking to our users. Sometimes our sessions involve understanding current experiences and identifying pain points, other times we’re determining upcoming feature prioritization. If we plan to roll out a new product, or design a new interface or feature for an existing product, we do research! We appreciate our users volunteering their time to help us with this research by participating in test sessions.">
<meta name="twitter:site" content="@creativecommons">
<meta name="twitter:creator" content="@creativecommons">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="/static/gen/script.js"></script>
<script src="https://unpkg.com/@creativecommons/vocabulary@2020.7.2/js/vocabulary.js"></script>
<script>
const globalHeaderInstance = vocabulary.createGlobalHeader();
</script>
<title>Usability — Creative Commons Open Source</title>
<body>
<!-- Header -->
<header class="container">
<nav class="navbar">
<div class="navbar-brand">
<a class="has-text-black" href="/" aria-label="Home">
<svg
class="logo margin-top-small"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 284 46">
<use href="#opensource"></use>
</svg>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item " href="/blog/entries/">
Blog
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless is-active" tabindex="0">
Contribute<i class="icon caret-down"></i></a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/contributing-code/">Contribution Guidelines</a>
<a class="navbar-item" href="/contributing-code/projects/">Project List</a>
<a class="navbar-item" href="/contributing-code/issue-finder/">Issue Finder</a>
<a class="navbar-item" href="/contributing-code/pr-guidelines/">Pull Request Guidelines</a>
<a class="navbar-item" href="/contributing-code/github-repo-guidelines/">GitHub Repo Guidelines</a>
<a class="navbar-item" href="/contributing-code/repo-labels/">Repository Labels</a>
<a class="navbar-item" href="/contributing-code/foundational-tech/">Foundational technologies</a>
<a class="navbar-item" href="/contributing-code/documentation-guidelines/">Documentation Guidelines</a>
<a class="navbar-item" href="/contributing-code/javascript-guidelines/">JavaScript Guidelines</a>
<a class="navbar-item" href="/contributing-code/python-guidelines/">Python Guidelines</a>
<a class="navbar-item" href="/contributing-code/translation-guide/">Translation Guide</a>
<a class="navbar-item" href="/contributing-code/usability/">Usability</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless " tabindex="0">
Community<i class="icon caret-down"></i></a>
<div class="navbar-dropdown is-active">
<a class="navbar-item" href="/community/">Join the Community</a>
<a class="navbar-item" href="/community/community-team/">Community Team</a>
<a class="navbar-item" href="/community/community-team/members/">Community Team Members</a>
<a class="navbar-item" href="/community/community-team/project-roles/">Project Roles</a>
<a class="navbar-item" href="/community/community-team/community-building-roles/">Community Building Roles</a>
<a class="navbar-item" href="/community/write-a-blog-post/">Write a Blog Post</a>
<a class="navbar-item" href="/community/code-of-conduct/">Code of Conduct</a>
<a class="navbar-item" href="/community/code-of-conduct/enforcement/">Code of Conduct Enforcement</a>
<a class="navbar-item" href="/community/supporters/">Supporters</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless " tabindex="0">
Work Programs<i class="icon caret-down"></i></a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/programs/">Overview</a>
<a class="navbar-item" href="/programs/project-ideas/">Project Ideas</a>
<a class="navbar-item" href="/programs/applicant-guide/">Applicant Guide</a>
<a class="navbar-item" href="/programs/contrib-guide/">Contributor Guide</a>
<a class="navbar-item" href="/programs/lead-guide/">Project Lead Guide</a>
<a class="navbar-item" href="/programs/history/">History</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<!-- Breadcrumb -->
<div class="breadcrumb-container">
<nav class="container breadcrumb caption bold" aria-label="breadcrumbs">
<ul>
<!-- Extracting the slugs of URL -->
<!-- Active link -->
<!-- Forming the URL using extracted slugs -->
<li><a class="link" href="/">
Home
</a></li>
<!-- Active link -->
<!-- Forming the URL using extracted slugs -->
<li><a class="link" href="/contributing-code/">
Contributing Code
</a></li>
<!-- Active link -->
<li class="is-active"><a aria-current="page displayed">Usability</a></li>
</ul>
</nav>
</div>
<!-- Body -->
<div class="code-guidelines">
<header class="header">
<div class="container is-paddingless">
<h1>Usability</h1>
<div class="description column is-9 is-paddingless">
</div>
</div>
</header>
<div class="container code-guidelines-body">
<div class="columns">
<div class="column is-one-quarter">
<div class="row">
<aside class="menu sidebar-menu">
<ul class="menu-list">
<li>
<a class=" link" href="/contributing-code/projects/">Project List</a>
</li>
<hr class="divider">
<li>
<a class=" link" href="/contributing-code/issue-finder/">Issue Finder</a>
</li>
<hr class="divider">
<li>
<a class=" link" href="/contributing-code/">Contribution Guidelines</a>
<ul>
<li><a class=" link" href="/contributing-code/foundational-tech/"><i class="icon circle-filled"></i>Foundational technologies</a></li>
<li><a class=" link" href="/contributing-code/pr-guidelines/"><i class="icon circle-filled"></i>Pull Request Guidelines</a></li>
<li><a class=" link" href="/contributing-code/github-repo-guidelines/"><i class="icon circle-filled"></i>GitHub Repo Guidelines</a></li>
<li><a class=" link" href="/contributing-code/repo-labels/"><i class="icon circle-filled"></i>Repository Labels</a></li>
<li><a class=" link" href="/contributing-code/documentation-guidelines/"><i class="icon circle-filled"></i>Documentation Guidelines</a></li>
<li><a class=" link" href="/contributing-code/javascript-guidelines/"><i class="icon circle-filled"></i>JavaScript Guidelines</a></li>
<li><a class=" link" href="/contributing-code/python-guidelines/"><i class="icon circle-filled"></i>Python Guidelines</a></li>
<li><a class=" link" href="/contributing-code/translation-guide/"><i class="icon circle-filled"></i>Translation Guide</a></li>
</ul>
</li>
<hr class="divider">
<li>
<a class=" is-active link" href="/contributing-code/usability/">Usability</a>
</li>
</ul>
</aside>
</div>
<div class="row padding-bottom-normal sticky-top">
<h4 class="b-header">On this page</h4>
<aside class="menu table-of-contents">
<ul class="menu-list">
<li>
<a class="link" href="#participate-in-a-session">Participate in a Session</a>
</li>
<li>
<a class="link" href="#what-to-expect">What to Expect</a>
</li>
<li>
<a class="link" href="#diy">DIY</a>
</li>
</ul>
</aside>
</div>
</div>
<div class="column content is-three-quarters">
<p>At Creative Commons (CC), our goal is to make our products as easy and delightful to use as possible. To that end, we are constantly talking to our users. Sometimes our sessions involve understanding current experiences and identifying pain points, other times we’re determining upcoming feature prioritization. If we plan to roll out a new product, or design a new interface or feature for an existing product, we do research! We appreciate our users volunteering their time to help us with this research by participating in test sessions.</p>
<h2 id="participate-in-a-session">Participate in a Session</h2><p>When we’re rolling out a specific feature, we do <strong>usability tests</strong> to test the proposed experience.</p>
<p>Keep an eye on the <code>#cc-usability</code> channel in the <a href="https://slack-signup.creativecommons.org/">Creative Commons Slack</a> or sign up for the <a href="https://groups.google.com/a/creativecommons.org/forum/#!forum/usability-announce">CC Usability Announcements list</a>. That way you’ll be the first to hear when there’s a round of usability tests being scheduled for something new.</p>
<p>At any point in time, we’re engaging with our users through <strong>user interviews</strong>, where we learn more about attitudes towards our products, and dig into expansion areas we’re considering.</p>
<p>If you’re interested in volunteering your time, we invite you to sign up to talk to us. Look at the <a href="https://calendly.com/cc-product-design">products and features</a> we’re currently scheduling tests for. If you’d like time to share general thoughts, sign up for a User Interview session specifically.</p>
<h2 id="what-to-expect">What to Expect</h2><ul>
<li>After scheduling a time to talk to us, here’s what you can expect:</li>
<li>You’ll need to sign and return a <a href="https://drive.google.com/file/d/1XWt5QDu-IR76BwsPP7OidqNncha3rHbm/view">consent form</a>, allowing us to record the screen during the session. We typically do screen share, and the value of the session is greatly increased when we can refer back to a recording while reviewing notes and findings.</li>
<li>You’ll need a good internet connection, a functioning microphone, and the ability to use Google Meet.</li>
<li>When the session starts, we begin with introductions and some general questions about you!</li>
<li>We then move on to screen share, where we may do a number of things: complete tasks through prototypes, look at existing products, review proposed designs, compare interfaces of similar services, or talk about a topic related to the session. There are no wrong answers. As researchers, we’re interested in hearing your honest thoughts and ideas. We’ll ask you to talk out loud as much as possible, and filter nothing!</li>
<li>After the session wraps, we’ll send a small token of gratitude your way.</li>
</ul>
<h2 id="diy">DIY</h2><p>In the spirit of open source, here is how you can prepare your own usability test, based on how CC approaches usability tests.</p>
<p><strong>Decide why and what you want to test.</strong> Whatever you are planning on putting in front of users, be clear on why you are doing the research. Be specific about which design options you are testing, and the metrics you want to obtain from your sessions. Writing down your assumptions related to product changes will help you to compare which ideas worked better or worse after running the sessions.</p>
<p>Decide which tools suit best for the purposes of the test. Depending on the goal, some tests require high-fidelity interactive prototypes, while others need low-fi screens with complete functionality.</p>
<p><strong>Prepare your wireframes, mockups, or interactive prototypes.</strong> At CC we use Moqups for basic wireframes, and Figma to house our Design Library, create mockups, and in some cases interactive prototypes. Here’s a useful article on <a href="https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma">creating prototypes in Figma</a>. Other software for similar purposes includes Balsamiq, Invision, and Sketch.</p>
<p><strong>Prepare your script.</strong> Within your script you should:</p>
<ul>
<li>Reestablish with the user why they’re here.</li>
<li>Drive home the point that you are testing the product, not the user, and there are no wrong answers.</li>
<li>Make space to ask basic background questions of the user.</li>
<li>Indicate when (or if) you plan to commence screen recording.</li>
<li>Prepare tasks, one or more, for the user to carry out. It is helpful to write these tasks down on a shared document (we often use Google Slides), as they may include links, and can allow the user to reference the instructions during the task.</li>
</ul>
<p><strong>Prepare a consent form for screen recording.</strong> Usability sessions are great, but they’re even better when they’re recorded. It allows you to focus more fully on the session during it, be less distracted by note taking, and not worry that you’re missing key insights. Ensure that your users sign this before commencing screen recording. (See the <a href="https://drive.google.com/file/d/1XWt5QDu-IR76BwsPP7OidqNncha3rHbm/view">form</a> we use as an example.). If you opt to not do screen recording, we strongly recommend having a second person with you during the session whose sole role it is to take notes.</p>
<p><strong>Schedule tests.</strong> Promote with your social users, newsletter subscribers, announce it on your site, or get the word out some other way. We use Calendly for scheduling these, and we include a number of basic questions during the session sign-up process, to help us better prepare for tests. (See an example sign-up <a href="https://calendly.com/cc-product-design/user-interview-30">here</a> ). Our typical requirements for participants are high speed internet access, a computer with a microphone, ability to screen share, and request for consent form to be signed. For anything new you want to get feedback on, it’s advisable to talk to at least three users.</p>
<p><strong>Rehearse.</strong> Before your first session, simulate a whole session, read the script, complete the task(s), and answer the final questions you plan to ask. Think about if there are additional things you want to ask. Be ready, knowing what you want to say and ask.</p>
<p><strong>Carry out the test.</strong> During the session, have your script open on one window, and a video call with screen share open on another window. We use Google Meet (Hangouts) for our video calls.</p>
<p>Have a notes document prepared, or better yet, enlist someone else to join the call to take notes. If (and only if) your participant has consented to screen share being recorded, be ready with software that records the screen. We often use QuickTime (if on a Mac), it is simple and free. Another option is <a href="https://obsproject.com/">OBS</a>, which is free, open source, and cross platform.</p>
<p>Remember that the point of the test is to ask questions and get feedback. It is not to educate, give guidance, or explain. Whenever you are running a usability test, remember that you want to see what the user will do to complete the task when no one is around to help them. Ask them to think out loud, so that you can better understand what is clear and what is confusing, and pay close attention to how the user interacts with the prototype. If something related to your research purpose catches your attention, dive into it by asking why.</p>
<p><strong>Thank the user.</strong> At the end of the test, remember to thank the user. If you have the budget for it, we recommend signaling gratitude with a gift card, or other reward. Members of your community may politely decline this offer, because their reward is the ability to contribute to improving your product.</p>
<p><strong>Review your findings.</strong> Spend time with your notes, rewatching the screen recording, and deeply thinking about what you have learned.</p>
<p>We strongly recommend reading <a href="http://stevekrug.com/rsme.html">Rocket Surgery Made Easy by Steve Krug</a>. The methods we employ at CC are to a large extent based on the guidance in that book. Have you read something fantastic about usability testing? Join us in the <code>#cc-usability</code> channel in the <a href="https://slack-signup.creativecommons.org/">Creative Commons Slack</a> and share your resources!</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="main-footer">
<div class="container">
<div class="columns">
<div class="column is-one-third-tablet-only is-one-quarter-desktop">
<a href="https://creativecommons.org" class="main-logo margin-bottom-bigger">
<span class="has-text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 304 73">
<use href="#logomark"></use>
</svg>
</span>
</a>
<div>
<address class="margin-bottom-normal">Creative Commons<br />PO Box 1866, Mountain View CA 94042</address>
<a href="mailto:info@creativecommons.org" class="mail">info@creativecommons.org</a><br />
<a href="tel://+1-415-429-6753" class="phone">+1-415-429-6753</a>
</div>
<div class="margin-vertical-large">
<a href="https://www.instagram.com/creativecommons" class="social has-text-white" target="_blank"
rel="noopener">
<i class="icon margin-right-small is-size-4">instagram</i>
</a>
<a href="https://www.facebook.com/creativecommons" class="social has-text-white" target="_blank"
rel="noopener">
<i class="icon margin-right-small is-size-4">facebook</i>
</a>
<a href="https://www.linkedin.com/company/creative-commons/" class="social has-text-white" target="_blank"
rel="noopener">
<i class="icon margin-right-small is-size-4">linkedin</i>
</a>
</div>
</div>
<div class="column is-two-third-tablet-only is-three-quarters-desktop">
<div class="columns">
<div class="column is-full">
<nav class="footer-navigation">
<ul class="menu">
<li>
<a href="/blog/entries/" class="menu-item">Blog</a>
</li>
<li>
<a href="/community/community-team/" class="menu-item">Community Team</a>
</li>
<li>
<a href="/contributing-code/projects/" class="menu-item">Project List</a>
</li>
<li>
<a href="/archives/" class="menu-item">Archives</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="columns">
<div class="column is-two-thirds">
<div class="subscription">
<h5 class="b-header">Subscribe to our newsletter</h5>
<form class="newsletter">
<input type="email" id="emailInput" class="input" placeholder="Your email" required>
<input type="submit" value="subscribe" class="button small">
</form>
</div>
<div class="attribution margin-top-bigger">
<p class="caption">
Except where otherwise
<a href="https://creativecommons.org/policies#license" target="_blank" rel="noopener">noted</a>,
content on this site is licensed under a
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons
Attribution 4.0 International license</a>.
<a href="https://creativecommons.org/website-icons" target="_blank" rel="noopener">Icons</a>
by
<a href="https://fontawesome.com/" target="_blank" rel="noopener">Font Awesome</a>.
</p>
<div class="margin-top-smaller">
<i class="icon margin-right-small is-size-4">cclogo</i>
<i class="icon margin-right-small is-size-4">ccby</i>
</div>
</div>
</div>
<div class="column is-one-third">
<aside class="donate-section">
<h5>Our work relies on you!</h5>
<p>Help us keep the internet free and open.</p>
<a class="button small donate" href="https://creativecommons.org/donate?c_src=website&c_src2=GlobalFooter">
<i class="icon cc-letterheart-filled margin-right-small is-size-5 padding-top-smaller"></i>
Donate now
</a>
</aside>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>