User-centered design for Drupal sites

Babdf467dac04e2ca41be014f2e95169?s=47 Chris Skene
February 07, 2013

User-centered design for Drupal sites

Solving user experience tangles and mistakes using user experience spaces.

Babdf467dac04e2ca41be014f2e95169?s=128

Chris Skene

February 07, 2013
Tweet

Transcript

  1. User-centered design for Drupal sites FRONTEND | CHRISTOPHER SKENE |

    FEBRUARY 7 2013
  2. User Experience techniques, for Drupal sites FRONTEND | CHRISTOPHER SKENE

    | FEBRUARY 7 2013
  3. Building better Web Experiences… for Drupal sites FRONTEND | CHRISTOPHER

    SKENE | FEBRUARY 7 2013
  4. “User Experience” 4

  5. In today’s session: •  Why do traditional user-centered design [UCD]

    and UX processes break down when applied to Drupal? •  How to resolve this problem by combining UCD, content modelling, and interaction design. •  A worked example. 5
  6. UX Spaces 6 Park UX space Park Parks represent a

    physical park or garden. Created by Parkfile. A User can search for Parks.
  7. Worked example 7

  8. Content: Parks Google http://domain.com Web Page Title Section 4 Section

    3 Section 2 Find Parks by Interest 8
  9. 9

  10. About me •  Drupal Consultant with PreviousNext •  First used

    Drupal 4.5 •  Working exclusively with Drupal since 2007 •  Help run DrupalACT •  Experience with public sector, not-for-profits, media organisations, commercial clients •  Background in fine arts, humanities, marketing. 10
  11. The Problem 11

  12. The problem 12

  13. The problem We learn how to build Drupal components. 13

  14. The problem We learn how to build Drupal components. We

    learn how to arrange, organise and design websites, 14
  15. The problem We learn how to build Drupal components. We

    learn how to arrange, organise and design websites, But bringing the two together is difficult. 15
  16. “Design” 16

  17. 3 approaches to website design 17

  18. A) Business-centered design 18

  19. B) User-centered design 19

  20. C) Content-centered design 20

  21. Can we bring them together? 21

  22. 22 Source: Drupal CMS Features: Create, http://drupal.org/features/create

  23. 23 Source: http://www.flickr.com/photos/thinkmedialabs/6176869823/

  24. The Elements of User Experience 24

  25. 25 Source: http://johnnyholland.org/2010/03/an-interview-with-jesse-james-garrett/

  26. 26 Source: The Elements of User Experience, Jesse James Garrett,

    http://www.jjg.net/elements/pdf/elements.pdf
  27. 27

  28. 28

  29. A distraction "As much as we may want to withdraw

    into a world of pure problem solving, we have to acknowledge that the most successful architectures are the ones you can actually convince someone to implement.” Jesse James Garrett 29
  30. 30

  31. The Pitfalls of User Experience 31

  32. Pitfalls •  Drupal’s markup doesn’t match the design 32

  33. Pitfalls •  Drupal’s markup doesn’t match the design •  Provided

    design mixes Drupal components 33
  34. Pitfalls •  Drupal’s markup doesn’t match the design •  Provided

    design mixes Drupal components •  Design is inconsistent 34
  35. Pitfalls •  Drupal’s markup doesn’t match the design •  Provided

    design mixes Drupal components •  Design is inconsistent •  Design UX favours interactions not met by contrib modules 35
  36. Pitfalls •  Drupal’s markup doesn’t match the design •  Provided

    design mixes Drupal components •  Design is inconsistent •  Design UX favours interactions not met by contrib modules •  Complex interactions based on third-party JS libraries with no Drupal support 36
  37. Result: Time/$$ to implement Lots of overrides Potentially unnecessary custom

    development Frequent revisions/rewrites = Unhappy client + Unhappy developer 37
  38. A solution: User experience spaces 38

  39. What are “UX Spaces” 39

  40. What are “UX Spaces” A UX Space is a bounded

    set of interactions between: •  An actor (e.g. a user) •  The content model 40
  41. What are “UX Spaces” A UX Space is a bounded

    set of interactions between: •  An actor (e.g. a user) •  The content model •  Defined by the intended audience, type of content, and required interactions. 41
  42. What are “UX Spaces” A UX Space is a bounded

    set of interactions between: •  An actor (e.g. a user) •  The content model •  Defined by the intended audience, type of content, and required interactions. •  Can correspond to website sections, pages or widgets, applications, or task spaces. 42
  43. 43

  44. 44

  45. 45

  46. What are “UX Spaces” A UX Space is a bounded

    set of interactions between: •  An actor (e.g. a user) •  The content model •  Defined by the intended audience, type of content, and required interactions. •  Approximate website sections, pages or widgets, applications, or task spaces. •  Easy to document 46
  47. 47 Example documentation Park UX space Park Parks represent a

    physical park or garden. Created by Parkfile. A User can search for Parks.
  48. 48 Example documentation

  49. 49 Example documentation

  50. 50 Here’s another one…

  51. 51 Example documentation

  52. 52 What about users?

  53. 53 Can you guess this one?

  54. 54 What about this?

  55. UX Spaces for Drupal 55

  56. UX Spaces for Drupal 1) Content: entities 2) Actors: users

    3) Behaviours: Tasks = filters, sorts, flags Interactions = sliders, conditional content (e.g panels contexts or views arguments) 56
  57. UX Spaces for Drupal UX spaces = panels, mini-panels, view

    modes, views, blocks … 57
  58. 1) Content (entities) 58

  59. 1) Defining entities •  Content types can be defined from

    your product, be that o  a saleable product, o  an information product, o  or a service product. •  Additional objects can be drawn from business structure. 59
  60. 1) Defining entities 60

  61. 2) Actors (users) Ways to define your audiences: • Behavioural segmentation

    • Demographic segmentation • Information needs • Service requirements • Geographic segmentation … 61
  62. 2) Segmenting your audience •  An audience is the "smallest

    group which can be communicated with using the same channel and message". •  Break your total audience down into smaller, targeted groupings using this rule of thumb. •  Opportunities for: o  Research, interviews, observations… 62
  63. 2) Segmenting your audience 63

  64. 3) Behaviours Behaviours can be broken down into •  Tasks

    o  things users need to do to achieve their current goal •  Interactions o  optional or offered call-to-action-type 64
  65. 3) Behaviours Examples: o Flagging content for bookmarking o Exposed sorts to

    target searches o Social sharing links o Commenting o … 65
  66. A worked example… 66

  67. 67

  68. About Parkfile Parkfile is a guide to parks and sporting

    grounds. Users can: • Find parks which match their interests or needs • Rate parks parks & gardens 68
  69. 1) Actors: Who is our audience? 69

  70. 1) Actors: Who is our audience? Sports/fitness o Best parks for

    sports, running, etc. 70
  71. 1) Actors: Who is our audience? Families o Picnic, BBQ and

    kids activities o Safety 71
  72. 1) Actors: Who is our audience? Tourists o Sightseeing 72

  73. 1) Actors: Who is our audience? 73 Sport & rec

    audience Interested in places to play sport or exercise Entity type: user Family audience Interested in family outings. Entity type: user Tourist audience Interested in sightseeing Entity type: user
  74. 2) Content: Parks • Title • Description • Taxonomies for: o Sporting activities o Sightseeing

    opportunities o Family activities • Location 74
  75. 2) Content: Parks 75 Park UX space

  76. Park UX space Park Parks represent a physical park or

    garden. Created by Parkfile. 2) Content: Parks 76
  77. Park UX space Park Parks represent a physical park or

    garden. Created by Parkfile. A User can search for Parks. 2) Content: Parks 77
  78. User stories "As a <role>, I want <goal/desire>, so that

    <benefit>" 78
  79. 2) Content: Parks 79 Park UX space Park Parks represent

    a physical park or garden. Created by Parkfile. A User can search for Parks.
  80. Recap: Who is our audience? Three main audiences: o Sports/fitness § Best

    parks for sports, running, etc. o Families § Picnic, BBQ and kids activities § Safety o Tourists § Sightseeing 80
  81. 2) Content: Parks 81 Sport & rec audience Interested in

    places to play sport or exercise Entity type: user Family audience Interested in family outings. Entity type: user Tourist audience Interested in sightseeing Entity type: user
  82. 2) Content: Parks 82 Sport & rec audience Interested in

    places to play sport or exercise. Entity type: user Family audience Interested in family outings. Entity type: user Tourist audience Interested in sightseeing. Entity type: user
  83. Find by Interest UX space Park Parks represent a physical

    park or garden. Created by Parkfile. Type: Content type A User can search for Parks by Interest. Interest Represents an activity to be undertaken at a Park. Created by Parkfile. Type: Taxonomy Term UX space: “Find by Interest” 83
  84. Find by Interest UX space Park Parks represent a physical

    park or garden. Created by Parkfile. Type: Content type A User can search for Parks by Interest. Interest Represents an activity to be undertaken at a Park. Created by Parkfile. Type: Taxonomy Term Content type Taxonomy term reference UX space: “Find by Interest” 84
  85. Content: Parks Google http://domain.com Web Page Title Section 4 Section

    3 Section 2 Find Parks by Interest 85
  86. Content: Parks 86 Google http://domain.com Web Page Title Section 4

    Section 3 Section 2 Find Parks by Interest Interest... Parks by interest ... Sports facilities Exercise Family outings
  87. Adding more User Spaces Other potential user spaces… •  Geographic

    search and geolocation •  User-contributed Parks •  Social touchpoints •  Favourites •  Ratings 87
  88. 88 Manage Parks View Park Find by Location Find by

    Interest Park Parks represent a physical park or garden. Created by Parkfile. Type: Content type A User can search for Parks by Interest. Interest Represents an activity to be undertaken at a Park. Created by Parkfile. Type: Taxonomy Term A User can search for Parks by Location. A User can rate Parks. A User can view details of a Park. A User can share a Park through social media. A User can add new Parks. A User can claim existing Parks. Location Represents a city, state and country. Created by Parkfile. Type: Taxonomy Term
  89. And then? Build it in Drupal 89

  90. 90 Review

  91. UX strategy for Drupal Sites Solve common pitfalls of User-centered

    design through a unified approach: o  Start with UCD activities, IA research and content modelling o  Merge these streams using UX spaces o  Create new wireframes/mockups/prototypes/builds o  Build! 91
  92. 92 Q&A

  93. Birds of a Feather? Drupal for Government Friday, 10.45, Lady

    Penrin Room Linked Data Today, 3.45, Lady Penrin Room 93
  94. 94 Thank you And now, why not rate my session?

  95. Get in touch! Christopher Skene o  chris.skene@previousnext.com.au o  previousnext.com.au/user/chris.skene o 

    xtfer.com o  @xtfer on drupal.org 95
  96. Image credits Park: http://www.flickr.com/photos/ugardener/3292581624/ Joggers: http://www.flickr.com/photos/tubb/6764468517/ Family: http://www.flickr.com/photos/imayellowfellow/4750053397/ Tourists: http://www.flickr.com/photos/fredthechicken/5402955206/

    96
  97. END