Site Structure - Making a sitemap

A sitemap is a visual representation of the site's structure, organization flow and grouping of content and information.* Put all content from the old site that your audience still finds valuable, and placeholders for content to be developed out on a very big table. (We use index cards).... Designers or Project Managers or both generally create the sitemap.

Components

• a box for every page
• overall structure
• external links
• site navigation (what will you call each section? how many paths will there be to the information?)

Be sure to keep this someplace where the entire team can access the document. (This can be a spreadsheet on the server or a giant printout in the hallway)

Navigation

How are you ordering your content? Most developers take this opportunity to educate their clients on user focus issues--meaning you'll help your boss or client look at the site from a user perspective--in order to keep the site map from looking like an org chart. This is where your initial research, design specs draft, and user profile come in handy.

Navigation or menu naming

Once you've grouped your content into content areas (according to how users will look for it), you will name those content areas. When labeling navigation items, it is critical to focus on the user.

User testing

You've figured out what goes where and how you'll label those areas. It makes sense to you, but what about the user? You can save your self a lot of reworking later by testing paper or click-through prototypes now.

Menu Names

On the UIUC site we tested the navigation before we even started the site desgin by bringing a list of terms to the quad and asking passersby (a good chunk of our audience are on-campus users) what they thought they'd find listed under each term. If their answers matched up with the actual content, we were on the right road, otherwise, time to re-evaluate those names. (For example, "Campus Overview"'s first name was "About Illinois". Our audience thought we were talking about the state,not the school.)

Navigating

User-testing for this should be task based and does not have to include design development. You can create a text-only page with a click through or paper prototype . Give your prospective user a task. Time them and note how many wrong turns they take before they accomplish the task. Re-organize your site as necessary.

Paper Prototype: Draw a complete interface, including buttons, menus, and other interface elements on a bunch of sheets of paper -- one piece for every window, dialog, or behavior. Don't use a ruler. Hold the pieces of paper in front of a potential user. Have them attempt to perform tasks relevant to your system without how-to assistance. After a few users, you'll have a good idea of what's utterly unusable. See an example from Neilsen's video.

Approval

Once you know that your site structure and navigation makes sense to your audience, tell your client/boss/stakeholder. Start by reminding yourselves and your c/b/s of the approved goals and user profile. Outline the testing strategy and results and explain the improvements you made to ensure navigation is as clear as possible to your audience and show them how easy you've made it for the users to get to their highest-priority information.

Congratulations

*This sentence stolen from Kelly Goto's "Web Redesign: Workflow that Works."