2. Do It With Drupal | December 2008
Bond Art + Science
_Founder and Partner
School of Visual Arts
MFA in Interaction Design
_Interaction Design History
_Design Management
Razorfish
_First information architect
_VP and National Lead for
User Experience
Clients
_The New York Times
_Fast Company
_The Atlantic
_Condé Nast
_New York Public Library
_Disney Internet Group
_Encyclopedia Britannica
2
KAREN MCGRANE
3. Do It With Drupal | December 2008
DRUPAL IS SO POWERFUL!
3
4. Do It With Drupal | December 2008
DRUPAL HAS TOO MANY OPTIONS.
4
5. Do It With Drupal | December 2008
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
17. Do It With Drupal | December 2008
NO.
7
_Too many variables
18. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases
19. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases
_Can’t cover all needs
20. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive
21. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive
_Not actionable
22. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive
_Not actionable
_Not in context
23. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive
_Not actionable
_Not in context
_I don’t have all the
answers
24. Do It With Drupal | December 2008
BUT WAIT...
8
26. Do It With Drupal | December 2008
WHAT’S AN
INTERACTION
DESIGN PATTERN?
10
?
27. Do It With Drupal | December 2008
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
28. Do It With Drupal | December 2008
Design patterns describe best practices in
design.
—Jenifer Tidwell
Author, Designing Interfaces
Curator, UI Patterns and Techniques
12
Luke Wroblewski, Design Patterns: Introduction, 22 May 2006
29. Do It With Drupal | December 2008
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
13
Luke Wroblewski, Design Patterns: Introduction, 22 May 2006
30. Do It With Drupal | December 2008
ARCHITECTURE DESIGN PATTERNS
14
31. Do It With Drupal | December 2008
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
110 MAIN ENTRANCE
33. Do It With Drupal | December 2008
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
34. Do It With Drupal | December 2008
SOFTWARE DESIGN PATTERNS
18
35. Do It With Drupal | December 2008
INTERACTION DESIGN PATTERNS
19
36. Do It With Drupal | December 2008
COMMON GROUND
20
37. Do It With Drupal | December 2008
DESIGNING INTERFACES
21
38. Do It With Drupal | December 2008
DESIGNING INTERFACES
21
39. Do It With Drupal | December 2008
DESIGNING INTERFACES
21
40. Do It With Drupal | December 2008
UI PATTERNS
22
41. Do It With Drupal | December 2008
UI PATTERNS
22
42. Do It With Drupal | December 2008
UI PATTERNS
22
43. Do It With Drupal | December 2008
WELIE.COM
23
44. Do It With Drupal | December 2008
WELIE.COM
23
45. Do It With Drupal | December 2008
WELIE.COM
23
46. Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY
24
47. Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY
24
48. Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY
24
49. Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES
25
50. Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES
25
51. Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES
25
52. Do It With Drupal | December 2008
FLUID OPEN SOURCE DESIGN
PATTERN LIBRARY
26
53. Do It With Drupal | December 2008
FLUID OPEN SOURCE DESIGN
PATTERN LIBRARY
26
54. Do It With Drupal | December 2008
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
INTERACTION DESIGN PATTERNS
55. WHAT DOES THIS MEAN FOR ME?
How to use pattern libraries
84. WHAT DOES THIS MEAN FOR
THE DRUPAL COMMUNITY?
Three potential options
85. Do It With Drupal | December 2008
1. IGNORE THE SUBJECT
41
1
86. Do It With Drupal | December 200842
CALL FOR A PATTERN LIBRARY
87. Do It With Drupal | December 200842
CALL FOR A PATTERN LIBRARY
88. Do It With Drupal | December 200843
22. PARTNER WITH
SOMEONE ELSE
89. Do It With Drupal | December 200844
THE FLUID PROJECT
90. Do It With Drupal | December 200844
THE FLUID PROJECT
91. Do It With Drupal | December 2008
3. ROLL OUR OWN
45
3
92. Do It With Drupal | December 2008
_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
WHY DRUPAL.ORG NEEDS ITS OWN
PATTERN LIBRARY
93. Do It With Drupal | December 2008
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
94. Do It With Drupal | December 2008
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
