Friday, September 16, 2011

Great Website Navigation

One of the key elements to consider when designing a high functioning website is the navigation. Getting that right will optimize your user's experience allowing her to know as much as you care to share with her regarding your organization, services or whatever other information you're offering.

Getting the navigation right is a matter of organizing your information in a way that's both intuitive and obvious to your audience. Because of the way pages and information can interconnect on the web, you can build access to material from multiple vantage points. Unlike print pieces that usually unfold or open through in a 2-dimensional linear way the pages of a website can be thought of as a more 3-dimensional container that can also be linked to selected information from the vast stores of the internet world-at-large -- hugely useful stuff!

As users have gained experience interacting with websites through the years some standard practices have been established that significantly reduce potential confusion in clicking through these multi-dimensional information powerhouses.

The outline below demonstrates a typical arrangement - usually configured in an "F" shape, where the top bar holds the logo and organizational navigation (about, contact, home, media) and the left sidebar holds sub-navigation (products, services, resources, etc). The larger, middle space is where the photos, text and other information usually goes. Mind you, this is a rough sketch of standard navigation - but serves as a foundation for building the particulars of many content rich, informational websites.

Information to compile for a high-functioning website:
Contact:
  • email
  • street address
  • link to map (google map or other)
  • telephone, fax, etc

About:
  • the organization
  • history
  • mission
  • philosophy
  • key personnel

Staff:
  • photos
  • bios
  • name
  • position held
  • personal statement

Media (Room):
  • new releases (who, what, where, when, why - contact for additional info)
  • news blurbs
  • photos
  • videos
  • publishable photos (© info, photographer's credit, subjects clearly identified)
  • internal blogs
Programming:
  • what
  • where
  • when
  • who for
  • how much

Services:
  • what
  • where
  • when
  • why
  • who for
  • how much

Resources:
  • industry links (annotated - why is your organization suggesting this!)
  • further reading (magazines, books, external blogs, etc - again, annotated)
  • instructional info (white papers, pdfs, videos, etc)

Optional:
FAQs (useful, if they actually ARE frequently asked questions - OR can address topics that are fun and informational that don't quite fit anywhere else or need special highlighting here)

Next Post:
WHO is all this for? Identifying your key target audiences!

No comments: