Interactive Design And Drupal

1,323 views

Published on

From KMcGrane - fantastic slideshow on Drupal and incorporating Interactive Design.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,323
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Interactive Design And Drupal

  1. 1. CREATING USABLE WEBSITES Do It With Drupal! December 2008
  2. 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. 3. Do It With Drupal | December 2008 DRUPAL IS SO POWERFUL! 3
  4. 4. Do It With Drupal | December 2008 DRUPAL HAS TOO MANY OPTIONS. 4
  5. 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
  6. 6. Do It With Drupal | December 2008 SURE! 6
  7. 7. Do It With Drupal | December 2008 SURE! 6 _Commenting
  8. 8. Do It With Drupal | December 2008 SURE! 6 _Commenting _Navigation
  9. 9. Do It With Drupal | December 2008 SURE! 6 _Commenting _Navigation _Search
  10. 10. Do It With Drupal | December 2008 SURE! 6 _Commenting _Navigation _Search _Listing pages
  11. 11. Do It With Drupal | December 2008 SURE! 6 _Commenting _Navigation _Search _Listing pages _Friending
  12. 12. Do It With Drupal | December 2008 SURE! 6 _Commenting _Navigation _Search _Listing pages _Friending _Recent...
  13. 13. Do It With Drupal | December 2008 SURE! 6 _Commenting _Navigation _Search _Listing pages _Friending _Recent... _Calendar events
  14. 14. Do It With Drupal | December 2008 SURE! 6 _Commenting _Navigation _Search _Listing pages _Friending _Recent... _Calendar events _Date/time stamps
  15. 15. Do It With Drupal | December 2008 SURE! 6 _Commenting _Navigation _Search _Listing pages _Friending _Recent... _Calendar events _Date/time stamps _Rate + Review
  16. 16. Do It With Drupal | December 2008 NO. 7
  17. 17. Do It With Drupal | December 2008 NO. 7 _Too many variables
  18. 18. Do It With Drupal | December 2008 NO. 7 _Too many variables _Can’t cover all cases
  19. 19. Do It With Drupal | December 2008 NO. 7 _Too many variables _Can’t cover all cases _Can’t cover all needs
  20. 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. 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. 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. 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. 24. Do It With Drupal | December 2008 BUT WAIT... 8
  25. 25. CREATING USABLE WEBSITES using INTERACTION DESIGN PATTERNS Do It With Drupal! December 2008
  26. 26. Do It With Drupal | December 2008 WHAT’S AN INTERACTION DESIGN PATTERN? 10 ?
  27. 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. 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. 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. 30. Do It With Drupal | December 2008 ARCHITECTURE DESIGN PATTERNS 14
  31. 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
  32. 32. Do It With Drupal | December 200816
  33. 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. 34. Do It With Drupal | December 2008 SOFTWARE DESIGN PATTERNS 18
  35. 35. Do It With Drupal | December 2008 INTERACTION DESIGN PATTERNS 19
  36. 36. Do It With Drupal | December 2008 COMMON GROUND 20
  37. 37. Do It With Drupal | December 2008 DESIGNING INTERFACES 21
  38. 38. Do It With Drupal | December 2008 DESIGNING INTERFACES 21
  39. 39. Do It With Drupal | December 2008 DESIGNING INTERFACES 21
  40. 40. Do It With Drupal | December 2008 UI PATTERNS 22
  41. 41. Do It With Drupal | December 2008 UI PATTERNS 22
  42. 42. Do It With Drupal | December 2008 UI PATTERNS 22
  43. 43. Do It With Drupal | December 2008 WELIE.COM 23
  44. 44. Do It With Drupal | December 2008 WELIE.COM 23
  45. 45. Do It With Drupal | December 2008 WELIE.COM 23
  46. 46. Do It With Drupal | December 2008 YAHOO! DESIGN PATTERN LIBRARY 24
  47. 47. Do It With Drupal | December 2008 YAHOO! DESIGN PATTERN LIBRARY 24
  48. 48. Do It With Drupal | December 2008 YAHOO! DESIGN PATTERN LIBRARY 24
  49. 49. Do It With Drupal | December 2008 DESIGNING SOCIAL INTERFACES 25
  50. 50. Do It With Drupal | December 2008 DESIGNING SOCIAL INTERFACES 25
  51. 51. Do It With Drupal | December 2008 DESIGNING SOCIAL INTERFACES 25
  52. 52. Do It With Drupal | December 2008 FLUID OPEN SOURCE DESIGN PATTERN LIBRARY 26
  53. 53. Do It With Drupal | December 2008 FLUID OPEN SOURCE DESIGN PATTERN LIBRARY 26
  54. 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. 55. WHAT DOES THIS MEAN FOR ME? How to use pattern libraries
  56. 56. LET’S PICK A COMMON PROBLEM
  57. 57. LET’S PICK A COMMON PROBLEM Ratings Reviews Voting
  58. 58. EVALUATION/RATING 30
  59. 59. EVALUATION/RATING 30
  60. 60. RATINGS AND REVIEWS 31
  61. 61. RATINGS AND REVIEWS 31
  62. 62. RATINGS AND REVIEWS 31
  63. 63. VOTE TO PROMOTE 32
  64. 64. VOTE TO PROMOTE 32
  65. 65. VOTE TO PROMOTE 32
  66. 66. RATING 33
  67. 67. RATING 33
  68. 68. RATING 33
  69. 69. HERE’S ANOTHER ONE
  70. 70. HERE’S ANOTHER ONE Collapsible panels Accordion lists Expandy widget
  71. 71. I’M SURE IT’S IN HERE SOMEWHERE... 35
  72. 72. I’M SURE IT’S IN HERE SOMEWHERE... 35
  73. 73. CLOSABLE PANELS 36
  74. 74. CLOSABLE PANELS 36
  75. 75. CLOSABLE PANELS 36
  76. 76. COLLAPSIBLE PANELS 37
  77. 77. COLLAPSIBLE PANELS 37
  78. 78. COLLAPSIBLE PANELS 37
  79. 79. ACCORDION MENU 38
  80. 80. ACCORDION MENU 38
  81. 81. ACCORDION MENU 38
  82. 82. COLLAPSE TRANSITION 39
  83. 83. COLLAPSE TRANSITION 39
  84. 84. WHAT DOES THIS MEAN FOR THE DRUPAL COMMUNITY? Three potential options
  85. 85. Do It With Drupal | December 2008 1. IGNORE THE SUBJECT 41 1
  86. 86. Do It With Drupal | December 200842 CALL FOR A PATTERN LIBRARY
  87. 87. Do It With Drupal | December 200842 CALL FOR A PATTERN LIBRARY
  88. 88. Do It With Drupal | December 200843 22. PARTNER WITH SOMEONE ELSE
  89. 89. Do It With Drupal | December 200844 THE FLUID PROJECT
  90. 90. Do It With Drupal | December 200844 THE FLUID PROJECT
  91. 91. Do It With Drupal | December 2008 3. ROLL OUR OWN 45 3
  92. 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. 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. 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
  95. 95. DESIGN PATTERNS SOURCES 49
  96. 96. DESIGN PATTERNS SOURCES 49
  97. 97. DESIGN PATTERNS SOURCES 49
  98. 98. www.bondartscience.com info@bondartscience.com 212-226-6344 @bondartscience Karen McGrane karen@bondartscience.com 917-887-8149 @digitrix6 THANKS!

×