/
2012-01-05-breadcrumbs-as-a-tool-for-findability.html
42 lines (39 loc) · 5.75 KB
/
2012-01-05-breadcrumbs-as-a-tool-for-findability.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
---
layout: post
title: Looking at Breadcrumbs in a New Way
date: 2012-01-05 09:12:37.000000000 -08:00
categories:
- findability
tags:
- breadcrumbs
- browse and search
- content
- greg nudelman
- hierarchy
- query
- search
- users
status: publish
published: true
---
{% include toc.html %}
<p>One of the findability features in our help systems that we often overlook is the breadcrumb. Breadcrumbs typically sit above the page title and highlight the hierarchical path that leads to where you are. Here's a screenshot of a typical breadcrumb, taken from Adobe Illustrator's help:</p>
<p><a href="https://s3.us-west-1.wasabisys.com/idbwmedia.com/images/typical-breadcrumb-e1325821440215.png"><img class="alignnone size-full wp-image-10357" title="Typical breadcrumb" alt="Typical Breadcrumb" src="https://s3.us-west-1.wasabisys.com/idbwmedia.com/images/typical-breadcrumb-e1325821440215.png" width="592" height="403" /></a></p>
<p>Greg Nudelman discusses breadcrumbs in one of his chapters in <a title="Designing Search: UX Strategies for eCommerce Success" href="http://www.amazon.com/Designing-Search-Strategies-eCommerce-UXmatters/dp/0470942231">Designing Search: UX Strategies for eCommerce Success</a>. This post mainly details notes from Nudelman's book.</p>
<p>One problem with breadcrumbs, Nudelman notes, is that "breadcrumbs cannot show customers where to <em>could</em> go next. They show only where they've already <em>been</em>” (p. 199).</p>
<p>Nevertheless, Nudelman says the breadcrumb aligns with a search/browse pattern that supports common finding practices. Nudelman cites a presentation by Peter Morville called "Search & Discovery Patterns," where Morville explains that "browse and search work best in tandem... The best finding interfaces achieve a balance, letting users move fluidly between browsing and searching." (p. 203-4)</p>
<p>In other words, when looking for content, users prefer to search and browse, browse and search. Users perform a combination of the two as they try to find what they're looking for. This is because, Morville explains, "what we find changes what we seek." For example, search results for your initial query might show you the correct terms, which then informs your next search.</p>
<p>Breadcrumbs are powerful tools because users can easily modify the breadcrumb path to browse the information they want to see. Nudelman explains,</p>
<blockquote><p>Providing the ability to change attributes while automatically retaining all relevant query information turns the breadcrumbs into a powerful and flexible finding mechanism, without making the resulting interface overly complicated or difficult to use. (p. 210)</p></blockquote>
<p>For example, in the above screenshot, I may not want instructions for creating a drop-shadow effect. But rather than returning to the raw search and formulating a new query, I can click the Special Effects breadcrumb and browse the other special effects available. The breadcrumb allows me to modify part of my search without starting over from scratch. Nudelman says users would rather salvage part of their search and refine it rather than starting over:</p>
<blockquote><p>In my research, people seldom want to start the query over completely from scratch, unless they specifically indicated this action. Instead, a vast majority of the people interviewed wanted to retain as much of the query as possible with every change of the facet values and desired the system to help them construct a query that "makes sense," gracefully dropping facet selections that no longer applied to their modified query. (p. 208)</p></blockquote>
<p>One problem with breadcrumbs in most webhelp system is that they perpetuate the myth that content lives in just one place, which is not necessarily true. Content in the digital space can appear in many different arrangements and paths.</p>
<p>Nudelman notes that <a title="Edmunds.com search results" href="http://www.edmunds.com/finder/car-finder-results.html?finder_q=type:Sedan;price:Up%20to%20$15k;#finder_q=type%3ASedan%3Bprice%3AUp%20to%20%2415k%3Bmake%3AKia%3Bfeatures%3AiPod%20Input%3Bmake%3AHyundai%3B">Edmunds.com's search results</a> show tag selections as breadcrumbs.</p>
{% include ads.html %}
<p><a href="http://www.edmunds.com/finder/car-finder-results.html?finder_q=type:Sedan;price:Up%20to%20$15k;#finder_q=type%3ASedan%3Bprice%3AUp%20to%20%2415k%3Bmake%3AKia%3Bfeatures%3AiPod%20Input%3Bmake%3AHyundai%3B"><img class="alignnone size-medium wp-image-10355" title="Breadcrumbs" alt="Breadcrumbs" src="https://s3.us-west-1.wasabisys.com/idbwmedia.com/images/tagbreadcrumbs1-600x307.png" width="600" height="307" /></a></p>
<p>I would like to see webhelp move away from a single hierarchical organization of content to one that simply shows tags that are stacked together in the query. This shift would be a new paradigm for the way help is organized. In Edmunds.com, each of these keywords is metadata for the content. There may not be an official hierarchical order to the content, like there is most webhelp systems. The order is dynamically generated based on the metadata you select.</p>
<p>I recently wrote about tags as being more of a web-based method for classifying information. See <a title="Using Tags to Increase Findability" href="https://idratherbewriting.com/2011/12/26/using-tags-to-increase-findability/">Using Tags to Increase Findability</a>.</p>
<p>For more information about Greg Nudelman, see his site, <a title="Greg Nudelman" href="http://www.designcaffeine.com/">Design Caffeine</a>.</p>
<div style="background-color: #f1f1f1; padding:10px; font-style:Georgia; font-size:11px; border: 1px solid gray dashed; margin-bottom:15px;">
<p>Experience the boost in online conversions with Netidnow.com's <a href="http://www.netidnow.com/shopping-cart-software.html">ecommerce shopping cart</a>.</p>
</div>