UX Spaces for Drupal (DrupalCon Portland)

Slide 1

Slide 1 text

Building Bridges, Connecting Communities A NEW APPROACH TO SITE BUILDING AND FRONT-END DESIGN FOR DRUPAL CHRISTOPHER SKENE PreviousNext.com.au UX SPACES

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

3 27/05/13 Building Bridges, Connecting Communities Park UX space Park Parks represent a physical park or garden. Created by Parkﬁle. A User can search for Parks. User spaces

Slide 4

Slide 4 text

4 27/05/13 Building Bridges, Connecting Communities

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

6 27/05/13 Building Bridges, Connecting Communities The Drupal Problem If you though User Experience was complicated, here’s…

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 27/05/13 Building Bridges, Connecting Communities The Drupal Problem Drupal will push you around.

Slide 9

Slide 9 text

9 27/05/13 Building Bridges, Connecting Communities The bigger UX picture

Slide 10

Slide 10 text

“User Experience”

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

12 27/05/13 Building Bridges, Connecting Communities 3 approaches to User Experience

Slide 13

Slide 13 text

13 27/05/13 Building Bridges, Connecting Communities a) Business-centered

Slide 14

Slide 14 text

14 27/05/13 Building Bridges, Connecting Communities b) User-centered

Slide 15

Slide 15 text

15 27/05/13 Building Bridges, Connecting Communities c) Content-centered

Slide 16

Slide 16 text

16 27/05/13 Building Bridges, Connecting Communities Can we bring them together?

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19 27/05/13 Building Bridges, Connecting Communities

Slide 20

Slide 20 text

20 27/05/13 Building Bridges, Connecting Communities

Slide 21

Slide 21 text

21 27/05/13 Building Bridges, Connecting Communities The Pitfalls of User Experience

Slide 22

Slide 22 text

22 27/05/13 Building Bridges, Connecting Communities Pitfalls •  Drupal’s mark-up doesn’t match the design

Slide 23

Slide 23 text

23 27/05/13 Building Bridges, Connecting Communities Pitfalls •  Drupal’s mark-up doesn’t match the design •  Provided design mixes Drupal components

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

26 27/05/13 Building Bridges, Connecting Communities Result: Time/$$ to implement Lots of overrides Potentially unnecessary custom development Frequent revisions/rewrites = General unhappiness

Slide 27

Slide 27 text

27 27/05/13 Building Bridges, Connecting Communities

Slide 28

Slide 28 text

28 27/05/13 Building Bridges, Connecting Communities UX Spaces A solution…

Slide 29

Slide 29 text

29 27/05/13 Building Bridges, Connecting Communities Content Users Behaviors What are UX Spaces?

Slide 30

Slide 30 text

30 27/05/13 Building Bridges, Connecting Communities Model Actors Interactions

Slide 31

Slide 31 text

31 27/05/13 Building Bridges, Connecting Communities Data Personas Tasks

Slide 32

Slide 32 text

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 Parkﬁle. A User can search for Parks.

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

36 27/05/13 Building Bridges, Connecting Communities

Slide 37

Slide 37 text

37 27/05/13 Building Bridges, Connecting Communities

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

41 27/05/13 Building Bridges, Connecting Communities A UX Space: Park UX space Park Parks represent a physical park or garden. Created by Parkﬁle. A User can search for Parks.

Slide 42

Slide 42 text

42 27/05/13 Building Bridges, Connecting Communities A UX Space:

Slide 43

Slide 43 text

43 27/05/13 Building Bridges, Connecting Communities Tasks "As a , I want , so that "

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

45 27/05/13 Building Bridges, Connecting Communities Tasks Park UX space Park Parks represent a physical park or garden. Created by Parkﬁle. A User can search for Parks.

Slide 46

Slide 46 text

46 27/05/13 Building Bridges, Connecting Communities Linking UX Spaces

Slide 47

Slide 47 text

47 27/05/13 Building Bridges, Connecting Communities Here’s another one…

Slide 48

Slide 48 text

48 27/05/13 Building Bridges, Connecting Communities Linking UX Spaces

Slide 49

Slide 49 text

49 27/05/13 Building Bridges, Connecting Communities Can you guess this one?

Slide 50

Slide 50 text

50 27/05/13 Building Bridges, Connecting Communities What about this?

Slide 51

Slide 51 text

51 27/05/13 Building Bridges, Connecting Communities UX Spaces for Drupal Getting practical:

Slide 52

Slide 52 text

52 27/05/13 Building Bridges, Connecting Communities Content Users Behaviors Recap:

Slide 53

Slide 53 text

53 27/05/13 Building Bridges, Connecting Communities Content Content types Taxonomy Commerce entities Flags etc… UX Spaces for Drupal

Slide 54

Slide 54 text

54 27/05/13 Building Bridges, Connecting Communities Content

Slide 55

Slide 55 text

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.

Slide 56

Slide 56 text

56 27/05/13 Building Bridges, Connecting Communities Defining entities

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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…

Slide 59

Slide 59 text

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.

Slide 60

Slide 60 text

60 27/05/13 Building Bridges, Connecting Communities Representing Users

Slide 61

Slide 61 text

61 27/05/13 Building Bridges, Connecting Communities Segmenting your audience

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

64 27/05/13 Building Bridges, Connecting Communities Space types Panels Mini-panels Entity view modes Views Blocks Content panes UX Spaces for Drupal

Slide 65

Slide 65 text

65 27/05/13 Building Bridges, Connecting Communities a worked example

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

67 27/05/13 Building Bridges, Connecting Communities Actors: Who is our audience?

Slide 68

Slide 68 text

68 27/05/13 Building Bridges, Connecting Communities Sports/fitness Best parks for sports, running, exercise, etc. Actors: Who is our audience?

Slide 69

Slide 69 text

69 27/05/13 Building Bridges, Connecting Communities Families •  Picnic, BBQ and kids activities •  Safety Actors: Who is our audience?

Slide 70

Slide 70 text

70 27/05/13 Building Bridges, Connecting Communities Tourists •  Sightseeing •  Public transport •  Hotels Actors: Who is our audience?

Slide 71

Slide 71 text

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?

Slide 72

Slide 72 text

72 27/05/13 Building Bridges, Connecting Communities Content: Parks •  Title •  Description •  Taxonomy for “Interest” •  Location •  Ratings for –  beauty –  safety & –  facilities

Slide 73

Slide 73 text

73 27/05/13 Building Bridges, Connecting Communities Content: Parks Park UX space

Slide 74

Slide 74 text

74 27/05/13 Building Bridges, Connecting Communities Park UX space Park Parks represent a physical park or garden. Created by Parkﬁle. Content: Parks

Slide 75

Slide 75 text

75 27/05/13 Building Bridges, Connecting Communities Content: Parks Park UX space Park Parks represent a physical park or garden. Created by Parkﬁle. A User can search for Parks.

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

79 27/05/13 Building Bridges, Connecting Communities Find by Interest UX space Park Parks represent a physical park or garden. Created by Parkﬁle. Type: Content type A User can search for Parks by Interest. Interest Represents an activity to be undertaken at a Park. Created by Parkﬁle. Type: Taxonomy Term UX space: “Find by Interest”

Slide 80

Slide 80 text

80 27/05/13 Building Bridges, Connecting Communities Find by Interest UX space Park Parks represent a physical park or garden. Created by Parkﬁle. Type: Content type A User can search for Parks by Interest. Interest Represents an activity to be undertaken at a Park. Created by Parkﬁle. Type: Taxonomy Term Content type Taxonomy term reference UX space: “Find by Interest”

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

85 27/05/13 Building Bridges, Connecting Communities Starting the Build And then…

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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?

Slide 88

Slide 88 text

88 27/05/13 Building Bridges, Connecting Communities View Park Park Parks represent a physical park or garden. Created by Parkﬁle. 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.

Slide 89

Slide 89 text

89 27/05/13 Building Bridges, Connecting Communities Manage Parks Park Parks represent a physical park or garden. Created by Parkﬁle. 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

Slide 90

Slide 90 text

90 27/05/13 Building Bridges, Connecting Communities Review UX strategy for Drupal sites

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

Building Bridges, Connecting Communities Evaluate this session at: portland2013.drupal.org/schedule. Thank you! What did you think?

Slide 95

Slide 95 text

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.

Slide 96

Slide 96 text

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