Drupal makes so many options available, it's sometimes hard for developers to know how to make the right choices so the website is usable by its intended audience. Interaction design patterns are a resource available to developers for guidance in making better design decisions.
2. KAREN MCGRANE
Bond Art + Science Clients
_Founder and Partner _The New York Times
School of Visual Arts _Fast Company
MFA in Interaction Design _The Atlantic
_Interaction Design History _Condé Nast
_Design Management _New York Public Library
Razorfish _Disney Internet Group
_First information architect _Encyclopedia Britannica
_VP and National Lead for
User Experience
2 Do It With Drupal | December 2008
3. DRUPAL IS SO POWERFUL!
3 Do It With Drupal | December 2008
4. DRUPAL HAS TOO MANY OPTIONS.
4 Do It With Drupal | December 2008
5. Drupal makes so many options available that
developers have a hard time knowing how to
choose the right ones so that the site makes
sense to the user. Could you pick some
common interactions and describe how to
make them more usable?
—Jeff Robbins
5 Do It With Drupal | December 2008
18. _Too many variables
_Can’t cover all cases
NO.
7 Do It With Drupal | December 2008
19. _Too many variables
_Can’t cover all cases
_Can’t cover all needs
NO.
7 Do It With Drupal | December 2008
20. _Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive
NO.
7 Do It With Drupal | December 2008
21. _Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive
NO. _Not actionable
7 Do It With Drupal | December 2008
22. _Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive
NO. _Not actionable
_Not in context
7 Do It With Drupal | December 2008
23. _Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive
NO. _Not actionable
_Not in context
_I don’t have all the
answers
7 Do It With Drupal | December 2008
24. BUT WAIT...
8 Do It With Drupal | December 2008
27. A pattern describes an optimal solution to a
common problem within a specific context.
—Christian Crumlish + Erin Malone
Authors, Designing Social Interfaces
Curators, Yahoo! Pattern Library
11 Do It With Drupal | December 2008
28. Design patterns describe best practices in
design.
—Jenifer Tidwell
Author, Designing Interfaces
Curator, UI Patterns and Techniques
Luke Wroblewski, Design Patterns: Introduction, 22 May 2006
12 Do It With Drupal | December 2008
29. A design pattern is a repeatable design
solution, that’s been tested, reviewed, and
verified.
—James Reffell
UI Design Manager, eBay Inc.
Curator, eBay Pattern Engine
Luke Wroblewski, Design Patterns: Introduction, 22 May 2006
13 Do It With Drupal | December 2008
31. 110 MAIN ENTRANCE
Conflict
Placing the main entrance (or main entrances) is perhaps the single most
important step you take during the evolution of a building plan.
Resolution
Place the main entrance of the building at a point where it can be seen
immediately from the main avenues of approach and give it a bold, visible
shape which stands out in front of the building.
May be part of:
Site Repair (104), South Facing Outdoors (105), Wings of Light (107), Circulation Realms
(98), Family of Entrances (102).
May contain:
Family of Entrances (102), Entrance Room (130), Entrance Transition (112), Shielded Parking
(97), Car Connection (113).
15 Do It With Drupal | December 2008
33. Each pattern describes a problem which occurs
over and over again in our environment, and
then describes the core of the solution to that
problem, in such a way that you can use this
solution a million times over, without ever
doing it the same way twice.
—Christopher Alexander, A Pattern Language
17 Do It With Drupal | December 2008
52. FLUID OPEN SOURCE DESIGN
PATTERN LIBRARY
26 Do It With Drupal | December 2008
53. FLUID OPEN SOURCE DESIGN
PATTERN LIBRARY
26 Do It With Drupal | December 2008
54. INTERACTION DESIGN PATTERNS
1. Identify common design problems
2. Describe solutions that work in practice
3. Explain why those solutions work in terms of
general principles
4. Show a variety of concrete visual examples that
demonstrate the range of the pattern
27 Do It With Drupal | December 2008
55. WHAT DOES THIS MEAN FOR ME?
How to use pattern libraries
91. 3. ROLL OUR OWN
45
3
Do It With Drupal | December 2008
92. WHY DRUPAL.ORG NEEDS ITS OWN
PATTERN LIBRARY
_Give Drupal developers tools to help build more
usable websites
_Educate teams on a common vocabulary and
rationale for design decisions
_Address issues unique to Drupal or give specific
instructions for how to implement solutions
_Put patterns where developers will find them
_Take one small step toward more consistency
_Create a sense of community and ownership
46 Do It With Drupal | December 2008
93. WHY DRUPAL.ORG SHOULDN’T BUILD
A PATTERN LIBRARY
_Many pattern libraries already exist; no need to
reinvent the wheel
_Patterns already exist as “modules” on Drupal.org
_No real community support for the effort
_Pattern libraries are too generic and don’t help solve
the real problem
_Hire an interaction designer, already
47 Do It With Drupal | December 2008
94. HOW WE MIGHT GO ABOUT
BUILDING A PATTERN LIBRARY
_Start soliciting “usability problems” on Drupal.org
_Create a working group to filter and prioritize
_Ask people to upload screenshots of sample
solutions
_Hold a “Pattern Camp” to review and edit
_Encourage commenting and tagging on Drupal.org
48 Do It With Drupal | December 2008