Usability Tests and Low-Hanging Fruit

illustration of an apple treeThe first round of usability testing with the new homepage design is complete, and I first want to thank all the current students who participated. I was hoping for 10 volunteers and got 16, so thank you again for taking the time to help out during what I know is a really busy time of year.

There are already some very simple fixes in the works as a result of these observations. Call them the low-hanging fruit, or the “forehead slappers:” there are always a few obvious-in-hindsight changes to be made to any design as soon as you actually watch someone in the act of using it.

For example, in the very first session, I asked the student how they would go about finding the email address of one of their professors. He promptly entered the professor’s last name in the search box at the top of the screen and hit “Phone/Email Directory.” However, that box is the site search, not the directory search, and the link just takes you to the directory. The student figured this out immediately, but since the search box just said “Search,” a simple change to “Search” might help users understand what it is they are searching before they begin their search.

Some other fairly simple observations/fixes:

  • About half the students when asked what they would do if they needed to find out information on how to do a semester overseas, knew the name of the Study Abroad office and just did a search, which brought them successfully to the information they needed. They other half browsed for the information, and most of them started under Academics. But there is no link to Study Abroad on the Academics subhome. A handful also started at Academics when looking for the Blackboard login. Potential solution: Add a section for “Academic Services” to the Academics page.
  • When asked to find out about internships they might qualify for, again many students knew the Career Center by name and just did a search. Others browsed and started with Working Here. But there is no link to the Career Center from the Working Here subhome. Potential solution: Add a link to Career Center from Working Here (duh.)
Tomorrow, we’ll tackle not so much a forehead slapper as a head scratcher–the return of the dropdown menus: yes or no?

Usability Testing: What Is It?

For the rest of this week and into next, I’ll be conducting usability tests with about 20 current undergraduate students. It’s one of my favorite parts of my job, but what does usability testing mean?

Basically, students will be coming to my office one-on-one to use the University homepage as a starting point to accomplish a set of pre-selected tasks. They will also get a chance to do some tasks that are important to them — things they do frequently or have done recently. During this time I ask the students to “think out loud.” If they’ve paused for a minute, what are they looking for? Why did the click on a particular link, or search for a particular term? What aren’t they seeing that they expected to see? Each session takes only about 45 minutes, and each student’s actions on the screen and comments are recorded for future reference.

This approach is what I call the Steve Krug-ian model of usability testing. Steve Krug is famous in usability circles for his book and philosophy of the same name: Don’t Make Me Think. His basic point is that you will learn far more about the success of your website design (or the design of anything really: a coffeemaker, a DVD player, etc.) by watching three people actually try to use it than you would if you sent out hundreds of surveys or conducted dozens of focus groups.

Because unlike focus groups and surveys, usability testing is more concerned with what users can do or not do on a website than what users like or don’t like about a website. Of course you want to design a site that most people find attractive and pleasing, but so much about design and aesthetics is subjective. One person’s “rich and elegant” is another person’s “dark and depressing.” One person’s “clean and simple” is another person’s “stark and boring.”

The goal of usability is to get at what works or doesn’t work. For example, if half the people you test never notice the search box, or can’t find the campus map, this is a bad thing. But if some people think the search button should be blue, and others think it should be white … well, we could go back and forth about that all day.

More updates on what these tests reveal will be included here in future posts, so stay tuned!


Of Dropdowns and Flyouts

The only real functional change we’ve made in the new homepage beta is the elimination of the dropdown menus that were there before (other changes involve aesthetics, content, or underlying code). I have noticed a few comments and questions about this change, and it is definitely one that we will be testing specifically to see how it affects users’ ability to find content from the homepage. For people who are familiar with the old homepage navigation and who had their favorite method of getting to their most visited pages, any change can be disruptive. But how do dropdown menus affect people who are not familiar with the University or its website?

The reason for trying to eliminate dropdown or flyout menus generally is that they don’t often work as expected on newer touchscreen devices like the iPad and other tablets. Dropdowns usually work on “hover;” you hover over a menu item with your mouse and are given the option then clicking on the original item or one of the sub-items. On touchscreens, there is no “hover.” There is only touch. This can lead to touchscreen users having to click a menu item twice before anything happens, or getting stuck behind a dropdown that keeps popping up.

During usability testing I am planning to divide users into two groups: one group will use a version of the site with dropdown menus and the other without. I’ll be curious to see how significantly — if at all — the absence of dropdowns affects people’s ability to quickly find other sites and content.


Tabs or Ticker?

Another change we’ve made in the latest mockup of the homepage redesign (check it out here) is to replace the earlier ticker with a news “tabs” layout for news and events. (You can see the original ticker in action here.)

Some users commented that they liked the ticker, calling it “cool,” “neat,” and “interesting.” We certainly liked it, too. The idea behind the ticker was to be able to give individual news items their “moment in the spotlight” while still conveying the sense that there were lots of different things happening in the life of our major research University every day.

Though we liked the ticker approach, we did have a couple concerns: would users stop and attend to the ticker long enough to get the impact of the scrolling stories and actually read and learn about the stories were were trying to communicate, and would they think that anything that moved around of its own accord be more annoying and distracting than useful?

The answers to those questions were “no” and “yes.” No, users did not stop and read individual items as they passed by. Even prospective students in our initial usability studies, who commented that they liked the ticker, still didn’t bother to engage with any of the information it contained. And yes, faculty and staff visitors said they found the ticker irritating.

Hence the new “tabs” design. By using tabs, we can still convey the notion of “lots and lots of stuff” in a nice, tight space. I also think each of the news items gets a little more focus and attention in the new tabs design than they would have received if users had to wait to see them scroll by in the ticker.

Lastly, we’re playing with the idea of using “cutout” photos in interesting ways here, to visually draw attention to important stories and convey a sense of depth and even fun in this space. (Check out an example of a news item “cutout” here.)