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.

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
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
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
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
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
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
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.
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?
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…