[Sigia-l] web 2.0 interaction design pattern library

[Paola Kathuria]

[ajax interaction design pattern library]

Ziya asked:
> Any examples of what you'd consider an interaction feature/pattern/standard?

I've made screen-shots of two examples but have since found
some sites that might prove fruitful.

1) edit a heading (text) in-page
- mouse pointer over text changes b/g colour (Yahoo uses yellow)
- mouse-over shows hint
- click to get input box with save/cancel buttons

http://www.paolability.com/share/ajax/edit-text-flickr.gif
http://www.paolability.com/share/ajax/edit-text-yahoo-pipes.gif


2) Page elements / layout
- a collection of possible page elements
- a representation of the page
- (sometimes) a way of removing elements

http://www.paolability.com/share/ajax/page-layout-drag-drop-ning.jpg
http://www.paolability.com/share/ajax/page-layout-drag-drop-wordpress.gif


It turns out that the Yahoo Developer Network Design Pattern
Library does mention both of these things but they've still
to add in-page editing: http://developer.yahoo.com/ypatterns/


After searching again for libraries, I found these resources:

  A Pattern Library for Interaction Design - http://www.welie.com/

  http://webpatterns.org/ (link to webdesignpatterns wiki broken)

  http://en.wikipedia.org/wiki/Interaction_design_pattern

  Web Patterns: A UC Berkeley Resource for Building User Interfaces
  http://harbinger.sims.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/home.php

  The Interaction Design Patterns Page
  http://www.visi.com/~snowfall/InteractionPatterns.html
  (more about designing languages to specific design patterns)
  http://www.interaction-design.org/encyclopedia/interaction_design_patterns.html

  Book: Ajax Design Patterns by Michael Mahemoff (2006)
  http://safari.oreilly.com/0596101805


There seems to be a lot of stuff out there but if anyone does
want to start collecting AJAXy things elsewhere, I suggest
using Ning.com as a platform, with a group for each pattern.


Paola
--
http://www.paolability.com/