I'm creating a sitemap for an enterprise application.

For one section in the application, there is an edit calendar feature. Once clicked on, there are three sections/or different types of calendars to set up.

  1. Start/end dates for the entire project
  2. Blocked-out dates (holidays and nonworking days, etc.)
  3. Start/end dates for specific tasks within the project

We currently use a step wizard to edit the calendar so the user has to set up the dates in that order.

In my sitemap, do I draw out each step as a separate box, or would that go in a separate user flow diagram?

Sitemap sketch

  • I'd probably just run this question by whoever I'm preparing this for. "Hey, just wondering, for that sitemap, do you want it to be pretty detailed, showing all of the wizard steps and everything, or should it just be more of an overview of the application's main sections and workflows?" I don't know that we'll be able to give you a better answer than what you'd get from asking the preceding question to the concerned parties. – maxathousand Jun 19 '19 at 19:50
  • Is there a best practice for sitemapping? Would you put steps in a wizard, or tabs on a page in a sitemap? My team can't fully agree on what level of detail should go into a sitemap. Since I'm trying to take inventory in order to improve the application's IA, I thought more detail would be useful. – MRL Jun 19 '19 at 20:13
  • I've never actually produced one, but I'd make sure all of the workflows are covered, meaning if each tab has additional links that point to other pages or actions that send users down different workflows, I'd include it. A wizard is probably very linear, so it wouldn't be as important to represent each page. But again, I think it'd be quickly and most appropriately answered by whoever you report to, which is why I don't want to write an actual answer. It seems like this question might be specific to your team and what they're looking for and think would be helpful. – maxathousand Jun 19 '19 at 20:18

What are diagrams for?

Diagrams are graphical means to communicate concepts and ideas. So long a diagram clearly conveys its intended meaning - it's job done.

Danger danger

Graphical vocabulary is rich. Concepts can be conveyed using different colours, shapes, arrowheads, thickness, position, to name a few.

There is usually an inverse proportion between how much you put in and clarity; in that the more you include the less clear the whole thing becomes.

Visual > Semantic

Where the Mona Lisa is just plain pretty, the visuals in a diagram are just proxies to some semantics. For example, a rectangle denotes a page, a directional line denotes a dependency, and so on.

You can overload a diagram both ways:

  • Visual
    • To many visuals (like 1000 nodes) or
    • Too many visual features (too many shapes, colours, sizes etc.)
  • Semantic - too many concepts being involved.

Semantics scoping

One of the most common classification of diagrams is:

  • Static - communicate the relatedness between concepts that does not change over time.
  • Dynamic - communicate how things change over time, or a flow in time.

A sitemap is in principle a static diagram - it shows the structure of your site, in what is typically a tree layout. That structure doesn't change over time, nor meant to convey dynamic (over time) aspects of the site.

A flow diagram is a dynamic diagram, it shows how users navigate progress through a process over time.

Worth noting that there are hybrids, but mostly in the form of dynamic diagrams where boundaries denote parents (a 2 level deep structure).

Things to watch for

It is somewhat surprising to see a box titled Edit Calendar in a site map. Editing is interactive and should be part of dynamic modelling. A Calendar page seems more fitting for a sitemap.

In option two, there are directional arrows (again, a thing you'll normally see in a dynamic diagram). Given it's for a sitemap, I assume there will also be non-directional connections? If so, then consider that readers need to infer what these two types mean, which is an example of potential overloading.


Consider what exactly are you trying to communicate. If it's a sitemap in the traditional sense, it shouldn't include Edit nor flow semantic.

| improve this answer | |

A sitemap shows the different pages in a website or web app. In the case of SPAs, the sitemap should show the different sections. In your case, under"Edit Calender", there is a wizard that has 3 steps that are in a linear order. Steps in a workflow are not shown in a sitemap. You can break the steps into a workflow diagram and just have an annotation in the Edit Calendar box. The sitemap functions as an index that shows the overall scheme of the app and its different sections.

| improve this answer | |
  • This is an SPA. Not sure if that impacts the answer? – MRL Jun 19 '19 at 21:00
  • For SPAs, the sitemap can show different sections e.g. Edit Calendar. The steps in that section should be shown in a workflow diagram. – Ling Jun 20 '19 at 16:43


If this is for developers then every interaction should be noted: from tabs to modals to revealed divs to links to hover interactions. And if there are different interactions between desktop and mobile or different break-points then these differences absolutely need to be documented. It should refer to functional flows and use case documents / Jiras, etc...

This is time-consuming so lots of places only do a perfunctory job of it.


The sitemap should be organized in a way that best allows your users to find the information. The sitemap is not a document for developers it's for your end users, who presumably are not in the web development business.

As for example, the sitemap shows that there is a calendar feature. You may have a div that displays detailed information about what this calendar feature does but that level of detail should, most likely, not be front-and-center.

| improve this answer | |
  • The intention of this sitemap is to document and diagram the pages on the applications for the business (developers, designers, analysts, etc.) not for the end users. We'll be using it to reorganize the site to recommend improved information architecture. – MRL Jun 19 '19 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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