18 March, 2010

Questions That Help Assess Website Usability

The level of usability on your website takes on a vital role when we’re designing for the end-user. If your web application isn’t easy to use and interact with, then chances are the services and information you offer will be valuable to a rare few. Usability aims to relieve some of the things that can make your website complicated to use and simplifies the interface so that the users overall experience is a pleasurable one.

When designing with usability in mind you must make sure you test extensively, and consider the fact that what may be easy for you to interact with, may be difficult for others. It is about finding the right balance that will allow a wide variation of users to exit your website satisfied with the user experience.

Why and What to Ask?
We’ve put together several questions (you might not have heard of) that will help you enhance and assess the quality of your websites usability. Not every question may apply to your case, however, these questions are meant to help you to think a bit more from a users perspective.

How Can I Enhance the Usability of My Links?

I was a bit hesitant to start off with this very question, mostly because some believe that links don’t play any part in a websites usability factor. However, from previous testing and links being a definite part of user interaction, we know that we must find ways to make links as clear and concise as possible.

A user must clearly be able to point out a link within a sentence, paragraph, or anywhere else on the site for that matter. Many designers have solved this issue by adding small icons to links through CSS, and adding anchor text. Links that are associated with your websites navigation need to be given even more attention. A sites navigation can make or break the user experience. This is especially true with tweaking your website for maximum accessibility.

What is the Five Second Rule?


When you refer to a websites usability, you’ll sometimes come across the “five second” rule. Even though there may be several versions of the five second rule such as three or two seconds instead of five, the general idea is that a user should be able to digest or have a quick break down of what your website is all about, as well as what you have to offer within the first few seconds of their visit. Anything after that will more than likely result in disinterest and may eventually drive visitors away.

The homepage is key, since it is the first thing users will become acquainted with. What does this have to do with usability? Everything. If your website fails to catch the attention of the targeted user, then there simply will be seldom interest in using your website. The Five Second Test (usability testing tool) goes hand-in-hand with the five second rule.

Are the Titles and Headings Distinctive?

This benefits every site, however, if you run a blog/magazine then this will be one of the most important elements of your websites usability. You should make sure that your titles for sections and posts are easily distinguishable and clear. They must be easy to read, understand, and remember. When you style your headings it’s important that you don’t over-do-it and you take your time in selecting the right type of font. Bad titles and headings can make sure site look convoluted and somewhat distorted.

Is the Content on My Site Displayed in a Consistent Manner?


The information displayed on your website should be structured in such a way that it represents consistency. Content that isn’t structured will make your website look messy and unappealing.

For example, if your blog posts are all aligned to the left, you should make sure that every post is aligned to the left. It wouldn’t make much of any sense to have one post center aligned, the next to the left, and a few to the right. Users will be confused and their eyes will most likely end up hurting after trying to read the mess on your site.

Do Clickable Items Lure Me to Click Them?


Simply said, what’s the point of having an item you want users to click on if it doesn’t even seem clickable? For example, if you have image ads on your website you’d definitely want users to click on them. A simple and straightforward way to do this is to add a property such as a drop shadow to all of your image related ads through your CSS.

CSS-Tricks is a reasonable example of what we’re talking about. Check out the sidebar with the 125×125 ads, see how they interact and the size of the border around them. All of these factors contribute to luring you in to clicking on the ads. In such a way, elements you want users to click on should be undeniably clickable and are expected to contrast the rest of the content one way or another. Make it easy for your users, guide them a bit and you’ll see that they’ll respond much better to anything you “throw” at them.

Is the Entire Site as Functional as It Is Appealing?

What’s the point of having a website that has been aesthetically “perfected” if it isn’t nearly as functional as it looks? Your website should respond well to actions performed by the users. If the site can’t deliver quality functionality, then you’ve more than likely defeated the purpose of usability. True usability is more than just design, it’s function. We’re not inferring that you should place more emphasis on the back-end of your website, however, there should be a balance between the front/back end design. These two will always work together to ultimately create a much better user experience.

Does the Site Load Quickly?

Even though this question is obvious to some, it’s still something that should be included within this article. The speed of which your pages load can drastically contribute to the usability of your website. If your web pages fail to load quickly, then this can put a strain on the time users have to interact with your website. The faster your pages load, the better users are able to interact with your website, resulting in a much more appealing UX.

02 March, 2010

Color Blindness and Web site Design

Introduction

Color blindness is the inability to perceive differences between some of the colors that non-colored impaired users can distinguish (Wikipedia). Color blindness affects about five to eight percent of males (approximately 10.5 million) and less than one percent of females. There are two major types of color blindness: those who have difficulty between red and green, and those who have difficulty distinguishing between blue and yellow.

Benefits of Color Friendly Web sites

Aside from making a Web site accessible to visitors who are color blind, there are other benefits to making the site color friendly. These include:

  • Accessible Web sites are more likely to be ranked well with the search engines.
  • By designing colorblind accessible Web sites, you are also targeting PDAs, 3G phones and similar technological devices used for web access.
  • Your Web site is seen as more professional if it doesn’t exclude the impaired or disabled.

Color blindness could involve up to 1 in 20 visitors to your Web site. For this group, you run the risk of having a Web site that the text is barely legible and the images unrecognizable.

The Challenge

The challenge of designing for color blindness is because it is hard to determine what color blind users see and how that is different from what the average user sees.

And the difference between the different types of color blindness just adds an additional layer of complexity.

Research models have attempted to predict or calculate how colors are perceived by color-blind users (Wolfmaier, 1999). These models make a good attempt, but it is not possible to predict what a color blind users sees with 100% accuracy.

Prioritizing the Web site

There are many facets to designing a user-friendly Web site. It is impossible to create a site that is friendly for all and meets the needs of every single visitor. A good strategy is to prioritize the content. The higher the content is in importance means it is more essential to make it color-blind safe.

Any links or buttons on the site that are essential in aiding the user to accomplish their tasks would fall high on the essential list. The standard rule: any content that the user may look at for more than two seconds should be made clearly visible and have a high contrast ratio.

Content areas should be monochromatic with the font color and background at the opposite ends of the color saturation poles (i.e., black text on a white background). Elements of the navigation menus, headers and sub-headers can be given more artistic treatments because users seldom stare at these elements for long periods of time. Navigation should stand out from the content and visitors should be able to quickly differentiate between the two.

Colors that Work the Best

Contrasting colors or colors on the opposite ends of the color spectrum work best for color blind users (e.g., white and black is the best example). A good practice may be to create the site in grey scale colors because elements should never rely solely on color.

Each element should have more than one cue. Images, links, buttons, and other similar elements should be enhanced with an image, shape, positioning or text. For example, a link should be highlighted by color as well as underlined. Take away the color treatment and the underline will let visitors with color blindness know that it is a link.

Image maps also pose a problem for color blind users. Image maps have clickable areas that are often delineated by color. Options are to add underlined text to the clickable areas or a black outline around the images (e.g., outline around a state on a map).

It is considered a best practice to use bright colors. People who have color deficiencies can see all the colors but they have a problem differentiating between them so using bright, bold colors helps.

Other issues to consider are the contrast between colors and the background. People with color blindness are less sensitive to colors on either end of the spectrum. For example, reds and blues often appear to be darker to the color blind user.

Why Bother

Some will argue about why sites should be designed with such a small population in mind or to meet the needs of a minority. The are several reasons: 1) a site should always strive to be user-friendly for all audiences 2) there are standards that keep sites accountable to people with disabilities and 3) well-designed sites don’t require changes to make the accessible.

Improving the site for color-blind individuals has an affect on other populations as well. Those with color-blindness are not the only visually impaired users and adding all visually impaired greatly increases this population. The growing senior population often has the same difficulties with visual impairments (e.g., differentiating text and site elements).

References

Brettel, H., Vienot, F. & Mollon, J.D. (1997). Computerized simulation of color appearance for dichormats. Journal of the Optical Society of American A, 14, 10. 2647-2655.

Meyer, G.W. & Greenberg, D.P. (1988). Colour defective vision and computer graphics displays. IEEE Computer Graphics and Applications, 8. 5, 28-40.

Wolfmaier, Thomas G. (1999). Designing for the Color-Challenged: A Challenge. Internetworking.

Newman, Chuck (2000). Considering the Color-Blind. Web Techniques.

Parise, Mario (2005). Color Theory for the Color-Blind. Digital Web Magazine.

Karagol-Ayan, Burcu (2001). Color Vision Confusion. Universal Usability in Practice.