The new Extension website: behind the site-building, part 2

We recently completed three days of usability testing and analysis in the University's Usability lab! Here we are settled in the Minneapolis facility with coffee and chocolate, first thing in the morning.

In today's blog post, I am going to take you behind the scenes of what we learned about the website build through watching real users navigate through it.

Footer

The footer design was tweaked after user testing showed that users "mistook" it for actual content. Not that a footer isn't important! but it should read as background info, not something you include in your scan of every page when you're looking for spider content. We toned down the graphic-ness of it so that it blended in more:

Search

Our search performed great at user testing. Every time a user searched and found what they were looking for, there was a celebration in the (sound-proof) observation room next door. FIST PUMPING! HIGH FIVES! But we did discover that users are no dummies; and when they see "Search" in a University-branded header, they assume they are searching the big University, and not just Extension. Easy fix: we changed the search box text (this is called "hint text") to say "Search Extension."

Mobile View

Users tested our new site using an iPhone and a desktop computer. The mobile view tested overall well, but testing revealed we needed to make a few technical tweaks. One user did not notice our menu button! EGADS! FIST SHAKING! CHOCOLATE EATING!
So first thing, we increased the size of the word "menu" on the mobile view. Now it is pretty hard to miss.
Next, we noticed users having to be very precise about where they tapped, so we increased the space between menu items. This prevents the highly technical problem known as "fat fingering" the wrong link.
Last, we are examining the valuable real estate available on a small phone screen--we already condensed the images and are considering condensing the breadcumbles too.

Here's the same screenshot on desktop and mobile view:

Mobile:

Keep an eye out for our next Quick Bytes Behind the Scenes post, in which I'll show how we're implementing our "Courses and Events" section/calendar. Events calendars can quickly boggle my mind. We have needed many heads put together on that challenge. You may even be asked to usability test it yourself!

Until next time! --Amy