Non-heirarchical Web Design can Work

This is exactly what James, a UX designer, asked me for in 2015. He wanted a non-hierarchical web design in which visitors could type in what they were looking for and be taken to it immediately.

I was thrown by this idea, especially given the poor performance of in-site search at the time, so I asked him for more information.

James explained that he wanted to eliminate the traditional website page hierarchy and instead show people the content they were looking for. He wanted a natural-language search engine that understood the context and nuance of what the website visitor wanted to find.

I explained that something of this nature would involve vastly more sophisticated programming than our team was capable of. We were web developers, not AI programmers who specialised in natural language processing.

James didn’t have a budget for this sort of programming talent, and the idea was abandoned. It wasn’t viable for the clients we were producing sites for at the time.

My, how times have changed. It turns out that James was years ahead of the curve.

LLMs for All!

Large Language Models (artificial intelligence) have arrived, and some of these provide APIs that allow web designers to make use of their functionality on ordinary websites.

James couldn’t get what he wanted with the resources and talent available to him ten years ago, but he could do so today. Web developers can now deliver non-hierarchical web design to the masses.

Enter Non-Hierarchical Web Design

Non-hierarchical web design refers to approaches for structuring and navigating websites that move away from traditional tree-like hierarchies.

Most websites organise content around a parent-child relationship. These group child-pages under their parent, and the structure is reflected in the website’s menu.

For example, a blog article would appear under its category homepage, which in turn appears under the blog homepage...

Non-hierarchical web design emphasises flatter, more flexible, interconnected, or linear arrangements that allow users to access information without having to drill down through multiple levels.

Hierarchical design can improve discoverability in certain scenarios, but visitors find it disorienting on larger sites.

Non-hierarchical web design often overlaps with other “flat” hierarchies, such as matrix structures and web-like networks. Flat hierarchies are useful for large, dynamic sites that include millions of web pages, such as LinkedIn, which has a lot of user-generated content.

Hierarchical design (sometimes called “deep” hierarchy) builds a layered structure for logical progression, which works well for organised, category-based content.

It starts to fall apart when there are too many categories for users to navigate easily, and when the number of navigation layers exceeds three. For example, consider this hierarchical approach used by very large blogs with hundreds of categories...

Non-hierarchical designs aim to reduce these layers, making sites feel more accessible and easier to explore.

Types of Non-Hierarchical Web Design

Based on common classifications in web design, here are the main non-hierarchical web design structures...

• Flat Hierarchy.
• Sequential/Linear.
• Matrix/Multi-dimensional.
• Database/Dynamic.
• Web/Webbed.

Flat Hierarchy

Flat hierarchies provide a wide, shallow structure with fewer vertical levels but more items per level. This can be thought of as a less rigid version of a hierarchical structure.

Flat hierarchies offer high discoverability, specific and easily understandable labels, and fast access to content.

On the downside, they tend to result in an overwhelming number of menus, category overlaps, and it’s easy for users to miss items in long lists.

Sequential/Linear

This is a step-by-step path that guides users through content in a fixed order, like a book. There are no subpages or branches.

Linear structures focus on the user journey, which is great for storytelling and processes. It’s simple for sites with limited content, but it lacks flexibility. Users can’t jump around easily, and the structure isn’t scalable for large sites.

Matrix/Multi-dimensional

A matrix structure is an interconnected grid-like setup that allows navigation across multiple dimensions. The site’s content is dynamic and non-linear.

This structure allows for flexible exploration, handles complex content. and supports personalisation. Unfortunately, it can feel chaotic without clear cues, and it’s harder to orient users.

This structure is favoured by news sites that have mixed content on the homepage and many cross-linked categories.

Database/Dynamic

This approach relies on a backend database for user-generated or real-time content. Web pages are pulled dynamically without fixed links. This structure is scalable for very large websites.

Dynamically structured sites are interactive and personalised, adapting to the user’s input. Users find them less predictable than traditional hierarchical sites and will require very strong search tools.

Platforms like Pinterest, where pins and boards are database-driven and user-created, rely on a database structure.

Web-structured Sites

Web-structured sites feature a fully interconnected network with no set pattern. Every page links to the others freely, like a spider’s web.

This offers UX designers maximum freedom, and users get quick access to anything from anywhere. A web-structured approach is ideal for small, exploratory websites.

On the downside, this approach can frustrate users who expect structure. And it’s not suitable for large websites as there is a high risk of disorientation.

It’s ideal for small informational sites where a user enters via the homepage and browses linked pages without a hierarchy.

Non-hierarchical Web Design isn’t Mutually Exclusive

These structures aren't mutually exclusive. Many large websites blend them to suit the needs of their different sections.

When using non-hierarchical web design, you should match a structure to the needs of a particular section of the site. And when doing so, choose the one that best serves the needs of the people who will be consuming that section.

Navigation in Non-Hierarchical Web Design

Traditional hierarchical navigation often fails on massive or non-linear sites, where users get lost in scalability issues.

Non-hierarchical navigation uses alternatives to support freer movement...

• Search as Primary Navigation
  This requires prominent search bars to help users query large content databases. This approach is highly scalable, but users often struggle to write advanced queries.
• Related Links
  The automated generation of contextual links between pages is possible and very flexible, but older content may become outdated unless it is updated often.
• Path-Based Breadcrumbs
  In non-hierarchical web design, breadcrumbs track the user’s history rather than the site’s hierarchy. This helps users to reverse their steps, but the feature is underused relative to a browser’s back button.
• Tagging/Tag Clouds
  Users can assign their own tags, and this provides very flexible categorisation. It ensures the site aligns with the user’s mental model, but user-tagging is often an under-utilised feature.
• Active/Automated Navigation
  Algorithms analyse content for keywords and links, which reduces errors, but depends on the accuracy of the underlying technology.

The upside of these methods includes scalability for huge sites and better user-driven discovery. But they involve implementation challenges, like poor search usability or inconsistent tagging.

Recommendations and Examples

Choose non-hierarchical web design when the site’s size, content type, and audience justify it. For instance, large news portals use a matrix structure for multi-faceted browsing, while Pinterest leverages a database for its pins.

Test a proposed structure on real users and check analytics regularly to be sure a novel structure hasn’t ruined the browsing experience for the site’s regular users.

If mixing structures within a site, provide aids like sitemaps or alphabetical indexes to help users reverse their tracks.

Non-hierarchical web design is evolving with modern web needs and makes use of AI-driven search and other innovations to enhance non-linear navigation.