User-centered design for Drupal sites

Solving user experience tangles and mistakes using user experience spaces.

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