UX Spaces

Babdf467dac04e2ca41be014f2e95169?s=47 Chris Skene
February 16, 2014

UX Spaces

What are the root causes of UX failures and how do we mitigate this? This presentation looks at the concept of UX Spaces as a way to improve UX delivery.

Babdf467dac04e2ca41be014f2e95169?s=128

Chris Skene

February 16, 2014
Tweet

Transcript

  1. Building Bridges, Connecting Communities UX Spaces A new approach to

    user experience and Drupal site building Chris Skene www.xtfer.com | previousnext.com.au
  2. 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. Park UX space Park Parks represent a physical park or

    garden. Created by Parkfile. A User can search for Parks. User spaces
  4. None
  5. 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 •  Familiar with very version since 3.0 •  Working exclusively with Drupal since 2007 •  I work for in Canberra, Australia
  6. 6 The User Experience Problem

  7. 7 Jeffrey Veen, http://www.veen.com/jeff/ (image by Francis Storr)

  8. “Successful user experience design is invisible.” 8

  9. 9

  10. 19/02/14 LETS TALK ABOUT KITCHENS… 10

  11. 11 Picture of a kitchen http://www.flickr.com/photos/beeskneesdaily/9556422010

  12. 12 http://www.flickr.com/photos/icklemissus/674552915

  13. 13 http://www.flickr.com/photos/96363003@N08/9315562324

  14. 14

  15. 15 Picture of a galley kitchen

  16. When was the last time you heard “User Experience” mentioned,

    about a kitchen? 16
  17. Conditions for baking (in) UX •  to sufficiently grasp the

    behaviours and needs of our users •  to understand the structure of the information we are managing •  to be able to design reusable UX components 17
  18. Limitations to overcome •  The final technology destination (Technology Limitations)

    •  Structural limitations of our planning and communication tools (Documentation limitations) 18
  19. UX and Design •  Beautiful design is NOT a prerequisite

    for good user experience •  Good user experience IS required for great design. •  A pretty design can obscure bad UX, and even make UX worse 19
  20. 19/02/14 technology limitations

  21. Examples of Technology Limitations •  A smartphone doesn’t support roll-over

    interactions 21
  22. Examples of Technology Limitations •  A smartphone doesn’t support roll-over

    interactions •  A laptop has a maximum screen resolution of 1280px 22
  23. Examples of Technology Limitations •  A smartphone doesn’t support roll-over

    interactions •  A laptop has a maximum screen resolution of 1280px •  A CMS always represents a certain type of page task as a tab 23
  24. Examples of Technology Limitations •  A smartphone doesn’t support roll-over

    interactions •  A laptop has a maximum screen resolution of 1280px •  A CMS always represents a certain type of page task as a tab •  A kiosk doesn’t work like a website 24
  25. Examples of Technology Limitations •  A smartphone doesn’t support roll-over

    interactions •  A laptop has a maximum screen resolution of 1280px •  A CMS always represents a certain type of page task as a tab •  A kiosk doesn’t work like a website •  A TV doesn’t have a keyboard 25
  26. Examples of Technology Limitations •  A smartphone doesn’t support roll-over

    interactions •  A laptop has a maximum screen resolution of 1280px •  A CMS always represents a certain type of page task as a tab •  A kiosk doesn’t work like a website •  A TV doesn’t have a keyboard •  A software framework doesn’t always make choices which match our needs 26
  27. 27 the documentation problem

  28. The Documentation Problem •  Site maps dictate top-down menu hierarchies

    28
  29. The Documentation Problem •  Site maps dictate top-down menu hierarchies

    •  Wireframes assume dimensions which may be non- optimal 29
  30. The Documentation Problem •  Site maps dictate top-down menu hierarchies

    •  Wireframes assume dimensions which may be non- optimal •  Content maps presume that content can be independent of design 30
  31. The Documentation Problem •  Site maps dictate top-down menu hierarchies

    •  Wireframes assume dimensions which may be non- optimal •  Content maps presume that content can be independent of design •  Design mockups can contain un-implementable features 31
  32. The Documentation Problem •  Site maps dictate top-down menu hierarchies

    •  Wireframes assume dimensions which may be non- optimal •  Content maps presume that content can be independent of design •  Design mockups can contain un-implementable features •  Lack of specificity in “design” can lead to assumptions in deliver. 32
  33. 33

  34. 34

  35. The majority of UX planning happens in documentation. 35

  36. Requirements for my kitchen • It has to fit in an

    odd part of my house • It’s a small space I want to look bigger • I need plenty of cupboards • I like retro patterns • My wife likes red 36
  37. 37

  38. "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
  39. 19/02/14 3 APPROACHES TO USER EXPERIENCE

  40. a) Business-centered

  41. b) User-centered

  42. c) Content-centered

  43. Can we bring them together?

  44. Source: http://johnnyholland.org/2010/03/an-interview-with-jesse-james-garrett/ The Elements of User Experience

  45. Source: The Elements of User Experience, Jesse James Garrett, http://www.jjg.net/elements/pdf/elements.pdf

  46. None
  47. None
  48. None
  49. 19/02/14 UX SPACES A solution…

  50. Content Users Behaviors What are UX Spaces?

  51. Model Actors Interactions

  52. Data Personas Tasks

  53. What are UX Spaces? Park UX space Park Parks represent

    a physical park or garden. Created by Parkfile. A User can search for Parks.
  54. What are UX Spaces? A UX Space is a bounded

    set of interactions between: •  An actor (e.g. a user) •  The content model
  55. 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.
  56. 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. •  They (usually) correspond to website sections, pages or widgets, applications, or task spaces.
  57. None
  58. None
  59. 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
  60. 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
  61. 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. •  They (usually) correspond to website sections, pages or widgets, applications, or task spaces. •  Easy to document
  62. A UX Space: Park UX space Park Parks represent a

    physical park or garden. Created by Parkfile. A User can search for Parks.
  63. A UX Space:

  64. Tasks "As a <role>, I want <goal/desire>, so that <benefit>"

  65. Tasks As a Family, I want to find safe parks

    for picnics, so that I can enjoy my lunch knowing my kids are safe.
  66. Tasks Park UX space Park Parks represent a physical park

    or garden. Created by Parkfile. A User can search for Parks.
  67. Linking UX Spaces

  68. Here’s another one…

  69. Linking UX Spaces

  70. Can you guess this one?

  71. What about this?

  72. 72

  73. 73 Show a simple search on several Different devices http://www.flickr.com/photos/mollystevens/1591816852

  74. 74 http://www.flickr.com/ photos/technodad/ 9471778795

  75. 19/02/14 UX SPACES FOR DRUPAL

  76. Content Users Behaviors Recap:

  77. Content (entities) Content types Taxonomy Commerce entities Flags etc… UX

    Spaces for Drupal
  78. Defining entities

  79. Defining entities

  80. Users Who are they? What do they want? What are

    they doing here? Define your Audience UX Spaces for Drupal
  81. Users/actors Ways to define your audiences: • By their behaviour • Demographics

    • Information needs • Service requirements • Location etc…
  82. 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.
  83. Representing Users

  84. Segmenting your audience

  85. Behaviors Behaviors can include… •  Tasks •  things users need

    to do to achieve their current goal •  Interactions •  optional or offered call-to-action-type
  86. Behaviours Tasks filters, sorts, flags Interactions sliders, conditional content (e.g.

    panels contexts or views arguments) UX Spaces for Drupal
  87. Space types Panels Mini-panels Entity view modes Views Blocks &

    block types Content panes UX Spaces for Drupal
  88. a worked example

  89. 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
  90. Actors: Who is our audience?

  91. Actors: Who is our audience? Sports/fitness Best parks for sports,

    running, exercise, etc.
  92. Actors: Who is our audience? Families • Picnic, BBQ and kids

    activities • Safety
  93. Actors: Who is our audience? Tourists • Sightseeing • Public transport • Hotels

  94. 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?
  95. Entities: Parks •  Title •  Description •  Taxonomy for “Interest”

    •  Location •  Ratings for •  beauty •  safety & •  facilities
  96. Tasks 96

  97. Content: Parks Park UX space

  98. Park UX space Park Parks represent a physical park or

    garden. Created by Parkfile. Content: Parks
  99. Content: Parks Park UX space Park Parks represent a physical

    park or garden. Created by Parkfile. A User can search for Parks.
  100. 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
  101. 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
  102. 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
  103. 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”
  104. 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”
  105. Google http://domain.com Web Page Title Section 4 Section 3 Section

    2 Find Parks by Interest
  106. 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
  107. Adding more User Spaces Other potential user spaces… •  Geographic

    search and geo-location •  User-contributed Parks •  Social touch-point’s •  Favourites •  Ratings
  108. 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
  109. 19/02/14 starting the build

  110. 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
  111. 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?
  112. 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.
  113. 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
  114. 19/02/14 REVIEW

  115. 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
  116. 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
  117. Q&A Get in touch… Christopher Skene •  chris@previousnext.com.au •  previousnext.com.au

    •  xtfer.com •  @xtfer on drupal.org & twitter
  118. 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.
  119. 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/

  120. SPARE SLIDES Don’t show this bit on a big screen…

  121. 121