With budget cuts, time restraints, and a lack of resources, it can be extremely taxing for librarians to pull together a website that meets all of the needs of its users. Luckily, there are some tips and tricks that can make a huge difference in your website’s organization, aesthetics, and—most importantly—your patrons’ online experience.
Whether you’re lucky enough to have a dedicated Web developer on staff or you you’re stuck doing a lot of your own website updates, here are some design dos and don’ts to help get the purpose and message of your library’s website across in .3 nanoseconds.
DO: Remember that less is more.
What you put on your website’s homepage is a lot like what you highlight when you’re reading an article. If you highlight everything, nothing stands out. In other words? The more you cram onto your homepage, the less your users are really going to see and digest.
Of course, you probably have a lot to say. After all, your website serves many needs. The good news? Not every need must be attended to on the homepage itself—that’s what subpages are for.
Now, some of our long-term customers might recognize the rather busy Evanced website in the image below. Clearly, we were trying to do a little too much—there are nearly 60 individual links on our original homepage. (Yikes!) With fewer links and clearer focus, our current homepage is better—but we know there is still room for improvement.
DO: Observe your website’s users.
By identifying the most common and important pieces of information your users are looking for, you can better organize your homepage and prioritize the rest of your site.
You can do this in a few ways. The first? If you really want to know how your patrons use your site and what they’re looking to get out of it, why not just ask them? You could put together a small focus group of willing participants or create a quick, online survey for free.
Need help getting started? Here are some good questions to begin with. For instance, if you wanted to know if a user is being drawn to the important information on a page, you might ask him or her, “What is the first thing you see when you look at this page?” or “What are your eyes drawn to when you look at this page?”
If you wanted to know whether users understand your site navigation or where they need to go for certain information, you might ask, “What would you do if you were trying to find our event listings?” or “Where do you think you would go for room reservation information?” (Just be sure to avoid using leading questions like, “How noticeable is the events calendar on this page?”)
But, if you don’t want to question your website users about their experiences overtly, you can choose to watch how they interact with your site online. That doesn’t mean looking over their shoulder as they browse. Instead, you can employ some analytics tools.
The first tool you should know about is Google Analytics. This free tool enables you to see how many users are visiting your site, how much time they’re spending on which pages, what devices and browsers they’re using to access your site, and much, much more.
Another helpful (and free!) analytics tool is ClickTale. ClickTale is very easy to use and understand. It provides more in-depth information on how users are maneuvering through and using your site. You can see heat maps of the elements users are clicking on. You can see users’ mouse movements. You can even see recordings of an individual user’s behavior during a site visit.
DON’T: Use serif and “fancy” fonts online.
With so many available fonts and colors, it’s tempting to use all of them, but it’s best to use restraint. Particularly frilly, fancy fonts are fine for printed posters and handouts, but they can be really hard to read on a screen, as you can see in the image below.
If none of these suit your fancy, visit Google Fonts to see all the awesome sans-serif fonts they have. You can use any of these for free.
Also keep in mind, the more fonts and font styles you use at once, the harder your site becomes to read. Try to choose just one versatile font and use it throughout your site.
DO: Slim down your images.
Images are kind of like weights for your website—except your site isn’t going to get nice and toned from carrying them around. If your images are too large, they will bog down the load time for your webpages, and this can frustrate your patrons.
Let’s say the code that builds your homepage includes an 800-by-500-pixel space for a banner, but the image you’re actually using measures 1500 pixels by 1000 pixels. That means, you’re wasting valuable pixels and slowing down your load time. Here’s how: even though the spot you’re filling is much smaller than the actual banner image itself, your site is still loading the entire image. For better results, make sure that the dimensions of the image you use match the dimensions of the space allotted for it on your website.
Not sure how your optimal your load time is? Here’s a free site to help you test it in a jiffy. Just type in your URL, and you’ll get a score on a 100-point scale and helpful details about your image sizes and much more.
DO: Be judicious with color.
Choosing a good color scheme can be tricky, because A) there are so many colors and B) THERE ARE SO MANY COLORS! Just how do you choose which ones work best for your website?
Start with your library. Do you have specific colors that represent its brand? If so, plug them into the handy, free color scheme generator at Paletton.com. Once you enter your colors, select the tetrad (four-color) scheme to afford yourself more variety.
Incidentally, Paletton.com is also useful, because it shows you how you could use your color scheme and how your colors will look to users who are color-blind. What’s more, the online tool gives you all the control in the world to select exactly the colors you want and ensures you’ll walk away with a color scheme that’s cohesive and pleasing.
Amy King is a recent master’s graduate from the School of Informatics at IU-Indianapolis. While in school, she studied Web design and development with a strong focus on user-centered design and user experience. She has helped develop and maintain both evancedsolutions.com and evancedkids.com.