Yahoo! Design Pattern Library

[Darren Dirt]

Neato idea -- instead of focusing on coding, object methods etc. that are common enough to be considered "patterns"... Nope, this is Yahoo's similar offering, but focused on the all-too-practical issues of webpage/webapp design, UI concepts, etc...

i.e. "how to make yer web thingie work nicely and be easy to figure out for the Luddites out there -- using metaphors and interfaces they are pretty familiar with by now"


Recent...
http://developer.yahoo.com/ypatterns/

List of all of them...
http://developer.yahoo.com/ypatterns/atoz.php

Collapse Transition
The designer needs to communicate that an object is no longer of primary importance, yet wants to keep it available in a smaller form.


Module Tabs
The user needs to navigate through one or more stacked panes of content without refreshing the page.


Spotlight Transition
Designer needs to call attention to where a data value or content has changed within the interface.


Drag and Drop Modules
The user needs needs to re-arrange the layout of modules on a web page directly with the mouse.

^ e.g.
Drag and drop interactions can be very complex. The complexity lies in the number of event states (we call these event states interesting moments) that can be used in a specific drag and drop sequence.

Here are the most pertinent interesting moments for Drag and Drop Modules:

    * Page generation (for what gets shown when the page is first rendered)
    * Mouse hover over draggable object
    * Drag initiated (mouse down, mouse moves >= 3pixels)
    * Drag over a valid target area
    * Drag over an invalid target area
    * Drag over the original location
    * Drop accepted
    * Drop rejected
    * Drop back on original location

On a page with content modules, the following user interface elements (actors) may particpate during each interesting moment.

    * Cursor
    * Module or thumbnail representation of module
    * Original location of module being dragged
    * Drop target (or insertion bar showing where module will be dropped)

Interesting Moments Storyboard Grid [grid] ...