UX Spaces for Drupal (DrupalCon Portland)

This session introduces an approach to planning Drupal site build's called "User Experience Spaces". This methodology is based on techniques from user centered design, marketing and consumer research, and content-first development principles. This approach has been evolved over seven years of Drupal projects, and can be followed by anyone with a basic knowledge of Drupal.

Transcript

1. Building Bridges, Connecting Communities A NEW APPROACH TO SITE BUILDING AND FRONT-END DESIGN FOR DRUPAL CHRISTOPHER SKENE PreviousNext.com.au UX SPACES
2. 2 27/05/13 Building Bridges, Connecting Communities In today’s session: •  User Experience: What is it and why can nobody get it right? •  Why do traditional user-centered design and UX processes break when applied to Drupal? •  How to resolve this problem by combining UCD, content modelling, and interaction design. •  A worked example.
3. 3 27/05/13 Building Bridges, Connecting Communities Park UX space Park Parks represent a physical park or garden. Created by Parkfile. A User can search for Parks. User spaces
4. 4 27/05/13 Building Bridges, Connecting Communities
5. 5 27/05/13 Building Bridges, Connecting Communities About me •  Professional Drupal project consultant •  Background in fine arts, humanities, marketing •  Experience with public sector, not-for-profits, media organisations, commercial clients •  First used Drupal 4.5 •  Working exclusively with Drupal since 2007 •  I work for in Canberra, Australia
6. 6 27/05/13 Building Bridges, Connecting Communities The Drupal Problem If you though User Experience was complicated, here’s…
7. 7 27/05/13 Building Bridges, Connecting Communities The Drupal Problem •  Drupal is opinionated •  Drupal wants you to build sites in certain ways •  Drupal makes some things easy, but some things very hard •  Drupal is too easily swayed by inexperienced or experimenting developers •  Drupal is hard to design for
8. 8 27/05/13 Building Bridges, Connecting Communities The Drupal Problem Drupal will push you around.
9. 9 27/05/13 Building Bridges, Connecting Communities The bigger UX picture
10. “User Experience”
11. 11 27/05/13 Building Bridges, Connecting Communities "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
12. 12 27/05/13 Building Bridges, Connecting Communities 3 approaches to User Experience
13. 13 27/05/13 Building Bridges, Connecting Communities a) Business-centered
14. 14 27/05/13 Building Bridges, Connecting Communities b) User-centered
15. 15 27/05/13 Building Bridges, Connecting Communities c) Content-centered
16. 16 27/05/13 Building Bridges, Connecting Communities Can we bring them together?
17. 17 27/05/13 Building Bridges, Connecting Communities Source: http://johnnyholland.org/2010/03/an-interview-with-jesse-james-garrett/ The Elements of User Experience
18. 18 27/05/13 Building Bridges, Connecting Communities Source: The Elements of User Experience, Jesse James Garrett, http://www.jjg.net/elements/pdf/elements.pdf
19. 19 27/05/13 Building Bridges, Connecting Communities
20. 20 27/05/13 Building Bridges, Connecting Communities
21. 21 27/05/13 Building Bridges, Connecting Communities The Pitfalls of User Experience
22. 22 27/05/13 Building Bridges, Connecting Communities Pitfalls •  Drupal’s mark-up doesn’t match the design
23. 23 27/05/13 Building Bridges, Connecting Communities Pitfalls •  Drupal’s mark-up doesn’t match the design •  Provided design mixes Drupal components
24. 24 27/05/13 Building Bridges, Connecting Communities Pitfalls •  Drupal’s mark-up doesn’t match the design •  Provided design mixes Drupal components •  Original design is inconsistent
25. 25 27/05/13 Building Bridges, Connecting Communities Pitfalls •  Drupal’s mark-up doesn’t match the design •  Provided design mixes Drupal components •  Original design is inconsistent •  Original design UX favours interactions not met by contrib. modules •  Complex interactions based on third-party JS libraries with no Drupal support
26. 26 27/05/13 Building Bridges, Connecting Communities Result: Time/$$ to implement Lots of overrides Potentially unnecessary custom development Frequent revisions/rewrites = General unhappiness
27. 27 27/05/13 Building Bridges, Connecting Communities
28. 28 27/05/13 Building Bridges, Connecting Communities UX Spaces A solution…
29. 29 27/05/13 Building Bridges, Connecting Communities Content Users Behaviors What are UX Spaces?
30. 30 27/05/13 Building Bridges, Connecting Communities Model Actors Interactions
31. 31 27/05/13 Building Bridges, Connecting Communities Data Personas Tasks
32. 32 27/05/13 Building Bridges, Connecting Communities What are UX Spaces? Park UX space Park Parks represent a physical park or garden. Created by Parkfile. A User can search for Parks.
33. 33 27/05/13 Building Bridges, Connecting Communities Theoretically… A UX Space is a bounded set of interactions between: •  An actor (e.g. a user) •  The content model
34. 34 27/05/13 Building Bridges, Connecting Communities Theoretically… 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.
35. 35 27/05/13 Building Bridges, Connecting Communities Theoretically… 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. •  They (usually) correspond to website sections, pages or widgets, applications, or task spaces.
36. 36 27/05/13 Building Bridges, Connecting Communities
37. 37 27/05/13 Building Bridges, Connecting Communities
38. 38 27/05/13 Building Bridges, Connecting Communities Google http://domain.com Web Page Title UX Space 4 UX Space 3 UX Space 2 UX Space 1 UX Space 5 UX Space 6 UX Space 7
39. 39 27/05/13 Building Bridges, Connecting Communities Google http://domain.com Web Page Title Link to Panel Link to Panel Link to Panel Panel Display Suite Block/Content Pane EV Block Panel
40. 40 27/05/13 Building Bridges, Connecting Communities Theoretically… 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. •  They (usually) correspond to website sections, pages or widgets, applications, or task spaces. •  Easy to document
41. 41 27/05/13 Building Bridges, Connecting Communities A UX Space: Park UX space Park Parks represent a physical park or garden. Created by Parkfile. A User can search for Parks.
42. 42 27/05/13 Building Bridges, Connecting Communities A UX Space:
43. 43 27/05/13 Building Bridges, Connecting Communities Tasks "As a <role>, I want <goal/desire>, so that <benefit>"
44. 44 27/05/13 Building Bridges, Connecting Communities Tasks As a Family, I want to find safe parks for picnics, so that I can enjoy my lunch knowing my kids are safe.
45. 45 27/05/13 Building Bridges, Connecting Communities Tasks Park UX space Park Parks represent a physical park or garden. Created by Parkfile. A User can search for Parks.
46. 46 27/05/13 Building Bridges, Connecting Communities Linking UX Spaces
47. 47 27/05/13 Building Bridges, Connecting Communities Here’s another one…
48. 48 27/05/13 Building Bridges, Connecting Communities Linking UX Spaces
49. 49 27/05/13 Building Bridges, Connecting Communities Can you guess this one?
50. 50 27/05/13 Building Bridges, Connecting Communities What about this?
51. 51 27/05/13 Building Bridges, Connecting Communities UX Spaces for Drupal Getting practical:
52. 52 27/05/13 Building Bridges, Connecting Communities Content Users Behaviors Recap:
53. 53 27/05/13 Building Bridges, Connecting Communities Content Content types Taxonomy Commerce entities Flags etc… UX Spaces for Drupal
54. 54 27/05/13 Building Bridges, Connecting Communities Content
55. 55 27/05/13 Building Bridges, Connecting Communities Defining entities •  Content types can be defined from your product, be that –  a saleable product, –  an information product, –  or a service product. •  Additional objects can be drawn from business structure.
56. 56 27/05/13 Building Bridges, Connecting Communities Defining entities
57. 57 27/05/13 Building Bridges, Connecting Communities Users Who are they? What do they want? What are they doing here? Define your Audience UX Spaces for Drupal
58. 58 27/05/13 Building Bridges, Connecting Communities Users/actors Ways to define your audiences: •  By their behaviour •  Demographics •  Information needs •  Service requirements •  Location etc…
59. 59 27/05/13 Building Bridges, Connecting Communities Segmenting your audience Break your total audience down into smaller, targeted groupings using this rule of thumb… An audience is… the smallest group which can be communicated with using the same channel and message.
60. 60 27/05/13 Building Bridges, Connecting Communities Representing Users
61. 61 27/05/13 Building Bridges, Connecting Communities Segmenting your audience
62. 62 27/05/13 Building Bridges, Connecting Communities Behaviors Behaviors can be broken down into •  Tasks –  things users need to do to achieve their current goal •  Interactions –  optional or offered call-to-action-type
63. 63 27/05/13 Building Bridges, Connecting Communities Behaviours Tasks filters, sorts, flags Interactions sliders, conditional content (e.g. panels contexts or views arguments) UX Spaces for Drupal
64. 64 27/05/13 Building Bridges, Connecting Communities Space types Panels Mini-panels Entity view modes Views Blocks Content panes UX Spaces for Drupal
65. 65 27/05/13 Building Bridges, Connecting Communities a worked example
66. 66 27/05/13 Building Bridges, Connecting Communities 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
67. 67 27/05/13 Building Bridges, Connecting Communities Actors: Who is our audience?
68. 68 27/05/13 Building Bridges, Connecting Communities Sports/fitness Best parks for sports, running, exercise, etc. Actors: Who is our audience?
69. 69 27/05/13 Building Bridges, Connecting Communities Families •  Picnic, BBQ and kids activities •  Safety Actors: Who is our audience?
70. 70 27/05/13 Building Bridges, Connecting Communities Tourists •  Sightseeing •  Public transport •  Hotels Actors: Who is our audience?
71. 71 27/05/13 Building Bridges, Connecting Communities 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 Actors: Who is our audience?
72. 72 27/05/13 Building Bridges, Connecting Communities Content: Parks •  Title •  Description •  Taxonomy for “Interest” •  Location •  Ratings for –  beauty –  safety & –  facilities
73. 73 27/05/13 Building Bridges, Connecting Communities Content: Parks Park UX space
74. 74 27/05/13 Building Bridges, Connecting Communities Park UX space Park Parks represent a physical park or garden. Created by Parkfile. Content: Parks
75. 75 27/05/13 Building Bridges, Connecting Communities Content: Parks Park UX space Park Parks represent a physical park or garden. Created by Parkfile. A User can search for Parks.
76. 76 27/05/13 Building Bridges, Connecting Communities Recap: Who is our audience? Three main audiences: •  Sports/fitness •  Best parks for sports, running, etc. •  Families •  Picnic, BBQ and kids activities •  Safety •  Tourists •  Sightseeing
77. 77 27/05/13 Building Bridges, Connecting Communities Content: Parks 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
78. 78 27/05/13 Building Bridges, Connecting Communities Content: Parks 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
79. 79 27/05/13 Building Bridges, Connecting Communities 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”
80. 80 27/05/13 Building Bridges, Connecting Communities 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”
81. 81 27/05/13 Building Bridges, Connecting Communities Google http://domain.com Web Page Title Section 4 Section 3 Section 2 Find Parks by Interest
82. 82 27/05/13 Building Bridges, Connecting Communities 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
83. 83 27/05/13 Building Bridges, Connecting Communities Adding more User Spaces Other potential user spaces… •  Geographic search and geo-location •  User-contributed Parks •  Social touch-point’s •  Favourites •  Ratings
84. 84 27/05/13 Building Bridges, Connecting Communities 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 find 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
85. 85 27/05/13 Building Bridges, Connecting Communities Starting the Build And then…
86. 86 27/05/13 Building Bridges, Connecting Communities 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 find 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
87. 87 27/05/13 Building Bridges, Connecting Communities Find by Location Park Parks represent a physical park or garden. Created by Parkfile. Type: Content type A User can find Parks by Location. Location Represents a city, state and country. Created by Parkfile. Type: Taxonomy Term Starting the build •  Panels •  Views •  Display Suite –  Compact view mode? •  Mapping –  Geofield? –  Openlayers?
88. 88 27/05/13 Building Bridges, Connecting Communities View Park Park Parks represent a physical park or garden. Created by Parkfile. Type: Content type A User can rate Parks. A User can view details of a Park. A User can share a Park through social media. Starting the build •  Display suite –  Full view mode •  Image styles •  Lightbox2 •  Rating –  Fivestar/Voting API •  Sharing –  AddThis etc.
89. 89 27/05/13 Building Bridges, Connecting Communities Manage Parks Park Parks represent a physical park or garden. Created by Parkfile. Type: Content type A User can add new Parks. A User can claim existing Parks. Starting the build •  Panels •  Views •  Permissions –  Add new –  Edit own •  Node Ownership
90. 90 27/05/13 Building Bridges, Connecting Communities Review UX strategy for Drupal sites
91. 91 27/05/13 Building Bridges, Connecting Communities Review •  Solve common pitfalls of User-centered design through a unified approach: –  Start with UCD activities, IA research and content modelling, etc… –  Merge these streams using UX Spaces –  Create your UX spaces in Drupal
92. 92 27/05/13 Building Bridges, Connecting Communities Extending UX spaces •  Constraints –  Defining limits on spaces •  Moods –  Combine UX spaces with Mood Boards •  Wireframes –  UX spaces can morph into wireframes easily •  Content modeling/Pseudo-UML –  Pair with content models for greater depth •  Testing –  Include test descriptions in your UX Spaces
93. 93 27/05/13 Building Bridges, Connecting Communities Q&A Get in touch… Christopher Skene •  chris.skene@previousnext.com.au •  previousnext.com.au •  xtfer.com •  @xtfer on drupal.org & twitter
94. Building Bridges, Connecting Communities Evaluate this session at: portland2013.drupal.org/schedule. Thank you! What did you think?
95. 95 27/05/13 Building Bridges, Connecting Communities Icon credits The icons in this presentation are from: Plastique Icons by Scott Lewis http://iconify.it/ used under the CC BY-NC 3.0 license.
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