Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
CREATING USABLE WEBSITES
Do It With Drupal!
December 2008
KAREN MCGRANE
      Bond Art + Science             Clients
      _Founder and Partner           _The New York Times
      ...
DRUPAL IS SO POWERFUL!




             3           Do It With Drupal | December 2008
DRUPAL HAS TOO MANY OPTIONS.




             4        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 s...
SURE!




        6   Do It With Drupal | December 2008
_Commenting



SURE!




        6                 Do It With Drupal | December 2008
_Commenting
            _Navigation


SURE!




        6                 Do It With Drupal | December 2008
_Commenting
            _Navigation
            _Search

SURE!




        6                 Do It With Drupal | December ...
_Commenting
            _Navigation
            _Search
            _Listing pages
SURE!




        6                    ...
_Commenting
            _Navigation
            _Search
            _Listing pages
SURE!       _Friending




        6   ...
_Commenting
            _Navigation
            _Search
            _Listing pages
SURE!       _Friending
            _Rec...
_Commenting
            _Navigation
            _Search
            _Listing pages
SURE!       _Friending
            _Rec...
_Commenting
            _Navigation
            _Search
            _Listing pages
SURE!       _Friending
            _Rec...
_Commenting
            _Navigation
            _Search
            _Listing pages
SURE!       _Friending
            _Rec...
NO.




      7   Do It With Drupal | December 2008
_Too many variables



NO.




      7                 Do It With Drupal | December 2008
_Too many variables
          _Can’t cover all cases


NO.




      7                  Do It With Drupal | December 2008
_Too many variables
          _Can’t cover all cases
          _Can’t cover all needs

NO.




      7                  Do...
_Too many variables
          _Can’t cover all cases
          _Can’t cover all needs
          _Too prescriptive
NO.




...
_Too many variables
          _Can’t cover all cases
          _Can’t cover all needs
          _Too prescriptive
NO.     ...
_Too many variables
          _Can’t cover all cases
          _Can’t cover all needs
          _Too prescriptive
NO.     ...
_Too many variables
          _Can’t cover all cases
          _Can’t cover all needs
          _Too prescriptive
NO.     ...
BUT WAIT...




              8   Do It With Drupal | December 2008
CREATING USABLE WEBSITES
using
INTERACTION DESIGN PATTERNS
Do It With Drupal!
December 2008
WHAT’S AN
INTERACTION
DESIGN PATTERN?



             10
                  ?
                  Do It With Drupal | Decembe...
A pattern describes an optimal solution to a
common problem within a specific context.
             —Christian Crumlish + ...
Design patterns describe best practices in
design.
                               —Jenifer Tidwell
                   Auth...
A design pattern is a repeatable design
solution, that’s been tested, reviewed, and
verified.
                            ...
ARCHITECTURE DESIGN PATTERNS




               14         Do It With Drupal | December 2008
110 MAIN ENTRANCE
Conflict
Placing the main entrance (or main entrances) is perhaps the single most
important step you tak...
16   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 s...
SOFTWARE DESIGN PATTERNS




              18           Do It With Drupal | December 2008
INTERACTION DESIGN PATTERNS




               19         Do It With Drupal | December 2008
COMMON GROUND




            20   Do It With Drupal | December 2008
DESIGNING INTERFACES




               21      Do It With Drupal | December 2008
DESIGNING INTERFACES




               21      Do It With Drupal | December 2008
DESIGNING INTERFACES




               21      Do It With Drupal | December 2008
UI PATTERNS




              22   Do It With Drupal | December 2008
UI PATTERNS




              22   Do It With Drupal | December 2008
UI PATTERNS




              22   Do It With Drupal | December 2008
WELIE.COM




            23   Do It With Drupal | December 2008
WELIE.COM




            23   Do It With Drupal | December 2008
WELIE.COM




            23   Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY




               24         Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY




               24         Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY




               24         Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES




               25         Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES




               25         Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES




               25         Do It With Drupal | December 2008
FLUID OPEN SOURCE DESIGN
PATTERN LIBRARY




               26          Do It With Drupal | December 2008
FLUID OPEN SOURCE DESIGN
PATTERN LIBRARY




               26          Do It With Drupal | December 2008
INTERACTION DESIGN PATTERNS
1. Identify common design problems
2. Describe solutions that work in practice
3. Explain why ...
WHAT DOES THIS MEAN FOR ME?
How to use pattern libraries
LET’S PICK A COMMON PROBLEM
LET’S PICK A COMMON PROBLEM
Ratings
Reviews
Voting
EVALUATION/RATING




              30
EVALUATION/RATING




              30
RATINGS AND REVIEWS




               31
RATINGS AND REVIEWS




               31
RATINGS AND REVIEWS




               31
VOTE TO PROMOTE




              32
VOTE TO PROMOTE




              32
VOTE TO PROMOTE




              32
RATING




         33
RATING




         33
RATING




         33
HERE’S ANOTHER ONE
HERE’S ANOTHER ONE
Collapsible panels
Accordion lists
Expandy widget
I’M SURE IT’S IN HERE SOMEWHERE...




                 35
I’M SURE IT’S IN HERE SOMEWHERE...




                 35
CLOSABLE PANELS




                  36
CLOSABLE PANELS




                  36
CLOSABLE PANELS




                  36
COLLAPSIBLE PANELS




               37
COLLAPSIBLE PANELS




               37
COLLAPSIBLE PANELS




               37
ACCORDION MENU




             38
ACCORDION MENU




             38
ACCORDION MENU




             38
COLLAPSE TRANSITION




               39
COLLAPSE TRANSITION




               39
WHAT DOES THIS MEAN FOR
THE DRUPAL COMMUNITY?
Three potential options
1
1. IGNORE THE SUBJECT




              41        Do It With Drupal | December 2008
CALL FOR A PATTERN LIBRARY




                42           Do It With Drupal | December 2008
CALL FOR A PATTERN LIBRARY




                42           Do It With Drupal | December 2008
2. PARTNER WITH
   SOMEONE ELSE



             43
                  2
                  Do It With Drupal | December 2008
THE FLUID PROJECT




               44   Do It With Drupal | December 2008
THE FLUID PROJECT




               44   Do It With Drupal | December 2008
3. ROLL OUR OWN




             45
                  3
                  Do It With Drupal | December 2008
WHY DRUPAL.ORG NEEDS ITS OWN
PATTERN LIBRARY
_Give Drupal developers tools to help build more
 usable websites
_Educate te...
WHY DRUPAL.ORG SHOULDN’T BUILD
A PATTERN LIBRARY
_Many pattern libraries already exist; no need to
 reinvent the wheel
_Pa...
HOW WE MIGHT GO ABOUT
BUILDING A PATTERN LIBRARY
_Start soliciting “usability problems” on Drupal.org
_Create a working gr...
DESIGN PATTERNS SOURCES




               49
DESIGN PATTERNS SOURCES




               49
DESIGN PATTERNS SOURCES




               49
THANKS!

www.bondartscience.com    Karen McGrane
info@bondartscience.com   karen@bondartscience.com
212-226-6344          ...
Prochain SlideShare
Chargement dans…5
×

Creating Usable Websites with Interaction Design Patterns: Do It With Drupal!

26 218 vues

Publié le

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.

Publié dans : Technologie
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Njce! Thanks for sharing.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Creating Usable Websites with Interaction Design Patterns: Do It With Drupal!

  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
  69. HERE’S ANOTHER ONE
  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

×