In this section, we consider the various ways a site might be organized. The first step is to examine the nature of the information you’re dealing with.
Is it structured or unstructured? Is the information homogeneous (all pieces follow a similar pattern) or heterogeneous (no simple format works for everything)? Is the information specific and concrete or ambiguous? Do you have comprehensive coverage of information within a domain or jut scattered pieces?
Often, information can be massaged into a more coherent and complete form, so it’s worth spending time getting to know your material.
Topology
An initial organizational question is what structure or topology to build. The topology is the primary way that pages are linked together.
By far the most common topology is a hierarchy or tree. While hierarchies don’t fit all types of information, they have several important advantages: navigation through a hierarchy involves relatively few steps, it’s relatively easy to represent where the user is within a hierarchy, and hierarchies expand to fit more data relatively easily.
In a linear topology, pages are organized into an ordered sequence. Linear topologies work especially well when users must complete a process in a specific order, such as a purchasing process.
Many other types of data, such as product lists, may seem naturally linear, but are still better organized into a hierarchy for efficiency of browsing. Avoid forcing users to view items in a specific order unless it is absolutely necessary to go in that order to complete a process or make sense of a storyline.
A matrix or grid can be appropriate when information varies along two dimensions or follows a two-dimensional map.
While this is seldom adequate as the sole organization of the information, the information can be accessed as a hybrid between a hierarchy and a matrix.
For instance, in a product database, the user should be able to view a list of products and click down to an individual product (a hierarchical organization), but from the individual product page, the user may click to view the next color or click to view the next product (a two-dimensional organization).
A full mesh is a set of pages that are fully interconnected – every page is linked to every other page.
For a small web site or a small subsection of a site, this allows rapid navigation among related pages. For larger sites, however, a full mesh is not practical.
Sometimes information doesn’t lend itself to a formal structure, and an arbitrary network or web is appropriate.
The World Wide Web itself appears to have this kind of structure, with sites linking back and forth with other sites with no dominant structure, with sites linking back and forth with other sites with no dominant structure.
This kind of linking may be appropriate in certain research scenarios where the best structure hasn’t yet been discovered, and may be a necessary reality in any scenario without a central controlling authority.
Even so, imposing a hierarchy above such a structure can make it easier to use the information within. For example, Yahoo! provides such as imposed hierarchy for the Web as a whole.
Most of the time, topologies should not be absolutely pure. It’s fine to create shortcuts that cross from one subbranch of a hierarchy to another, and you’ll often find that a subset of a hierarchy belongs under more than one main branch, requiring two branches to share a subsection.
Hybrid designs often make more sense in a given domain than a pure approach. However, any such exception creates a potentially confusing situation for the user, so when you break out of the structure the user is expecting, provide strong cues about what you’re doing.
Breadth versus Depth
The main tradeoff is between scanning time and page traversal time. In some cases, fewer links in the navbar means less mental complexity in making a choice, which would seem better.
However, if the site is large, this initial decision will require that many more choices will need to follow, thus creating more opportunities for users to make a mistake.
In the end, up to a reasonable limit, having more links is better (that is, a broad structure), provided that the navigation is well organized.
However, if the navbar doesn’t fit on one screen, scrolling can make scanning the options significantly longer. Also, if the font size is small, scan time goes up. Thus, a practical upper limit to the number of links is roughly the number that will fit on a single screen at a reasonable font size.
We disagree with the common recommendation that a limit of seven links at each level is about optimal (usually argued for on the basis that people can remember about 7 (2 items). It’s not clear to us why memory for a list of links should be a major factor in the task of navigation.
In fact, evidence suggests that people get confused about their location when in hierarchies that are deeper than three levels, and this suggests a limit to the depth, rather than the breadth, of a site.
In one of the few studies directly addressing the issue of breadth (Larson and Czerwinski 1998), researchers found that two levels below the home page was in fact better than three levels (even if each level was fairly broad), and that 16 links in a navigation bar worked better than 8 or 32.
That study had its own limitations, but we’d argue that, based on this study and the tradeoff of scan time and page traversal time, sites should generally be no deeper than three levels and no broader than about 16 options.
Greater breadth is possible provided that the list is well organized (i.e., in a clear order and grouped well) and that the links are easy to understand without further explanation. This breadth and depth allows for over 4,000 pages, so should be adequate for many sites.
Semantics
Semantics refers to that aspect of the organization based on the meaning of the material. Some broad organizational alternatives are based on how you want to conceptually divide the top-level categories. Below are some alternative methods of organization.
Task Based Organization
This approach organizes around the principal tasks that a user must accomplish on the site. The main navigation items are labeled according to these tasks, such as “Send flowers,” “Choose a gift,” and “Contact Us.”
Each choice goes to a page that either refines the task options or begins the first step of each task. Task-based organizations are usually the best choice, and where other organizations work well, it is usually because they fit the user’s task well.
User Type
This approach organizes around the principal types of users who come to your site, so the main navigation includes options like “For our customers,” “For our employees,” “For shareholders,” and “For vendors.”
Often, the second level of organization under these options is a task-based navigation, where the tasks are selected for each type of user.
Topical
The topical approach divides the domain into logical categories based on the information content rather than the users or their tasks. This works well when the user’s goal is to find information related to a specific topic.
An example is breaking up a “Products” section into logical product categories, such as “Cars,” “Trucks,” and “Vans” for an automotive site.
Organizational Structure
As a form of topical organization, sometimes a site will be organized around the internal structure of an organization, often because this is the easiest way to organize the collection of content for the site and to manage changes within each subsection.
An example of such a site organization is “Our president,” “Sales,” “Customer service,” and “Research and development.” This is seldom the best way to organize information for your users except perhaps for an intranet.
Life Event
This organization is based on correlating with major events in a persons’ life. This is like taking a broad perspective on the task-based approach (each life event encapsulates one or more tasks) and may be appropriate in very general portals, with links like “Buying car, “Buying a house,” “Getting an education,” and “Finding a job.”
Implementation
This organization fits the way the site is implemented, such as dividing off secure areas from nonsecure areas or placing access to different databases into different sections. This may be necessary when connecting a new site to a legacy system (an old system that you’re not able to significantly modify).
This is seldom an optimal basis for architectural decisions, from a usability point of view. When necessary, the key is to make the transition between different organizations obvious to the user so you don’t create a false expectation of consistency.
It branches to separate pages, presumably based on which database is searched, rather than the more logical approach of going to a single page with combined results from both databases.
Systematic Organization When No Semantic Relationships Exist
When no meaningful organization of the information is apparent, it may be more appropriate to simply present the options as an alphabetical list. For instance, a list of people may not fit into logical categories.
How pure should you be in choosing an organization? Do sections always need to be mutually exclusive? Does the taxonomy have to represent exactly equivalent categories at each level?
While some will argue for a pure classification system, you’ll usually find that it imposes too serious a constraint on the organization, and you’ll find that making reasonable exceptions will rarely confuse the user.
In other words, if you were designing pets.com. your main navbar could contain Gogs, Cats, Fish, Reptiles, and Contacct Us. Of course, you’d want to visually distinguish the Contact Us to make it perfectly clear, but this list is unlikely to confuse any users.
Terminology
Regardless of the way the organization is broken down, the perception of categories can be heavily influenced by the terminology used to label categories. Thus, “Buying a Car” and “Renting a Truck” focus more on providing information, while “Buy a Car” and “Rent a Truck” focus more on making the transaction.
Some users will avoid clicking on “Car Buyers” because they’re just looking,” but wouldn’t have any trouble following a link labeled “Cars.” Thus, select a label, and its specific phrasing, that sets up the right expectations.
Order
The order of options in a navigation bar guides the user’s understanding of the overall organization and can have a major influence on the speed of navigation.
The order of topics affects a user’s scan order and the memorability of items. When topics have no particular order, users will typically scan the items first to last, or sometimes last to first.
In this case, the first few items will be spotted first and remembered best (a factor called primacy), and the last item or two will be similarly easy to spot and easy to remember (since they’re the last items to be read, they’ll remembered best, a factor called recency).
When topics fall into a predictable order, such as alphabetic or chronological lists, the user can scan more quickly to the item of interest.
When a logical or conventional order is available, it’s often the best choice. For instance, products may be listed alphabetically or by price.
However, especially at the top level of a site, frequently no logical order is possible. In such cases, the order should typically be by task priority – what is the most common or most important task or tasks?
Place the most important options in the first few slots and possibly as the last item in the list.
Support Pages
While most of your site is probably organized around your core content, a variety of pages are provided to make it easier for your users to effectively use your content and complete their tasks. These include pages devoted to navigation (router pages), help pages, and error pages.
Router Pages
Router pages are designed to help people navigate to their destination. They include your home page site maps, tables of contents, indexes, and intermediate your pages where users choose among options to hone in on their target content.
While these pages can be crucial aids to your user, avoid overusing pages with navigation but no content. Look for opportunities to provide users with applicable information at the first opportunity.
That is, promote content to the highest-level page where you know the user would want it. Content pages can also provide routing functionality, by including standard navigation tools and by including relevant shortcuts.
Avoid dead ends, where users get to a page with no outbound links. Whenever you have a good idea what information users may want next, include links at the bottom of the page to help guide them to the appropriate spot.
Help Pages
Some types of help pages may fall naturally into your site structure, such as Reference pages, Frequently Asked Questions, Customer Support, and Contact pages. However, context-sensitive help, where relevant information is provided from any point in the site, may involve hundreds of pages that don’t fit into a natural site topology.
For instance, you may want to provide help buttons in input forms, so that a user can pop open a window with examples of appropriate form responses.
These types of pages can be diagrammed independently from your main site architecture, and you may indicate where they’re used simply by marking pages from which help is available with an asterisk in your site diagram. An example of context-sensitive help is shown in.
Error Pages
Similarly, error pages can occur from many different points in the site, and many different error pages may appear from input. These usually need to be handled as a special case in the site architecture.
Of course, you should design so that error pages are infrequently needed, but where they are needed, you should document what types of errors can occur after form input for each form.
Typical types of user error include missing data, invalid input values, and invalid passwords. You should also list error pages that must be designed for the whole site, such as file-not-found pages.
While most sites leave these as the default error pages provided by the server, careful design on these pages could help people correct their mistakes more effectively. For example, a file-not-found page should indicate what URL the user entered, suggest that the user check the spelling, provide links to pages the user was likely to be looking for, and other recourse to contact someone for additional help or to report a bug. Illustrates a user friendly error page.
Paths
A path or trail is a sequence of pages designed within an overall structure to provide a linear experience for the user, to provide a single coherent narrative within a larger collection of information. This may serve, for instance, as a guided lour through a web site.
A path can be built into a site so that the user will have only one single option at all points. Some designers use this approach to force users through a set of pages to ensure that the users see all the information the designers meant them to see.
Thus, some have suggested the use of entry and exit tunnels, sequences of pages users must go through when entering or exiting a site before they have spend getting to the desired destination, which decreases the probability they’ll persevere to completion.
This narrow path approach is necessary for certain types of transactions, where each page depends on information gathered on previous pages.
In “wizard” style interfaces, a user goes through a sequence of pages, answering prompts on each page. This can be useful when it considerably simplifies the interface, provided that users can escape the process when they need to.
A site can also provide a “suggested” path without actually constraining the user to follow it. Including Previous and Next links on pages can allow users to easily traverse a path through your site, while the presence of a traditional navbar gives them the option of going directly to the information of most interest to them.
Paths can be built outside the structure of the site as well. For instance, other sites can build frame-based views on your content, allowing them to show the user a limited subset of interest.
Similarly, a secondary window can be designed with Previous and Next buttons, which take users through a given subset of your information. These types of use make sense when someone is developing a tutorial or presentation and drawing information from a large collection of material.
Report This Post
