Chapter 4. Easily Implementable Changes to Improve Your Website

Make Your Links and Buttons More Effective

Efficiency is doing things right. Effectiveness is doing the right things.

—Peter Drucker

Before we can talk about links or buttons, we’ve got to cover an important concept in online marketing. It’s called the CTA (“call to action”). Douglas Karr, writing for Martech, defines CTA: “A call to action is typically as a region of the screen that drives the reader to click-through to engage further with a brand.”1

Whenever you ask someone to subscribe to your library’s newsletter, register for a program, or get further information, those are examples of CTAs. They’re very common online, but very few libraries have truly mastered how to make these attractive to readers. “Getting people to perform a click of a mouse button—or any desired action—however, is never easy. It takes careful planning and strategizing to get people to heed your CTA, let alone act on it.”2 It’s simply easier for people to ignore what you’d like them to do than to, you know, actually do it.

Let’s talk about two (2) easy fixes that you can make right now.

Stop with the Dated and Vague Link Text

Which of these is better, and why?

1. “Click here for more bestsellers.”
2. “See the latest New York Times nonfiction bestseller list.”

Did you pick choice 2? You win! This does two things far better than choice 1. Firstly, it ditches the horrendous “Click here” phrase, which has long been shunned by both marketers and usability experts alike. Users know how to click a link. Using that verbiage is a throwback to the very early days of the internet when people literally didn’t look for hyperlinks or know what to do with them. So, that’s redundant, useless, and annoying. Secondly, people now do look for links. In fact, they scan text specifically for them. This means that when someone finds a link, they want to know right away what they’ll get if and when they click it. Specificity really does matter here. The first example does not explain what anyone really gets. It’s a vague promise of “more bestsellers.” Bestsellers determined by whom? What kind?

The argument against choice 2 is usually along the lines of “That’s too long!” Yes, it’s long. That’s OK. The goal is to get people’s interest, and you can’t do that if your CTA is lame.

Place It Properly

There are generally two recommended places to put CTAs. And to be blunt, those guidelines are a little wibbly-wobbly timey-wimey, because it can depend a good deal on the design of the thing containing the CTA. However, for the most part, they go either

• above the fold or
• below the post.

If you’re a web designer or developer, the first recommendation is going to make you cringe. There is no more “fold.” But the idea still applies. Put the CTA toward the top of the page or post so that people will be more likely to see it as the content is downloading.

However, putting it at the end of the post can have more advantages. Because people have to engage with the content (e.g., scroll) to get to it, the chances are actually higher that people will actually click the CTA when they encounter it, says Benitez.3

On library websites, we want visitors to do things all the time. We want them to reserve materials, register for programs, and learn new things. How we ask them to do these things can make a big difference in whether they’re actually accomplished.

Got Pictures? You’re Missing a Step

You gotta climb the steps—you can’t skip them.

—Zig Ziglar

Most library staff I work with understand that when you take an image off a digital camera, it’s huge. It’s easy to see that it’s huge; often, the photo may take up more space than the physical size of your monitor. So most library staff understand that those digital images must be resized to fit on their libraries’ websites. However, many nontechs don’t always know that you need to also optimize those images. What does this mean?

Optimizing an image means not just making it visually smaller, but also taking out useless pixels that can’t be seen by the human eye. This results in the image downloading significantly faster—a boon, not just for the inevitable mobile users, but even for the ones using a desktop or laptop on a broadband connection. According to Google, more than half of visitors will abandon a site if it takes more than three seconds to load.4 It’s in your library’s best interests to get images as small as possible—not just visually, but the file size needs to be dropped as well.

Many professional graphics programs have some kind of native optimization tool, but for most casual use, I recommend an online tool called Web Photo Resizer. It’s free, and you don’t even have to register to use it. You just upload your image (it can be up to 5 MB), then let it do the work. It shows you the original and the new, optimized image; usually, you won’t be able to even notice a difference. You just download the new one and you’re done.

Web Photo Resizer

http://webresizer.com

Getting all of the images on your website optimized might be tedious, but it’s very, very important. Users have limited tolerance for slow sites. In addition, the larger the file size of an image, the more of a mobile user’s data plan it will use. Costing library patrons literal time and money is not a good strategy for happy users.

Level Up Your Website with This One Little Thing

Sometimes a little thing gives happiness to someone. So never stop doing little things.

—Anurag Prakash Ray

Several years ago, my workplace did a study to determine the state of various issues on public library websites in Ohio. One of the numbers that was concerning was the widespread lack of a favicon. Over 45 percent of the 171 libraries evaluated didn’t have one.

If you’re unfamiliar with it, the term is simply a mashup of the word “favorite” and the word “icon.” It’s the little icon that sits to the left of the page title in the page tab in most browsers. It also shows up as the little symbol for a page in your bookmarks or favorites list. When you’re a tab junkie (let’s not talk about how many tabs I might have open at a time because I probably need professional help), those little favicons are a lifesaver. Sometimes, one can’t tell one tab from another without those because there’s simply no room for the full-page title. Or, if you’re scrolling through a very long list of bookmarks, that little icon can make finding a particular link much easier. In short, it’s a user experience issue when a site doesn’t have one.

Favicons don’t just make for a more usable site. If your site doesn’t have a custom favicon (or, worse, shows the default content management system one), that’s a branding opportunity being missed. More importantly, it shows an unfinished, less professional website.

There are basically two steps for getting a favicon for your site:

1. Create the actual favicon.
2. Put the appropriate HTML tag into the <head> of your website.

Creating a Favicon

Favicons have to be in a specific format: .ico. Not all graphics programs can export in this format, but never fear: there are tools like Favic-O-Matic that can take your image (generally GIF, JPG, or PNG) and convert it to the .ico format. Note that your original image should generally already be 32×32 pixels before you start using a favicon export tool.

Favic-O-Matic

https://favicomatic.com

If your library’s logo is too complex to fit clearly into a 32×32 block, try using just a recognizable part of it. If that’s still an issue, it might be time to get a new logo. For guidelines about what makes a good logo these days, try my three-part series on library logos, “Why Your Library’s Logo Might Be Terrible.”

Why Your Library’s Logo Might Be Terrible

https://meanlaura.com/why-your-librarys-logo-might-be-terrible-understanding-what-a-logo-does/

Using the HTML Tag

Once you have your .ico file, the next step is to put an HTML tag into the <head> of your website. If your library uses a CMS, there are generally specific ways to insert tags into the site header (sorry, you’ll need to do some googling for your particular CMS). Regardless, the syntax for the tag generally is

<link rel=“shortcut icon” href=“YOUR_PATH_TO_FAVICON” type=“image/x-icon”>

So, YOUR_PATH_TO_FAVICON might be something like:

“https://mylibrary.org/files/favicon.ico” (or, better, make it a relative URL, and use just “/files/favicon.ico”)

Favicons are important both to the user’s experience and to your library’s credibility. It doesn’t take a huge effort to add one and has a well-worth-it payoff.

Make Search Less Painful for Your Users

I did then what I knew how to do. Now that I know better, I do better.

—Maya Angelou

If your library’s website doesn’t have a search field at all, this section isn’t for you. (Your site has much bigger issues to contend with, but feel free to use this section to guide the creation of a search function. Go get one . . . NOW.)

However, if your website does have a search feature, chances are that you still aren’t off the hook. As user behavior has evolved, so have best practices for search features, and many libraries have not kept up with the data.

Where I work, we’ve been progressively implementing more usable searches for our clients’ websites as new information becomes available. I thought I’d share our changes so you may use them as a guide for cleaning up your own problems.

• We’ve gotten rid of placeholder text. If you’re not sure what placeholder text is, it’s simply any text already seen in the field before the user types any input. Originally, we thought it would be helpful to have a clue as to what to put in the search field. Turns out, it’s a bad idea. It causes more confusion for users, especially those with some types of disabilities.5 Buh-bye, placeholder text.
• We’ve gotten rid of the jargon. We’ve long encouraged our clients to avoid terms like “links” in their sites’ navigation. However, we didn’t apply this logic to search options. We provide a federated search for statewide research databases, called the Ohio Web Library. That option is one of the search choices we provide to our website clients. And that’s what we called the option to search it: “Ohio Web Library.” Nobody really knew what that was. We did provide a small link nearby, labeled “What is this?” Looking back, expecting people to click this was probably nuts. We’ve changed the search choice to “Magazines & Journals.”
• We’ve placed it right. On sites where the search box was not already in the top right of the header, we’re (slowly) getting them moved. That location is pretty much already a standard web convention, and we don’t want to make people search for search.

Those are the changes we’re making. However, in my scoping out of many other library websites, I found a couple of other common problems that we didn’t have, including these:

• Searching only the catalog. Yes, the catalog gets searched the most. But don’t hobble your users; give them an option to also search the regular website as well.
• Multiple search boxes. Talk about cognitive load! When there is more than one search box (such as one for the catalog and one for the site), users must spend time thinking about which they want. And making users think is bad. Having two search boxes has long been viewed as poor practice. Easier to implement than just one, yes. But this isn’t about you; it’s about the user.

Many library staff aren’t aware that there are usability-related best practices for a search feature. This list of dos and don’ts can serve as a handy resource for getting it right.

Notes

1. Douglas Karr, “Call to Action: What Is a CTA? Increase Your CTR!” Martech, August 7, 2016, https://martech.zone/what-is-a-call-to-action/.
2. Christopher Jan Benitez, “Make an Offer They Can’t Refuse: 5 Tactics for Stronger Calls to Action,” Problogger, January 9, 2013, https://problogger.com/make-an-offer-they-cant-refuse-5-tactics-for-stronger-calls-to-action/.
3. Benitez, “Make an Offer.”
4. “Mobile Site Load Time Statistics,” Think with Google, https://www.thinkwithgoogle.com/consumer-insights/consumer-trends/mobile-site-load-time-statistics/.
5. Katie Sherwin, “Placeholders in Form Fields Are Harmful,” Nielsen Norman Group, May 11, 2014, last modified September 10, 2018, https://www.nngroup.com/articles/form-design-placeholders/.