Yesterday, my Sched app reminded me that I’d be presenting “Not Just Bells and Whistles: Ed Tech Tools that Really Work” at the AISL annual conference in Houston. I was saddened because connecting with everyone in person has become an important part for me of belonging to the AISL community. As busy as I was preparing for AISL—I was mostly looking forward to making connections with friends and colleagues with a shared passion for the field of librarianship.
When I think about what it means to be a librarian, I see our work as a series of small connections that we make every day: connections with our students, our coworkers, our faculty. We connect our students with a source they need for their paper, connect them with a good book, or provide them with a quiet place to work. We connect with colleagues, with books we love and want to share, with changes in our field. Most of these things we do quietly as we go about our day, small action upon small action that forms the foundation of our work. But what happens when things change almost overnight, as is the case with our current situation? Over the past few weeks, I’ve been struck by our ability as a profession to maintain and strengthen our connections to each other and our school communities. In the midst of these sweeping changes, I see people I admire and respect keep adapting to change and making changes, however small, that add up to our ability to address the real-world problem facing school libraries and librarians everywhere—how to support our communities as we transition to online learning.
Communication is Key
These past few weeks, it’s become increasingly clear that an effective communication channel is key when you can no longer answer a colleague’s question over lunch or help them when they drop by the library to run an idea by you. I’ve been asked questions as varied as who to contact for help with copyright questions or how to find an online version of a text being used. The library is often the informational hub of the school, so what can we do to let our community know that we’re still there for them aside from sending another email to an already overburdened account? Emails and newsletters are great for quickly getting the word out, but how often have you scrolled through your own email searching for a needed link that’s gotten buried in your inbox? Adopting a “show don’t tell” approach to school-wide communication can be that one small change we offer on our resources.
Highlight Your Most Valuable Resources
If you have LibGuides CMS, then your library website is probably on that platform. Our library team took a close look at our website to see what small changes we might make to support our newly-online learning community. Since finding out we would be moving our classes online, we created two LibGuides specifically for online learning: the first was structured with tutorials around the tools faculty would need to get started such as PowerSchool, Zoom, and Screencastify, while the second organized ed-tech tools by specific tasks. We wanted those guides and the one for our Academic Resource Center easily accessed, so we placed them front and center in our tabbed box. Although I’m a proponent of flat design, I used a drop shadow to make their appearance pop, along with a prompt to “Click” for each guide, again something not normally included—but these are not normal times. Prior to COVID-19 social distancing directives, educators had the option to use technology, or not. Now, there is no option; so our job as librarians, as I see it, is to do everything possible to make our resources user-friendly for every level of user. Since March 9th, the three featured guides have gotten a total of just under 3,000 hits. Small changes, big results.
Add Help at the Point of Need
If you’re like us, I imagine your community will be spending most of their time accessing content for courses through your school’s LMS, library website, and LibGuides. Common sense—and usability studies—tell us that help, like information, should be offered when and where it’s needed, in the format that’s most helpful to the user. Both of our new guides provide our teachers with the tools and information they need to create content and teach in ways that may be foreign or difficult. This transition is stressful enough; offering help on the three guides featured on the library website, in addition to the website itself, was another small change we could make that just made sense.
Enter LibWizard Lite, a LibGuides module that comes free with LibGuides CMS. Although it’s not as robust as the subscription level LibWizard Full, it allows you to create forms and surveys, which are a perfect way to increase your visibility and make it easy for your users to contact you at their point of need. Although I have been a LibGuides enthusiast for close to 15 years, I have never fully explored or mastered LibWizard. At a time when we are asking everyone to move out of their comfort zone and try something new, it made sense for me to do the same. So I watched a few tutorials, made a few test forms, and finally came up with a help desk tab that was added to both of the new online teaching guides, in addition to our library website and course guides with current research projects. The tab was styled bright red with all caps reading HELP DESK. We tried different wording but ultimately felt everyone was familiar with that term. When clicked, the pop-up window contained information on who to reach out to for specific questions and included links to our Calendly pages for scheduling appointments and email for simpler questions. Again, help was there where it was needed.
Small Changes, Big Results
I absolutely love this one small change we made to our guides which made a big difference for our users. The tab is anchored, visible on each page of the guide, and moves as the user scrolls. Excuse me while I geek out—but what is not to love about my new favorite tech tool? Below you can see some of the ways we customized the help desk pop-up depending on the purpose and audience for the guide.
Like LibGuides, the LibWizard module is pretty user-friendly on the backend. There are drag and drop options with fields that allow you to customize your form, as well as a question bank to save and reuse common fields. You’re able to gather the information that will allow you to better meet the need of your user. Simple to use, easy to duplicate, multi-use functions make using LibWizard a winning situation for our users and for us. Now excuse me while I find another guide that could use a help desk tab.
I was already in the process of writing my first blog post when I shared a bus ride at the AISL Conference in Boston with David Ring, Library Director at Pomfret School. He had attended Designing a User-Friendly Website session I presented at the 2017 NEAISL Conference at Cheshire Academy, and mentioned he made some changes to the design of his site, which now has his search box front and center. At conferences, as on this blog, you share your passions and hope that someone takes away something of value, so it was heartening to hear about David’s experience.
Designing or redesigning a library website can feel like a daunting task, especially if you are in the middle of a busy school year or have never tackled a project of this scope. Over the course of four months, starting in September 2018 and running through January 2019, I worked on the redesign for our library website here at Kent School. I was fortunate to work with a great team: Amy Voorhees, Library Director; Laura Zibro, Digital Resources Librarian; Rebecca Klingebiel, Asst. Cataloging Librarian; Joseph Russo, Asst. Circulation Librarian; and Bethany Booth, Director of the Academic Resource Center—all of whom gave invaluable feedback on the students and the school. The final result? Our new library website, which we officially launched March 26th of this year.
Whether you are looking to update your site to increase its usability or are creating one from the ground up, designing a user-friendly site begins with a focus on your users, why they come to your site, and then presenting it in a way they will actually find useful. It’s really all about the user-experience (UX). This post presents one way to think about that process and will walk you through five steps to follow, keeping usability and UX foremost in your planning and implementation.
Step One | Understand Your User
How well do you know the research habits and information needs of your students? The first step in creating a user-friendly website is knowing where your students go for their information and why. There are any number of ways to collect data. You may need to try more than one approach to get the information that will best help you in the design process. Here are a few I’ve used in the past.
Database Access If students are required to use databases, how do they access them? If you use a content management system like LibGuides as a jumping-off point for research projects, you can view usage statistics to see how your students access your guides i.e., the entry points.
Broad Surveys Surveys provide a wealth of information. Do your students know about all of your electronic resources, the equipment you loan, or citation management tools available? In the busy life of a student or faculty, it can be difficult getting them to respond to surveys, so including names in a raffle or offering a small reward when completed forms are turned in increases your chance of a higher response rate. Survey Monkey, Google Forms, or a simple paper survey are all formats you can use to collect data. Use what makes the most sense for you and your community.
Targeted Surveys Targeted surveys generally reach a smaller audience but can be just as valuable. Try having students complete a survey at the start or end of any instructional session offered through the library. An entrance or exit ticket works fine for this.
One-on-One Conversations Since we work in small institutions, take the time to speak with faculty and students about what they would like to see. I taught two semester-long New Student Seminar courses for new students this year and frequently talked with them about the challenges of finding library resources. This type of information is invaluable because it’s informal and there’s no pressure for them to “give the right answer.”
Your Own Experience Think about the information you use on a daily basis; if it would be helpful for you to have all those links in one place, it will probably be helpful for others. Are there questions students ask of you on a daily basis? For me, students frequently asked where books were located in the library (ours are spread across two floors), so I made sure to include a map of the library. It was a small addition with big impact. I noted the resources I bookmarked to add to the data. Asking others which resources they have bookmarked can also help you identify those used most often by your community.
Analyze Your Results Collate your results and use them to help define categories of information, resources, and services. If you plan to do a card sort later on, start by using these results and see how your users would organize them.
Be Open to Feedback Be open to what your users are trying to tell you. It’s easy to feel defensive if the feedback is less than positive, especially if you think your site is meeting your community’s needs. Try to remember, the feedback isn’t personal and will help as you move to Step Two.
Step Two | Form Follows Function
These three simple words will help you to distinguish between focusing on creating a visually attractive website and creating a purpose-driven website that is easy for users to navigate.
Define Your Goals The data gathered in Step One will help to inform your website design. Start with defining goals for your library website. What do you hope to accomplish? What are the information needs of your students? It’s natural to want to include everything and difficult to decide what to leave off. Your goals are something you can turn to when struggling to decide what makes the cut.
Categorize Your Data You will find there is more information than you can include links to, so try to define broad categories. This will help keep your navigation simple. Again, a card sort is a natural extension of this data organization.
Design for Your Audience Keep in mind an elementary or middle school website will look vastly different than a secondary school website. Likewise, if your school is project-based, your website just might differ from that of an International Baccalaureate school. Keep this in mind as you window shop.
Highlight Your Search Box Research shows most users come to the library website to do research. Put your search box front and center to make your site invaluable to your users. Need evidence? Check any college library website.
To Parallax or Not to Parallax Current website design trends employ the use of a single page and parallax scrolling of text over stunning graphics; gone is the homepage on most sites. Keep in mind this design may not be the best for your library website, which is really more a portal than a destination. Large graphics can be distracting and the endless scroll can be a difficult way for your user to find specific information or for you to include the numerous links you’ll probably need. If you’re set on following design trends, make sure you customize it to meet your users’ needs. Be willing to let go of a particular design if you find it’s just not working how you envisioned. Curious about parallax scrolling? Check out what the user experience gurus at the Nielson Norman Group have to say.
Adhere to Style Guidelines Check with your Communications Department for style guidelines – every school has them. While you may not choose to do so, I think it’s important to come up with a library brand, then keep your overall website design true to your school brand. My site has a classic, traditional look because my school website has a classic, traditional look. I want my users to know they’re on the John Gray Park ‘28 Library website, so I aimed to keep the essence of the school site, not necessarily mirror it.
Window Shop Get out there on the web and see how other schools in your demographic have organized their website. Check out university websites, as well. They need to organize exponentially greater amounts of information, but you can get a good idea of the overarching categories they use that may align with ones you’ve already identified.
Step Three | Create a Wireframe
Once you have defined the information needs of your users and the tasks they come to your site to perform, create a simple wireframe to help you visualize your site. A wireframe is a simple black and white drawing or schematic that focuses on navigation, placement of features, and page elements. This stage of the process doesn’t address the design, content, color scheme or typography – that will follow in the prototype design. Skip this step at your own peril.
Use a Flipchart I prefer to use a flip-chart to create a wireframe. The large size makes it easy to sketch my ideas quickly and I haven’t invested too much time if I decide to scrap it and start over. You can really use anything for this step, even a whiteboard as long as someone doesn’t come along and erase all your hard work! This is the final iteration of my flip-chart wireframe, but if you look closely at our website, you’ll see I eventually moved the EDS OneSearch to the second tab – here I have it on the last one.
Establish Navigation Once I have my first iteration of the design on paper, I explore navigation, content, and elements. Much like a research paper, creation of the wireframe is an iterative process. Because I prefer not to have additional navigation tabs on my portal, it was important for me to carefully organize the links within the portal itself. Using a card sort can be helpful at this point if you are starting from scratch because it gives you insight into how your users would categorize, or sort, information. Here is a great video to give you an idea of how to do this.
Create a Final Copy Once I’m happy with the wireframe, I’ll create an electronic copy. I use Google Slides which allows me to easily convert my scribbles to ordered boxes and text, but any tool you find helpful is fine. I find it much easier to share a wireframe slide than a paper one.
Look for Problems It’s much easier to find navigation and content issues at this stage and correct them before you go live. You don’t want to be trying to fix issues while the site is live—trust me, it’s stressful!
Take Your Time Those who know me know I love to work quickly to get something into the hands of my students and faculty. But … I have learned it can be a positive growth experience to take time before the release to look for weak areas and make small changes to avoid future problems. It is so important that your site be as well-functioning, intuitive, and as error-free as possible. It may sound trite, but first impressions do matter. Aim to have your users’ first experience with your new site be as positive as possible, because change. is. hard.
Step Four | Create Your Website Prototype
I’ve used everything from Adobe Dreamweaver to WordPress to LibGuides to create library websites. For the past nine years, LibGuides and LibGuides CMS has been my platform of choice; it’s designed for functionality and ease-of-use, plus allows for continuity with your current guides. Our students are familiar with using them for research, so designing the library site on the same platform was a no-brainer. Using my wireframe, I begin to build the site following these guidelines:
Keep it Simple Simplicity and usability go hand-in-hand. Follow your school’s Style Guide for color and text choices. Use a color palette that has no more than three or four colors. Use serif text for headings, but stick to sans-serif for the body text as it is much easier to read on screen. Our site is heavily customized using CSS, but that’s not necessary. If you are interested in customizing your site, you’ll find helpful videos on the Springshare site, and direct support through their helpdesk and the community of users on the Springshare Lounge.
Position Your Search Front and Center This is the primary reason users come to your library website. Make sure you only have one search engine visible at a time. Tabbed boxes work well if you want to make the best use of your prime area above the fold. We are currently doing a trial for EBSCO Discovery Service, so it was important to keep that accessible. Our Library Director wanted to see the research guides above the fold and I was having a hard time envisioning how to do that. I decided to try creating widgets and it’s turned out to be a great addition for our users. Without the widgets, folks would need to drill down to the guides landing page, then click on the subject and then on the specific guide. Now, they can choose the guide and in one click access the information needed. If you haven’t tried creating widgets for your LibGuides, put this on your to-do-now list! Remember: users also scan and skim in an F or E shape, so try to keep important content along those sight lines.
Tabbed Boxes to the Rescue Because I wanted to make the most of the top area of my main column, I used a tabbed box for the following: our OPAC search box, EDS search box, research guides, citation guide, and information on how to create an account for our NYT GroupPass and other major periodicals. That’s quite a lot of information sharing “prime real estate” on the portal.
Pare Down Your Navigation The more navigation tabs you have on your site, the less intuitive your site will be. The new Kent library website was designed as a single page, forgoing tabs. I prefer to have all of my links located on one page so my users will have fewer navigation decisions to make. Although it’s tempting to add as much information and links as will fit, this will overwhelm your user and can lead to cognitive overload, never a good state of mind. Choose five or six main categories to link out to. And avoid the endless scroll – it can be frustrating to scroll back and forth to find what you need. Above the fold is prime real estate, take advantage of that. I keep my search boxes and guide widgets front and center and then work out from there adding additional resources.
Do Include the Most Important Information Hours, early closings, room reservations, contact information, and news and events should be listed, if possible. Don’t overwhelm your site with lengthy descriptions. Keep them short and to-the-point. I have organized information about our library in one tabbed box: hours, staff, map, and a link to our Academic Resource Center. We don’t have online room reservations, but if we did, I would try to include it there. At some point common sense has to prevail. You will get lots of feedback about what should be on the site, so be prepared to give it your full consideration, but also be ready to exclude something if it falls outside the scope of your vision.
Tabbed Boxes to the Rescue, Again Again, the tabbed box in our left column let me fit four times the information in the same amount of space.
Avoid Jargon or “Librarian-speak” Boolean, full-text HTML, trade publications – this is confusing terminology for most users. I love to nerd out over jargon, but when possible, use informal and conversational language. Instead of ‘Catalog’ try ‘Find a Book’. Your usability study will help identify confusing and off-putting language.
Step Five | Test Early – Test Often
Finally, you have your prototype. At this point, the only way you will know if you hit the mark with your website is to conduct usability tests with your community. It takes a surprisingly small pool of users to find your website’s weak spots. It’s important to remember, usability testing isn’t a “one and you’re done” thing. You must “test early – test often” to find issues and improve the user-experience of your site. So how exactly does a usability test work?
Find a Handful of Users You don’t need to have dozens of users to test your site. Nielsen (2012) found that five users representing your user groups, i.e., faculty, students, etc. is enough to find the flaws. Give your testers small incentive items such as a gift card for Starbucks, your bookstore, etc. for taking the time to help you improve the library’s website.
Ask Them to Perform Typical Tasks First, identify three to five tasks your users do on a regular basis. These are called representative tasks and need to be realistic and actionable (Nielsen 2012). Create a scenario around the tasks (or activities) and ask users to complete them. Let your users know that you are testing the site and not them.
Have Users Talk Through the Task Don’t ask users to tell you what they would do, ask them to complete the task and talk through it out loud. For example: I need to find an article on the Revolutionary War. I’m looking for a place to do a search. I see the main search box for EBSCO, etc. Don’t give hints, clues, or suggestions. This is hard, especially if your user is struggling. Put a time-limit and if they can’t complete the task successfully, assure them it’s fine and have them move to the next task.
Measure the Percentage of Tasks Successfully Completed Figure out where most users had difficulty. Make small changes and test those changes. Have the process be iterative. The more tests you conduct with small groups, the greater the chance to find usability flaws and correct them.
Perform Your Own Usability Test Before you launch your site, have your staff and any other folks whose input you want use your prototype on a daily basis. If using LibGuides, publish it as private or wait to create a friendly URL – no one will find that wonky string of letters and numbers. You’ll know if your design is spot on – you’ll enjoy using it and want to share it with others right away! You also might find a design flaw you otherwise wouldn’t before the launch.
Prepare to Be Surprised by the Results The first time I did a usability test on LibGuides, I was truly shocked to discover both faculty and students thought the guide search box could be used to conduct a Google-type search. When they didn’t get the results they were expecting, most were stumped as to the next step to take. Maybe you wouldn’t make the same decision I did, but after seeing all the testers struggle, I removed the site search box from the guides and haven’t looked back or regretted it.
Launching Your New Site
Once you’ve completed your usability study, you’re sure your links* are going to the right destination, your search box and other widgets work, you’ve edited for typos, checked images, text, and color contrast for accessibility, you’ll want to roll-out your new site during a relatively quiet time of the year. Making a change during periods when people rely on your website can lead to a negative first impression, something you’ll want to avoid.
Start with a Soft Rollout
We planned to launch our new site after Spring Break as it’s a fairly quiet time before AP research paper season in May. Several weeks prior to March Break, we chose a soft rollout using a button on our then current site encouraging users to “Try the New Library Website” (above right on the image). We kept track of our usage statistics, which showed we had over 250 hits in the following weeks. Since we didn’t receive any negative comments, we felt fairly confident that the launch would go smoothly. We still use the Koha library catalog page you see, which was our library website before the redesign.
*A point about links I set my active links from the website to open in a new window so I don’t lose my users if they close the window instead of clicking the back arrow on the browser. On a regular guide, I have tabs open in the same window, and any external links open in a new one. You can set the default window target for links in the Admin System Settings.
Position Yourself for Success Finally, make sure you market your site once you roll it out. If possible, set the home screen on any library computers to your site and send a school-wide email to let your community know it’s live. You will need to continue marketing your site – I know it may come as a shock, but not everyone reads their emails!
Baby Steps As we all know, change doesn’t happen overnight. Even though we did a soft rollout, sent an all-school email with a link, set our library computers homepage to the website, we didn’t really know how it was being widely received. Cue research season: that wonderful time of the year when AP Exams are finished and students take part in the time-honored tradition of researching and writing the long-form research paper. A number of our AP U.S.History teachers have been bringing their classes to the library to work and for formal instruction, which has given me an opportunity to introduce our students to our new library website “in the field.” I’m happy to report “show, don’t tell” really does make a difference! Our final website has gotten quite a bit of use in the time since its rollout—just under 3600 views! We’re thrilled with how it’s turned out and think our community is, as well.
Final Thoughts | Your Website is a Living Organism If you’ve followed some version of these five steps, you really shouldn’t need to make any major changes to your site, but do expect to occasionally find small issues that need to be addressed. About a week into our site going live, I was obsessively checking links and found one for The New Yorker icon mis-directed to The New York Times. Keep in mind a small army of librarians reviewed the site and somehow that one slipped through. Things happen. It was a simple fix, but a good reminder that your site, like your library, is a living organism that needs regular attention to function at its best.