Audience / Scenario
The people who visit/use the site:
- want to browse the structure of the site without refreshing the page
- require visualisation of the hierarchical structure of the site for orientation purposes
The people who own the site:
- want dynamic visualisation of their content structure
When and where?
You should use this pattern when:
- you want to display a visual representation of the hierarchical structure of your site
- you want to reduce load on the server by loading navigation on-demand
You should avoid this pattern if:
- your site does not use a hierarchical structure
You should incoporate this pattern in any of the following locations:
- navigation panels
- separate navigation page (particularly useful if your site design doesn't incorporate a navigation panel)
Solution
Use an AJAX Tree View to dynamically visualise the hierarchical structure of your site and it's contents and allow direct navigation to any location.
It's essential that, werever possible, the tree view automatically expands branches to show the path to the current page and that the current page is highlighted. This allows the visitor to see exactly where they are in your site.
Where possible, show "connector lines" that go from parent nodes to child nodes. On large tree views this makes it much easier to find the parent of a page because you can follow the line back up to the parent.
Why?
Most well-organised sites use a hierarchical content structure to group related content and the tree view provides a dynamic visual representation of that hierarchy.
The first purpose of a tree view is to show the visitor exactly where they are within your site. They should be able to see the path from the logical "home page" for the current area of the site right down to the current page.
For example, on this page the tree view shows:
The next purpose of a tree view is to allow the visitor to browse the site structure without leaving the current page - they simply expand/collapse branches to show/hide different parts of the site structure. It's important to note that while they browse, the display of their current location is usually retained so they can see where other content is in relation to the current page.
Because items in the tree view are hyperlinked, the visitor can immediately navigate to any other location within the site. The tree view is so flexible that it inherently implements several navigation patterns:
- Breadcrumb Trail Pattern – the "parent" pages (path from the logical "home page" of the current area of the site to the current page) are shown, allowing the visitor to "zoom out" to more macroscopic content by navigating to a parent page
- Linear Navigation Pattern – the "sibling" pages (pages with the same parent as the current page) are shown, allowing the user to navigate to content directly related to the current page
- [Random Access Pattern] – the user can view any part of the site structure and navigate to it directly without having to navigate to intermediate pages
Note: Although the tree view implements several other patterns,
Examples
A "live" tree view is shown below:
Unknown macro: {pagetree}
Another example can be seen on our Dashboard.
Anti-patterns
Don't auto-collapse branches when the visitor expands other branches within the tree view! While it saves screen space, it's not what the visitor is expecting and actively impairs orientation within the site. For example, if the visitor is browsing the site structure, they don't want their current location to suddenly dissapear (otherwise they might not be able to find it again).
Don't show non-hierarchical elements within the tree view. Although you could display things like related pages, incoming links and outgoing links within the tree view, it's best not to do that. The simplicity and usability of a tree view comes from the fact that it only shows the hierarchical structure of content which is easy to understand – if you start adding all sorts of other stuff, it gets confusing real quick.
Related Pages
Patterns
|
Documentation
|
Macros
|
Added by