During Super Bowl XLIII, there were a few terrific and a few terrible commercials. Pretty much every advertisement was tied into a website address, so we decided to take a look at them and use a couple as examples in today’s Terrible and Terrific Tuesday (T&TT). There were plenty of terrible websites, and few terrific ones (if any). The two sites we’ve chosen for today are: Audi.com and Teleflora.com
Terrible: Audi
Overall, there are some basic usability principles that the site is violating, from the right aligned primary navigation and logo, to the mismatching calls to action (continue the chase vs. participate in progress), and the appearance that the video is too large for the layout, but I’m not going to get into those problems.
What really prompted me to use the Audi site was the use of the horizontal navigation menu to browse through cars.
We recommend against horizontal type fly-out or hover menus in most cases and this is a great example of why. Users typically move the mouse towards a target on the page in somewhat of a straight line. Acceleration is fastest at the beginning of the path (meaning the path is more like a straight line), and then slows down when the user gets closer to the target (more possibility of path change since mouse movement is slower). The problem with this navigation example is that when the user hovers on a series model (A5 for example) and then moves the mouse toward the actual vehicle picture to click on it and learn more, the mouse accidentally hovers over the neighboring series model (for example, A4) and displays vehicles of the other model.
This can become a frustrating experience for users, as they are expected to make unnatural mouse maneuvers in order to click on a specific vehicle picture. The space to move the mouse down after hovering over A5 is extremely small, around 40 pixels wide, or about 2 widths of the mouse icon. This detracts from what the user really wants to do (learn more about the A5 models) and forces them to make an effort to move the mouse in a specific path in order to continue.
If we ran user testing on this navigation, I am certain almost all users will experience this same frustration. Try it out for yourself.
Terrific: Teleflora
By far from being a perfect website, out of the bunch of Super Bowl commercial websites, the Teleflora website was one of the better examples. The website does a few things right.
The marketing message on the center of the page has a clear call to action associated with the images. To the bottom left, there is a link tying back the Super Bowl advertisement to the website. The primary navigation categories are easy to understand and are relatable to customers visiting the site.
I can see plenty of usability problems with this site as well, but this was one of the few sites that were not Flash based and achieved a clear and specific goal for customers: Buy Flowers.
