Make Your Website Better

Yesterday I met with the web team at the University of Virginia College of Arts & Sciences to review results of user testing we conducted to learn more about the usability of a design template for academic departments. We conducted the test at the end of April, timed to take place before students began studying for finals (it’s hard to recruit volunteers because their first priority is studying, not volunteering for user testing).

We (Russell Holbrook and I) tested six undergraduates, and recorded these sessions using Morae software, which captures what’s happening on the screen and records the tester’s face and voice as they narrate what they’re thinking as they complete each task we’ve given them. It was fascinating to watch the sessions after having facilitated them, and the web team, headed by webmaster Wendy Repass (who hired me two years ago to work with the team on usability issues), got to see how users interact with the site they each work on every day. I noticed some behavioral patterns that I had missed while I was facilitating, and I strongly recommend recording user testing sessions for later review by the web team and to share with stakeholders in order to reinforce key insights and recommendations.

Here’s the best part of the whole process: One of our testers, at the end of her testing session, asked us whether we had changed the site recently. She said that it was much easier to use than when she had last used it a couple of years ago. The web team did a complete overhaul on the site’s architecture, navigation and content, but made only minor tweaks in the graphic design. That meant that the tester noticed that her user experience was much better than previously, with having the more obvious and traditional cues that changes had been made. And her comment bears out the fact that sites can be significantly improved without undertaking the expense of redesign.

In this post, I’m focusing on what the team observed and learned. The changes that will take place in response to the testing are still under discussion and development.

Review of the sessions reinforced the basic research on best practices.

UVA Departmental Template, top half

First and foremost, users scan the screen, and their scans are fast and superficial. They’re looking for “eyebites” — cues related to the task they were asked to perform. Local navigation links for the departmental template are placed in the upper right corner, and several participants didn’t see this navigation section until other search strategies they tried had failed. In addition, fast scanning meant that they only glanced at the first word or two of a link, and sometimes that led them to select the wrong link.  

Placement of local navigation on the right is a legacy of a design overhaul that took place about three years ago. The team has been focused on how to make the site more usable without overhauling design yet again.

Users Scan in an "F" Pattern

It was clear from what they didn’t see on the page that their scanning followed the familiar “F” pattern. They scanned across the top and down the left side.  That led them to the contextual text navigation links at the bottom of the page. But those links didn’t allow them to complete all the tasks that were part of the text. To do that, some of them got lost in the larger College site, found their way back to the Departmental site, and were forced to look more carefully at the screen in order to discover the upper-right navigation.

In watching the tape of their sessions, we also saw a couple of them hover the cursor on the “Undergraduate Programs” section title shown in the red circle in the screen capture below. That was something we had not spotted during the actual testing. We weren’t sure whether it was the “mouse” equivalent of doodling while they were scanning the screen, or whether they wanted to use it to navigate. We decided that those headings should be converted into clickable navigation links. We would probably not have discovered this without having seen users interact with the screen.

Tweet This Post