Shopping Engines Interaction Design Patterns

What’s a pattern?

From the IAWiki:

Patterns are optimal solutions to common problems. As common problems are tossed around a community and are resolved, common solutions often spontaneously emerge. Eventually, the best of these rise above the din and self-identify and become refined until they reach the status of a Design Pattern.

From the Diemen Patterns Repository:

Design patterns were originally developed by the architect Christopher Alexander and his collegues in the ground-breaking A pattern language (1977). Alexander’s patterns about architecture, construction, and urban/regional planning describe the physical environment in which people work and live, especially those aspects that give quality to housing and living.

Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice. — Christopher Alexander

Why a pattern library for shopping engines?

There are quite a few patterns libraries on the web that define interaction design patterns for web sites / web applications. However, due to the nature of online shopping and entities that are managed on this domain (products, brands, merchants…), some patterns specific to the shopping engines emerge. The goal of this pattern library is to identify those patterns, describe them, and show how the various shopping engines implement them.

Resources

Here are some inspirational design pattern libraries:

• Welie.com – A Pattern Library for Interaction Design
• The Diemen Repository of Interaction Design Patterns
• UI-Patterns – User Interface Design Pattern Library
• Web Patterns – A UC Berkeley Resource for Building User Interfaces
• Designing Interfaces – Patterns for Effective Interaction Design
• Yahoo! Design Pattern Library

List of patterns

• Brand overview
• Merchant overview
• Offer (Grid view)
• Offer (List view)
• Product (Grid view)
• Product (List view)
• Product overview
• Product page
• Search result page