More Related Content Similar to UI Design Patterns for Search & Information Discovery (20) More from Tony Russell-Rose (17) UI Design Patterns for Search & Information Discovery1. User Interface Patterns for
Search & Information Discovery
Tony Russell-Rose, PhD
Manager, User Experience (EMEA)
02-July-2009
2. 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.
3. 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.
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
4. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
5. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
6. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
7. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
8. What is a UI Design Pattern?
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
9. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
10. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
11. Well known UI design pattern libraries
Yahoo! Jenifer Tidwell
Welie Peter Morville
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
12. Endeca UI Design Pattern Library
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
13. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
14. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
15. Endeca UI Patterns: Key Components
Key Components
Problem Summary
Usages and Constraints
Solution elements
Related Patterns
Anti-patterns
Additional Samples
Wiki Discussion
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
16. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
17. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
18. Sample Patterns: Vertical Stack Guided Navigation
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
19. 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.
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
20. Guided Navigation: Vertical Stack
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)
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
21. Guided Navigation: Vertical Stack
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”
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
22. Guided Navigation: Vertical Stack
Solution Elements Food Network
5. Visually distinguish
Dimension labels from
Dimension Values through
font variations, color,
justification, etc.
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
23. Guided Navigation: Vertical Stack
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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
24. Guided Navigation: Vertical Stack
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?
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
25. Guided Navigation: Vertical Stack
Solution Elements Food Network
9. Limit the number of
Dimension Values displayed
within each Dimension to an
easily scanned list
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
26. Guided Navigation: Vertical Stack
Solution Elements Food Network
11. When users select the
more/all option, present the
additional Dimension
Values in context
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
27. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
28. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
29. Maintaining & Growing a Pattern Library
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
30. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
31. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
32. Maintaining & Growing a Pattern Library
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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.
33. 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
Copyright©2009 Endeca Technologies, Inc. All rights reserved.
Proprietary and confidential.