The usability labs in particular are essentially a 15 minute session with either myself or Jegan, where we’ll take a look at your website and provide you with tangible take-aways that you can get started on right away. Many previous attendees have left these labs, as one conference organizer put it, “glowing.” I’m glad that after my one-on-one sessions with them, they are grinning face-to-face instead of crying (which I haven’t done yet to any attendee luckily).

In the session, we take a cursory look at the organization of your website, the content available, as well as the aesthetic value. We take a deeper look at your homepage to as well as your destination pages to really understand where the usability problems exist. Are you sending users to dead ends? Are your error messages clear so users can fix the problems? Are your forms user-friendly? This is really your chance to take advantage of the information you’ve learned in conference sessions, and apply it to your current online initiatives with the help of Jegan or myself to guide you through it. Follow the links below to sign up for the conference and a free online marketing performance lab today. See you there!

Register for OMS Today for a 25% Discount

Sign-up for a Complimentary Online Marketing Performance Lab

Not planning on attending OMS San Diego this year? Sign-up for a free Virtual Usability Lab today!

See you there!

Bookmark to:

The BOL team participated in a successful beach clean up at Ocean Beach on Saturday, September 19. (yay!)

After our hard work, the team decided to find a place to relax. Once we found a spot, we opened the doors and walked in, only to be greeted by one of the staff, “We’re closed! The light’s not on!”

Not having a clue what the staff member was saying, he came to the door and double-checked the light he was referring to:

Apparently the “OPEN” sign doesn’t mean that the restaurant is open. The people at this restaurant must believe that it’s a learned convention that the restaurant is only open when the light that borders the sign is lit. TeamU disapproves!

Bookmark to:

1. Orion House B&B
This bed and breakfast site fares well when it comes to accessibility. This site not only utilizes a lo graphic / version of the site, it has skip links as well as mobile versions. The site is pretty to look at but highly accessible when the images are turned off. Check out their accessibility page as it details all of its extensive accessibility features.

2.Chef Seattle
It seems pretty random that a site such as Chef Seattle would focus on accessibility but they make it clear that they redesigned with accessibility in mind. Their site makes use of dynamic font sizing (using ems instead of fixed pixels) and ensuring the website works in even 800×600 resolution. Not only that, their site is highly informational and makes good use of graphics that enhance the information, not detracts from it.

3. The White House Website

Even though the White House website has to be accessible per section 508, it didn’t have to be monumental as setting a gold standard for accessible websites. From the successful implementation of a non-flash marketing showcase to ensuring sure every image has an alternate text, this website is one of my favorites.

4. The BBC

The British news network focuses many of its efforts on accessibility. Even though this is an information rich site, it gives many display options for its users to choose a comfortable browsing setting . On top of that, a huge section of the website is dedicated to educating about accessible design. They even created an accessible news reader for those who want their news quick and easy. A footer sitemap also makes it easy for screen readers to jump deeper into the site without much hassle.

5. Mozilla Firefox Website

Mozilla employs many of a well designed accessible website: big fonts, text links that are descriptive, as well as a skip to main content link (yes, even if your website fits above the fold, a skip link is needed since screen readers do not “see” folds). However, the one thing it doesn’t have is an “Accessibility” page that describes its efforts. Although such a page similar to the other 4 previous websites is needed, it is definitely a good way to ensure users know they are being kept in mind during the web design process.

Bookmark to:

Last month, we had the Skittles Social Media Experiment. At least in that case, I could see what their goal was.

Cheetos.com

This time, I happened across the Cheetos.com website. I saw the commercial for Giant Cheetos on TV, and wanted to see if they were for real. The reason being that I love Cheetos, and how could you go wrong with a GIANT Cheeto?

Supporting Browsers

First, the site is completely in Flash, and it took a minute to load on our T1 connection. After that, you’re greeted with a carousel looking thing with a bunch of TV screens on it playing video clips. At first I could not click on anything, and I realized the site only works on Firefox… no IE7 or Chrome support. When I re-opened it in Firefox, it “worked”, but that’s really a relative term.

Occasionally, a clown will walk by, a marching band will march across the screen, a man with Cheeto nunchucks will perform on screen, or a masked wrestler will scream. Um… okay.

Navigation / Interaction Controls

The internet, of all places, is where a lot of people have short attention spans. The reason being is users visit most website with a goal, and only in certain situations for leisure. It is important to provide intuitive controls and allow users to navigate easily and focus on your messaging, products, and content. The main problem with a lot of these types of websites like Cheetos.com, is that they are introducing new ways (often unintuitive) to navigate and interact. Do you want users to consume your content, or spend time trying to learn how to get to that content? Usability is often sacrificed on these type of websites.

It turns out the site is mostly a collection of games. The only mention of a “Giant Cheeto” is the “Giant Cheetos -Pet,” which doesn’t give me the information I was looking for. Ultimately, I give up after a couple minutes, which is probably a couple minutes longer than most visitors will spend on this site.

Bookmark to:

“The usability team here at BusinessOnLine recently took some time to reflect on our projects from the past year in preparation for our upcoming whitepaper, Top 10 Usability Problems of 2008. Many of the websites we encountered were redesigns, and even though they looked good aesthetically, the underlying usability problems plaguing these sites and hindering their success are problems we’ve seen year after year.”

Read the Article: My Site Looks Great…But it Still Doesn’t Work!

Bookmark to:

Each month Human Factors International (HFI) highlights the successes and achievements of a different member of their Certified Usability Analyst (CUA) community and our very own Thanh Nguyen, Director of Website Usability, was selected for the Month of April. This featured spot was given to her based on her extraordinary ability to successfully design interfaces for the end user, and the incredible thought leadership role she’s demonstrated within the industry.

Bookmark to:

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.

Bookmark to:

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.

Bookmark to:

Why are these slideshows frustrating to users?

Making Users Responders Instead of Initiators

One of Ben Shneiderman’s famous Eight Golden Rules of Interface Design is #7:
Support internal locus of control. This means giving users the sense of control over what they are using or doing.

To use a car for example, let’s say a driver slams on the brakes to avoid an accident and the car stops. This gives the user the impression that they are in control of stopping the car, even though it was really the hundreds of microprocessors and sensors controlling the anti-lock system and automatically pumping the brakes a hundred times a second to stop the car without skidding.

Now imagine a new technology that senses accidents and modulates the brakes by calculating and monitoring the chances of an accident. In the same situation as before, the driver slams on the brakes but the car slows down at the same pace no matter how hard the brakes are being stepped on. The microprocessors and sensors do not detect an accident occuring, so the car does not respond to the user stepping on the brake pedal harder. The user has to disable the automatic crash sensing system in order to have the car stop. This implementation of technology would make the user feel out of control of the car and think that the car is not safe (even though in reality it is safer).

The Forbes.com slideshow is similar to the second situation in that by default it takes the user out of control of the interface and expects the user to become respondants to the situation, rather than being the initiator of the action. If a user wants a slideshow to play, they should have to click play first, or navigate normally through the slideshow by clicking next. By automatically loading the slideshow and playing the slides, it takes the user out of control of the page, and also brakes the expectations of users. Currently if a user is in the middle of reading a paragraph, it is likely that the next slide will load and result in a frustration user-experience.

Obscure Icons

There are controls for the user to stop the slideshow or control the speed in which the slideshow changes. The problem is these controls are obscure and not conventional:

If you take a look at the icons, its a left-pointing arrow, a square, a right-pointing arrow, and a slider for “speed”. The left-pointing arrow goes “back” one slide, the square “pauses” the slideshow, and the right-pointing arrow goes “forward” one slide. The confusing part about these icons is that the square stops the slideshow, but when you click on the icon, it still shows a square. When that happens, it’s possible for users to be confused and assume the right-pointing arrow stands for “play” instead of “forward”. The square acutally now stands for “play”, and relies on the chance that the user remembers if the slideshow is currently playing or stopped. This can easily be fixed by a better choice of icons and icons that respond to show the current status of the slideshow (playing/paused). The slider for the slideshow does not indicate how fast or slow the slideshow will play, so having the arbitrary slider does not help users at all.

Auto-Loading New Slideshows

After a slideshow is done playing, another slideshow loads automatically and this continues infinitely. I accidentally left a slideshow playing, and when I came back the next day it was playing a slideshow of something completely random, not to mention my browser was using 90% of my computer’s RAM. The content that loads subsequently is not even relevant to the content of the initial slideshow. If there is one thing that can make your users leave your site instantly, it’s providing the user irrelevant content.

Simulatenous Video Advertisements

When multiple animations appear on the page, it makes it difficult for users to focus on one area. In this example, the slideshow plays, and occasionally animated video advertisements play simultaneously alongside. This may cause cognitive overload for the user, leading them to close the browser window.

I could go on about the usability issues pertaining to the slideshows, but the bottom line is users hate them. The concept of a slideshow is not the problem, but rather the particular implementation of the slideshow which affects the overall user experience.

Bookmark to:

First Layer: Claim Credibility

As professionals in the web industry, we often associate credibility with specific pages or content on a website that talk about the history of a company, privacy policies, awards/certifications, testimonials, and other self-promoting words. Statements like “Quality widget manufacturer since 1701” or “Privacy Policy” pages were the standard go-to techniques to help increase credibility and distinguish the company from others. These became commonplace because that’s what users said they wanted, and for some time, they worked.

However, these techniques became diluted and are now expected on a website as a standard. They are still very important to establish credibility, but they don’t serve as unique differentiators any more. I refer to these techniques as the first layer of my Credibility Cake(™).

Second Layer: Visual Appeal

The second layer of establishing credibility is the visual design. Almost half of all consumers assess credibility based on the visual appeal of the design. The interesting thing is that there is a mismatch between what users think is important to them versus what their actual behavior is when browsing a website. Users claim that the first layer information was most important to them (such as having a privacy policy page), but when actually asked to evaluate credibility, users used the site’s design and never bothered to even look at a privacy policy page (Consumer WebWatch, How Do People Evaluate a Web Site’s Credibility?). From our experience, it is not only important to have a visually appealing website, but to also make sure that design is consistent throughout the entire website. Often with third party applications, websites have varying designs and layouts due to different technical restrictions. These types of design inconsistencies due to technology choices can have a huge effect on website credibility, especially if these pages involve the transaction of personal information (such as request forms).

Third Layer: User Experience

This leads us to what I call the third layer of credibility, which is the overall user experience. After the first two layers are established, once a user begins interacting with a website, the experience ultimately defines credibility. If the site is an e-commerce website, and the shopping cart is clunky or slow, these are greater problems for credibility than something from the first layer such as not having a “Hacker Safe” logo on the site.

By considering these three layers, we can make sure we are covering any areas of the website that may be affecting the site’s credibility. The important thing to note is that it is all about the perceived credibility of the site. You could be the oldest, respected, trusted business in your industry, but if your site is lacking in any one of these areas online, it can be hard to compete with smaller, newer businesses with a stronger established sense of credibility and trust online.

Bookmark to: