Design For Human Habitation

by Karen Charlesworth

Architects make great web designers. I know a handful of architects-turned-web-designers - highly-trained, spatially-aware types who formerly spent their days designing portals and visitor areas, and who now spend their days designing... well, virtual portals and visitor areas. To a man (sorry - they are, in fact, all men) they design excellent, robust sites that are intuitively constructed and therefore a pleasure to use.
February 21, 2000

Looking at their work, I've come to the conclusion that there's a synergy not only between buildings and websites, but also between the practice of architecture and web design: a similarity of process as well as product. And as a consequence, there are some valuable lessons to be learned from the architectural design process that can usefully be applied to the website equivalent: primarily, how and what to research before you start designing the architecture of a site, and how to use the findings of your research in constructing the site.

If you look at websites in architectural terms, there are far too many out there which should by rights be condemned as unfit for human habitation. Sites which demand that you click all the way back up to the top level from the third or fourth level down before you can choose another top-level category. If you had to visit a building with some convoluted Escher-type construction that required you to walk up four storeys and then all the way back down again before entering the adjacent room in the corridor, you wouldn't be going there too often. But there are hundreds of websites out there whose poorly thought-out designs require you to do just that.

Research

The most valuable lesson that web designers can learn from architects is research. In an architectural practice, there are long meetings with the client before a 2H pencil ever gets near a drawing board.

1. Client aspirations:

The first and most fundamental objective is to find out what the client's aspirations are for the building. Does the client want the most up-market hotel in the area? Or is the intention simply to build a hotel with the maximum number of rooms in a given space, and maximise revenue? In the same way, as a website designer, you should be finding out your client's aspirations for the website. If the clients are shoemakers, do they want to become the world's leading online shoe store, shifting as many boxes as possible every day? Or do they just want to show the world their new Paris designer collection?

2. User aspirations:

The issue here is how you want your users to feel about having visited your site. Does the user want to come away with ten pairs of shoes for twenty dollars, feeling they've got a bargain? Or do they want to come away feeling they've just treated themselves to a pair of very special crocodile-skin stilettos for twenty thousand dollars? Examining the aspirations of both the user and the client comes in very useful when you come to sit down and plan the look and feel of the site. Users who want to spend thousands on a pair of shoes aren't going to be encouraged to do so if your site has the look and feel of a 'pile 'em high, sell 'em cheap' discount store.

3. Client aims, user aims:

The next stage is to take a long, hard look at the aims of the client: in other words, what do they want the users to be able to do when they visit the site? And similarly, what do the users themselves want to do? There may be a potential conflict here, between what the client wants to provide and what the user wants to be provided for them. Imelda Marcos herself won't get much user satisfaction if she's determined to buy the entire Paris shoe collection but the website doesn't allow direct purchasing.

Your aim is to apply both the client needs and the user needs to the structuring exercise. You have to imagine yourself to be a site visitor, just like the architect working on the hotel has to imagine himself to be a hotel resident. When the hotel resident first approaches the hotel, what do they want? If the first requirement is to be welcomed and checked in, how best to provide for those requirement by means of the building's design? This is where all architects need to strike a balance between functionality and visually striking design. It's no good if the entrance is terribly imposing and impressive, but the resident has to wrestle with a heavy door and manhandle suitcases through a narrow entrance.

In the same way, imagine that you are the website visitor. You've stumbled across the site on a search engine, and the summary told you this is the place to see this season's Paris collection of reptile-hide loafers. Visitors who come wanting to look at the collection aren't going to be won over by an all-singing, all-dancing Flash presentation on the splash screen about the way that shoes are made and where the raw materials come from.

4. Don't forget content research:

Don't stop at researching the client and the user. Researching your content is just as important. If time and budget allow, you should be researching your socks off. Don't just make do with the handful of company brochures the client gives you - visit the premises, meet the people, learn about the products for yourself. Become an expert on shoes, leather, synthetic fibres, shoe construction, marketing and selling. This will prove worthwhile when you come to structure the material: you'll be able to avoid reflecting in the website structure all those little quirks that work their way into any company's day-to-day operations, especially things like illogical categorizations and inefficient practices. By being able to identify anomalies and present a more coherent view of the company and its operations, you'll be more able to provide an intuitive user experience for the website's visitors.

Once you've considered the basic areas of client aspirations, user aspirations, client aims, user aims, and done some research on the content itself, you're in a good position to begin to structure the site. The findings of your research will act as a set of ordering principles that will guide your decisions on how to fit the content into a structure, and where the inter-relationships lie.

Is it Navigation or Architecture?

Before applying that research to site navigation, it's worth looking at the difference between website architecture and navigation. It's a crucial point. Where navigation is the act of moving from one space to another within a website, architecture is the design of those spaces and the relationships between them to make the navigation process - and therefore the user experience - as conducive and intuitive as possible.

Think of architecture as the ordering and structuring of your basic content, and navigation as the reflection of that structure in the devices that move you around that content (i.e., the navbar, the menus, etc).

Translating architecture into navigation

This article assumes that you're creating a commercially-oriented website which aims to either sell a product or promote a company (or both), and that your overriding objective in designing the site is to communicate information as clearly as possible without drawing attention to the means of communication. In other circumstances it's more legitimate to provide a less transparent interface, for instance on a more artistically-inclined site.

If you've planned the structure well enough, the navigation devices should be suggesting themselves by now. For that reason, I'm not going to talk about where to put navbars, or how to colour the hypertext links, or any of the more tactical minutiae of website design, because we're talking strategy here, not tactics.

So instead, here are some thoughts on how to best reflect that carefully-planned website structure in the navigation system. Any queries can usually be resolved by referring to your research on client aspirations, user aspirations, client aims and user aims.

* Streamline the structure for representational purposes:

As you represent it in the navigation system, your structure should be vastly simplified. Don't offer the user the opportunity to jump from every page on the site to every other page on the site (unless the site is less than a dozen pages or so). Too much choice is confusing and counter-productive.

* Represent the (streamlined) structure in a collapsible main menu system:

Collapsible main menus are an excellent alternative to a site map. A collapsible main menu should be somewhere around on most pages, as a 'you are here' type reference point, and also as a 'how to get there' guide. Collapsible main menus are also good for a quick site overview. There are varying opinions on whether or not it's a good idea to link to all sections of the site from all pages. A limited, localised set of options can be unbelievably frustrating for adventurous site visitors. Limiting the available options to a set of main sections, and doubling up by 'concealing' them in a collapsible main menu, is a safe compromise.

* Go easy on the site maps:

Use a site map if you feel it's appropriate, but the vast majority of web users are not spatially-aware enough to relate a textual, or even a visual, schematic to the actual website with 100% success. The problem is compounded when you have to leave the site map to get to the destination you want.

* Be visually consistent:

It's a basic point, but how many web designers ignore it? Use consistent colours, graphics and layout - and the name of the site/company - not only to reinforce branding, but also to reassure the visitor that they're still on the same site. You might also consider using colour as a section-identification device: blue for the online shop, green for recruitment, red for company information, etc. Be careful with sub-sites in this respect (sub-sites being those discrete collections of pages within the overall website, like those pages dealing with a particularly strong brand of product). Reflect the individual character of the content, but make it clear that it's a sub-section of the overall website.

* Lay off the back button:

Don't put your users in a position where the back button is their only means of retracing steps. Pretty much everyone will use the back button at some stage, whether you provide an alternative or not, but apart from being discourteous to your users, compelling them to use the back button is a sign of the fundamental failure of your structural design (or at least its representation in your navigation system).

By way of conclusion, it's worthwhile placing more emphasis on the architecture of your site, not only because it makes for a more satisfying user experience and reinforces the client's image and branding, but also because it saves you time in the long run. Designing a set of discrete, well-defined spaces makes the navigation system simply fall into place. It also saves time when reworking the site in the future. Architects know a thing or two when it comes to designing something that lasts.

Recommended Books

Information Architects by Richard Saul Wurman, pub. Graphis Inc - serious tome stuffed with case studies and examples of how to structure information into easily-digestible forms without mauling it out of all recognition in the process

Information Architecture for the World Wide Web, by Peter Morville and Lou Rosenfeld, pub. O'Reilly - more specific application of the principles of information architecture to the particular requirements of the web

Designing Web Navigation, by Jennifer Fleming, pub. O'Reilly - accessible and easily-read A to Z guide covering all the basics.

In Your Face: the Best of Interactive Interface Design, by Daniel Donnelly, pub. Rockport - the introduction by master of off-the-wall interface design Kai Krause is a gem of enlightenment ("An interface is about hiding complexity from the user. It's about guiding a process, without cognitive understanding of what goes on beneath.")