Wayfinding: How Users Apply 3D Logic to 2D Interfaces

If you’ve ever tried to find your terminal in an airport, you’ve undergone a psychological process called wayfinding. Wayfinding is the navigation of 3D environments through the use of spatial cues, such as following signs and hallways to your intended destination. All humans learn how to wayfind from the moment they learn to crawl, so this technique is deeply ingrained into our psychology. The catch is that human wayfinding is based on the navigation of 3D environments, so what do we do in 2D environments like websites?

While navigating an airport follows a slow and logical process (“I was there, and now I am here, and the distance between connects the two.”) navigation in the 2D world, strictly speaking, is a magical process. When browsing a website, users can simply “appear” in “locations” without having to physically traverse the space in between. Despite the clear differences between an airport and a website, users still apply the logic of 3D navigation to their 2D environments. They wayfind.

The process of wayfinding is built on four core principles:

  1. Orientation: Where am I right now?
  2. Route Decisions: Can I find the way to where I want to go?
  3. Mental Mapping: Are my experiences consistent and understandable enough to know where I’ve been and predict where I should go next?
  4. Closure: Can I recognize that I’ve arrived in the right place?

By meeting the requirements for 3D wayfinding, 2D interfaces can be designed for natural navigation.

In a 1960s study of wayfinding, Kevin Lynch asked interviewees to draw a map of their hometown from memory. His research revealed that participants’ maps relied most heavily on five types of elements, which can be applied to 2D user interface design in order to promote wayfinding.


Examples: streets, walkways, subway routes, bus lines

Paths are the trails that connect Point A to Point B. When traveling in 3D space, a path allows you to move forward and backward, as well as see what lies in either direction. In the 2D world, paths are most commonly seen in the use of navigation. If a user is browsing a website, the path might be constructed entirely in their mind as they follow links from one page to the next. A stronger 2D path, however, is the use of breadcrumbs, which addresses all the functionality of a real path.

Districts and Edges, AKA “Regions”

Examples of Edges: Physical barriers such as walls, fences, rivers, and shorelines

Examples of Districts: Places with distinct identity, such as Chinatown and Wallstreet

For purposes of design for 2D navigation, the concepts of “districts” and “edges” can be combined into the same functional concept of “regions.” Same as how cities can be divided into distinct areas based on common cultural or architectural themes, so too can a website be divided into regions based on visual theme, such as color or header images. Dividing large websites across regions in this way helps a user orient their current location in relation to the rest of the website.


Examples: Major intersections or meeting places, such as the clock in New York’s Grand Central Terminal

The presentation of “intersections” on a website is similar to intersections, or nodes, in the real world. Nodes are points on the page where a user must make a decision about where to go next. Similar to how a busy intersection can slow down and stress out a traveler, a busy interface can do the same. Keeping a close eye on how many nodes exist on your interface will help streamline the wayfinding process.


Example: Tall, visible structures that allow travelers to orient over long distances

Landmarks allow a traveler to turn their heads upward and orient themselves in relationship to their current location, like searching for the Chrysler Tower in New York. This same need can be met on websites by providing page headings. This allows the user to identify if they’ve arrived at the right location or if they need to keep going (and in which direction). This is particularly important to support search functionality (as opposed to browsing) since a user could simply “appear” in a location without any context, such as jumping in from a Google search.

By meeting the natural requirements of 3D wayfinding, a 2D environment can be designed for easy navigation. Addressing paths, districts and edges, nodes, and landmarks is essential to keeping the user oriented in an interface so that they can know where they came from, where they are, and where to go next.

Design Critique: EveryDollar (webapp)


EveryDollar – Home Budgeting Made Easy

EveryDollar is a home budgeting app, available for web and iPhone, that is designed to make money management easy. The app was created by The Lampo Group, an organization based around radio show personality and financial authority figure Dave Ramsey, who advocates a debt-free lifestyle for Americans. The EveryDollar app uses zero-based budgeting to provide a framework for spending decisions. This blog post explores the budget setup process using the EveryDollar webapp.


“A Budget in Seconds”

The welcome screen assures new users that budgeting is easy.

After sign up, the user is greeted with a welcome screen that demonstrates keen awareness of Dave Ramsey’s audience. Many Americans struggle with a stigma surrounding money and budgeting. A first-time EveryDollar user may be nervous or ashamed of the need for a budget tool. However, the welcome page content suggests that using EveryDollar is a painless experience, easy enough for a first-time budgeter to use and taking only seconds to set up.

The welcome screen provides a preview of what budgeting with EveryDollar will look like. The available tool bars contain signifiers for other features and settings within the app, and the ghosted preview image of the budget groups helps the user understand the system image before the work has even begun. This makes the experience less intimidating overall, which is necessary to encourage the user to press the only available CTA on this page, “Start My First Budget.”


Zero-Based Budgeting—Without Even Knowing It

EveryDollar is a zero-based budgeting system, in which all income and expenses must be accounted for before the month begins. However, EveryDollar doesn’t require any prior knowledge of zero-based budgeting due to the high level of discoverability built into the app.

EveryDollar starts at the top, with the user’s income.

Upon clicking “Start My First Budget,” the user is prompted to input their expected income for the month. Starting with income is a fundamental chronological concept of zero-based budgeting, so this line is mapped to the top of the budget and cannot be moved to a lower position. Setting the planned income sets the constraints for the budget.

The app automatically updates, encouraging the user to continue until every dollar is accounted for.

Upon entering any value—whether income or expense—the interface immediately updates to reflect the new information. A heading indicates if there’s income left to allocate, if the expenses are over budget, or if allocation is exact. The sidebar has a graphic that slowly fills up, indicating how much has been allocated to each budget group and how much is still left to allocate. The interface’s persistent feedback suggests to the user that the budget isn’t complete until they’ve allocated every dollar of income. This behavior builds a simple conceptual model for how zero-based budgeting works without ever having to explain it.


Editing the Budget: Adding and Moving Lines

Overall, editing the budget is easy, but a few points exist that could cause some confusion for first-time users.

The behaviors of “active” and “inactive” lines can be confusing when used together.

Line items have two modes, “active” and “inactive,” which allow for different activities based on their state. Active items can be edited and deleted, while inactive items can be dragged-and-dropped to a new position within their budget group. When a user presses the “+ Add Item” link mapped to the desired budget group, a new active item is created at the bottom of the group, which the user then edits. The user may then desire to move that new item to a different position within the group. However, the newly created item is in active mode, so the line cannot be moved. Splitting expected functionality across both modes in this way can make the new line appear “frozen.”

In order to “correctly” move the line item, the user must click outside the budget group in order to “deactivate” the line, and then drag-and-drop the now inactive item. If the user doesn’t realize this is the case, they may grab several inactive lines and move those instead, pushing them around the apparently frozen line so the group can be moved into the desired order.

A potential update to this behavior could be to allow movement for active lines by grabbing available white space on the line item. For consistency, inactive lines should be updated with this same behavior, instead of relying on the three vertical dots left of the line item’s label.


Editing the Budget: Deleting Lines

Deleting line items is easy as well, and thankfully, not too easy. Selecting the “trash” icon on an active line activates a forcing function that requires the user to confirm their intention.

This warning works—for a time.

This restriction works well the first couple times it appears. However, during first-time setup, the user may encounter several pre-populated lines that they wish to delete, sending them into a deleting spree which can result in an action-based slip—a line item is deleted by accident. Unfortunately, once the line item is deleted, there’s no way to retrieve the line or any associated information.

A possible update to this behavior could be an “undo” dialogue window that appears at the bottom right-hand corner of the app where, on web browsers, there tends to be unused white space. The window, displaying the action taken and an ‘undo’ button, could fade out after a few seconds.


An App for Americans

EveryDollar is a home budgeting app designed with Americans in mind. The top-to-bottom chronological order of of line items reflects American concepts of time and order. The budget tool also uses the dollar-sign to represent currency. An individual outside of American culture could make use of the zero-based budgeting functions, but they may find initial setup more difficult, given the preset line items may be less relevant to their needs, or the possibility that tax and insurance calculations might be handled differently in their area.

The app’s focus on both the audience and its specific function—zero-based budgeting, and nothing else—works wonders for an American audience, though. Making the app available both on web and iPhone helps many Americans make smarter spending choices on the fly, which leaves them more financially empowered than they would have been without the convenience of technology.