Web Patterns par Berkeley

L’initiative du campus de Berkeley est très intéressante bien que non triviale.
Par manque de budgets systématiques pour la formation ou l’intervention d’experts développeurs et d’experts en utilisabilité (en France, les « usability experts » sont les ergonomes, comme moi ), le campus a décidé de concevoir une librairie de composants à la disposition des développeurs (tout comme peut le faire de nombreuses sociétés ou Google avec GWT).

Dans le cas de Berkeley, il est très intéressant de noter la manière dont sont présentés et proposés les composants. Un guide d’utilisation explique comment et quand utiliser un composant tout en proposant des exemples.

Les composants et les règles

Forms

• Auto-complete
• Form Validation
• Info Organization
• Calendar
• Multi-Step Indicator
• Related Information

Navigation

• Allison – Test
• Breadcrumbs
• Directory
• Horizontal Navigation
• Lev Byblikov
• Navigation Tabs
• TEST
• Utility Navigation
• Vertical Navigation

Un exemple

Breadcrumbs

(Other names for this pattern: Location Indicator, Location Breadcrumbs )

Design Problem

The user needs to know their current location within the Web site or application.

source: www.ebay.com

Use When

* The page displayed is within a hierarchy of pages and is not the topmost page.
* The user arrived at their current location from and external source such as search results, links in email, bookmarks or any other method that does not lead the user through the site hierarchy.

Solution

1. The breadcrumb should always be visible in the browser at the top of the page. The user should not need to scroll to see it.
2. The breadcrumb is a horizontal list of pages reflecting the site hierarchy starting from the topmost page (Home) and ending with the current page.
3. Where possible, labels should match the title of the corresponding page, but should be kept short for readability.
4. Breadcrumbs often use some symbol like “>” between links to indicate direction of the trail. These symbols are not linked.
5. Breadcrumbs should provide links to each page in the trail with the exception of the last one. This signifies the users current location in the trail.

Rationale

* Breadcrumbs give clear visual cues for the user’s current location and context in a Web site hierarchy.

Examples

source: www.walmart.com

source: www.yahoo.com

This pattern from other collections

* http://www.welie.com/patterns/showPattern.php?patternID=crumbs
* http://developer.yahoo.com/ypatterns/pattern_breadcrumbs.php