Home  
  Patterns  
  Visio stuff  
  Thoughts  

Pattern library

All patterns are listed here. It's quite a bunch of them, but I have tried to group them meaningfully.

User needs

Patterns that meet a direct need of the user.

Navigating around

· Accordion
· Headerless Menu
· Breadcrumbs
· Directory Navigation
· Doormat Navigation
· Double Tab Navigation
· Faceted Navigation
· Fly-out Menu
· Home Link
· Icon Menu
· Main Navigation
· Map Navigator
· Meta Navigation
· Minesweeping
· Panning Navigator
· Overlay Menu
· Repeated Menu
· Retractable Menu
· Scrolling Menu
· Shortcut Box
· Split Navigation
· Teaser Menu
· To-the-top Link
· Trail Menu
· Navigation Tree

Basic interactions

· Action Button
· Guided Tour
· Paging
· Pulldown Button
· Slideshow
· Stepping
· Wizard

Searching

· Advanced Search
· Autocomplete
· Frequently Asked Questions (FAQ)
· Help Wizard
· Search Box
· Search Area
· Search Results
· Search Tips
· Site Index
· Site Map
· Footer Sitemap
· Tag Cloud
· Topic Pages

Dealing with data

· Carrousel
· Table Filter
· Collapsible Panels
· Details On Demand
· Collector
· Inplace replacement
· List Builder
· List Entry View
· Overview by Detail
· Parts Selector
· Tabs
· Table Sorter
· Thumbnail
· View

Personalizing

· Customizable Window
· Login
· Registration

Shopping

· Booking
· Product Comparison
· Product Advisor
· Product Configurator
· Purchase Process
· Shopping Cart
· Store Locator
· Testimonials
· Virtual Product Display

Making choices

· Country Selector
· Date Selector
· Language Selector
· Poll
· Rating

Giving input

· Comment Box
· Constraint Input
· Form

Miscelleaneous

· Footer Bar
· Hotlist
· News Box
· News Ticker
· Send-a-Friend Link


Application needs

Patterns that help the application, or you the designer, communicate better with the user

Drawing attention

· Captcha
· Center Stage
· Color Coded Section
· Premium Content Lock
· Grid-based Layout
· Liquid Layout
· Outgoing Links
· Alternating Row Colors

Feedback

· Input Error Message
· Processing Page

Simplifying interaction

· Enlarged Clickarea
· Font Enlarger


Context of design

The context of the design

Site types

· Web-based Application
· Artist Site
· Automotive Site
· Branded Promotion Site
· Campaign Site
· E-commerce Site
· Community Site
· Corporate Site
· Multinational Site
· Museum Site
· Personalized 'My' Site
· News Site
· Portal Site
· Travel Site

Experiences

· Community Building
· Information Management
· Fun
· Information Seeking
· Learning
· Assistence
· Shopping
· Story Telling

Page types

· Article Page
· Blog Page
· Case Study
· Contact Page
· Event Calendar
· Forum
· Guest Book
· Help Page
· Homepage
· Newsletter
· Printer-friendly Page
· Product Page
· Tutorial

Suggest a pattern

Have you seen new examples of patterns out there that have not been described on this site? Send me a link to an example and I'll add it to my to-do list.
Suggest a pattern

Latest comments

Form (Danni Swalef)

An example of how to use validation hints:
http://www.bemba.com/signup

Alternating Row Colors (Luc Moers)

I think an alternate name that often is used to summarize this technique is "Zeb...

Comment Box (Luc Moers)

Suggestion: an example of a comment box that allows user to use buttons instead ...

Shopping Cart (Mike)

What are your thoughts on the on-page cart-summary found on oldnavy.com?
Double Tab Navigation (Danny Hope)

Neither of the examples above are examples of double tab navigation.

Ta...

rss logo

Copyright 2007, Martijn van Welie