UI Patterns for Search Discovery

User Interface Patterns for
Search & Information Discovery

Tony Russell-Rose, PhD
Manager, User Experience (EMEA)

02-July-2009

Agenda
Topic

Who is Endeca?

What is a User Interface (UI) Design Pattern?

The Endeca UI Design Pattern Library

Sample Design Patterns: Guided Navigation

Maintaining & Growing a Pattern Library

Next Steps: The Library Today & Tomorrow

Questions

Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.

Who is Endeca?

Software company founded in 1999

Information access platform for creating search & discovery
applications
– One of the ‘Big Three’ in Enterprise Search

Active across many vertical markets
– Retail, Manufacturing & distribution, Media & publishing, Financial
Services, Public Sector, etc.


What Problem do we Solve?

“Which is the best gift for my “What are the best parts we can
daughter, given my specific incorporate for a specific end
requirements? product, given these four
constraints?

Data everywhere: across multiple silos, and constantly changing
Inadequate user experience

Shortcomings in existing tools

CRM
Excel

SRM SCM
CMS
CAD Email PDM
SPM
QMS HR
PIM ERP
ERP CRM
Wiki Data Purch.
Warehouse Access
ERP
Data Warehouse
Purch.
PIM
MRP


Current Approaches

Easy to use, any data “Million or none” problem

Predictable queries on No flexibility without IT help
BI RDBMS structured data
Existing enterprise Data management inside Inflexible user experience,
application
individual app no visibility acrossCRM
silos
SRM
CRM
Excel

SRM SCM
CMS
CAD Email PDM
SPM
QMS HR
PIM ERP
ERP CRM
Wiki Data Purch.
Warehouse Access
ERP
Data Warehouse
Purch.
PIM
MRP


Endeca’s Search & Information Access Platform

ENDECA

CRM
Excel

Empowers any user to access any kind of data
CAD Email
CMS
SRM SCM
PDM
SPM
QMS
drawn from any source ERP CRM
PIM HR
ERP
Wiki Data Purch. Access

any way they need it PIM
ERP Warehouse
Data
Warehouse Purch.

MRP

Endeca UX Principles: Design for Discovery

Information Access and Discovery experiences must be designed
with an understanding of human information-seeking behavior

Am I Did I learn
Am I asking Was my How should I
progressing something
The five core
my question activities of
prediction human information-seeking behavior my
adjust my
toward my that alters
the right way? accurate? tactics?
goal? goal?

Predict Evaluate Adapt Iterate Revise


What is a UI Design Pattern?


What is a UI Design Pattern?

A principled way to solve a common UX design problem
– Best practice guidelines and principles for UI design — structure,
behavior, presentation, etc.

A UI Design Pattern is NOT:
– a strict recipe
– etched in stone
– a substitute for sound, creative user interface design & user testing


Benefits of UI Design Patterns

Increase efficiency through reuse of ideas

Increase effectiveness through capturing and applying best
practices & lessons learned

Enable consistent interactions across multiple applications,
facilitating ease of learning and adoption

Facilitate UX innovation


Well known UI design pattern libraries
Yahoo! Jenifer Tidwell

Welie Peter Morville


Endeca UI Design Pattern Library


Endeca UI Patterns: Approach
Focus on UI challenges related to discovery, faceted search &
exploration, and the unique capabilities of the Endeca platform
Evidence base is derived from:
– Understanding of human info-seeking behavior
– Lessons learned from hundreds of customer implementations
– Insights from ongoing primary research

CAVEAT DESIGNER:
UI patterns should be evaluated and applied in the context of
your specific user, business, & technical context

They are NOT a substitute for appropriate user research
or interface design


Endeca UI Patterns: Overview of current patterns

Currently ~20 patterns
(more to come)

Scope includes:
– UI elements
breadcrumbs, search
boxes
– UI assemblies
guided navigation,
search results,
comparisons
– UI frameworks
launch/landing pages


Endeca UI Patterns: Key Components

Key Components

Problem Summary

Usages and Constraints

Solution elements

Related Patterns

Anti-patterns

Additional Samples

Wiki Discussion


Guided Navigation: General Problem Summary
Users exploring & evaluating a universe of available
results/assets to find relevant and important information

Need to be able to easily refine their available results,
quickly understand the dynamic effect of their actions

Need to seamlessly move through cycles of exploring and
evaluating to progressively find what they need


Guided Navigation: Varied Challenges & Solutions
Guided Navigation user interfaces need to accommodate a varied range of users &
scenarios and be optimized for specific user types, goals/scenarios, assets, and modes

Varied Solutions:

Vertical Stack Open Horizontal


Sample Patterns: Vertical Stack Guided Navigation


Guided Navigation: Vertical Stack
Context Summary
Sony Style

Designed to accommodate a wide
range of user contexts
– novice to expert
– varied goals & assets
Optimized to help the “novice”
find, explore, and discover
– minimizes information overload
– simple, progressive, but highly
flexible guided experience
Not optimized for expert analysis
of highly complex assets
– e.g. trade off analysis, pattern and
trend analysis, etc.


Solution Overview
Sony Style

Dimensions are “vertically
stacked”, in priority order –
adjacent to search results

Visibility is configurable (e.g.
using collapsible dimensions)

Meaningful natural language
labels for the menu and
dimensions (e.g. “Refine Results
by:”)

Visual cues are used to express
hierarchy and containment
(e.g. values within dimensions)


Solution Elements Food Network

2. Provide a meaningful natural
language label (and call to
action) for the entire Guided
Navigation menu UI
element, e.g.:

– “Narrow Your Results”

– “Refine Your Results”



5. Visually distinguish
Dimension labels from
Dimension Values through
font variations, color,
justification, etc.


Solution Elements Marriott

6. Present Dimensions in order
of “importance” and
frequency of use

– Note “importance” is a
function of user needs and
business priorities


Solution Elements Carzone.ie

7. Select and present a subset
of Dimensions that align
with expected user task flow

– What are users likely to
need in various contexts?



9. Limit the number of
Dimension Values displayed
within each Dimension to an
easily scanned list



11. When users select the
more/all option, present the
additional Dimension
Values in context


Guided Navigation: Open Horizontal
Context Summary
RS Components

Optimized for a specialized
user context
– e.g. Expert users with complex
goals & highly faceted assets

Optimized to support:
– Visibility into complex attributes
and their interrelationships
– “parametric” modes of exploring
& analyzing, e.g. trade offs and
patterns

Note: Can sometimes be effectively adapted for simpler user contexts
to convey options but with complex assets and novice users, this
may risk information overload


Guided Navigation: Open Horizontal
Solution Overview
RS Components

Select set of prioritized
dimensions are presented
horizontally above results with
dimensions “open” and all
values exposed

Initial dimensions are displayed as
an easily scanned list, in a
consistent left to right
sequence

Users can see more/all
dimensions via a visual or
textual cue

Present additional dimensions to
the right of the existing ones

Current Patterns 1 of 2

Search
– Simple Search Box
– Personalized Exploration Launch Page
– Type Ahead Navigation

– Breadcrumbs
– Breadbox

Guided Nav
– Simple Guided Navigation: Vertical Stack
– Horizontal Guided Navigation: Single Select
– Horizontal Guided Navigation: Multi Select
– Continuous Range Refinement: Range Slider
– Complex Dimension Combinations
– Simple Dimension Combinations


Current Patterns 2 of 2

Search Results
– Search Within
– Reorder Results - Quick Sort
– Flexible Table - Results Set and Detailed View
– Mixed Content Results Segmented with Tabs
– Mixed Content Results with Spotlights
– Search Results Item Preview
– Item Comparison

Spotlighting
– See Also Sidebar
– Result Spotlight



New patterns arise from various sources
– analysis of customer implementations
– feedback and questions from the field
– ongoing UI design and user research

– Solution elements aim to provide guidance on recurring issues
– Evidence sources analysed, generic principles abstracted
– Never enough time for research(!)

Ongoing commitment to document best practices/lessons learned
– UX Team evaluates candidate patterns
– Regular reviews:
Update the wiki
Grow the evidence base

If we build it, will they come?
– Internal + external promotion needed

Next Steps: Today and Tomorrow

Today:
– Access is through an internal wiki
– Clients access the patterns through their professional services team

Tomorrow:
– Publically accessible version of the Pattern Library (late 2009)
– Endeca UX training courses to include key UI design patterns

Today & Tomorrow:
– Continue to expand and refine UI patterns
tackle a broader range of information discovery challenges


UI Patterns for Search Discovery

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie UI Patterns for Search Discovery

Ähnlich wie UI Patterns for Search Discovery (20)

Mehr von Tony Russell-Rose

Mehr von Tony Russell-Rose (17)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

UI Patterns for Search Discovery