This past year, I’ve been approached by numerous people asking me to “tear apart” their website because they know “something’s wrong with it” or it’s “broken.” Most of the time, the situation involves a recently launched website that is not meeting expectations or success metrics. Each individual is usually left feeling confused and defeated. With all the time and money invested, most are reluctant – but still willing – to start over from scratch. Sound familiar?

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. Users may have preferred the new design and colors, but the problems they had finding a product, filling out a form, or reading the page, remain the same. Identifying and addressing these common usability problems can mean figuring out what the “something wrong” is, and help you avoid having to “tear apart” the website, or, gulp, start from scratch.

Usability Problems with Videos

With the increasing popularity of online videos for general consumer use as well as B2B websites, following usability conventions and standards for video playback is more important now than ever. According to ComScore, 150 million U.S. internet users watched 14.3 billion videos for the month of December 2008 [1]. The greater adoption of online videos means users are becoming more comfortable with watching videos online, and they are forming new learned conventions as to how these videos should function. The top annoyance reported by users is when audio and video elements on websites start without initiation by the user. A great example of this was on the ESPN.com website where videos in the very right column of the page would automatically load and start playing.

[2]

Users should always be the initiators of any actions on the page, or they will feel a loss of control over the situation and their browsing experience. What made things worse in this ESPN.com design is that users who did not have their browser window maximized to the fullest width would not be able to find the video and stop the playback. This is what the page looked like if you had the browser open to a 760px width, which is not uncommon:

[3]

Imagine hearing audio blasting through your speakers talking about the latest sports highlights but not knowing where it was coming from on the page. The user’s first reactions would be to click back or close the browser window. Not exactly the action you want your users doing when they first land on your website. Fortunately, after a few years, ESPN.com redesigned their website for 2009, and now allows the user to initiate video playback:

[4]

Something as simple as disabling auto-playback on a video can save you from having users abandoning your website. If you have recently decided to add videos to your site, make sure they do not auto-play on any page and you should see a significantly lower bounce rate on that page.

One convention that has still not been established is the function of what happens when a user clicks on a video. Some videos will play or pause when clicked, some will open a larger size of the video, some will open a new window taking the user to another page related to the content on the video, and some will open the original page containing the video (often the case with embedded YouTube videos, taking the user to the original YouTube page). It is important to consider every detail of every control you provide to the user, including things such as what happens when the user clicks on the video. For now, from what I have seen in my experience, the video should play or pause when clicked, as it is the largest clickable area on the video and should not unexpectedly take the user to another page.

Tagging Blog Posts

Another popular trend online this past year are corporate blogs, and your company has probably started one or is thinking about starting one. According to Technorati, a search engine for blogs, out of the 5 million blogs they index, half are blogs about a specific industry or profession, and 12% are official company blogs [2]. Of course the content of the blog itself is most important, but second to that is properly tagging the blog posts.

Blogs are abundant on the web, and users have formed an expectation that blogs can be navigated through using tags and/or categories. When tags are not present, users will find the blog difficult to browse through, and eventually feel the blog’s content is lacking. For example, we can take a look at the recently launched WhiteHouse.gov website [3].

[5]

I personally am excited to see the new White House website accepting new internet technologies, standards, and social media, but the “blog” they have implemented is a weak spot on the website. If we take a look at this blog, nowhere on the page are there categories or tags for users to find related information. Users browse blogs in a non-linear style, meaning they do not follow the traditional hierarchical browsing behavior of typical websites. The lack of tags inhibits the users’ ability to become engaged with the content and navigate freely through the blog. Additionally, it doesn’t enable comments from users, making it a far cry from being an actual blog – it just does not fit the expectations and mental model the user has when they hear the word “blog.”

A universal tagging system is something that should be defined before and during the implementation of a blog. Deciding on categories and what content falls within each category, as well as making sure blog posts are tagged correctly are just a few simple factors that contribute to the success of a blog. The difference in semantics (“slipper” vs. “houseshoe”) and variations in subsets of information are hard to differentiate (“orange” vs. “oranges”), but this is why creating a universal tagging system is so important.

[6]

This example from Chrysler [4] shows a blog that is utilizing tags, but is not using a universal tagging system. The categories are inconsistent (“Dodge” vs. “Jeep brand”), conflicting, and confusing for users (“The Suits” vs. “Corporate Business”). Why is “Dodge” not a “Dodge brand”? What is “The Suits” and how is that different from “Corporate Business”? Simply tagging a blog post is not enough. Tagging the blog posts in a manner which allows users to find related content and browse through the site seamlessly is crucial.

In addition to usability benefits, creating a universal tagging system in-line with your SEO strategy can help increase relevancy on your site for the specific blog posts pertaining to those keyword phrases.

How Did Your Site Do?

These are just a couple of things we identified as “The Most Common Usability Problems of 2008. If your site isn’t performing to expectations, it is likely usability problems just like these are causing your users to have an unfulfilling user-experience.

Remember, if your website suffers from problems, simply doing a redesign or a re-skinning will not reveal or fix these underlying issues. You will need to take steps to address these problems before deciding whether starting from scratch is the best way to fix your “broken” site.

[1] http://www.comscore.com/press/release.asp?press=2714 [7]

[2] http://technorati.com/blogging/state-of-the-blogosphere/who-are-the-bloggers/ [8]

[3] http://www.whitehouse.gov/blog/09/02/20/Gibbs-corrects-the-record/ [9]

[4] http://blog.chryslerllc.com/blog.do?p=home [10]