Design Patterns: Defining and Sharing Web Interface Design Languages

Monday, March 12th @ 4:05 pm

Luke Wroblewski Principal Designer, Yahoo!

Why design patterns?
continuous discussion between all involved

shared language
giving things a name is a good way to g create shared goals around it

pattern recognition
as things get more global/networked, more data
data about data to bubble up the useful information

looking for visual relationships to tell a story

Book: designing interfaces (O’reily) helps to put patterns together

work positively for specific problems in specific contexts – THIS solution works for THIS problem.
principles and guidelines – patterns are good enough to be practical, but general enough to fit many situations
design vocabulary – noticing things in the wild and recognizing. drag-drop interface built around patterns, how long to wait after drag/drop, how should it look etc.
autocomplete (email to form)
progress bar (typical ajax working)
preview of content (netflix view video-ajax)

design patterns are solutions to problems

Scope of design patterns
frameworks, documentation
elements/widgets used in these patterns

Yahoo grid system is a framework to organize content on screens
Breadcrumbs provides path to/from where you are

What’s in a design pattern?
problem (situation)
use when (constraints)
why (rationale)
how (to apply)
related patterns
code samples

How are they used?
style recommendations
tough to document because it is always changing

Does it work for clients?
focus on solutions not rules
encourages good behavior

break down to user center goals and design constraints