design patterns for navigating

Design Patterns For Navigating Complex Taxonomies

Presented by Loren Baxter

TAXONOMY

the science or technique of classification. - dictionary.com

COMPLEX TAXONOMY

A rich dataset that has many objects with various attributes.

Something people will need to navigate.

Examples:

‣ Product Catalogs

‣ User Directories

‣ Article Archives

WHY WE CARE

"Most companies are so confused, the last thing they need is more data." - @tamaraadlin

The same is true of people. They need the right data.

KEY POINTS

1. Navigation + search = foundation

2. Progressive disclosure: consider when data is presented

3. Categorization can be dynamic and powerful

4. Discovery engines add value

NAVIGATION AND SEARCH

are always best together. Think peanut butter and jelly.

‣ Top levels should remain constant

‣ Show where the user is

‣ Simple and advanced search

‣ Faceted navigation

CASCADING MENU GUIDELINES

• Allow adequate vertical margins to support selection

• Poor Contrast

• Avoid 3+ levels of cascades

www.msn.com (2007)

CASCADING MENU GUIDELINES

SEARCH (+)

Google One Box search

High efficiency, minimalist design

Extend public strategy to the enterprise

GOAL BASED SEARCH

I’ve got chicken, peas, broccoli.

What can I make for dinner?

GOAL BASED SEARCH

What’s in my refrigerator?

I’ve had a long day…

GOAL BASED SEARCH

Provide appropriate content for selection (image, rating, etc)

KEY POINTS

1. Navigation + search = foundation

2. Progressive disclosure: consider when data is presented

3. Categorization can be dynamic and powerful

4. Discovery engines add value

PROGRESSIVE DISCLOSURE

Not all data is created equal. It should be presented in layers.

INFORMATION HIERARCHY

Help users see the most important information.

Then, show more details upon request.

But make it efficient.

an efficient interface (for programmers)

LAYERED DATA

www.shopping.com

HIERARCHICAL DATA

www.amazon.com

KEY POINTS

1. Navigation + search = foundation

2. Progressive disclosure: consider when data is presented

3. Categorization can be dynamic and powerful

4. Discovery engines add value

CATEGORIZATION

is where we need to flex our design muscle. We can let people slice through data in interesting ways.

CATEGORIZATION

Static, curated list

Dynamic, faceted list

Dynamic, social list (“folksonomies”)

CATEGORIZATION

Categories can be:

‣ Object oriented

‣ Goal oriented

‣ What else?

DYNAMIC FACETS

www.shopping.com

SOCIAL FACETS

GOAL-BASED TAXONOMY

KEY POINTS

1. Navigation + search = foundation

2. Progressive disclosure: consider when data is presented

3. Categorization can be dynamic and powerful

4. Discovery engines add value

DISCOVERY ENGINES

Augment standard search + browse. Provide value to advanced users.

Generally more advanced technologies.

GOAL BASED SEARCH

What if your search had ...

As-you-type feedback

With data visualization

And drilldown results?

I want a cute name!

GOAL BASED SEARCH

http://www.babynamewizard.com/namevoyager

DISCOVERY ENGINESAllow non-standard, non-linear ways to browse the data.

CASE STUDY

Tyco Electronics

Global Provider of Electronics

Over 500,000 Products

Typical User: Design Engineer

Worldwide Audience

Over 50 recent corporate acquisitions

Product Catalogs Stacked 1 Meter High

User Centered Design Approach To Redesign

BEFORE: SIMPLE PICTURE CATALOG

BEFORE: COMPLEX “STEP SEARCH”

32

Dynamic Facets were confusing

NEW DESIGN GOALS

Visual and textual browse

Tabs for search strategies

Good information ‘Scent’

Nearby Search with part # default

‣ Strong keyboard focus

HOME PAGE: SEARCH / BROWSE

INTEGRATED “DIRECTED SEARCH”

DIRECTED SEARCH - FILTER APPLIED

PICTURE SEARCH - EXCELLENT FOR GLOBAL USE

TRANSITION FROM PICTURE SEARCH TO BROWSE

REMEMBER

Taxonomies are getting more complex

Adapt your navigation strategies to meet the new information challenges

Shield users from the complexity

Lower the efficiency cost of navigation

Leverage design patterns to repeat success

THANK YOU!

Please leave your card on the front or back table for a FREE “Taxonomy Checklist”

Email: jimh@classicsys.comPhone: 925-237-2581

Loren Baxtertwitter : @lorenbaxter

Visit our Web sites atwww.classicsys.comwww.guiguide.com