-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathuser-testing.html
executable file
·239 lines (181 loc) · 11.8 KB
/
user-testing.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
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>User Testing - Card Sorting & One-on-One Tests | UM Libraries Website Redesign</title>
<meta name="description" content="As part of the discovery phase of the website redesign process, we of course wanted to get insights from the primary users of the library’s website: students...">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="X-Frame-Options" content="sameorigin">
<!-- CSS -->
<!--[if lte IE 8]><script src="https://www.library.miami.edu/redesign/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="/redesign/css/main.css">
<!--Favicon-->
<link rel="shortcut icon" href="/redesign/favicon.ico" type="image/x-icon">
<!-- Canonical -->
<link rel="canonical" href="https://www.library.miami.edu/redesign/user-testing.html">
<!-- RSS -->
<link rel="alternate" type="application/atom+xml" title="UM Libraries Website Redesign" href="https://www.library.miami.edu/redesign/feed.xml" />
<!-- Font Awesome -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,700italic,400italic" rel="stylesheet" type="text/css">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GG3W2LFPG1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-GG3W2LFPG1');
</script>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header class="site-header">
<div class="inner">
<div class="row">
<div class="8u 10u(small) 12u$(xxsmall)">
<div class="branding">
<a href="/redesign/">
<img class="avatar" src="/redesign/img/symbol.png" alt=""/>
</a>
<h1 class="site-title">
<a href="/redesign/">UM Libraries Website Redesign</a>
</h1>
</div>
</div>
<div class="4u$ 2u$(small) 12u$(xxsmall)">
<nav class="site-nav">
<ul>
<li>
<a class="page-link" href="/redesign/about/">
About
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="content">
<div id="post">
<div class="inner">
<article>
<div class="post-header">
<h1 class="title">User Testing - Card Sorting & One-on-One Tests</h1>
<p class="meta">
February 20, 2017
</p>
<div class="simple-author">
<img src="/redesign/img/staff/elliot.png" alt="UM Staff" />
<p><span class="accent1">Elliot Williams</span><br />Digital Initiatives Metadata Librarian</p>
</div>
</div>
<section class="post-content"><p>As part of the discovery phase of the website redesign process, we of course wanted to get insights from the primary users of the library’s website: students. The libraries’ User Experience (UX) Team conducted two types of user experience research, with more to come as we move into the design and prototyping phases. Through these tests, we improved our understanding of how students use the library website, what they are looking for on the site, and how we can make it as easy as possible for them to access library resources and services.</p>
<div class="row">
<div class="6u 12u$(medium)">
<div>
<h2 id="card-sorting">Card sorting</h2>
</div>
<div class="image-center">
<img src="/redesign/img/posts/cardsorting4.png" alt="card sorting exercise" class="image" />
</div>
<div>
<p>To test how information on the website should be organized, we conducted a type of usability testing called <a href="https://www.usability.gov/how-to-and-tools/methods/card-sorting.html" target="_blank">card sorting</a>. In this test, users are given cards indicating pages of the website and asked to organize them in a way that makes sense to them. We used a combination open and closed card sort, providing the ‘Services’ and ‘Research’ categories, but asking students to create their own additional categories for terms that didn’t fit. A total of 94 terms, all gathered from the drop-down menus on the library.miami.edu website, were included for sorting. Six card sorts were completed by 5 undergraduates and 1 graduate student.</p>
<p>Both the ‘Research’ and ‘Services’ categories seemed to make sense to students, with ‘Research’ being the most understandable. The ‘Services’ category had more variation than ‘Research’, but students recognized core services fairly easily. Interestingly, students seem to look for research support under the ‘Services’ menu, not the ‘Research’ menu.</p>
<p>Most students created a category that would describe information about the library, using terms such as ‘Library Information’, ‘Library Info’, or ‘About the Library.’ This was not a category provided to the students, but it matches closely with the website’s current ‘About’ category, indicating that that category is worth keeping, in some form.</p>
<p>Some students categorized a few terms in either a ‘remove’ or ‘not sure what this is’ category. It may be worth looking into these unfamiliar services to consider new vocabulary. Additionally, one student created a category of terms that ‘should be included on the main page or have a direct link.’ These nontraditional categories may point to areas where other forms of usability testing may be used to provide more context and understanding.</p>
<p>We also noticed that students tended to become overwhelmed by the number of terms needing to be categorized. Including all 94 terms could slightly overwhelm our users! In the future, we may want to break down the card sort into smaller areas for the sake of time and ease of testing.</p>
<p><i class="fa fa-file-text-o" aria-hidden="true"></i> To learn more about the results of our card sorting, please see the <a href="https://miami.box.com/s/zx5u3t7y4e2u1bu1xpke476znqcxbtoa" target="_blank">Card Sorting Discovery Report</a>.</p>
</div>
</div>
<div class="6u$ 12u$(medium)">
<div>
<h2 id="one-on-one-testing">One-on-one testing</h2>
</div>
<div class="image-center">
<img src="/redesign/img/posts/one-on-one-testing.png" alt="one-on-one testing" class="image" />
</div>
<div>
<p>We also wanted to actually watch students use the current library website to find out what they liked, what worked, and what didn’t. Following the <a href="https://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/" target="_blank">one-on-one user testing method made famous by the Nielsen Norman Group</a>, we designed a set of 12 tasks using the current website, which we asked students to complete while telling us what they were thinking and doing (“think-aloud” testing).</p>
<p>To recruit a diverse group of students, we set up a table in the Richter library lobby on two days in December 2016, once during the middle of the day and once in the early evening. Two library staff ran each test: one person guiding the test participant through the tasks, and the other observing and taking notes. Coffee was offered as an incentive to participate (it was close to finals, after all!). Altogether, we had 22 students participate, each of whom completed three of our test scenarios. Each test took between 5 and 10 minutes.</p>
<p>The tasks and questions we asked focused on how students use the library website to access resource, find out about library services, and use the library to meet their needs. Some of what we discovered was not a surprise: students don’t always understand library jargon, and often aren’t aware of the complete range of services offered by the library. Other things we discovered were more unexpected: students like being able to ask for help, often saying that they would just go ask the front desk rather than use the website for some tasks.</p>
<p>Some of the <strong>key recommendations</strong> that emerged from these tests were:</p>
<ul>
<li>Students’ use of the library website is primarily task-oriented, and they like the library homepage to be a center for their most commonly needed tasks.</li>
<li>Students want information and services to be available to them at the time they need it, so the website should optimize connections between services and connect to other systems students use (e.g. Blackboard).</li>
<li>Promote library services and expertise (i.e. people) on the homepage, because students are often unaware of what the library can offer them and do not explore the website beyond their immediate needs.</li>
<li>Provide easy ways for students to communicate with library staff on the website.</li>
</ul>
<p><i class="fa fa-file-text-o" aria-hidden="true"></i> For complete test questions and results, check out the <a href="https://miami.box.com/s/19ekb1x6az9lcbhyy6sjydsf70eo8kfy" target="_blank">One-on-One User Testing Discovery Report.</a></p>
</div>
</div>
</div>
</section>
</article>
</div>
</div>
<!-- Post navigation -->
<div id="post-nav">
<div class="inner">
<div class="row">
<div class="6u 12u$(medium)">
<a id="prev-post" href="/redesign/welcome.html">
<span class="nav-label button">
<i class="fa fa-chevron-left"></i> Prev
</span>
<span class="page-title">Welcome</span>
</a>
</div>
<div class="6u$ 12u$(medium)">
<a id="next-post" href="/redesign/google-anayltics.html">
<span class="page-title">Numbers Don't Lie - Analyzing Google Analytics</span>
<span class="nav-label button">
Next <i class="fa fa-chevron-right"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<div class="row">
<div class="2u 12u$(small)">
<a href="http://welcome.miami.edu/" class="footer-logo" target="_blank"><img src="/redesign/img/um-logo.png" alt="University of Miami"></a>
</div>
<div class="4u 12u$(small)">
<p><a href="https://www.library.miami.edu/" class="footer-link" target="_blank">University of Miami Libraries</a><br />
1300 Memorial Drive<br />
Coral Gables, FL 33124<br />
(305) 284-3233
</p>
</div>
<div class="3u 12u$(small)">
</div>
<div class="3u$ 12u$(small)">
<ul class="icons">
<li><a href="https://www.facebook.com/pages/University-of-Miami-Libraries/16409329419" class="icon alt fa-facebook" target="_blank"><span class="label">Facebook</span></a></li>
<li><a href="https://twitter.com/UMiamiLibraries" class="icon alt fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
<li><a href="https://www.instagram.com/umiamilibraries/" class="icon alt fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
</ul>
</div>
</div>
<ul class="copyright">
<li>© 2017-2018 | <a href="http://www.miami.edu/index.php/privacy_statement/" target="_blank">Privacy</a></li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="https://www.library.miami.edu/redesign/js/jquery.min.js"></script>
<script src="https://www.library.miami.edu/redesign/js/skel.min.js"></script>
<script src="https://www.library.miami.edu/redesign/js/main.js"></script>
</body>
</html>