Archive for February, 2009

Bad Friday [updated 3/10/09]

Friday, February 27th, 2009

A couple of terrible websites we noticed today that we had to blog about.

1. Skittles.com

I’m not sure when this site launched, but it’s definitely unconventional.

No, that’s not the wrong screenshot… that’s the actual Skittles.com homepage. It looks like a Wikipedia page and has a bunch of different instruction / disclaimers bombarding the user right away. Will someone recognize this as the Skittles website and take the time to read the instructions?

An age requirement for reading the Skittles.com website? I’m sure a lot of kids eat candy, and they’ll be trying to look at this site. I hope there’s no adult content on a candy website. The prompt also asks for the user to “Accept the Terms and Conditions,” which there is no additional information provided besides what you see in the box.

So essentially the entire site is made up of social media websites and other online resources, with an overlay navigation at the top left of the page.

Here’s how the navigation maps out:

  • Home -> Wikipedia
  • Products -> a mix of Skittles.com’s own pages and Wikipedia
  • Media -> YouTube and Flickr
  • Chatter -> Twitter
  • Friends -> Facebook
  • Contact -> Skittles.com website

Most of the pages take the user to social networking websites, and a few take the user to Skittles.com’s own webpages. This ends up being a confusing experience, especially for users who do not have any idea what Flickr or Twitter is. For those who do know what each of those social networks are, is embedding those social networks onto the Skittles website really going to provide additional value for them? On top of that, the experience is not unified which does not lend itself to be seen as trusted content. Skittles has missed its opportunity to be the authority on skittles.

The Skittles.com website exemplifies what happens when usability is not a priority and the user is considered last. Skittles may have conducted a focus group and found out their customers use social networks, but they took that information and built a site that didn’t incorporate usability testing to see how users actually use and accept this website.

UPDATE: Apparently if you’re younger than 13 years old, you get this error message and all links on the page are disabled. I didn’t know that people under 13 were too young to read nutritional information about their favorite flavor of Skittles.

If one was to say their strategy was unique, one would be wrong. Modernista! was the pioneer- skittles merely mimicked them.

After launching the site, they have had to change their homepage 3 times:

Day 1: 2-27-09 Homepage redirects to the wikipedia page. Over the weekend, wiki tells skittles to stop it: http://cli.gs/6BuhJ4

Day 2: 3/2/09 skittles changes its homepage to twitter. Tweeters hijack the brand and has its own opinions: http://cli.gs/L0qrXj

Day 3: 3/3/09 Homepage change #3, Facebook page is now the homepage. They should have learned from Modernista’s mistakes.

2. ign.com

This one will be short and sweet. When the user searches for IGN (a leading gaming site), they see this:

When a first time user clicks on this link, they user are then presented with this page:

No, I am not kidding you- this is their homepage. They immediately serve up an ad before the user even reaches the homepage. This strongly violates the user’s mental model of:

  1. Step 1: Click on main link on search engine results page
  2. Step 2: Get to IGN homepage with IGN logo and branding and links deeper into the site

If the user waits around for about 5 seconds or so, the ad automatically redirects to their homepage. I doubt a user would even wait that long, considering studies have shown users have a 4 second limit on what they are willing to wait for.

At least IGN cookied it so that if you search for IGN again, you won’t be presented with the ad first. However, I doubt a first time user would try to go back a second considering they were thoroughly confused the first time around.

And I thought our days of Splash Pages were over, that usability has become at the forefront of every marketer’s mind. Instead, now we have Splash Pages 2.0 where ads are the new splash screens.

Posted in skittles bad-friday poor-usability | 1 Comment »

T&TT: Dissecting a Super Bowl Commercial Website

Tuesday, February 3rd, 2009

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.

Posted in horizontal flyout menus, terrible and terrific tuesday | No Comments »