Originally presented 26 July 2015 at ALIA New Librarian Symposium 7 (http://nls7.org) in Sydney, Australia.
This is an introductory overview on how library websites may optimise user experience. The foundations of user experience are explored, with an emphasis on the importance of personas. With four sample personas of a child, a university student, an older adult, and a mobile user, best practices for providing optimal user experiences for these typical users are detailed.
Further reading and a bibliography are provided at the end of the presentation.
Please feel free to leave a comment or tweet me with feedback or questions.
2.
User experience is not about the inner workings of a
product or service. User experience is about how it works
on the outside, where a person comes into contact with it.
- Jesse James Garrett, author of “The Elements of User
Experience: User-Centered Design for the Web”
What is User Experience (UX)?
3.
User experience seeks to create products that people will
want to use, and to delight users in such a way that they
develop a sense of loyalty to the product or service being
offered.
- Cecily Walker, Vancouver Public Library
The Aim of UX
8.
Understand Your Users
Who uses my website?
What are they trying to accomplish?
How will they achieve their goals?
Will they be successful?
18.
Ideally, there would be no visual distinction between your
library website and catalog (and, no, “branding” an OPAC
with a library logo doesn’t cut it.)
We’re expecting people to learn two interfaces—and often
two suboptimal interfaces—when we should be providing a
single great one.
- Aaron Schmidt, Library UX consultant, Library Journal
One single great interface
25.
There is no mobile web
There is no Mobile Web. There is only The Web,
which we view in different ways. There is also no
Desktop Web. Or Tablet Web. Thank you.
- Stephen Hay, UX Consultant
28.
Responsive Websites
• Most current templates available will be
responsive
• Yes, you have to do a redesign
• ^ But do it anyway
• Downside is large page sizes
29.
Recommended reading and bibliography will be available
Twitter: @jjs6791
E-mail: jjs6791@gmail.com
http://library.aut.ac.nz
http://nelsonpubliclibraries.co.nz
http://pac.newmarketpl.ca/polaris/Children/default.as
px?ctx=1.1033.0.0.5
http://maldenpubliclibrary.org/
Audience Participation
30.
Deschenes, A. (2014). Improving the Library Homepage through User
Research — Without a Total Redesign. Weave: Journal of Library User
Experience, 1(1). http://doi.org/10.3998/weave.12535642.0001.102
Garrett, J. J. (2010). The Elements of User Experience: User-Centered Design for
the Web and Beyond (2 edition). Berkeley, CA: New Riders.
Goodman, A. (2013, May 6). Libraries: A Canvas for Creating Meaningful
User Experience. UX Magazine. Retrieved from
https://uxmag.com/articles/libraries-a-canvas-for-creating-meaningful-
user-experience
Schmidt, A. (n.d.). The User Experience. Retrieved July 6, 2015, from
http://lj.libraryjournal.com/category/opinion/aaron-schmidt/
Singley, E. (n.d.). usable libraries. Retrieved June 22, 2015, from
http://emilysingley.net/
Spina, C. (2015, July 16). Research Guides: Accessibility Tools: Home.
Retrieved July 16, 2015, from
http://harvard.beta.libguides.com/accessibility2
Further Reading
31. Campbell, O. (2015, February 5). Designing For The Elderly: Ways Older People Use
Digital Technology Differently. Retrieved July 7, 2015, from
http://www.smashingmagazine.com/2015/02/05/designing-digital-technology-for-the-
elderly/
Charbonneau, D. H. (2014). Public Library Websites and Adherence to Senior-Friendly
Guidelines. Public Library Quarterly, 33(2), 121–130.
http://doi.org/10.1080/01616846.2014.910722
Fry, A., & Rich, L. (2011). Usability Testing for e-Resource Discovery: How Students Find
and Choose e-Resources Using Library Web Sites. The Journal of Academic Librarianship,
37(5), 386–401. http://doi.org/10.1016/j.acalib.2011.06.003
Godwin Cooper, K. (2008, May 15). Perfecting your personas. Retrieved from
http://www.cooper.com/journal/2008/5/perfecting_your_personas
Hart, T. A., Chaparro, B. S., & Halcomb, C. G. (2008). Evaluating websites for older adults:
adherence to “senior-friendly” guidelines and end-user performance. Behaviour &
Information Technology, 27(3), 191–199. http://doi.org/10.1080/01449290600802031
Joint Select Committee on Cyber-Safety, House of Representatives. (2013). Cybersafety for
seniors [electronic resource] : a worthwhile journey. Canberra : Commonwealth of Australia.
Retrieved from
http://www.aph.gov.au/Parliamentary_Business/Committees/House_of_Representative
s_Committees?url=jscc/senior_australians/report.htm
Bibliography 1
32. Kaufman, A. (n.d.). Designing Healthcare Websites for Seniors. Retrieved July 7, 2015, from
http://www.brightercollective.com/user-experience/healthcare-websites-for-seniors/
Kim, B. (2013). Responsive Web Design, Discoverability, and Mobile Challenge. Library Technology Reports,
49(6), 29–39,2.
Kupersmith, J. (2012, February 29). Library Terms That Users Understand. UC Berkeley. Retrieved from
http://escholarship.org/uc/item/3qq499w7
Martens, M. (2012). Issues of access and usability in designing digital resources for children. Library &
Information Science Research, 34(3), 159–168. http://doi.org/10.1016/j.lisr.2011.12.003
Pew Research Center. (2014). Older Adults and Technology Use (p. 27). Pew Research Center. Retrieved from
http://www.pewinternet.org/2014/04/03/older-adults-and-technology-use/
Schmidt, A. (2011, April 1). A Site Divided. Retrieved June 19, 2015, from
http://lj.libraryjournal.com/2011/04/opinion/aaron-schmidt/a-site-divided-the-user-experience/
Swanson, T. A., & Green, J. (2011). Why We Are Not Google: Lessons from a Library Web site Usability
Study. The Journal of Academic Librarianship, 37(3), 222–229. http://doi.org/10.1016/j.acalib.2011.02.014
Teague-Rector, S., Ballard, A., & Pauley, S. (2011). The North Carolina State University Libraries Search
Experience: Usability Testing Tabbed Search Interfaces for Academic Libraries. Journal of Web Librarianship,
5(2), 80–95. http://doi.org/10.1080/19322909.2011.568822
Walker, C. (2010). A User Experience Primer. Feliciter, 56(5), 195–197.
Bibliography 2
Notas do Editor
Hello, thank you for coming to my talk on library websites and user experience. I’m a web developer that has just completed my Masters in Library Science, and I really enjoy blending the two disciplines. To start off with, who here is responsible for your library‘s website?
(and who here is generally interested in library websites?) Great, I want to take this opportunity to help you come up with new ideas to provide a pleasant user experience. While I will be focusing on library websites, you will see that the principles of user experience can be applied to several other areas of library service. As you may know, the term “user experience” is getting a lot of buzz lately, and hopefully this presentation provides some insight. I will give an overview of what user experience means, and then take a close look at different types of typical users and how to optimize their user experience.
Here’s a definition.
You’re probably familiar with usability, which determines if the user can complete their objective.
How does usability compare with user experience? While usability may be an important aspect of user experience, it is just a part of a broader goal.
And here’s the aim of UX.
So user experience goes beyond simply enabling users to successfully complete a task.
For example, let’s say our goal is to find a book. Obviously, we’ll use a library catalogue.
Take for example this university’s library catalogue page. (Goldsmiths University in London)
Compare it to this American public library’s catalogue. A much more modern interface. It goes beyond merely finding and has useful options such as saving results and a link to ask a librarian.
We could certainly accomplish our goal at the first catalogue. It is usable. But, it’s pretty clear which one we would feel better about using.
Now, a foundation of user experience is immersing yourself in understanding your users, and their goals. You are not designing for yourself or your organisation.
This may seem like common sense, but does anyone remember websites with splash introductions? With splash intros, when you went to a restaurant’s website to look for some specific information, you were greeted with music and animated text that often didn’t provide any useful information.
The web designer and restaurant owner were surely proud of their fancy design, but most users go to the restaurant websites to quickly find specific information such as the menu or hours.
Now, fortunately most websites have progressed to better fulfil the user’s needs, but I’m sure you can think of websites or services in general that just don’t understand their users’ perspective
There are many ways to research users, their goals and what makes them happy.
Surveys, focus groups, interviews, observation, and web analytics are some methods.
This helps you gain knowledge of who your users are, what they’re hoping to accomplish, and how they will achieve their goals.
An effective method to represent your users when analysing your site is done by creating personas. Personas are fictional characters that represent real users.
By creating a character, you step into their shoes and imagine how they will engage with your library’s website. Let’s look at some personas we’ll use for the rest of this presentation.
Click
Jack, a boy looking for summer reading books
Click
Jill, a uni student looking for journal articles for an essay
Click
Rosemary, an older adult researching genealogy
Click
Gabe, who doesn’t own a computer
Let’s look specifically at accommodating these different types of users.
Back to our youngster Jack looking for summer reading books.
A traditional online catalogue provides significant challenges for children. Children prefer, and are more apt to find information through browsing rather than searching, partly due to limited skills (for example in spelling) and also because children have difficultly translating a physical environment to a virtual one.
For example, children do much better finding items on physical bookshelves than online. Visual details such as the pictures on the cover, and the actual colour of the book are important criteria for children.
This is the International Children’s Digital Library, which was created by a interdisciplinary team of researchers at the University of Maryland’s Human-Computer Interaction lab. Note the colour selector, size selector, visual icons, and customised labelling such as “Real Animal” or “Imaginary Creature Characters”.
This is much different than your typical catalogue! And clearly optimised for children.
Our friend Jill the uni student looking for journal articles for her essay is a common user in an academic library setting.
A 2012 review of several academic library website usability studies found the success rate at finding journal articles or databases was only 51%.
That’s pretty low! Let’s take a look at issues with this.
I’ve read lots of papers on usability studies for academic library websites, and a major theme that dominates is a prominent search box on the homepage.
Why?
This is what students are used to!
Users, particularly those around typical uni age, are highly dependent on one wide reaching search for everything. That is one reason why one-stop federated searching and discovery layers that query multiple databases have become so popular with academic library websites.
Even if the students are looking for information that could be found via browsing through the navigation (such as opening hours, or research databases) they will use search. A challenge that library websites face is providing prominent search, but also having other content discoverable such as libguides or events.
Here’s a prime example of the importance of understanding how your audience uses your website. Take a user trying to locate the Proquest database. Even if it makes total sense to simply locate a link in the navigation to browse the “databases” link to find “ProQuest”, research shows that many users will search for “Proquest”, so you should accommodate that.
Here’s the result that gives the user what they’re after. A “database” is not a typical catalogue search result type., but it is effectively provided here.
To address this reliance on searching, North Carolina State University in America did extensive testing of their search experience. Their aim was to discover if users would interact and pick specific silos for their search, or if they should offer one simple all-encompassing search with results grouped by silo.
They found that the tabbed interface was most effective. As you can see, it offers a nice blend of a straightforward, intuitive design that reflects student’s reliance on a powerful, customisable search over several silos.
Here’s a public library that also features a powerful search, where the user may select where they want to search.
Now, one nice thing about this catalogue is that the layout is consistent with the rest of the website. This may be expected, but there are several library websites I’ve seen where opening the catalogue goes to what looks to be a completely different site.
For example, here’s the Chatswood library page, which is a suburb on the north shore here in Sydney.
So after clicking on catalogue, where am I? All the colours and layout changed. It opened a new window, so the back button doesn’t work, and clicking on “library home” goes to the general council library page rather than where I was.
There are several explanations as to why a catalogue and site’s integration may not be easy, but having a consistent look and feel, especially for something as important as the catalogue is really important.
Here’s a convincing argument, Try to stay away from having a divided website.
Another issue is terminology. The aforementioned 2012 review of several usability studies, which is actually titled “Library Terms That Users Understand” found a common theme with students being confused with terms we know, but are often unclear to them. For some examples: Using natural language such as a “find articles” link worked better than “databases” and “borrow from other libraries” was more effective than “inter-library loan”.
In this example from Norwich University in the States, terminology is used effectively for users unfamiliar with the library.
Notice what they call inter library loan
The find options are spelled out
A nice touch is provided when you hover over the What is Databases text.
And what term is completely missing here?
Now, let’s turn to Rosemary who we want to provide a good experience as she turns to her local library for genealogy research. Rosemary fits the profile of a 2013 Australian Communications and Media Authority report, which states that adults 55 and over are more likely to use the internet for research and information rather than social media or e-commerce. Which hopefully means they will be going to library websites! In addition, a 2014 report showed that 59% of Americans 65 and over are now online, compared to 14% in 2000.
Older adults are clearly a growing online demographic, and there are several ways to optimize their user experience.
For locating genealogy information, it is important for older users to be able to easily navigate around a site.
It is common for older adults to have problems using a mouse and “hitting targets”. Pay particular attention to drop down navigation menus as they often require dexterity.
We want to go to “Contact us”.
Okay we need to go to the left.
Whoa, it changed.
So you have to go down and around. A good deal of users will have difficulty with this manoeuvrer.
Try to make the navigation as straightforward and simple as possible.
In addition, you probably could have guessed I would also talk about font size. Use at least 12-14 point fonts, Sans Serif fonts such as Arial are best. Don’t assume they will use their browser’s in-built function to make text bigger- instead, provide a way to make text bigger with a prominent link on the top of each page.
Here, they provide a convenient method to change text size, in the top right of every page.
Also, ensure you have suitable contrast, white background and dark text.
Having the same navigation links in the same place on each web page facilitates accessibility for older adults’ access. This goes back to the issue when the catalogue is not integrated with the rest of the website.
Gabe doesn’t have a computer and relies exclusively on his smartphone for accessing the internet. There are a couple different options when it comes to mobile users.
Click
Do nothing and design only for desktop.
This most likely leads to massive amounts of scrolling, pinching and zooming, slow load times, and possible loss of functionality
Click
Create a separate mobile site or app
This is clearly optimized for mobile.
The downside is that you essentially have to maintain two different platforms. When changing your site, you have to update and test both the desktop and mobile version
Also, what content and functionality does the mobile site receive? Will users be unhappy if they can’t do something on mobile that is able to be done on desktop?
Or, you can use a responsive design, as reflected in the idea that there’s no mobile or desktop web.
Responsive design is a relatively new, coined in 2010
One site, one version, one set of code that gracefully adapts to the user’s view.
To illustrate what responsive design is, let’s first look at a site that is NOT responsive.
Example, when we make the screen smaller, Darwin’s public library website doesn’t adapt. If we were using a mobile browser, it would fit the entire width into a single view, which will be pretty small and make for a lot of pinching and zooming.
Now for a great example of responsive design:
When we resize and it reaches a certain width, the content stacks vertically. The display gracefully adapts to the size of the device, and the content is consistent.
It responds to the size of the window viewing the website, from a large desktop to a small smartphone.
With a responsive design, there is one type of site to maintain. You always want to check to make sure it looks good and functions on various devices, but it should be a much more streamlined process
There are several templates available that are “responsive” and easy to use, such as the Bootstrap framework and in several templates available in conjunction with content management systems such as Wordpress or Drupal
It’ll take a little time to redesign a site, but think how much better it’ll look on mobile, and the benefits of one integrated process
A risk is that since that it is one site for mobile and desktop, users are accessing the same pages, and the page size for mobile may be a bit large. This may affect users with slow cellular connections, or limited data plans.
I’m going to finish this talk by bringing up some library websites that we can evaluate together. We’ll again use our personas to test the site from our user’s perspective
