UI Design Patterns for Search & Information 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. Copyright©2009 Endeca Technologies, Inc. All rights reserved. Proprietary and confidential.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

http://isquared.wordpress.com	177
http://www.slideshare.net	45
http://myportfolio.school.nz	29
http://www.lmodules.com	4
http://www.netvibes.com	1
http://www.apurva.com	1

UI Design Patterns for Search & Information Discovery

by Tony Russell-Rose on Jul 21, 2009

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 257

Statistics

UI Design Patterns for Search & Information Discovery Presentation Transcript