On Structuring Website Content

Flowchart treeMost UX/web designers are familiar with flowchart creation. Early in the design process, we assemble a website tree, detailing relationships from home page (the tree trunk) to category pages (branches) to landing pages (leaves). This can be a helpful exercise to help clients visualize the flow of their future website, and make informed decisions about navigation and overall site structure.

The flowchart approach has its drawbacks, however. As website content increases, so too the supporting infrastructure. Cross-linking can be challenging to illustrate, as can search functions, access rules, and AJAX requests. Too often, these and other dynamic means of organizing content are ignored in favor of more conventional flowchart structuring. This results in more interstitial layers – tree branches in our metaphor – which in turn results in users having to click more times. And as we all know, extra clicks are poison to conversion rates.

This also sets up a guessing game whereby client and designer try to intuit how users will attempt to interact with the site. That alone isn’t a bad thing, but by asking “What is the best way to organize our products?”, we can easily fall into a trap of bad UX design: a single (and for some, unintuitive) way to drill down to a landing page, with a bunch of unnecessary clicking along the way.

Prune Your Branches

For websites with a lot of content, I like to keep one level of category pages. For example, an ecommerce site might include hundreds or even thousands of individual products, each accessible from a variety of different category pages. Search fields, dropdowns and checkboxes can provide further selection refinements, with AJAX keeping users on the same page. This approach allows for products to appear in multiple category groupings – think of it as a tagging or taxonomy system rather than a conventional directory/tree approach.

This approach also provides a natural way to create landing pages for the benefit of SEO. Keywords are moved away from the home page, and onto dedicated pages with relevant content.

Let’s say our company sells auto parts, and a user is trying to find an alternator on our older website. The user must click to choose the make, model and year of their vehicle, then on the “Electrical” category, then on “Alternators.” Then they choose a brand, and so on. Now imagine that all those clicks represent different pages(!) Our website is a labyrinthine network of pages, most with little content aside from a few links. By leveraging AJAX in conjunction with selection and search fields, most of those pages (if not clicks) could be eliminated.

Turn the Tree Upside-Down

We now know how to simplify our auto parts website – great news! But we also have an opportunity to craft landing pages that will help our organic rankings. For example, we might choose to create a page all about automotive electrical systems, and include a link on our home page labeled “Electrical Automotive Parts.” Our new page will include informational copy about automotive electrical systems, followed by an area where users can find the correct electrical part for their vehicle. While refining their selection, the user will remain on the same page, and when the correct part is found, they will then (hopefully) go through the checkout process.

We might also choose to design similar landing pages for alternators, Ford parts, Mustang Parts, etc. Redundancy is fine, as long as we give users (and search engines) a way to find them. And of course, our different pages must be unique enough to avoid duplicate content penalties. Canonical meta tags can define a preferred page for search engines, but by keeping our content unique across pages, we can get those distinct pages ranked.

In summary, the web has moved beyond the flowchart model, and we should too. Consider using multiple paths to direct users to content – it sure beats playing mind reader! Eliminate extra clicks whenever possible, and more importantly leave out unnecessary category pages that offer little aside from links. Finally, consider where category pages can double as high-quality landing pages – organic traffic leads users to content with fewer clicks than direct traffic.