Thursday, July 20, 3:15 pm – 4:15 pm
Category: Trending Issues

A language of interaction has been opened to the community: the Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/index.php. Its goal is to share a vocabulary around designing for engagement. It informs the newest areas of design within Yahoo! and provides a home for sharing the best design and code solutions with the community at large.

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.

Design patterns are a nice concept, but how do they fare in the real world? This session will also draw lessons and pose questions based on the experience of that eBay’s User Experience & Design organization.

eBay has implemented an extremely lightweight, flexible approach to challenges in the creation and dissemination of design patterns. This approach was born of necessity (due to limited resources) but has been surprisingly effective. The approach is based on a few core principles:

* Move quickly and don’t think too hard
* Encourage mass documentation
* Allow and acknowledge messiness
* Allow no exceptions (subvert them!)
* Document the pattern and the specification
* Push patterns into code whenever possible

This session will illustrate these principles through real-world examples, including the unsuccessful and the successful.
Speakers:
Bill Scott
James Reffell

A history of creating & using design patterns at ebay

http://developer.yahoo.com/ypatterns/index.php

from james: (jreffell@ebay.com)
- half.com, ebay express

what’s horrible on a website?
inconsistent design and confusing user experience

Back in the days, ebay had a design guideline book. IT DIDN’T WORK. Obsolete the day it was printed.
Why didn’t it work?
- static (printed? You crazy? You are web designers. You are going to learn faster than you can print)
- hard to use (why so big?)
- too genereal (well-lit path)
- too specific (5-pixel padding)
- some things were just wrong

---

What’s a PATTERN

repeatable design solutions to problems

even if you don’t have a solution, you have the common language that you can talk to other people on the team about to create the interaction.

---

CODE

Developed xml system
Working with developers and code made patterns deeper.
Encouraged resuse
Some designers picked it up – even non-techies
(there should be multiple ways of getting to things or doing things.)
(you should tell people why you are doingn what you are doing. So they will understand. this is essentially crucial when a company is preparing its process document.

---

PROCESS

Community of designers to contribute.

PUTTING IT TOGETHER
- Patterns
- Process
- (cross-functional) people
- code/language (so that people speak the same language and understand what each other is talking about)

---

EBAY EXAMPLETitle – data – actionDeep structure of consistency

2 ways to layout forms:
description on top of the input or on the left.

You have to get everyone to get involved in the process and understand the process to help them to adopt. (If they can’t contribute they really wouldn’t care.) (_so when we have our process document done and hand to new recruits, they should have their say in it as well_)

_ so if we have the pattern worked out piece by piece, can we start creating a community around it so it fosters the academic area to enrich the up and coming new talents _

---

From Bill Scott
Patterns and beyond
Yuiblog.com
Looksgoodworkswell.comhttp://developer.yahoo.com/ypatterns/index.phpThe classic model- page – http request – server
Interaction. Presentation. Data
Because of ajax, now bringing data closer.

Surfacing a vocabulary.
(look up scientific areas and see how they do it) define and structure

All the fancy things we can do:
- drag and drop
- inline editing
- The hovering things, good indication for the users to see what’s going on.
- Expandable content is another good way of fitting more information on the screen.
- Cinematic transition
- Booya script.aculo.us

once the users understand the idioms, they can utilize the tool better.

Light footprint.
- show the users the path of things happening.
- Show the users that they don’t need that many steps to get there.

What’s with the nuclear explosion on flickr stewart? (If you go into organizer and start a batch edit and drag things out of the batch, it POOPHS. in a crazy explosion..)

Oracle is thinking about opening up their pattern library
((( after listening to “pattern” for so many times it sounds like patent)))

http://www.welie.com/

---