Archetypes of website navigation

There was recently a discussion on website structure and navigation, so I decided to find out if there was a proper classification of them. There was, of course, but I quickly found out that pretty much every article about it uses the same 4 categories and focuses way too much on the structure rather than navigation. Frankly, I also don’t quite agree with them.

Therefore, here’s my attempt at rectifying their mistakes. A new classification, primarily focused on navigation:

11 Likes

This is very interesting, and its great to have them all in one place with a name put to them!
Just today I was thinking about navigation, as I found a website lead me to a page with no back or home button, and as I was about to click the browser’s top left arrow that would take me back, I read what the webmaster had said about it: the lack of that button was intentional. They wanted to trap you there, just you and them, forever in that page. Of course you could use the back button on your browser, but it’d go against the wishes stated by the webmaster.

And idk, that made me think about home/back buttons (and navigation sections) being given a purpose, and how different ways of exploring a website can be annoying, fun, or helpful.

It isn’t about website “structure”. No attention will be paid to what a webmaster thinks their website is structured like. Only how a user moves between pages will be considered.

This is pretty much just a UI/UX question. I’m not gonna describe them by graph theory, since I’ll offend people using the academic terms incorrectly… but comb, tree, hairbrush, spawnpoint, ladder and meat grinder all map to a tree(with slightly different qualities describing its structure. A meat grinder for example is just a tree with such a huge number of depth=1 nodes that you need pagination or fetching to make it efficient)

They specifically used the “collapsed links in the header” variety which fell out of use, likely as it’s unusable on smartphones.

I don’t think it’s unusable. I think it’s just as usable. It’s just not done because very few things on phones require that degree of information density. Even on PCs you typically only see it for documentation.

but can you truly call that “navigation”? I don’t know.

Yes. You navigate a book, either by a table at the front, or by reading it linearly. Very few books break this mold. Infinite Jest, Ulysses, and Finnegans Wake would be your “linear nightmares”. Is it boring? Well… does a book keep your attention despite its linear navigation? Linear navigation deserves credit because of it’s linearity. It offers a strongly structured, and strongly opinionated way to experience your website’s work. Fauux’s “Wired sounds for wired people” would be vastly different to experience if it was structured and linked as a tree.

This point is equivalent to discrediting a linear game from a non-linear game, and they’re not even mutually exclusive.

Most wikis and some note taking/personal knowledge base websites use this type. Completely understandable because trying to force a hierarchy of any sort onto hundreds or thousands of pages generally doesn’t end up well. It’s additionally not totally uncommon to see it on indie websites, especially artsy ones.

Unstructured data, still has metadata and tags which you can extract a hierarchy from. How else does Wikipedia, Google and the like create a structure out of seemingly unstructured pages? This is why I spent a while writing(but never actually finished…) tagging application for my music(I gave up because metadata is an unrecoverable corrupted mess )

In my opinion the correct question to be asking is… what is an appropriate UI/UX for straddling that balance between

  • Accurate representation of the Underlying Graph
  • Technical Feasibility(it’s infeasible to graph Wikipedia, and even more infeasible to navigate it as a pure graph as a user)
  • Correct discoverability(Correctness meaning it fulfills user intent, whether it’s casual browsing out of interest and curiosity, or searching for something specific)
  • How ethical and data-conscious you are. Stuff like TikTok, YouTube etc have algorithms that with very little input data narrow down quickly on the correctness for what gets your attention(which hits most of the casual browsing, and most people use the internet in that casual way)… or just more simply stuff like dark patterns.

This is still a space that has a lot more options to explore. You can run OpenGL in a browser and use that to create a 3D space that has all the stuff you want in it to navigate a website in a much more different “3D space”. I think VRChat does this, and Meta is doing this. You can probably do AR stuff too. There’s also stuff like AI Voice assistants and the like which don’t fit cleanly into your categorisation, like the Rabbit R1. It’s an unsolved problem… because if you’re going to boil it down further it’s also about where you want people to be, and how you want time as a resource to be used effectively- what effective time use even looks like… As navigation is fundamentally about making effective use of a user’s time. Navigating a road… navigating a town… navigating a domain for information…

I agree with most of your points, except the following:

This point is equivalent to discrediting a linear game

I wasn’t discrediting ladder navigation, I was discrediting authentication forms and quizzes. Sorry if that wasn’t clear. I’ll pick a better phrasing later.

Unstructured data, still has metadata and tags which you can extract a hierarchy from

I’d say the difference here is that you actually have to extract it and that you can extract multiple hierarchies at the same time because you can apply several tags at once (like, for example, list a page in several indices). This is in contrast to where a hierarchy is already laid out, and you may piece a different one based on your preferences in your brain, but that’ll be effectively you flattening the existing hierarchy and redoing it (if that makes sense).

Accurate representation of the Underlying Graph

I’m not sure if there is always an underlying graph? My thoughts on my website were initially in my brain, and they were completely disorganized there. The hierarchy was an intentional choice I made later when putting them on my website rather than at the moment I conceived them.

Although I do see how it applies to, say, selling people stuff or displaying people’s posts since, in these cases, you’re trying to make what people want to see match what they see.

1 Like