Greg Nudelman discusses breadcrumbs in one of his chapters in Designing Search: UX Strategies for eCommerce Success. This post mainly details notes from Nudelman’s book.

One problem with breadcrumbs, Nudelman notes, is that “breadcrumbs cannot show customers where to could go next. They show only where they’ve already been” (p. 199).

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)

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.

Breadcrumbs are powerful tools because users can easily modify the breadcrumb path to browse the information they want to see. Nudelman explains,

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)

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:

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)

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.

Nudelman notes that Edmunds.com’s search results show tag selections as breadcrumbs.

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.

I recently wrote about tags as being more of a web-based method for classifying information. See Using Tags to Increase Findability.

For more information about Greg Nudelman, see his site, Design Caffeine.

Blog Sponsors

• Webworks ePublisher
• Scriptorium
• Help Generator help authoring software
• Southern Polytechnic: Information Design and Communication
• Simplified English
• MindTouch
• Madcap Software
• Dr.Explain
• Adobe Technical Communication Suite
• Congree

For the past two weeks I’ve been trying to figure this out without much success. But I did come pretty close to achieving it. See the final effect here. And if you’re interested in the how-to, keep reading.

First, to get a better idea of how Dooce’s Daily Chuck works, go to her site and click the dog picture in the banner. It opens to a large image of the dog (“Chuck”), and you can click the Previous or Next links to navigate to the photos for the other days.

Dooce's Daily Chuck

(By the way, I once met Heather at a book signing in SLC.)

Dooce is on Typepad, which may have some tricks that WordPress doesn’t. The easiest way to accomplish this same effect in WordPress is through the Post-Thumb plugin. (If you’re using Firefox 3, you may see a “Reported Attack Site!” message when going to the Post-Thumb plugin page. Instead, open the site in IE or go to the plugin’s page on WordPress.)

The Post-Thumb plugin scans your latest posts (of a specific category, if you want) and pulls out a thumbnail of the image with a link to the actual post. Perfect, right?

So I implemented it on Jane’s blog tonight and … down it went. I assume the Post-Thumb plugin initiated an intensive series of MySQL queries that triggered BlueHost’s extremely sensitive CPU Exceeded Error messages, and the site was down for a good 20 minutes.

CPU Exceeded Errors -- from BlueHost

By the way, the wp-supercache plugin seems to somewhat cure the CPU Exceeded Error messages, but I still think BlueHost has an abnormal amount of these error messages. If you google CPU Quota, most of the sites mention BlueHost. So perhaps the Post-Thumb plugin will work fine for you on a different host. If so, great.

There is, of course, more than one way to skin a cat. I’m still working on the way to show the latest thumbnail image in an RSS feed, but in the meantime, I found a neat little query script for the WordPress loop that shows the latest post in full, and then shows just the titles of posts after that.

The WordPress loop is the PHP script that calls the latest posts from the MySQL database. (Read more about the WordPress loop here.) The loop accepts various queries before it that control how the posts appear. (Read more about post queries here.)

Here’s the script (which I found here searching the WordPress support forums).

<?php if (have_posts()) : ?>
<?php $count = 0; ?>

<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>

<?php if ($count <= 2) : ?>

<h2><a class=”permalink” href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”>
<?php the_title(); ?></a></h2>

<?php the_content(); ?> // display the full content of the first two posts only

<?php else : ?>

<h2><a class=”permalink” href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”> <?php the_title(); ?></a></h2> // Just the permalinks

<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

You have to massage the styles to fit your blog a bit.

The Subtle WordPress Theme has a similar feature hard-baked into the home page. But Jane didn’t want her home page like this, just a specific category.

Oh man, this is getting more complicated than I wanted to get into here. I was going for a 10 minute post, but ….

Jane wanted just one category to show the latest post like this. So I copied the category.php code into a text editor (Notepad ++), and then swapped the category’s loop with the above modified loop, and then inserted the styles of her theme to match. Here’s the resulting category code:

<?php if (have_posts()) : ?>
<?php $count = 0; ?>

<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>

<?php if ($count <= 1) : ?>

<h3><a class=”permalink” href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”>
<?php the_title(); ?></a></h3> <div style=”margin-top:-2px;”><small><?php the_time(‘m.d.y’); ?> <b>|</b> <?php the_category(‘, ‘) ?> | <?php comments_number(‘Comment?’, ’1 Comment’, ‘% Comments’ ) ?> </small></div><br/>

<?php the_content(); ?>

<b style=”size:2em;border-bottom: 1px solid black;”>Previous Entries</b>
<?php else : ?>
<h5><a class=”permalink” href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”> <?php the_title(); ?></a></h5>

<?php endif; ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

I then saved it as a new file, titling it category-87.php. Why category-87? Because when WordPress serves up a category view, it first looks for category templates for the specific category. If a category template exists, it uses that template rather than the regular category.php template. In this case, category 87 is ID for the Daily Dick and Jane category.

(By the way, to find the category ID, go to Manage > Categories. Move your mouse over the category title and look at the numbers at the far right of the string in the task bar. Nice, huh?)

I also needed to exclude category 87 from the home page. To do so, I added this query post code before the loop in the index.php file.

<?php
if (is_home()) {
query_posts(“cat=-87″);
}
?>

Now all posts in category 87 are excluded from the home page, but not the feed. I use Feedburner, so I just edited the feed details in Feedburner to exclude category 87.

I just changed the feed from

http://whataboutmomblog.com/wp-rss2.php

to the following:

http://whataboutmomblog.com/wp-rss2.php?cat=-87

And then I added some style to the h5 tag that wraps the previous titles.

Check it out by going to Jane’s blog and clicking Daily Dick and Jane. By the way, did you notice that she has 600 comments on her underwear giveaway post?