UX Spaces - Speaker Deck

Slide 1

Slide 1 text

Building Bridges, Connecting Communities UX Spaces A new approach to user experience and Drupal site building Chris Skene www.xtfer.com | previousnext.com.au

Slide 2

Slide 2 text

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

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

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

6 The User Experience Problem

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

“Successful user experience design is invisible.” 8

Slide 9

Slide 9 text

Slide 10

Slide 10 text

19/02/14 LETS TALK ABOUT KITCHENS… 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

15 Picture of a galley kitchen

Slide 16

Slide 16 text

When was the last time you heard “User Experience” mentioned, about a kitchen? 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Limitations to overcome •  The final technology destination (Technology Limitations) •  Structural limitations of our planning and communication tools (Documentation limitations) 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

19/02/14 technology limitations

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

27 the documentation problem

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

The majority of UX planning happens in documentation. 35

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Slide 38

Slide 38 text

"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 39

Slide 39 text

19/02/14 3 APPROACHES TO USER EXPERIENCE

Slide 40

Slide 40 text

a) Business-centered

Slide 41

Slide 41 text

b) User-centered

Slide 42

Slide 42 text

c) Content-centered

Slide 43

Slide 43 text

Can we bring them together?

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

19/02/14 UX SPACES A solution…

Slide 50

Slide 50 text

Content Users Behaviors What are UX Spaces?

Slide 51

Slide 51 text

Model Actors Interactions

Slide 52

Slide 52 text

Data Personas Tasks

Slide 53

Slide 53 text

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 54

Slide 54 text

What are UX Spaces? A UX Space is a bounded set of interactions between: •  An actor (e.g. a user) •  The content model

Slide 55

Slide 55 text

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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 60

Slide 60 text

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 61

Slide 61 text

Slide 62

Slide 62 text

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 63

Slide 63 text

A UX Space:

Slide 64

Slide 64 text

Tasks "As a , I want , so that "

Slide 65

Slide 65 text

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 66

Slide 66 text

Tasks Park UX space Park Parks represent a physical park or garden. Created by Parkﬁle. A User can search for Parks.

Slide 67

Slide 67 text

Linking UX Spaces

Slide 68

Slide 68 text

Here’s another one…

Slide 69

Slide 69 text

Linking UX Spaces

Slide 70

Slide 70 text

Can you guess this one?

Slide 71

Slide 71 text

What about this?

Slide 72

Slide 72 text

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

19/02/14 UX SPACES FOR DRUPAL

Slide 76

Slide 76 text

Content Users Behaviors Recap:

Slide 77

Slide 77 text

Content (entities) Content types Taxonomy Commerce entities Flags etc… UX Spaces for Drupal

Slide 78

Slide 78 text

Defining entities

Slide 79

Slide 79 text

Defining entities

Slide 80

Slide 80 text

Users Who are they? What do they want? What are they doing here? Define your Audience UX Spaces for Drupal

Slide 81

Slide 81 text

Users/actors Ways to define your audiences: • By their behaviour • Demographics • Information needs • Service requirements • Location etc…

Slide 82

Slide 82 text

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 83

Slide 83 text

Representing Users

Slide 84

Slide 84 text

Segmenting your audience

Slide 85

Slide 85 text

Behaviors Behaviors can include… •  Tasks •  things users need to do to achieve their current goal •  Interactions •  optional or offered call-to-action-type

Slide 86

Slide 86 text

Behaviours Tasks filters, sorts, flags Interactions sliders, conditional content (e.g. panels contexts or views arguments) UX Spaces for Drupal

Slide 87

Slide 87 text

Space types Panels Mini-panels Entity view modes Views Blocks & block types Content panes UX Spaces for Drupal

Slide 88

Slide 88 text

a worked example

Slide 89

Slide 89 text

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 90

Slide 90 text

Actors: Who is our audience?

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Actors: Who is our audience? Families • Picnic, BBQ and kids activities • Safety

Slide 93

Slide 93 text

Actors: Who is our audience? Tourists • Sightseeing • Public transport • Hotels

Slide 94

Slide 94 text

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 95

Slide 95 text

Entities: Parks •  Title •  Description •  Taxonomy for “Interest” •  Location •  Ratings for •  beauty •  safety & •  facilities

Slide 96

Slide 96 text

Tasks 96

Slide 97

Slide 97 text

Content: Parks Park UX space

Slide 98

Slide 98 text

Park UX space Park Parks represent a physical park or garden. Created by Parkﬁle. Content: Parks

Slide 99

Slide 99 text

Content: Parks Park UX space Park Parks represent a physical park or garden. Created by Parkﬁle. A User can search for Parks.

Slide 100

Slide 100 text

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 101

Slide 101 text

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 102

Slide 102 text

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 103

Slide 103 text

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 104

Slide 104 text

Slide 105

Slide 105 text

Google http://domain.com Web Page Title Section 4 Section 3 Section 2 Find Parks by Interest

Slide 106

Slide 106 text

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 107

Slide 107 text

Adding more User Spaces Other potential user spaces… •  Geographic search and geo-location •  User-contributed Parks •  Social touch-point’s •  Favourites •  Ratings

Slide 108

Slide 108 text

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 109

Slide 109 text

19/02/14 starting the build

Slide 110

Slide 110 text

Slide 111

Slide 111 text

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 112

Slide 112 text

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 113

Slide 113 text

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 114

Slide 114 text

19/02/14 REVIEW

Slide 115

Slide 115 text

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 116

Slide 116 text

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 117

Slide 117 text

Q&A Get in touch… Christopher Skene •  [email protected] •  previousnext.com.au •  xtfer.com •  @xtfer on drupal.org & twitter

Slide 118

Slide 118 text

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 119

Slide 119 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/