As I mentioned in my last post, we’re doing a design refresh of our library website, with a goal to make it “beautiful.” As such, we’re not touching much of the organization. But of course we have to pay attention to not just how the information is categorized but also where it appears on the page. We learned that a few years back when we tried adding a “Spotlight” feature near our Library Hours (tl;dr: people stopped being able to see the Hours when other content shared the space). So we are firm believers that user testing and iterative design is vital in making sure we don’t make parts of our site invisible by moving elements around.
After the results of our user research earlier in the fall, we came up with a design drawn from the sites that our users liked most that also worked within our current site structure. The layout was essentially the same, with three major changes:
- We pulled “Quick Links” out of the menu and put it in a box on the front page
- Hours moved from a box on the side to a banner under the search box
- Our Help and Chat button also moved to this banner
We wanted to do user testing to make sure that users could:
- find today’s hours
- get to the full set of hours
- figure out how to access help or chat.
We also asked them if there was anything they hated about the draft design. Just to flag anything that could cause problems but that we weren’t specifically asking about.
Since we were doing this testing early in the process, we didn’t have a live site to show. Our Web Developer, the fabulous Kevin Bowrin, built the mockup in Drupal since he’s more comfortable in Drupal than in PhotoShop, but it wasn’t on a public server. So we used a printed screenshot for this round of testing.
The first version of the design had a grey banner and small text and it was clear after talking to a few users that visibility was a problem. We only talked to 4 people, but only 2 saw the Hours and they were really squinting to make it out. Finding when the library is open should be really really easy. We decided to increase the text size and remove the grey background.
This time, even fewer people saw the hours: 1 out 6. Since people didn’t see today’s hours, we couldn’t even get to the part where we tested whether they knew how to access the full set of hours. We decided to see if adding an “All Hours →” link would help; perhaps by echoing the convention of the “View More →” links in other parts of the page, it would be clearer that this section was part of the content.
Again, quite quickly we saw that this section remained invisible. Only 1 person in 5 saw it. One user noticed it later on and said that he’d thought that part of the website was just a heading so he ignored it. Clearly, something was making people’s eyes just skip over this part of the website. We needed another approach.
Kevin and I talked about a few options. We decided to try making the section more visible by having Library Hours, Help and Chat, and Quick Links all there. Kevin tweeted at me after I’d left for the day: “Just dropped the latest iteration on your desk. I kinda hate it, but we’ll see what the patrons have to say!” I had a look the next morning. I also hated it. No point in even testing that one!
We decided to put Hours where the Quick Links box was, to see if that would be more visible. We moved chat down, trying to mimic the chat call-out button on the McMaster Library website. Quick Links were removed completely. We have some ideas, but they were never a vital part of the site so we can play with them later.
Success! Most of the people we talked to saw the Hours and almost all of them could get from there to the full set of hours. (I did this round of testing without a note-taker, thinking I could keep good enough track. “Good enough?” Yes. Actual numbers? No.) The downside was that most people didn’t notice the Help and Chat link (not pictured here). However, I think we’ll really need to test that when we can show the site on a screen that people can interact with. The “always visible” nature of that button is hard to replicate with a print-out. I feel like we’re in a good enough place that we can start building this as more than just a mock-up.
Oh, and no one we talked to hated anything about the design. A low bar perhaps, but I’m happy that we cleared it.
We did all of this in one week, over 4 afternoons. For version 3, Kevin just added text to the screenshot so we could get it in front of people faster. Quick iterating and testing is such a great process if you can make it work.
Next steps: menu interactions and interior pages.