Wayfinding For The Mobile Web

Wayfinding For The Mobile Web

• By Dennis Kardys


• October 13th, 2014


• DevicesNavigationUser Experience


• 3 Comments

When conceptualizing mobile first, navigation takes a behind chair to content, and cruel modifying paves a proceed for some-more focused experiences. The office of simplicity, total with a parsimonious spatial constraints of mobile viewports, mostly leads us to frame divided elements in an try to minimize a interface. But a space-saving preference we advantage by crafty modifying and a compress UI can come during a responsibility of a really maritime aids a users rest on.

To assistance change a longing for manifest morality with a need to keep websites easy to navigate, we can steal some concepts from a universe of wayfinding. This essay shows how we can request these concepts to a mobile web.

The Importance Of Wayfinding

As a name implies, wayfinding is how we make clarity of a vicinity and navigate a space around us. We ceaselessly rest on cues in a sourroundings to asian ourselves and figure out where we’ve been and where to go next. If you’ve ever flown, remember a knowledge of stepping off a craft in an unknown airport. It competence have left something like this:

1. You postponement during a embankment and peek around to fast consult your surroundings.


2. You observe that instruction many people seem to be walking in and start streamer in that direction.


3. As we start walking, your courtesy darts from one pointer to another, scanning for any pitch or calm that resembles “baggage claim” or “ground transport” and ignoring anything that doesn’t review presumably of those.


4. Once we feel like you’re headed in a right direction, your courtesy relaxes and we start to compensate courtesy to any shops or restaurants that we competence wish to lapse to a subsequent time you’re during a airport.

The proceed that people asian themselves in digital spaces is not so opposite from how they find their proceed around in a genuine world. Our ability to concentration shifts according to possibly we’re on a hunt for information or recreationally browsing. We even knowledge a same tension and clarity of disappointment when we’re mislaid or struggling to strech a dictated destination.

Following are 3 wayfinding concepts that can be incorporated into mobile and manageable designs to assistance your visitors navigate with some-more ease.

1. Circulation systems
   
   The infrastructure that allows people to pierce around within a space


2. Spatial cues
   
   The understandable qualities of a space that assistance people make clarity of their surroundings


3. Signage
   
   Instructional signs, black and iconography to beam people

Circulation Systems

When relocating by a town, a streets and sidewalks are a pathways we use to get from one indicate to another. Within a building, we competence rest on stairways and corridors to make a proceed around. A accumulation of routes mostly coexist, giving people mixed options for reaching their destination. The network of permitted pathways forms a dissemination complement of a space. On a web, dissemination systems are done by maritime structures. The many informed one is a hierarchical tree menu, a indication synonymous with widescreen desktop design.

Hierarchical Tree

This form of top-down sure tree is a de facto gathering for information-rich websites. Users can entrance top-level (parent) navigation and internal (sibling) content. This is wise in that it provides many opposite routes for users to explore.

¹

The hierarchical tree indication customarily manifests in a plane navigation bar, mostly with a singular or multilevel dropdown menu. (View vast version²)

This indication has a bent to turn link-heavy, creation it good matched to vast screens though potentially unwieldy when packaged into a proportions of a tiny screen. Rather than perplexing to smash expanded menus onto minuscule mobile screens, designers have been exploring a judgment of unfolding experiences, a tenure engineer and researcher Rachel Hinman³ uses to report systems that gradually exhibit information to users. As we devise a dissemination complement for your website, cruise how we competence be means to incorporate a following “unfolding” patterns:

Nested Doll

Nested doll navigation is a linear menu settlement that is required in mobile web apps. Users incrementally daub or appropriate to exhibit additional menu options as they span adult and down by a site map. Funnelling users from extended overview pages to fact pages helps them file in on what they’re looking for and concentration on calm within an sold section. This proceed is good matched to tiny screens, though comes during a responsibility of easy parallel transformation opposite sections.

⁴

With a nested doll navifation, users incrementally daub or appropriate to exhibit additional menu options as they span adult and down by a site map. (View vast version⁵)

Hub and Spoke

This indication utilizes a executive shade that acts as a launchpad for exploration. Links indicate external to other sections of a website or eccentric applications, any siloed from a others. To pierce from one territory to another, we contingency initial burst behind to a hub. This home-screen proceed eliminates a need for tellurian navigation on any page, creation it a renouned choice for task-based applications that advantage from concentration and minimal distraction.

⁶

The heart and spoke utilizes a executive shade that acts as a launchpad for exploration. (View vast version⁷)

Bento Box

The bento box indication is a dashboard-style concentration that pulls in energetic components and information. Most interactions start in a context of a singular multi-purpose shade that unfolds to exhibit layers of additional information. This is a renouned choice for websites on that users correlate with information many-sided from a accumulation sources.

⁸

The bento box indication pulls in energetic components and information. (View vast version⁹)

Filtered View

Unlike dashboards, that yield a control core for interacting with a accumulation of data, filtered perspective systems understanding with a singular information set. Information competence be explored from mixed perspectives, with a accumulation of views and classification options tranquil by a user.

¹⁰

Filtered views are seen in song apps, directories and other interfaces in that people navigate vast volumes of data. (View vast version¹¹)

Combining Systems

Even with good styling and transitions, a bulkiness of normal navigation systems can feel kludgy on tiny touch-enabled screens — generally when compared to a elegant, immersive interactions compared with local applications. Trying to shoehorn an information-rich website into an app-like navigation complement competence be too constraining, nonetheless adopting a entirely hierarchical indication competence be overkill. Fortunately, a models need not be jointly exclusive.

One of a new projects concerned operative with a medical classification to centralize their calm and online collection underneath a singular website. We essentially started down a trail of building a hierarchical site map that enclosed a territory for all of a members-only content. We also toyed with a thought of introducing an additional menu on a website: a open navigation as good as navigation that appears for logged-in members.

This felt some-more formidable than it indispensable to be and would have been wily to classify on tiny screens. Recognizing that stream members have really tiny need for marketing-heavy open content, we finished adult dropping all open menus from a members section. And since members were entrance to a website essentially to entrance a few pivotal applications, they benefited from relocating divided from a hierarchical calm structure and toward a hub-and-spoke indication with a home shade that would launch their several online tools.

¹²

Rather than hang with a singular information-architecture indication and nest members-only calm within a altogether calm hierarchy, we saw that a hub-and-spoke proceed to a members core done sense. (View vast version¹³)

This incited out to be a vast depart from a strange devise to emanate a tellurian header and footer that spanned a whole website, though it permitted us to settlement a complement that was both gaunt and elementary to navigate. This still left us with a plea of creation a transition between open and members calm as seamless as possible. We incited to spatial cues to build smoothness opposite a interface.

Spatial Cues

If dissemination systems paint a paths that capacitate people to get to where they wish to go, spatial cues are a tangible qualities of a space that assistance them asian themselves and that irradiate permitted paths. Designers rest on a few absolute spatial cues to assistance users find their way.

Landmarks

A landmark is any remarkable, singular or noted intent we observe in your surroundings. Some landmarks are manifest from a stretch and assistance we figure out where we are formed on your position relations to them. For example, Chicago is home to one of a world’s tallest skyscrapers, a Willis Tower. If during any indicate we turn irrational while exploring a city, we need usually indicate a skyline and review your relations position to a building to get a clarity of where we are and that proceed is which. Other landmarks usually line your route, assisting we find your proceed to and behind from a sold place. Landmarks assistance us conclude and make clarity of space. The grade to that we rest on landmarks is evidenced by how we offer directions: “Turn left during a flare in a road,” or “Continue true 3 blocks until we strech a Starbucks, and afterwards hang a right.”

In UI design, a landmark is any consistently positioned or vicious component that helps visitors asian themselves. Some examples of tellurian elements (i.e. manifest around a website) are:

• Logo
  
  For returning to a home shade easily


• Primary navigation
  
  Quick entrance to primary alighting pages, enabling users to concentration and try other sections.


• Breadcrumbs
  
  reinforces stream plcae within a complement and acts as a ladder to span adult a site map


• Search
  
  Provides soundness and an swap proceed to find information when users don’t wish to backtrack or continue browsing

Other landmarks competence seem usually in certain places, assisting visitors heed where they are within a sold territory of a website:

• Section banners
  
  Reinforces that territory user is in


• Section navigation
  
  Access to likewise categorized content


• Unique templates or components (slideshows, galleries or eventuality calendars)
  
  Visually identifiable points that users competence remember flitting and try to lapse to

This alone is flattering candid stuff. It gets engaging when we cause in multiscreen function and adaptive design. You see, as website visitors peruse your website, they are constructing a mental map of all a identifiable landmarks they encounter. Data shows that many interactions start over time and opposite devices. If a landmarks in your interface seem drastically opposite from one breakpoint or device to another, afterwards we risk disorienting users. On a other hand, if we intentionally build smoothness into a UI, sustaining tangible qualities of those landmarks opposite all shade sizes, afterwards you’ll encourage a some-more familiar, discerning knowledge for returning visitors. You can boost smoothness of landmarks in your settlement by examining how UI elements adjust opposite breakpoints:

• Position
  
  Do they keep their relations page position, or do they burst around?


• Form
  
  Do equipment keep their form or renovate into something totally different?


• Color
  
  Do forehead and credentials colors stay a same or switch?


• Priority
  
  Do a many distinguished page components keep their proportional manifest weight opposite shade sizes, or does a hierarchy change?


• Visibility
  
  Are manifest things still suggested and dark objects still concealed?

¹⁴

United Pixelworkers’ website has smoothness between landmarks opposite breakpoints. The trademark is red in a tip left, a navigation is in a black bar along a top, and we can always entrance a transport from a splendid blue pitch in a tip right — no matter that distance shade we revisit from! (View vast version¹⁵)

Cleverly bettering a UI to best fit a permitted shade distance or viewport is a estimable goal. Just keep in mind that any instrumentation creates a new sourroundings that your users contingency asian themselves to. While instrumentation is a necessity, change it with an equal concentration on continuity.

Edges

Edges delimit a finish of one intent or territory and a commencement of another. In a universe around us, we are surrounded by geographic boundaries, like mountains, shorelines and tree lines, as good as synthetic ones designed to compartmentalize a environment, like fences and walls. In UI design, clearly defining a edges of regions and objects can some-more fast reconnoitre users with an interface. Boundaries assistance to delimit things on a website, such as chrome from content, primary navigation from delegate navigation, and tellurian collection from page-specific functions. At a micro level, edges assistance conclude a bounds of daub targets and apart sold blocks of content.

¹⁶

Foursquare’s app (left) packs a lot of tappable equipment into a tiny space; clearly tangible pitch bounds urge scannability and minimize mis-taps. Yummly’s app (right) uses graphic interface edges to conclude pitch daub targets and to visually apart a masthead segment from a calm area and to heed between sold recipes. (View vast version¹⁷)

When conceptualizing for far-reaching screens, we can rest on white space and columns to delineate calm boundaries. When trade with slight viewports, we have reduction space to harmonise columns and to implement white space to effectively compute sections of a page. We can retrieve a serviceable advantages of edges in small-screen scenarios by:

• providing apparent manifest cues to advise a active daub aim area of links and buttons,


• using shifts in credentials tone or clever borders to heed template regions.

¹⁸

Defining edges by regulating plane dividers or shifts in credentials tone can yield vicious manifest cues to heed one segment of calm from a subsequent (for example, separating categorical calm from associated links). (View vast version¹⁹)

Signage

Signs are manifest aids that yield instruction to people during preference points within a space. Signs promulgate by pictographic or typographic elements. In a interfaces, many non-content elements play a purpose of signage. Elements such as labels, buttons, pagination, menus and calls to movement all act as signs. Because black tend to take adult reduction space than created text, they are heavily used in mobile design. Because people routine images and calm differently, designers need to cruise certain factors when last how and when to use one or a other. Let’s take a discerning demeanour during how to use icons effectively.

Using Icons

Icons can be an effective proceed to promulgate information and inflection navigation options while conserving space within a parsimonious proportions of a tiny screen. Universally tangible black can also overcome denunciation barriers, creation an interface some-more globally accessible.

While icons competence interest to cultured sensibilities and yield a good resolution for visually organizing your interface, they also have a intensity to deliver impediments to usability.

Icons work good when they are informed and obvious, withdrawal no room for misinterpretation. But even many of a many ordinarily used icons have mixed meanings. Consider a following icons, that during initial seem innocent. What does any represent?

²⁰

Because they mostly have mixed meanings, even elementary icons can be ambiguous. (Image credit: IcoMoon²¹) (View vast version²²)

• Pencil
  
  Write or edit?


• Plus
  
  Add object or expand?


• Minus
  
  Remove object or collapse?


• x
  
  Close or delete?


• Magnifying glass
  
  Zoom or search?


• Caret
  
  Play, go or slip right?

As we see, even in elementary scenarios, icons can be ambiguous. Meanwhile, a allure of a minimal UI tempts many a engineer to use icons to paint distant some-more formidable concepts. This again hurdles us to import a value of saving space opposite a significance of comprehensibility of a interface. Even if a icons are eventually decipherable, a act of interpreting them increases a cognitive bucket on a user. This introduces attrition to a decision-making routine and could block navigation.

Text Labels

In contrariety to icons, well-written calm labels can leave reduction room for misinterpretation, so ensuing in reduction cognitive bucket on a user.

Compare a following dual screenshots, both of that span icons with text. The initial instance focuses initial and inaugural on a icons, since a second places importance on calm labels.

²³

The University of Delaware uses especially icons (left). Walmart importance on calm labels. (View vast version²⁴)

The epitome inlet of a graphics final a satisfactory volume of interpretation, and a concomitant calm is harder to scan, partially since of a grid arrangement and partially since of a type’s size. Keep in mind that, with mobile devices, a calm is expected to be noticed during arm’s length and with a chairman and device presumably in motion. In a second example, labels assume focus. The left fixing of calm provides a true reading line down, creation it easier to indicate and review navigation options. Here, icons are used to further text. Because we routine images quickly, once a user has schooled what a pitch means, their destiny interactions will be expedited by approval (i.e. comparing a picture with a couple it represents).

The prior instance also assumes dual things. The initial is that a calm labels are indeed good written. Unclear calm can be usually as unpropitious to navigation as obscure iconography. The second arrogance is that a caller is a first-time user. Once a chairman has schooled a positions and meanings of a icons in a initial screenshot, a cognitive bucket will diminution and a interface will have turn informed and, therefore, easier to use.

This aligns with investigate conducted by User Interface Engineering²⁵, that found that:

• text and images work improved than usually text;


• text alone works improved than images alone;


• icons are learned, though idol positions are schooled faster (so, if your favorite app gets a new icon, we won’t be confused; though if someone confused a positions of apps on your phone’s home screen, you’d be driven crazy).

Visibility and Decision-Making

Another dispute between graphics and calm arises when you’re last how to benefaction a list of products. An advantage to displaying images is that they assistance a user visually compute between options. Because product images take adult some-more space than their calm counterparts, a series of equipment manifest within a viewport will be reduced. So, that is some-more important, arrangement some-more fact for any choice or arrangement some-more options in a singular view?

When difficulty distinctions are obvious, a further of manifest cues (such as product images) minimally advantages usability. The categorical design is to uncover options and make it easy for a user to indicate and review those options. In these scenarios, titles alone competence be a best choice since comparing equipment is easier to do when we can see all (or most) of your options during once. If visitors contingency corkscrew or appropriate to see their options, they’ll be forced to rest on memory, comparing what’s now in perspective with what was formerly in view.

On a other hand, for products that are identical to any other, images would assistance users to improved heed between them. In this case, differentiating between equipment competence be some-more vicious than comparing equipment within a singular view.

²⁶

Using images to arrangement difficulty information takes adult some-more space, ensuing in fewer categories wise in a viewport. Although reduction visually appealing, a elementary calm list of categories is easier to indicate and name from. When browsing sold products, however, product images and manifest fact play an vicious purpose in assisting users to heed items. (View vast version²⁷)

Paving Your Paths

What’s in and out of perspective is vicious to how people find their way. The answer to “Where can we go from here” is done by a routes that a user can simply perceive. The many rarely trafficked routes (or a ones we wish to expostulate a many trade through) should be done many visible. Less-traveled routes can means to be reduction sincerely marked. Whether a navigation complement is a primary or delegate one is an vicious consideration, and it needs to be prioritized as such in a UI. Does a manifest inflection of your navigation map to a navigation’s tangible priority?

Route Visibility and Hidden Menus

Many renouned mobile navigation conventions engage stealing and arrangement menus. This technique relies on a menu pitch (often a barbarous hamburger icon) that triggers a coming of a menu, presumably by toggling open a row or pulling in navigation from off canvas. Debate persists about possibly a hamburger idol is zodiacally famous as a pitch to paint a menu. It’s intensity ambiguity aside, a discuss overlooks a incomparable concern: Even if people commend it as a evidence to serve a menu, a menu options are essentially hidden, and so those routes are obscured.

Users following a smell of information will indicate a shade for trigger words: calm that maps to a disproportion or phrases in their mind that report what they’re looking for. On far-reaching screens, when navigation is exposed, those trigger disproportion are manifest and boost a odds that users will mark them and click through. Assuming that your primary navigation menu has concise, jointly disdainful and informed labels, by storing them out of view, we are concealing those absolute trigger disproportion and in outcome obscuring a primary navigation routes.

²⁸

Responsive and mobile navigation patterns that disguise and exhibit menu equipment keep calm as a concentration of a UI. Just be wakeful of what trigger disproportion you’re also hiding. (View vast version²⁹)

Compare this to a “skip to nav” pattern, in that a menu idol scrolls a user down to a menu anchored during a bottom of a page. In this model, a pitch still affords discerning entrance to a menu around a daub or click, though those trigger disproportion still exist within a manifest canvas. Users who corkscrew or appropriate past a categorical calm will learn in plain perspective a menu options brimful with trigger words.

When evaluating that elements to make manifest and that to tuck away, cruise a following questions:

• How are your users seeking information?
  
  If a vast series of your visitors are “known-item seekers,” definition they arrive with a transparent thought of what they are looking for, afterwards they will some-more expected wish to search; so, creation a hunt margin manifest would be an glorious prompt. If many users will have usually a ubiquitous thought of what they want, afterwards they competence be some-more good to crop and, therefore, would advantage from unprotected trigger words.


• What are your users looking to do, and how else could they get there?
  
  Compare what’s manifest on shade to pivotal calm that your aim assembly is looking for or tasks they intend to complete. Do a calm and links we make manifest yield an easy adequate trail for users to accomplish what they came for? Or contingency they rest on navigation. If a navigation is a supplemental tool, portion as shortcuts to get around a website, afterwards it competence advantage from being tucked handily away. On a other hand, if a menu is a primary (or exclusive) means of navigating a website, afterwards it competence need larger prominence (or be manifest by default).


• What is your dark calm competing with?
  
  On a page with minimal content, clicking on an idol to exhibit a list of dark menu options is a no-brainer. But as some-more calm and links are combined to a screen, a menu idol has some-more to contest with. Compound this with a fact that manifest links are filled with information smell (i.e. some graphical or textual evidence that suggests what calm exists behind a link). Meanwhile, an epitome pitch has comparatively bad information scent, hinting usually that “more options” can be found behind it.

Conclusion

Despite a implausible disproportion between a earthy and digital worlds, a likeness in how we asian ourselves and confirm where to go in both spaces is uncanny. The same cues that architects and civic planners rest on to assistance us routine a location, know where to concentration and select a proceed could be practical in a day-to-day work on a web. Keep in mind that each chairman who browses an concentration is creation their proceed by a space — mostly an unknown one. As a user embarks on their journey, what forms of wayfinding assistance are we providing to beam them?

(da, al, ml)

Footnotes

1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/09/01-hierarchical-tree-opt.png


2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/09/01-hierarchical-tree-opt.png


3. 3 http://rachelhinman.com/


4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/09/02-nested-doll-opt.png


5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/09/02-nested-doll-opt.png


6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/09/03-hub-spoke-opt.png


7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/09/03-hub-spoke-opt.png


8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/09/04-bento-box-opt.png


9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/09/04-bento-box-opt.png


10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/09/05-filtered-view-opt.png


11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/09/05-filtered-view-opt.png


12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/09/06-mixed-ia-models-opt.png


13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/09/06-mixed-ia-models-opt.png


14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/09/08-landmark-opt.jpg


15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/09/08-landmark-opt.jpg


16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/09/07-edges-opt.jpg


17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/09/07-edges-opt.jpg


18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/09/09-edges-opt.jpg


19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/09/09-edges-opt.jpg


20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/09/10-icons-opt.png


21. 21 http://icomoon.io


22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/09/10-icons-opt.png


23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/09/11-text-labels-opt.png


24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/09/11-text-labels-opt.png


25. 25 http://www.uie.com/brainsparks/2009/06/28/old-news-about-icons/


26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/09/12-lists-opt.jpg


27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/09/12-lists-opt.jpg


28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/09/13-hidden-menus-opt.jpg


29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/09/13-hidden-menus-opt.jpg

↑ Back to topShare on Twitter

Wayfinding For The Mobile Web