UX Spaces for Drupal (DrupalCon Portland)

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.

Babdf467dac04e2ca41be014f2e95169?s=128

Chris Skene

May 27, 2013
Tweet

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