Introduction to UX Concepts
By Daniel Pape
Wayfinding is the method by which you let users of your site know how to get to other parts of the site. For example, if you land on the Google homepage but want to sign into your Gmail account, you need to find a way to get the to Gmail login page. Google put a link in the top-right of the homepage which links directly to the Gmail homepage, which shows how simple they want that user-journey to be, but they could have used other techniques such as a menu bar to alllow users to find their way around the site.
Here are my 5 methods to ensure that your digital product has effective wayfinding:
Keeping the goal of the end-user in mind when designing webpages is essential to create focused user journeys. Listing the next page your user will want to continue to keeps your design focused and informs the heirarchy of the elements on the page. On a ecommerce user journey, this will often be the next step of the funnel, eg. From basket to checkout. On an editorial website you may want a user to navigate from a section page to an article page. The user journey flows all provide the architecture you can build on to ensure users can find the next step.
Road signs in the UK use the Transport font, designed by Margaret Calvert in 1958. The use of a white font on a green background is instantly recognisable as a pointer to a location to drive to. You can use this same technique on the web. If your body copy is a serif, you could use a sans-serif for your wayfinding, or use consistent colour for links and buttons so that users know they are going to be taken to a new part of the website.
Some websites are made up of thousands of different pages, and only a small percentage will be relevant to every user, so don’t present every option to every user. You should consider the objectives of each distinct user journey to ensure that only the relevant options are displayed.
Sometimes guiding users around your website can be done with simple symbols. Most users know what will happen when they tap on a menu icon or a right facing arrow, which would require the words "Menu" or "Back". There are many examples of icon sets that you can use for free on your site but Google's Material design has a set of over 1000 icons that have icons for almost all website functionality and are designed to be consistent with each other.
On iOS when you're scrolling through a table view, when you select an row the screen slides to the left to reveal the content. This creates a mental model in the user's head that to return to the list of options you need to navigate to the left, and when a left swipe gesture is used that is where the user does. By using interactions that creates a 2D map in the users head, you can let people build a mental model of how they can navigate around your site.