Accessible Websites Don't Have to be Ugly

For those who think accessible websites are ugly websites, think again. Here is a list of my top 5 favorite accessible websites (in no particular order) that are not just pretty to screen readers but also pretty to look at for those of us who are not vision impaired.

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 800x600 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.

Websites I Don't Understand, and Users Certainly Won't Either

Sometimes I come across major brand websites targeted towards consumers that I just don't get. They're hard to use, lack any type of branding, and don't relate back to the product. What's the thinking behind these sites?

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.

Common Usability Problems

The Usability team has a featured article in the March Issue of BusinessOnLine's Newsletter, OPTIMIZED. Here's an excerpt:

"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!

HFI Recognizes Thanh Nguyen as the CUA of the Month!

Congrats to Thanh on being recognized by Human Factors International (HFI) as the Certified Usability Analyst of the Month!

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.

Bad Friday [updated 3/10/09]

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.