Using video in a website is a whole issue, there are several usability problems we have to take care of at the moment of designing a website. I would like to tell you about a website I launched recently: it’s the Biccu Table website, dedicated to the presentation of a table design.

The Biccu Table website needed to be very graphical inorder to easily explain how the concept works and what is the table for (it’s a table for children). So we went for a video, making it the center of the website. Of course this brought some problems to the design…

Technical Issues

We got a few messages from users (actually 2) saying that they were not able to see the video. One thought that an Apple computer was needed and the other one said that the computer crashed several times during playing time. In our case this was a minimum amount of complaints in comparison to the big amount of positive feedback. But this is a warning, if you are targeting poorly technically-skilled users, keep in mind that playing video represent a challenge for some of them.

The Text

Every video, specially the ones with sound, should have an explanatory text giving information to the people that are not able to see the video (for example, visually impaired ones or for technical reasons). In our case, we noticed that the people were concentrated on the video only. Was that the desired effect? Great! For us, this was fine as the images were clear enough.

Too Long is Boring

Initially the videos we placed on the website were longer. We noticed that users were excited at the beginning but bored at the end. So, keep videos short.

Embedded Third Party Videos

Video players like the YouTube one are very popular and using them might improve usability, most users know how to use them. For us it was not an option, we wanted to have videos without ads, without external links and without any external branding.

If possible, a text equivalent should be provided for all visual information in a website, like video, music and interactive graphics. There are several reasons why a description text should be included in a website design.

- Old browsers might not be able to display some multimedia files

- Some browsers might not have the necessary plugins and the user might not be able to update it (or might not want to)

- Impaired people could have problems interacting with multimedia

- Visually impaired people could need a text version of the multimedia file to be read by web readers

- Not every body has a high speed internet connection to download multimedia files

Why should you care?  Improving usability helps everybody surfing your website, not only the impaired ones. Imagine that you trying to teach something through multimedia content, like a video; giving text explanation of what is going on in that video could improve the understanding of the idea you are trying to teach.

An image or video says a lot, but you could add much more value to that if you provide equivalent text for that media. At the end, if the user is able to see that media anyways, the text will increase the understanding of the message you are trying to deliver.

Last Monday I wrote an article about the Quick Tips to Make Accessible Web Sites of the Web Accessibility Initiative of the W3C. I’ve promised to go through the quick tips, here is the first article.

"provide a text equivalent for every non-text element…"

The first tip is the one that recommends to provide a text equivalent for every non-text element, like an image, a video or a sound. I know, I don’t have to teach you about "alt", you know that, but many designers don’t use it.

alt="This is the alternative text!"

Alternative text is important for the impaired people surfing the web with screen readers, screen magnifiers or voice recognition software. Keep in mind that alternative text should not only be there but it should also be clear and representative of the content that is replacing.

Implementing this technique takes time but they improve the whole website usability, which means that users will feel more comfortable using the site (this means more visits and more money!). Users not always have the last computer with the last browser so it could be that many of your customers will be seeing the alternative text instead of an image, video or sound.

Google places an alternative text for the Google Checkout logo, without it a user that can not see images would get the incomplete phrase "Show ___ items only". You might also notice that here the alternative text "Show Google Checkout items only" could also help users seeing the image but not understanding this combination of text and image "Show [Google Checkout logo] items only".

Why should you make your website accessible for the impaired people? You’ve probably heard a lot of bla-bla already, like that you are gonna get a place in heaven if you make your site accessible. But that’s not the only advantage of it.

"all users will get the benefits of a well designed website…"
 

Designing for the impaired people is designing for everybody, that means that all users will get the benefits of a well designed website. For example, using good color contrasts will be thanked by everybody’s eyes and making hyperlinks that make sense will give more context to everybody. A better site means more visits, more visits means more money (usually).

I will take the opportunity to show you the Quick Tips to Make Accessible Web Site from the Web Accessibility Initiative of the World Wide Web Consortium, W3C. This quick tips are also available for free as reference cards. I will show you examples to this tips in the next weeks.

1. Images & animations: Use the alt attribute to describe the function of each visual.
2. Image maps. Use the client-side map and text for hotspots.
3. Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
4. Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."
5. Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
6. Graphs & charts. Summarize or use the longdesc attribute.
7. Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
8. Frames. Use the noframes element and meaningful titles.
9. Tables. Make line-by-line reading sensible. Summarize.
10. Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

Links are used to give users more information, details, context. They also are a way to show what is important. They could also be use to drive traffic to other parts of the same website. But abusing could have a negative effect, if your web design has too many links, like this very same article, the effects of linking would be mostly annoying. See here more Design vs Art articles about Links.

Use links, but don’t abuse.

It seems that if you don’t write the word "Apple" on an article this week your blog will be totally ignored. To be honest, watching the Steve Jobs presentation at the MacWorld I got inspired to write about direct manipulation. I was specially impress by the multi-touch function of the MacBook Air trackpad.

"New features like swiping and scrolling will help impaired people…"

This is not just a new toy, from the usability point of view this is great. New features like swiping and scrolling will help impaired people. As Steve Jobs showed, these two features works with the Safari internet browser, enabling to easily go forward and backwards and to scroll around the page. All with your fingers.

 

The screen zoom feature and the "pinch and expand" work also with Safari, helping visually impaired people to read web pages. The other features like tap and "click and drag" could also help people with problems to point with the mouse.

Many might wonder how is possible that nobody did it before. This is Apple Computer design, user-centered and easy to use. This proves that designing for impaired people is actually designing for all. See other articles on how usability can help impaired people.

Using tabs is sometimes a very good option for a wed design. Visitors use them to navigate the site and to know where they are.

The JCPenney tab rows are 100% fine. They use a different color for the selected tab, but this color is similar to the one used for the unselected tabs. From the usability point of view, I can imagine that this could affect visually impaired and color blinded people.

Giving users a graphical and shaped sign could be much better for everybody. The MySQL website not only uses a different color for the selected tab but also makes a connection to the menu line below, creating a much obvious and nicer visual effect.

ReadWriteWeb has recently changed the design, the website looks more organized but the colors they chose could be a serious problem for a lot of people.

It’s an extremely important usability issue to choose the right color contrast. A lot of people have color disabilities and the combination of red on white could really become a problem.

In my opinion, the new ReadWriteWeb design is too shiny, it bothers my eyes, I just don’t feel comfortable looking at it. Actually, the red on white and the green on white are the most common trouble contrast options.

Designing for the people with color disabilities is actually designing to everybody, better color contrast will be preferred by all your users.

Tesco, the British retailer, developed a nice solution to show users product pictures avoiding the use of pop-up windows.

Pop-up windows are a big usability issue, they confuse users and they negatively affects impaired people. Think that some people just don’t notice the pop-up windows, some close them straight away and some don’t know how to close them.

Tesco placed a “View more images” link on the product description, when clicked, the user is taken to the pictures page.

Then, in the pictures page they placed a very visible “Back to product” link. I think this solution is a very good one and help users easily navigate pictures. This is a nice usability pattern to keep in mind.

OTTO is one of the biggest and more traditional retailers in Germany. In a country that makes beautiful cars and machines but could do better in the customer service area, this company is probably above the average providing a 24/7 call center, shops, mail and fax ordering systems, TV shopping and of course the internet site www.otto.de. It seems that OTTO is decided to sell products. I bought products at OTTO several times and can certainly not complain.

But recently they updated the site and I have to say that they are only partially winning my hard. The first problem I have found was to find the catalogue menu. It does not look like a menu, it actually does it like a decoration. You have to hover over the words and the menu will open, but this does not happen at the right speed, so I hovered over many times and nothing happened. This is an important flaw, we know the search feature is very important but I was looking for the menu and it took me a lot of time to find it.

One very good thing is the OTTO site version for visually impaired people, it has a very clean design and is easy to use (I would recommend it even more than the main site!). But also here I might notice some flaws, specially in the wording, link position and behaviour. The link to the site for the visually impaired is a little bit hidden inside a drop down menu and could be difficult for some people to reach it. Then, the link itself is called something like “shopping without boundaries” (Barrierefrei Shoppen, I wonder if the meaning of this is clear to everybody; although there is an entry for that on the German Wikipedia, I guess something like “For visually impaired” would make more sense).

Once you click on that menu item, instead of lunching the visually impaired site version, you are redirected to another page explaining the whole thing. There you find another link called “test it now”… does that mean that this is only a test or that I can actually buy stuff there?

I like OTTO because they have a huge catalogue and in general they have a good service, but their site could be a little bit better.