Recipe for making a more usable library catalog

Photo by Kimberly Vardeman, Flickr, https://flic.kr/p/85kkzn

Washington County Cooperative Library Services Hello! I am Marie Martin Web Administrator Washington County Cooperative Library Services

Questions for you Housekeeping

Why customize the PAC? Branding Usability Consistent, quality online experience

Better usability means: + improved appearance + increased user happiness

Usability / Accessiblity 1 Usability / Accessiblity

Buttons Problems out of the box : - Clickable area - Contrast

Buttons Customized

Buttons How did we fix the buttons? + display: block; + padding on anchor elements + strong contrast between text color and background color

Tools

Checking Contrast Juicy Studio Luminosity Colour Contrast Ratio Analyzer Web Aim Color Contrast Checker

2 Usability Testing

Tools We’ve used Treejack, OptimalSort and Chalkmark over the years

Menus OptimalSort for online and physical card sorts Used for both public-facing website and staff Extranet Public site: we were able to come up with 6 top-level menu items based on patron test results, which we then translated into wireframes that we shared with library staff for further testing.

3 Analytics

Know your users Cookie Dough by Kayla, Flickr, https://flic.kr/p/6586Di Oat chocolate chip cookie by Liliana Fuchs, Flickr, https://flic.kr/p/9dZxTf

Remote vs in-house Combined PACs: 40% remote visitors 60% in-house

+ clickable/tapable area for links + modified text strings for clarity (Language Editor)

Language Editor

Menus

Menus Default Custom

4 Branding

Colors Logo is great, but the green doesn’t have enough contrast with our standard whit background. Had to tweak the colors to find a darker palette, created our own color palette guide that the web team uses for reference whenever we’re updating anything on the site. Keeps us consistent and in line with our logo use guidelines.

5 CSS Tools

Dev Tools

Testing Tools iPad and iPhone by Sean MacEntee, Flickr, https://flic.kr/p/bR4vGi

Wrap up

Thanks! Any questions? You can reach me at mariem@wccls.org Slides will be at https://www.wccls.org/presentations

Resources Juicy Studio Color Contrast Analyser http://juicystudio.com/services/luminositycontrastratio.php#specify WebAIM Color Contrast Checker https://webaim.org/resources/contrastchecker/ Coquitlam public library (“vanilla” PAC screenshots) http://catalog.coqlibrary.ca/polaris/search

Resources Usability.gov – Card-sort article Usability Testing article in The Active Librarian journal Language Editor (Polaris tool)

Presentation template by SlidesCarnival Photographs by Unsplash Credits Special thanks to all the people who made and released these awesome resources for free: Presentation template by SlidesCarnival Photographs by Unsplash This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention SlidesCarnival and other resources used in a slide footer.