Creating usable Drupal sites with interaction design patterns
•
32 j'aime•29,455 vues
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.
Recommandé
Contenu connexe
Similaire à Creating usable Drupal sites with interaction design patterns
Similaire à Creating usable Drupal sites with interaction design patterns (20)
Plus de Karen McGrane
Plus de Karen McGrane (20)
Dernier
Dernier (20)
Creating usable Drupal sites with interaction design patterns
- 1. CREATING USABLE WEBSITES Do It With Drupal! December 2008
- 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
- 6. SURE! 6 Do It With Drupal | December 2008
- 7. _Commenting SURE! 6 Do It With Drupal | December 2008
- 8. _Commenting _Navigation SURE! 6 Do It With Drupal | December 2008
- 9. _Commenting _Navigation _Search SURE! 6 Do It With Drupal | December 2008
- 10. _Commenting _Navigation _Search _Listing pages SURE! 6 Do It With Drupal | December 2008
- 11. _Commenting _Navigation _Search _Listing pages SURE! _Friending 6 Do It With Drupal | December 2008
- 12. _Commenting _Navigation _Search _Listing pages SURE! _Friending _Recent... 6 Do It With Drupal | December 2008
- 13. _Commenting _Navigation _Search _Listing pages SURE! _Friending _Recent... _Calendar events 6 Do It With Drupal | December 2008
- 14. _Commenting _Navigation _Search _Listing pages SURE! _Friending _Recent... _Calendar events _Date/time stamps 6 Do It With Drupal | December 2008
- 15. _Commenting _Navigation _Search _Listing pages SURE! _Friending _Recent... _Calendar events _Date/time stamps _Rate + Review 6 Do It With Drupal | December 2008
- 16. NO. 7 Do It With Drupal | December 2008
- 17. _Too many variables NO. 7 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
- 25. CREATING USABLE WEBSITES using INTERACTION DESIGN PATTERNS Do It With Drupal! December 2008
- 26. WHAT’S AN INTERACTION DESIGN PATTERN? 10 ? 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
- 30. ARCHITECTURE DESIGN PATTERNS 14 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
- 32. 16 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
- 34. SOFTWARE DESIGN PATTERNS 18 Do It With Drupal | December 2008
- 35. INTERACTION DESIGN PATTERNS 19 Do It With Drupal | December 2008
- 36. COMMON GROUND 20 Do It With Drupal | December 2008
- 37. DESIGNING INTERFACES 21 Do It With Drupal | December 2008
- 38. DESIGNING INTERFACES 21 Do It With Drupal | December 2008
- 39. DESIGNING INTERFACES 21 Do It With Drupal | December 2008
- 40. UI PATTERNS 22 Do It With Drupal | December 2008
- 41. UI PATTERNS 22 Do It With Drupal | December 2008
- 42. UI PATTERNS 22 Do It With Drupal | December 2008
- 43. WELIE.COM 23 Do It With Drupal | December 2008
- 44. WELIE.COM 23 Do It With Drupal | December 2008
- 45. WELIE.COM 23 Do It With Drupal | December 2008
- 46. YAHOO! DESIGN PATTERN LIBRARY 24 Do It With Drupal | December 2008
- 47. YAHOO! DESIGN PATTERN LIBRARY 24 Do It With Drupal | December 2008
- 48. YAHOO! DESIGN PATTERN LIBRARY 24 Do It With Drupal | December 2008
- 49. DESIGNING SOCIAL INTERFACES 25 Do It With Drupal | December 2008
- 50. DESIGNING SOCIAL INTERFACES 25 Do It With Drupal | December 2008
- 51. DESIGNING SOCIAL INTERFACES 25 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
- 56. LET’S PICK A COMMON PROBLEM
- 57. LET’S PICK A COMMON PROBLEM Ratings Reviews Voting
- 58. EVALUATION/RATING 30
- 59. EVALUATION/RATING 30
- 60. RATINGS AND REVIEWS 31
- 61. RATINGS AND REVIEWS 31
- 62. RATINGS AND REVIEWS 31
- 63. VOTE TO PROMOTE 32
- 64. VOTE TO PROMOTE 32
- 65. VOTE TO PROMOTE 32
- 66. RATING 33
- 67. RATING 33
- 68. RATING 33
- 70. HERE’S ANOTHER ONE Collapsible panels Accordion lists Expandy widget
- 71. I’M SURE IT’S IN HERE SOMEWHERE... 35
- 72. I’M SURE IT’S IN HERE SOMEWHERE... 35
- 73. CLOSABLE PANELS 36
- 74. CLOSABLE PANELS 36
- 75. CLOSABLE PANELS 36
- 76. COLLAPSIBLE PANELS 37
- 77. COLLAPSIBLE PANELS 37
- 78. COLLAPSIBLE PANELS 37
- 79. ACCORDION MENU 38
- 80. ACCORDION MENU 38
- 81. ACCORDION MENU 38
- 82. COLLAPSE TRANSITION 39
- 83. COLLAPSE TRANSITION 39
- 84. WHAT DOES THIS MEAN FOR THE DRUPAL COMMUNITY? Three potential options
- 85. 1 1. IGNORE THE SUBJECT 41 Do It With Drupal | December 2008
- 86. CALL FOR A PATTERN LIBRARY 42 Do It With Drupal | December 2008
- 87. CALL FOR A PATTERN LIBRARY 42 Do It With Drupal | December 2008
- 88. 2. PARTNER WITH SOMEONE ELSE 43 2 Do It With Drupal | December 2008
- 89. THE FLUID PROJECT 44 Do It With Drupal | December 2008
- 90. THE FLUID PROJECT 44 Do It With Drupal | December 2008
- 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
- 95. DESIGN PATTERNS SOURCES 49
- 96. DESIGN PATTERNS SOURCES 49
- 97. DESIGN PATTERNS SOURCES 49
- 98. THANKS! www.bondartscience.com Karen McGrane info@bondartscience.com karen@bondartscience.com 212-226-6344 917-887-8149 @bondartscience @digitrix6