Navigation

Iona Robson
Plant Based Planet
Published in
3 min readSep 28, 2018

A good navigation tab the key for making a usable website. Without one, the user is likely to give up and leave instead of looking through the pages to find what they want. Below are some examples of good navigation tools.

Sagmeister & Walsh homepage (https://sagmeisterwalsh.com/)

Sagmeister & Walsh

The famous petagram firm, run by Stefan Sagmeister and Jessica Walsh, has an easy to use navigation with a fun twist. The tabs first all run along the bottom of the website, clear and accessible throughout then move to the top where they stick so you don’t need to scroll to find them.

As well as this, on their homepage is a live stream of their offices where you can see them working. To make it even more interactive, the pair has added the navigation tabs into live stream itself so that they look like part of the office.

ASOS homepage (https://www.asos.com/women/)

ASOS

The fashion retail site ASOS has a lot of pages which all need to be well organised and easily accessible at all times. They have split up their products into sections which, when hovered over, reveal an array of options. The logo is used as a home button, something that is used so often in web design, people immediately assume it will work. They also use colours to highlight current offers. In this case, the outlet section is the call to action.

The navigation tab once again stays at the top of the site and disappears as you scroll down so as not to distract from all of their products. However, when you start to scroll upwards, the tab appears again. This aids the user by not making them have to scroll all the way to the top of a long page to find another product and will likely keep the user on the site for longer.

The Australian Ballet (https://australianballet.com.au/)

The Australian Ballet

The Australian Ballet company’s website again uses a sticky header which allows the user easy access to the top navigation tools. They have highlighted the link to buy tickets in black as a call to action.

Interestingly, their footer isn’t located at the bottom of one page and instead can be found when you scroll to the end of the right menu, underneath the “About Us” section. This unconventional placement has it’s pros and cons. By not placing where it can usually be found, it becomes more challenging for the user to find it in the first place and, if the menu drop down fails to work, users have no other way to navigate around the site. However, that said, it does mean that if the user wants to access the tools in the footer they can do so anywhere on the page instead of having to scroll right to the very end.

--

--