Wayfinding in User Interface Design

Christina Rickabaugh December 8, 2014

08In this post, Joe Zeoli, Senior Website and Graphics Developer at Miles Technologies, discusses the architecture and engineering concept of wayfinding, and how it applies to designing website with positive user experiences. 

 

As user interface designers, we are constantly faced with issues we’ve never run into before. Luckily, the web is home to an endless supply of inspiration and communities ready to help. The road less traveled, however, is looking towards other creative disciplines to solve the complex problems we run into every day. Many parallels can be found between seemingly unconnected industries if you look closely enough.

 

Recently, I came across a term commonly used in architecture and engineering that refers to how a person orients themselves and navigates in a space called “wayfinding.” This term can be applied not only to the physical world, but also to the digital one as well. It becomes an extremely important part of how we get to point A to point B. We constantly pay attention to signage, but rarely notice that is what we are doing. When it works correctly, we arrive at our destination. When it doesn’t, we get lost, miss flights or lose our car in a large parking garage.

 

Wayfinding is deep-seated in the history of the world. Navigators would use stars and a compass to steer ships well before GPS was invented. When cars started becoming popular, traffic engineers needed to come up with ways to keep us on our course. Even museums and malls use signage and maps to make sure people are constantly oriented and aware of where they are.

 

When discussing wayfinding, there are four main principles to take into account: Orientation, Route Decision, Route Monitoring and Destination Recognition. We can apply these principles from the real world to our complex sites and create an awesome user experience.

 

 

Orientation

Orientation is the attempt to determine one’s location. In a digital sense, this could be a user orienting themselves on a page well within the hierarchy of your site. In the real world, we use objects like recognizable landmarks to get an idea of our location or to direct someone to his or her destination. The users may know that they are on the homepage of a site by the large rotating banner or different page layout. Users must know where they are before they can figure out where to go and how to get there.

One benefit to working on the web is the abundance of ways we can accomplish this. We can provide various clues to help orient the user on our site.  A classic and important example of this is the page heading.  Having a clear page heading lets a user know once he or she clicked a button, he or she is in the right place.

Another example is breadcrumbs. These provide a visual path the user took or can take to get back onto the current page. While a user clicks around on a website, he or she may notice a highlighted or active navigation item that corresponds to the current page. These things are especially important if the user comes to a landing page or sub-page via a search engine or direct link.  Once a user is oriented, it gives him or her context of the current page landed on. This could mean the user knows what category a product is under or what division of the company offers the service he or she is viewing.

 

Route Decision

Route Decision is the selection of a course of direction to the destination. Once users know where they are, they can make a decision as to what they need to do next. That could be adding a product to a cart then checkout or filling out a contact form to get more information. It has to be clear to users which way they need to go to complete their intended action. Consistent graphics and calls to action are ways users can be confident they are in the correct page.

Let’s say I’ve landed on a page and I want to get some more information. On the page I can see two buttons – one says “talk to an expert” and the other says “request a quote”. It just so happens that these pages go to the same contact form, but I need to think about which one I should be clicking on. I may want to get a quote, but I would like to speak to an expert about my situation as well. If the messaging was consistent, I would know right away which link I had to click to get to the information I need.

The above scenario can be compared to walking into a building and having to look both ways a few times to figure out where to go. If you go left when you should have gone right, you are wasting time and energy by turning around and walking all the way back. The same is true for web design where a user’s time and attention span is very important.

 

Route Monitoring

Route Monitoring is the act of checking to make sure that the selected route is heading towards the destination. While driving, we are constantly looking at signs to make sure we are headed in the right direction. Most of the time, we are doing this subconsciously. If I notice I’m moving away from where I need to go based on mile markers or signs, I can readjust to make it to my destination. The same is true for a website, especially a complicated web application.

 

This concept is a big part of designing a checkout system. A convoluted checkout process could cause users to second guess the path they are on and look elsewhere. On a multistep process, it is important to show how far along the users are on their route. This helps orient them so they don’t feel lost or confused about the steps to complete an order.

A common practice is to keep track of the steps at the top of the page. If the page is paginated, letting users know they’re on page # of # can help them get back to where they were if they lose their place. Another feature would be to include a next and previous button. This will help the user in the stepped process.

One common mistake is to provide the user with too much information. We can only take in so much at one time, so providing everything up front can be confusing and frustrating. As designers, we should figure out what information is the most important at that time and only display what is needed. Another example of poor UI is contradicting messaging. All calls to action and messaging should be consistent and focus on getting the user to their destination.

 

Destination Recognition

Users need to know they have accomplished a task or if there are still more steps required. When a contact form or quote form is filled out, it should take you to a thank you page or display a thank you message. Similarly, if a user doesn’t fill in information correctly or misses a field, there should be a clear message that the form didn’t submit and what needs to be adjusted to remove any question of whether the task was accomplished.

 

The confirmation screen or message is also a great time to suggest a new goal for the user. This page can have specific contact information on how to reach out directly, links to read more about specific service offerings or other product recommendations.

 

Confirmation emails are another tactic that gives users the reassurance that they completed a transaction correctly. Sometimes people are in such a rush that they forget what they did. Emails can be checked at their leisure and give them the opportunity to circle back to what they did.

 

Wayfinding on a Mobile Device

Since the explosion of the smartphone into the marketplace, traffic from mobile devices has almost surpassed that of the desktop. It’s imperative that users understand what part of the process they left off on and how to easily get back there from a separate device.

 

The concept of less, keeping it simple, whitespace and the goal of the page are all concepts that come into play on a mobile device. Users on mobile devices have higher expectations; they want instant gratification. Don’t make the user think. It is not your job to make them do anything except for precisely what they want to do, so set the path for them. Help them make the best decision and get right to the point. A mobile device design is more black and white.

 

Mobile Apps have opened the door and allowed for integrations across devices and have allowed users to transcend their experience onto many different platforms. How many times have you logged in to a new app with your Facebook account? It makes finding your way into that new app so much easier and to gives you more time to enjoy the capabilities of the app instead of a registration screen. This instant gratification has now turned your visitors into a new customer.

 

The Digital Wayfinder’s Toolbox

A huge benefit to interface design is the ability to test EVERYTHING. We can see what is and is not working and quickly adjust accordingly. It’s a constant iterative process to squeeze out the most from what we design. Analytics programs such as Google Analytics and Adobe Analytics are important tools in the process. They can be customized to provide meaningful data about everything on your site from the flow of users to something small like a button click. This data can also be used to generate heat maps which are a great way to visualize how people are using the site.

 

Surveys are a tool that you can send out to your customers and gain some insight about the information that you display on your website.  You should always welcome this feedback as another way for your customer to interact with you.

For ecommerce websites, there are codes that can be put in place that can track cart abandonment. It is helpful for you to know at what stage of the process a customer fell off and did not complete a purchase. Having these codes in place along with a follow up email to your customer may help him or her circle back and complete the purchase because you gave him or her a way to find what he or she is looking to do.

 

Another less technical way to gather information is to just ask the users or keep a log of common questions and issues. If the same problems keep arising, it’s time to look into the flow of the site and make tweaks based on the feedback.

 

Conclusion

A UI designer’s job is to be a traffic engineer of the website or application.  Keep the user in mind and constantly test to make sure you aren’t losing customers or leads due to confusion or frustration. You will likely come to the realization that there are many different interpretations of the same thing. The more you plan for many different alternatives to get the same outcome, the better design you have.

Implementation and refining are part of a cycle, and you are never completely done when you launch an update. It is just the beginning. When using the principles of wayfinding, you are in control and provide your visitors with the path you would like for them to venture no matter what direction they take to get to the destination.

 


As always, leave a comment below if you have any questions, feedback or other thoughts on wayfinding in user interface design.

Curious about how users navigate their way around your website and how this can be improved for your business? Contact us today to speak with a web design expert.

 

 





Leave Us a Comment

Your email address will not be published. Required fields are marked *

Do great things.

Get Started