FREE Subscription to Dr. Dobb’s Digest: Same Great Content, New Digital Edition
Site Archive (Complete)
Architecture & Design
Email
Print
Reprint

add to:
Del.icio.us
Digg
Google
Furl
Slashdot
Y! MyWeb
Blink
January 01, 2002
Site Map, Schmite Map:
Structured Thinking for Successful Site Design

WebReview.com: June 15, 2001: Site Map, Schmite Map: Structured Thinking for Successful Site Design

At a Glance

Sure, you'll need to work out where the nav bar goes, and how to code it, but won't it be easier to do that when you know what it's going to contain? And won't it be easier to code the site's elements when every one of them has been chosen for their importance to the overall success of the site?



True, detailed plans of what's going to go where on your future site are essential to its successful construction. But a flaw in the original plan will render all of your diagrams and Gant charts worthless, no matter how detailed or beautiful they are. The solution: Think structure rather than plan. A good design of the inside of a building's structure will include—among other things—a detailed list of the amount of toilets needed for the total number of offices/inhabitants. A detailed building plan on the other hand will include where these toilets are going to be situated—pretty useless to the building's success if you have insufficient numbers of them. No user will think, "Those nonexistent toilets are well placed." Instead they'll think, "I wish there was a toilet around here."

Make sure your site has enough toilets, eh?

The first step to creating a solid site structure is to identify:

  1. the resources you have
  2. the essentials to the site's success
  3. the resources you need to fulfill these essentials
  4. the things that are simply desirable

Here's a hint: If you need more resources than you have then you need to start the above process again. Or get some help. Either way, get the essentials working before you get the desirables working. Many, many sites spend too much time anti-aliasing the button for "Search Site" when the problem is that site search doesn't return correct responses.

If you get this first step right, the rest will follow suit. You'll soon find that the site map has practically drawn itself. Sure, you'll need to work out where the nav bar goes, and how to code it, but won't it be much easier to do that when you know what it's going to contain? And won't it be easier to code the site's elements when every one of them has been chosen for their importance to the overall success of the site?

Once you have identified the essential site elements you can begin looking at reusing code to save time, simplify debugging, and help prevent RSI.

Defining Your Resources

Begin with the resources you have or have access to: Time, server space, person hours, technical skills. These are unchangeable. Then figure out what you can do. This is important. For example, I can lay project plans out in a useful and constructive way. But I can't lay project plans out in a pretty way. My friend is a whiz at presentations, so for a small fee (dinner at a good restaurant) I give him my plans and he makes them look wonderful.

No doubt your project will need some or all of the following:

  • HTML coding
  • Hosting and server knowledge
  • Graphics and layout skills
  • Copy checking and subbing
  • Data (content) entry
  • Backend skills
  • Large scale data transfer
  • Usability testing and reworking

And may also need:

  • Audio/video file encoding
  • Rich media skills (Flash, Shockwave, VRML, and so on)
  • Software licence creation (if you haven't gone the OS route)
  • File storage costs
  • Domain registration
  • Domain Hosting
  • Email Newsletter creation
  • Email newsletter sending and maintenance
  • Ongoing maintenance costs
  • Community creation
  • Community moderation
  • Real-life customer fulfillment and support

Which of these skills do you have? Go through this list with your team, or an interested but unbiased friend if you're working alone, and rate your ability (from 1-10) on each of the above. Don't overlook your key skills, but also beware of exaggerating them. It's far better to admit that you can't write help text for toffee, but can deliver the help file that's needed for that section, than to have an angry "creative" berate you because her login is rejected with "invalid user argument ID=61."

Also rate the services that you have. If you're a member of OpenSRS and can thus register domains for next to nothing, put this down, but spin it on its head and say that as a result you can ensure all flavors of domain name are covered—for the same cost. Ditto if you have hosting space coming out of your ears and an arrangement with an aftercare company already in place. Your client might have these bases covered already, but will be impressed at the breadth of your thought pattern. And, you never know, you may get an extra contract out of it!

Essentials to the Site's Success

Once you've established a resource list, move on to the specific project itself. What are the must-haves? It's very sensible of Jakob Nielsen to bemoan the amount of sites with images of the CEO on the homepage, and you should do your darndest to convince the client that this isn't a sensible use of your time or the site's usability. But if the CEO is paying for it and really wants that, you may have to go with the flow.

How do you decipher what the client really wants? Ask them to write a one-page summary of what the site should do, ranked in order of importance. The shorter this list is, the easier it will be for you to create.

If they can't do this, then you need to backtrack a stage and become a consultant.

For example, let's say that your job is to interpret the following wishes of Jim Jones from AG Books PLC:

  1. The site should allow customers to find the product nearest to their requirements from our product range and purchase it.
  2. The site should give some indication of our physical presence.
  3. The site should have a big picture of our favorite dog on every page.

Now translate this list into a list of deliverables. Based on these requests, you'll need to:

  1. Populate the site with the product range.
  2. Build a search and navigation for the product range.
  3. Build a shopping cart application that interacts with the product range.
  4. Allow some method of purchasing the product.
  5. Produce a map and include some content as a brief blurb on the front.
  6. Produce a picture of Woofy, the owner's dog and shop mascot, and include it on every page.

These are baselines for the AG Books site. Assume the simplest solutions to this and then work at delivering these solutions. Reduce every section of the site to these deliverables and work through them. Let me demonstrate using the first point above.

In order to populate the site with the product range, you'll need to:

  1. Ask for a full list of the product range in electronic format with an indication of when changes to this range may occur.

  2. Work through the product range. What fields are common? What fields could change? If there's only one supplier, will it always be that way?

  3. If this range changes daily (as it may do in the example above) you'll need to explain to the client that the deliverables should include a way of updating the product range automatically with no extra coding needed. Why not also allow the ability to add new suppliers? As soon as you allow the ability to add, you're creating a dynamic site, which lets you create quicker and lets the client add content on their own. You're also adding value to the site and value to your bill. If, however, the client sells a never-changing array of wool types, consider whether the site needs this flexibility.

  4. As you create, do your best to fight "feature creep"—where you start with a plan of a house and end with a blueprint for a mansion. Many clients complain that they're being given pitches that go way above what they had to spend, simply because the site building process assumed more functionality than the client had in mind. You may think that not being able to purchase in real time is a foolish notion, but if the client currently operates a slow, physical search-based book finding service, using surface-based mail order, offering real-time credit card transactions may not be crucial to the site. And, to be honest, are you really going to generate that much extra revenue by building the application from scratch? If you have such an application already built as a turn-key solution, fine, indicate this to the client. But show how you will deliver what they want before showing what you think they want. Remember that the client has had experience dealing with their users already in the real world.

  5. Build the display for the product range so that you understand it. Build in dumb questions that users may ask later. There's no substitute for user testing, but just because you have access to the person who can answer expert level questions about the range (assuming your client can), don't assume the average user will. If product #4/3/1A is a ballpoint pen, call it that.

The Resources You Need to Fulfill These

After you create a list of what actually needs to go into the site, take this list and do process analysis on it—the digital equivalent of time-and-motion studies. Draw a physical map of how to approach the site, again beginning with the essentials, except now you hopefully understand exactly what these entail. Start with the most important area that you have identified. Rank the sections in descending order of importance. Then ask the client to do the same.

Chances are that they'll probably have a differently ranked list. So, identify big differences of importance. What do you see that they don't, or vice versa? Maybe the physical map is number 2 in their list of priorities, because they know that the store is difficult to find. And, along with all the whizzy New Economy things the site needs to do, it also needs to help potential customers find their way there.

Once the lists are similar, examine the similarities. Are you sure you are both correct? Get someone you trust to check the lists over. Once completed you will have a list of what needs to go into the site, explanations of why these elements are important, a list of features you rejected, the beginnings of a site map, and a sense of what the site needs to do. Then, go back to the list of resources that you identified at the beginning of this process, and cross-reference this against the structure. Anywhere that you identify something important to the site's success that you know you can't do, or haven't the resources to do, think of how you'll achieve this. This is where to tell the client that you'll need, an extra week, an extra pair of hands, or a parachute. Don't be afraid to be honest.

By examining the structure of the site you can understand how to make it a success. Then you can worry about what color the dropdown needs to be.

As for the things that are simply desirable—ditch them.


George makes Interactive TV applications and services for a major UK broadcaster. He previously produced Web sites for pre-school children and their parents, reported about technology and music for the BBC, and made pop records.


Related Articles
Implementing Information Across Your Site By Karuna Kapoor and Ved Bhusan Sen
Navigation Structures: Building Your Site's Backbone By Karuna Kapoor and Ved Bhusan Sen
Usability Matters By Claire Rowland

RELATED ARTICLES
No Related Articles
TOP 5 ARTICLES
No Top Articles.



MICROSITES
FEATURED TOPIC

ADDITIONAL TOPICS

INFO-LINK