User-centered design for Drupal sites

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