User-Centered Design – The Key to a Usable Website

Usability imageIn order for your website to be successful, users must visit the site and successfully find information or accomplish tasks. How can your ensure your website will be easy to navigate and users will achieve their goal?  By ensuring “usability” through user-centered design. Before we examine user-centered design, let’s take a look at usability…

What is usability?

In the context of a website, usability refers to how well users can learn and use the site and how satisfied they are with the process. According to Jakob Nielsen, a web usability expert, usability consists of five quality components:

  • Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the site?
  • Efficiency: Once users have learned the site, how quickly can they perform tasks?
  • Memorability: When users return to the site after a period of not using it, how easily can they reestablish proficiency?
  • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
  • Satisfaction: How pleasant is it to use the site?

What is user-centered design?

In the early days of web development, websites were tested for usability at the end of the development phase. Usability testing consisted of a “validation” of the design. If all went well, the design was good. However, if there were usability issues, then the cost to correct was high.

User-centered design is a structured approach to producing a website that involves users throughout all stages of the website development. By incorporating user-centered design, the needs of the users are considered and the usability of the website is continually validated throughout the development process. This continual validation will ensure that the final website is usable and meets end users’ needs without incurring high redevelopment costs.

By incorporating user-centered design, you can improve the effectiveness of your website while reducing the cost of development. In the world of website development, it’s like eating your cake and having it too!!


The Use of Color on the Web

image of paint brush and plalletThe use of color is one of the most critical components of web design. From a visual standpoint, it is what the viewer  sees first. A good color combination can capture the attention of the viewer and prolong the time spent viewing the web page. However, color is also one of the least understood and most incorrectly used effects on the Web.  Using the wrong color combinations can result in web pages that are difficult to read, illegible if printed, impossible to display on some video systems, and in quite a few cases, just plain ugly.

When selecting colors to use on a web site, there is a sequence of rules you should apply. First, you must look at tradition and then you apply color theory.  Tradition is about the human eye and what is considered culturally acceptable.  For example, you would not use a lot of black on a wedding services site.  Accordingly, politicians in the United States use red, white and blue on their web sites to convey their patriotism.  Color has meaning, and the color choice must be both culturally acceptable and appropriate.

Color theory is applied when we take the base color we want, and then accentuate it with a complementary, monotonous, or analogous colors.  Sound confusing?  Let’s break it down by looking at the basic component of color theory, the color wheel…

Triadic Color Scheme

Colors are classified as primary, secondary and tertiary. The primary colors are red, yellow and blue. The secondary colors are those colors “between” the primary colors on the color wheel and are made from combinations of the primary colors.  For example, orange is made from red and yellow; green is made from yellow and blue and purple is made from blue and red. As you might guess, the tertiary colors are between the secondary colors. And finally, you can affect the tint, tone and shade of the color by adding white, gray or black.

It is helpful to keep the color wheel in mind when thinking about what combinations of colors to use in your website. These best color combinations are:

  • Monochromatic Color Schemes – the same color but with tint, tone and shade
  • Complementary Color Schemes – colors directly opposite each other on the color wheel
  • Triadic Color Schemes – colors one-third of the way around the color wheel (see above)
  • Tetradic Color Schemes – colors one quarter of the way around the color wheel

Feel like you may need some help?  Don’t worry, there are tools available.  Check out the  Color Scheme Designer and you may just uncover the colorist in you!

Why Web Accessibility?

Web Accessibility ImageAccording to Derek Featherstone, internationally renowned speaker, author and accessibility expert, web accessibility refers to the “practice of making websites usable by people of all abilities and disabilities. “

Why is it important for the Web to be accessible to people with disabilities?  The use of the Web is spreading rapidly into most areas of our daily life.  Increasingly, it has become the source for research and training, government information and services, workplace and social interaction and entertainment.  In some cases, the Web is actually replacing traditional resources.  As the Web becomes a more essential component of our daily lives, it is crucial that the Web be accessible.  Like everyone else, people with disabilities want and need to access the kinds of resources offered on the Web.

But what is considered a disability?  Generally, there are four key areas of disability that are considered for accessibility adaptations:

  • Visual – Blindness, low vision, color-blindness
  • Hearing – Deafness
  • Motor – Inability to use a mouse, slow response time, limited fine motor control
  • Cognitive – Learning disabilities, distractibility, inability to remember or focus on large amounts of information.

Techniques and guidelines for the design and construction of accessible websites have been developed to ensure that those individuals with disabilities have the same access to information.   These standards known as the Web Content Accessibility Guidelines (WCAG 2.0) are based on the following four key principles:

  1. Perceivable – Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies (i.e. screen readers, etc.)
  2. Operable – Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device.
  3. Understandable – Content is clear and limits confusion and ambiguity.
  4. Robust – A wide range of technologies (including assistive technologies) can access the content

Within these principles, 12 guidelines have been established to provide the basic objective for each area of accessibility.  These guidelines should not be considered as just a compliance checklist during the testing phase, but should be used as a guide throughout the design and construction phases.  For the Web to reach its full potential for those with disabilities, web developers must commit to always designing and building with accessibility in mind.