Good Navigation? Who ya gonna call?

Girl looking for directionsNavigation is one of the most important aspects of web design. There’s an art to effectively guiding your visitors around your site so that they learn how much content is available and where to find it.

How can you be sure your site is easy to navigate? By calling upon the services of an information architect!

According to the Information Architecture Institute, an international organization committed to advancing and promoting the practice of information architecture (IA), information architecture is:

  • The structural design of shared information environments.
  • The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability.
  • An emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

In general, IA is the work involved to analyze, organize and label information on a website or web application so that users of the software can actually find what they are looking for – the desired information or functionality. In a nutshell, the information architect creates the website or application’s navigation scheme.

Information architects work behind the scenes understanding the purpose and goals of the website and then determine how to best present that information to the target audience.  Working with the clients, using content inventories, competitive analysis and persona(s), the information architect helps define the strategy, content and features for the website.  This definition is then used as the foundation for the development of site maps, wireframes and screen designs – all tools used to define and document the IA goal – an intuitive website design.information architect

How do you know if the information architect has done a good job?  Check your website’s navigation against the following guidelines provided by

The navigation should:

  • Be easy to learn.
  • Be consistent throughout the website.
  • Provide feedback, such as the use of breadcrumbs to indicate how to navigate back to where the user started.
  • Use the minimum number of clicks to arrive at the next destination.
  • Use clear and intuitive labels, based on the user’s perspective and terminology.
  • Support user tasks.
  • Have each link be distinct from other links.
  • Group navigation into logical units.
  • Avoid making the user scroll to get to important navigation or submit buttons.
  • Not disable the browser’s back button.

Web Standards: To Use or Not to Use

web tools imageIn the beginning…

Tim Berners-Lee, considered the father of the Web, first envisioned the Internet based hypertext system in the late 1980’s. He wrote the first web browser, WorldWideWeb in 1991 to facilitate collaboration with his colleagues at CERN, the European Organization for Nuclear Research.

During the early 1990’s the industry saw many browsers developed and released. Marc Andreessen released Netscape Navigator free for non-commercial use and, by 1995, began to dominant the market. However, Microsoft soon answered by releasing Internet Explorer 2 or IE 2 free to all Windows users. Microsoft started grabbing market share and began, what has since been called, the era of ‘browser wars’. With the release of IE 4 in 1997, Microsoft changed the tides of the war.

Peace imageCan there be peace?

During this time development was rapid and the introduction of new features often took priority over bug fixes, resulting in unstable browsers, frequent crashes and many security holes. Because each technology used browser specific code, pages developed for one browser would not display well, if at all, in another.

Once again, Tim Berners-Lee saw a need.  In 1994 he started the World Wide Web Consortium (W3C) with the stated mission “to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web” [Source: W3C].  Since then, W3C has grown to include over 450 member organizations including Microsoft and America Online (parent company of Netscape).

The treaty…

The W3C forms working groups to develop open specifications and guidelines to enhance the interoperability of the Web.  These groups make recommendations that are formalized and accepted by the W3C and their member organizations.  The current W3C standards are:

  • HTML 4.0 – HyperText Markup Language
  • XML 1.0 – Extensible Markup Language
  • XHTML 1.0 & 1.1 – Reformulation of HTML as an XML application
  • CSS – Cascading Style Sheets
  • DOM 1 – Document Object Model Level 1

peace treaty imageThanks to the W3C, the browser wars are over and with them the need to develop specific code for specific browsers.  All the major browsers are now cooperating and supporting the above standards so that the same piece of code in a web site will look the same across multiple browsers.

To use or not to use?

Designing with web standards is a general term meaning not only using the standard technologies, but using them correctly by separating the content, the scripting and the styling.

There are many tangible benefits to designing with web standards. Separating the content from the styling makes websites easier to update and less costly to maintain. Also, the separation will mean a substantial savings on bandwidth leading to lower hosting costs.  Finally, separating the content from the styling will increase a site’s findability since search engines can do a better job of indexing the sites.

Web Standards image

Most importantly, standards compliance allows web pages to be understood by people using different types of browsers, like voice or Braille browsers, making it easier for people with special needs to use the web. Additionally, its easier to code for mobile and tablet browsers.

In conclusion, designing with web standards will make your code more efficient, easier to maintain, more accessible and more staple.  Standards compliance will lower development and hosting costs while expanding your audience.  Thank you Mr. Berners-Lee for the Web and web standards!

Writing for the Web

Image of writer and keyboardWriting for the Web is different from writing for print. Why?  People read differently on the Web than they do when reading print. When viewing a new page, readers look at headings and subheadings, browse for hyperlinks and keywords. In other words, they scan!

So how do you convey your message?  By recognizing the needs of the user and making the copy easy to scan!

A lot of testing has been done on how long it takes for the average web surfer to decide if they want to read your page or move on.  Most viewers have made a decision in three to five seconds [Source: Nielsen: Alertbox].

It’s your job to present the information in such a manner that you grab the web surfer’s attention before they make a decision to click away.

Image of KISSThe following guidelines from web content expert Erin Anderson in Interact with Web Standards will ensure your web pages are easy to scan and help you capture that elusive surfer:

Paragraphs should be concise
Each paragraph should only convey one idea and be less than 60 words.  As the reader scans, they will only miss one idea if they skip the paragraph.

Headlines should be short
Headings let the reader know that they are in the right place. They need to be engaging and use key words. They should be eight words less.

Subheadings should be brief
Subheadings, like headings, summarize the content that follows. They should be no longer than 12 to 14 words.

Use bulleted lists
Bullet lists can help you cut unnecessary copy and make it easier to read.

Don’t use numbered lists
Numbered lists should be used sparingly and only where they provide meaning like describing the steps in a process or a top 10 list.

Use headings to guide the reader through the page
Strategically place headings and subheadings can show hierarchy and the relative importance of the topics. They draw a reader’s eye and help them navigate the page. Also, good headings help web search engines improve your findability.

And finally, as with all writing, you need to use good web writing form. Lead with active words, use simple sentences and be succinct.

For more words of wisdom and best practices for writing for the web, check out these additional resources:

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.