Introducing the Endeca User Interface Design Pattern Library
by Mark Burrell
Our UX team at Endeca gets a steady stream of questions about how to design effective search and discovery experiences. Just some of our FAQs:
- “What’s the best way to handle faceted bread crumbs?”
- “How should we present faceted navigation?”
- “How should we present results that include diverse types of content?”
In the course of solving problems like these in many contexts, we’ve been building up a library of UI design patterns specializing in search and discovery, and especially in faceted search and exploration. We previewed it for Jared Spool’s UIE virtual seminar “Leveraging Search & Discovery Patterns For Great Online Experiences,” and today marks the official launch of the library.
A pattern library serves as a knowledge base for designs that are known to work well, and provides kernels you can adapt to your specific case. This follows in the footsteps of some well-known collections like Yahoo’s Design Pattern Library and Peter Morville’s Search Patterns.
But when should you look for and apply patterns? How do you identify the most relevant and applicable ones? When you find one or more relevant patterns, what should you do with them?
We believe that UI design patterns should be used as an integral part of a human centered design process. This means that patterns should be part and parcel of the iterative process of understanding users, creating potential solutions, and evaluating and optimizing solutions.
First, it’s essential to understand the user context.
- Are the users knowledgeable about the domain or are they novices?
- What are the users’ typical goals and scenarios and modes of discovery?
- Are users attempting to locate specific known entities, attempting to learn about a domain, comparing and evaluating options and tradeoffs as part of a decision making process, etc.?
- What are the info assets that the users are working with?
- Are they simple objects with a few attributes or complex entities and concepts with a wide range of attributes?
Certain patterns may be for very specific users and scenarios, while others may work across a wide range. For example, Horizontal Faceted Navigation Multiselect is specifically designed to help knowledgeable users engage in tradeoff analysis when trying to find entities that match complex sets of criteria – for example design engineers trying to find the best components to use together to build a product. In contrast, Vertical Stack Faceted Navigation can be viewed as a multipurpose “Swiss Army Knife” that can work fairly well for both the “knowledgeable seeker” (e.g., the pro photographer looking for a replacement lens) and the “uncertain explorer” (the photo novice looking for an affordable camera to take on a family vacation).
Next, patterns provide an evaluative lens. These are guiding principles that help us spot potential gaps or sources of confusion. For example, the Breadbox pattern can help us know whether an implementation of faceted “breadcrumbs” includes clear affordances for a user to modify his or her search criteria. It also cautions that it might confuse the user if mixed with “you are here” style “breadcrumbs.”
When using patterns as an evaluative lens, it is essential to do this with the user context in mind, not as an abstract exercise. For example, patterns are extremely useful as reference points during scenario-based walkthroughs of designs. This helps ensure that that all the moving parts in your application work together to aid successful discovery by users.
Patterns are not simply evaluative, they are generative, helping us create new UIs and experiences. As with a spoken language, we can creatively “make infinite use of finite means” — a finite set of words and grammatical rules enable us to create infinite meaningful sentences. Vertical Faceted Nav may include facet values as text links, icons, range sliders, or color pickers. The presentation of “more” facet values can be presented via fly-out menus or expanded lists, with or without a scroll bar. Breadcrumbs in a breadbox may be presented as visual “building blocks,” layed out vertically or horizontally, or as simple text presented as a readable “sentence.”
Patterns should inspire us to create novel solutions. We should extend patterns, and break outside the box as needed to improve discovery experiences, take advantages of new opportunities (e.g., afforded by technology innovation), and solve new problems. In this spirit, one limitation of the Breadbox pattern points to a possible enhancement: not only should we be able to remove filters, we should also be able to modify filters directly from the breadcrumb itself (e.g., see Greg Nudelmann’s article on “super powered breadcrumbs”.) Likewise, one limitation of standard vertical stack faceted navigation is that it can be difficult for users to “see” the tradeoffs and relationships between various attributes as they make choices. This led to new ideas such as open horizontal faceted navigation with multiselect.
So UI design patterns can and should be used as much more than simple point-in-time evaluation tools. They’re generative tools that we creatively apply throughout the process of designing, evaluating, and continuously improving human centered solutions.
on July 25, 2010 at 5:08 am
Permalink
[...] beschreibt Mark Burrell die neue Bibliothek im Endeca-Blog. var flattr_wp_ver = '0.9.11'; var flattr_uid = '4557'; var flattr_url = [...]
on July 27, 2010 at 6:06 pm
Permalink
Mark, congratulations to you, Tony, and everyone at Endeca for releasing this and making it open to the general public.
on August 18, 2010 at 1:26 pm
Permalink
This library prompted us to do a little Ui experiment with it!
http://www.needlebase.com/blog/141-pattern-index