Wayfinding

0
108

The Importance Of Wayfinding Link

As the name implies, wayfinding is how we make sense of our surroundings and navigate the space around us. We continually rely on cues in our environment to orient ourselves and figure out where we’ve been and where to go next. If you’ve ever flown, recall the experience of stepping off the plane in an unfamiliar airport. It may have gone something like this:

  1. You pause at the gate and glance around to quickly survey your surroundings.
  2. You observe which direction most people seem to be walking in and start heading in that direction.
  3. As you begin walking, your attention darts from one sign to another, scanning for any symbol or text that resembles “baggage claim” or “ground transport” and ignoring anything that doesn’t match either of those.
  4. Once you feel like you’re headed in the right direction, your attention relaxes and you begin to pay attention to any shops or restaurants that you might want to return to the next time you’re at the airport.

The way that people orient themselves in digital spaces is not so different from how they find their way around in the real world. Our ability to focus shifts according to whether we’re on the hunt for information or recreationally browsing. We even experience the same emotion and sense of frustration when we’re lost or struggling to reach our intended destination.

Following are three wayfinding concepts that can be incorporated into mobile and responsive designs to help your visitors navigate with more ease.

  1. Circulation systems
    The infrastructure that allows people to move around within a space
  2. Spatial cues
    The observable qualities of a space that help people make sense of their surroundings
  3. Signage
    Instructional signs, symbols and iconography to guide people

Circulation Systems Link

When moving through a town, the streets and sidewalks are the pathways we use to get from one point to another. Within a building, we might rely on stairways and corridors to make our way around. A variety of routes often coexist, giving people multiple options for reaching their destination. The network of available pathways forms the circulation system of a space. On the web, circulation systems are shaped by navigational structures. The most familiar one is the hierarchical tree menu, a model synonymous with widescreen desktop design.

HIERARCHICAL TREE LINK

This type of top-down categorical tree is the de facto convention for information-rich websites. Users can access top-level (parent) navigation and local (sibling) content. This is advantageous in that it provides many different routes for users to explore.

The hierarchical tree model usually manifests in a horizontal navigation bar, often with a single or multilevel drop down menu.
The hierarchical tree model usually manifests in a horizontal navigation bar, often with a single or multilevel dropdown menu. (View large version)

This model has the tendency to become link-heavy, making it well suited to large screens but potentially cumbersome when packed into the confines of a small screen. Rather than trying to squish expansive menus onto itty-bitty mobile screens, designers have been exploring the concept of unfolding experiences, a term designer and researcher Rachel Hinman uses to describe systems that progressively reveal information to users. As you plan a circulation system for your website, consider how you might be able to incorporate the following “unfolding” patterns:

NESTED DOLL LINK

Nested doll navigation is a linear menu pattern that is conventional in mobile web apps. Users incrementally tap or swipe to reveal additional menu options as they traverse up and down through the site map. Funnelling users from broad overview pages to detail pages helps them hone in on what they’re looking for and focus on content within an individual section. This approach is well suited to small screens, but comes at the expense of easy lateral movement across sections.

With the nested doll navifation, users incrementally tap or swipe to reveal additional menu options as they traverse up and down through the site map.
With the nested doll navifation, users incrementally tap or swipe to reveal additional menu options as they traverse up and down through the site map. (View large version)

HUB AND SPOKE LINK

This model utilizes a central screen that acts as the launchpad for exploration. Links point outward to other sections of the website or independent applications, each siloed from the others. To move from one section to another, you must first jump back to the hub. This home-screen approach eliminates the need for global navigation on each page, making it a popular choice for task-based applications that benefit from focus and minimal distraction.

The hub and spoke utilizes a central screen that acts as the launchpad for exploration.
The hub and spoke utilizes a central screen that acts as the launchpad for exploration. (View large version)

BENTO BOX LINK

The bento box model is a dashboard-style application that pulls in dynamic components and information. Most interactions occur in the context of a single multi-purpose screen that unfolds to reveal layers of additional information. This is a popular choice for websites on which users interact with data aggregated from a variety sources.

The bento box model pulls in dynamic components and information.
The bento box model pulls in dynamic components and information. (View large version)

FILTERED VIEW LINK

Unlike dashboards, which provide a control center for interacting with a variety of data, filtered view systems deal with a single data set. Information may be explored from multiple perspectives, with a variety of views and sorting options controlled by the user.

Filtered views are seen in music apps, directories and other interfaces in which people navigate large volumes of data
Filtered views are seen in music apps, directories and other interfaces in which people navigate large volumes of data. (View large version)

COMBINING SYSTEMS LINK

Even with nice styling and transitions, the bulkiness of traditional navigation systems can feel kludgy on small touch-enabled screens — especially when compared to the elegant, immersive interactions associated with native applications. Trying to shoehorn an information-rich website into an app-like navigation system might be too constraining, yet adopting a fully hierarchical model might be overkill. Fortunately, the models need not be mutually exclusive.

One of our recent projects involved working with a healthcare organization to centralize their content and online tools under a single website. We initially started down the path of building a hierarchical site map that included a section for all of the members-only content. We also toyed with the idea of introducing an additional menu on the website: the public navigation as well as navigation that appears for logged-in members.

This felt more complex than it needed to be and would have been tricky to organize on small screens. Recognizing that current members have very little need for marketing-heavy public content, we ended up dropping all public menus from the members section. And because members were coming to the website primarily to access a few key applications, they benefited from moving away from a hierarchical content structure and toward a hub-and-spoke model with a home screen that would launch their various online tools.

Rather than stick with a single information-architecture model and nest members-only content within the overall content hierarchy, we saw that a hub-and-spoke approach to the members center made sense
Rather than stick with a single information-architecture model and nest members-only content within the overall content hierarchy, we saw that a hub-and-spoke approach to the members center made sense. (View large version)

This turned out to be a big departure from our original plan to create a global header and footer that spanned the entire website, but it permitted us to design a system that was both lean and simple to navigate. This still left us with the challenge of making the transition between public and members content as seamless as possible. We turned to spatial cues to build continuity across the interface.

 

Dennis Kardys shows how to apply concepts from wayfinding, to help balance visual simplicity with the need to keep websites easy to navigate.

Source: Wayfinding For The Mobile Web – Smashing Magazine

NO COMMENTS

LEAVE A REPLY