13

In my opinion, the Site Map is possibly the most important deliverable for any IA or User Experience project. The structure of the website needs to be pinned down before anything else can be started.

In the past it was acceptable to have seperate pages for each different area, but now with the posibilities of Divs, Tabs, Ajax etc it often makes more logical sense to have multiple areas of content within the same page.

How should we go about constructing site-maps if individual pages now contain multiple additional content?

As an example, I am working on an ecommerce site with the idea of having a landing page for each product, which contains tabs/AJAX expanders/UpdatePanel (or whatever is deemed to work best when we pin down the structure) for Customer Reviews, Videos, Full Product Specifications etc.

  • Should this have a seperate Page Node on the sitemap for each of these tabs (and if so, how should these be discerned from standard pages?)
  • or would just a single page node suffice provided the wireframes themselves have enough detail.
Improve this question

2 Answers 2

Reset to default
4

i might suggest both. :) i'll build a standard sitemap and then where dynamic detail is needed, either reference a flow diagram (on a separate page from the sitemap; this helps minimize the "confusion" but compartmentalizing the complexity), or modules (also on a separate page) that simply consist of a list of things they'll contain.

i've even gone so far as to create super-high-level "wires" to demonstrate the type of content in that state, not necessarily the location, size, etc. this can be tough with clients who take everything literally, though.

to illustrate tabs on a page (i think these are pretty distinct from AJAX, etc; they're navigation-oriented, rather than content divs), i've use a box-within-a-box.

does that help?

Improve this answer
2
  • That's not a bad shout. Referencing off to a seperate document. Maybe in the same way as Wireframes have annotations I could annotate the sitemaps. I'll be doing full wireframes for the seperate tab panels anyway so the actual detail will be in the spec.
    – JonW ♦
    Jun 15, 2010 at 15:57
  • yes! sounds like a good plan. when using axure or omnigraffle, i've found it helpful to link labels on the sitemap to their appropriate documents (whenever they're created). also, separating out each major piece allows you to speak to them individually, not allowing clients to be distracted by the ton of info on the page.
    – the hilker
    Jun 15, 2010 at 16:12
2

I build a general site map with just boxes and names of the pages, and also attach a content inventory (table) to that site map. So the tabs and any extra content on a page would be described in the inventory and not on the site map in my case. The content inventory outlines the content (really briefly) and the sitemap shows the navigation structure. Example - screenshot 1 & screenshot 2

It's really easy to comprehend, but the downside is that any change needs to be reflected in 2 places - the site map and in inventory every time. (I use Omnigraffle and don't know how to automate the relation of table + graph.)

Dunno if that can be used in your case. I have the liberty to set my own standards for documenting the design process at my company, sometimes you can't mix documents like that I hear.

Improve this answer
1
  • Thanks for the feedback. I like this approach, as it is basically a fully annotated site-map rather than just a site hierarchy diagram. It keeps the diagram itself clean but there is enough info in the inventory to provide further info should the reader require.
    – JonW ♦
    Jun 16, 2010 at 11:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.