I regularly play video games. Nowhere near as much as I used to in my carefree days but still enough for me to be reasonably claim that I play video games more than the average late twentysomething. As I’ve been doing this since my parents bought me a Super Nintendo system way back in 1995, it’s quite obvious to me just how much video games have changed in the last two decades. I’m not talking about how much better looking video games are, I’m mostly talking about how much easier they are to live with right now.
Video games in the 90s were quite opaque and progressing through the game or even a basic understanding of the game’s mechanic can sometimes require the use of a guide or some feeling around. Those arcane elements are thankfully missing from modern video games with their clear navigation and easily comprehensible UI elements. In this way, there are actually a lot of things web development can take from video game given the importance of navigation in both cases.
Moving from one page to the next
If like me, you’ve been playing video games regularly in the past decade or so, you must’ve realized that video games have gotten a lot bigger and more complex. Last year’s blockbuster Red Dead Redemption 2 in particular was notable for its immersive and expansive world and the amount of things you could do. Now compare that with the way certain websites have changed and you’ll see the similarities.
The one prominent example is Facebook. Back when I first started using the platform for the purpose of college, Facebook was actually pretty simple. Then more things such as games, quizzes and other random things got added and I eventually left because it turns out I like my privacy too much. When I logged back on in 2016 to deactivate my account completely, the interface was so bloated and confusing to the point that even though the blue and green were definitely familiar, the rest of the website definitely isn’t.
Website, and I argue the whole internet, have become so bloated that users need a clear way of navigating through all of the mess to figure out what’s important. Look, I love The New York Times and it’s my main source of information for things happening on the other side of the world but their website is such a mess that I have to rely on their newsletters to keep me abreast of what’s happening. If you want to avoid making those same mistakes, here are some essential rules you have to keep in mind.
Make navigation easy to find and understand
The most basic rule is that navigational elements should be easy to find, you can’t go wrong with putting the navigation bar at the top horizontally or at the left side of the page vertically for most countries. The next step is to ensure that the navigation bar isn’t listed with generic and nondescript labels such as products, services and solutions. Use dropdown menus and subsections to be more specific if you must to ensure that visitors that are in need of something quick would be able to find what they’re looking for immediately.
Aim for consistency when it comes to subpages
This is especially important if your website is going to be divided into several different sections. In your navigation bar, you want to ensure that either all displayed sections have more subsections beneath them or that none of them do. If one section does have several subsections while others don’t, it might confuse visitors who might expect a drop down menu to pop up when they hover over the link.
Additionally, you have to make a choice of whether to use the section headers as actual links or simply headers where clicking on them would reveal the available subsections. Again, you want to make sure that this is consistent for the entire navigation bar and that there should be a clear indicator to show that they’re links or headers. For example, adding a simple downward arrow next to headers is an easy way to indicate that clicking on them would reveal a dropdown menu.
Make sure that visitors are never lost
Let’s say that you run a food blog and that one of your visitors is reading what you wrote on soft serve ice creams in Australia and would like to see more of that. To facilitate these, you can add breadcrumbs to your website which shows users the particular section/subsection of a website the current page belongs to. In this particular case, the breadcrumb would probably look something like this Home -> Recommendations -> Ice Cream. It should be noted however that breadcrumbs are only effective when there’s a clear hierarchy in your website.
Now, the tricky thing here is trying to establish a proper hierarchy for your website. You want to make it specific enough so that unrelated contents would never overlap with each other but you also don’t want to overwhelm your visitors by presenting them with a plethora of different sections. If possible, you want to limit the number of section levels at four (Home – Sections – Subsections – Sub-subsections) although the ideal number is three.