I am working on a school project to analyze the existing information architecture of a website and then redesign it (I have been referring to this slide).
I came up with a site map which shows the navigation of the website.
The individual navigation links have features which I believe should be depicted in the site map to explain the need for redesign.
So my question is how do I effectively show the navigation links and the features inside them in a single diagram.
A node-link map like you’ve drawn is the usual way to show the information architecture. In my diagrams, I show aspects about the links by putting text or symbols beside the arrows which represent each link. For example, if the link to Trash page is labeled “Delete History,” I’d write “Delete History” by the arrow, or if the link from Account to Summary were a button that executes a query, then I’d provide a brief text description of the parameters (e.g., “Account Number or Name”).
I also use some graphics to distinguish types of links. For example, arrowheads on the link lines like you have imply one-way linking –there would be no way back to the Account page from Summary, except via the Back button. I represent two-way navigation with a simple line with no arrowheads. A dashed link line and a line with a crossbar also have special meanings in my diagrams. You could extend this coding to represent other aspects of the link by using other visual features (e.g., weight, color, shade of the lines). Just include a legend in your diagram.
Finally, I try to make the order of the pages on in the diagram consistent with their position of their links on most pages. For example, the menu on the Messages page would be ordered as Create, Inbox, and Trash.
In my experience, however, the main challenge of node-link maps is keeping them from becoming too cluttered to be understandable. These days, sites of even moderate complexity would have unintelligible node-link maps if you were to show every possible path between every pair of pages. Even drawing boxes to represent each page like you’ve done becomes too much (for this reason, in my diagrams boxes mean something else that allows me to simplify the diagrams by capitalizing on the repetition in web sites)
This implies that maybe you don’t want to put too much additional information in the node-link map. For example, if you want to represent complicated visual aspects about the link’s representation on the page, put that in the wireframes to accompany the diagram.
I’ve the details on my node-link map drawing conventions, with examples, at Navigation Structure Diagrams.
