Information architecture for Websites

When considering sites, we like to know a lot about the target audience.  So we'll often set our some user profiles, user scenarios or case studies.  We'll give these users personalities and map out the sort of things they are likely to do on the site.  They can be quite detailed, so I'll leave examples for another day, however they really do help define what is important and what isn't. 

Many of our websites use content management systems, such as Freestyler CMS, which store content in a logical heirarchy.  These principles can makes the websites easy to use.  Depending on the kind of site, it can vary in terms of the depth of pages from a shallow architecture to a site that is many levels deep.  Unlike many content management systems, which allow for only a couple of levels deep, Freestyler enables infinite levels, providing heaps of flexibility in our information architecture process. 

We often start by defining a rough list of pages which the site will comprise of.  To define your site menus, you need to know first what sort of content is likely to fit in them.  This content can come from a variety of sources.  We refer to this part of our methodology as "content inventory" or basically taking stock of what content you have and how you will use it in the context of your website.

To demonstrate the heirarchy of pages and the types of menu items you might see on each page.  There are multiple ways that you can show this.  One is using sitemaps from programs like Microsoft Visio.  However we often find a mindmap format useful as we find that clients find it much easier to understand. 

You'll see below an example of one of my own mindmaps for a project, as a result of my own consultation with a client.

In this example, I've gone as far to identify the types of content that each page uses (in this case, Freestyler CMS templates) using colour coding and icons as well as to show the sorts of inter-relationships between pages and to indicate login only areas.  This particular site is about 3-4 levels deep, with much of the content broken up into bite size chunks designed to appeal to website users with little time or patience.

From our mindmaps, the next step we will sometimes go to is to develop a series of what we call "wireframes".  These are basically layouts of pages without the graphics or bells and whistles to demonstrate the visual priority of elements.  We still give designers flexibility at this stage, but this helps to define the features of the site to give them a framework to work within.  These mockups can range from low fidelity (really basic) to high fidelity (almost as good as the real thing).  Low fidelity still gives scope for plenty of creative freedom to designers.  I've included one of my own low fidelity mockups below for you to see the sort of stuff we do at this stage.

Some of the main navigation concepts, such as menus, search, grouping of links and other functionality is demonstrated here as well as any specific creative requirements that are applicable at this early stage.

So there you see, there is a lot more than meets the eye to designing a good website.  In fact, we are often called to work with external designers to advise them and their clients on information architecture. 

Though we don't always itemise this in our project costs, but we always take the time to do it.  When we do add it as a line item, our clients know that the process is thorough and comprehensive, with a meticulous attention to the details.  It is this sort of thing which keeps projects on track and to budget where other designers projects might blow out.

As I've discussed in several of my articles, Information Architecture is an ongoing process of review and tweaking based on changing user patterns.  So you need a developer who can keep on their toes, not someone who designs your site, wipes their hands and moves on.

It is important that you choose the right developer with the right amount of experience, so you can get it right the first time.

Comments

There are no comments.

Name *


Comment *


Verification code *


Regenerate code