Day 25: Wayfinding

Where are you going, how do you know you’ve arrived, and can you find your way back?

What it is.

Wayfinding is the methods we all use to get around in the world, from finding our way to work or school and home again, to how we find the exact item we’re looking for on Amazon.com.

How it’s used.

In product design, wayfinding is how we move users and customers through our websites and applications. It is important to show information at strategic points to guide people into the right direction.

5 Step Process:

1. Where are you?

2. Where are you going?

3. What is the best route?

4. Have you arrived?

5. Can you find your way back?

— Jan Carpman and Myron Grant, Directional Sense

Discussion.

Unless you’re board and surfing the web, you come to any website or application with a goal in mind. You may want to find that perfect blue cashmere sweater, order another delivery of groceries, find out what time the movie is playing and where, find a wedding photographer that you can trust or any number of other goals.

The steps you take to reach that goal depends in large part on the information architecture of the site. Those steps are how you find your way through the website to the finish line: reaching your goal.

Wayfinding is a combination of signposts, signals and pathways that tell users how to get where they’re going–and how to get back.

Think about how you look for the exact item you want to buy on Amazon. Do you use the search box? Do you look through the list of categories or recommended selections? How do you know where to look or if you’ve arrived?

You probably glance at the navbar to see what you can choose from. As you click a link you notice that the page changes. There’s likely a page title to tell you where you are at every step of the way. As you click further and further into the site, you’re probably looking for some kind of signpost to tell you where you are. Is there a page title, section title? Does the menu bar change to highlight the section you’re in?

All of these are examples of wayfinding, and they’re critical for users to understand where they’re going, where they are, and how to get back.

Five Wayfinding Principles.

1. IDENTIFY EACH LOCATION

Each section should have a unique visual identity that tells the user where they are at a glance. Users should also be able to see how the section they’re in relates to the whole website. Their ability to know where they are and which way to go through the site is the core wayfinding principle.

Often this can be as subtle as a color theme, a section header, a highlighted menu item or an identifying image.

2. PROVIDE ORIENTATION CUES

Menus that remain in consistent location and that don’t change from section to section (we sometimes call this the universal nav) help users keep track of where they are in relation to the rest of the website. This is a powerful orientation cue.

3. CREATE CLEAR PATHS

The user’s path through the site should be obvious to the user. Use of breadcrumbs or navigation and sub navigation can help the user visually track that path.

The beginning and end of the path form an introduction and conclusion to the user flow. Progress is marked by moving from one concept or message to the next. Sometimes this can be a simple as showing the user a progress bar so they can see how much further until they complete the task.

4. CREATE SECTIONS WITH DIFFERING VISUAL CHARACTER

Subdivide the websites into main sections with a distinct use or content. Sections allow the user to distinguish one part of the website from another and to know when he has moved into a new section and if this is the section he wants to be in.

5. DON’T GIVE THE USER TOO MANY NAVIGATIONAL CHOICES

Think of the website or application in terms of user flows to a specific goal, rather than as a big collection of data and menus. Users come to the website for a reason, product designers need to understand those goals, then design easy paths to reach them.

Your Assignment

Identify the wayfinding elements in your favorite eCommerce website.

Set yourself a goal to complete in an commence website — e.g. buy a new pair of shoes. Then notice the wayfinding principles in action.

• Note how the sections are divided and what visual elements help you identify each section
• Try to identify each of the 5 wayfinding principles
• Take screenshots of the wayfinding elements you see
• Especially note where you got lost or were confused and think of a wayfinding element that would have helped you

Deliverables

Create a pdf and share in the comments and/or on Dribbble and Twitter #100daysdesign.

Originally published at 100days.design on November 7, 2017.