User Experience: It's for Everyone

by Ross Wintle

Slide 1

Slide 1 text

User Experience: It’s for everyone… …and it’s some other things too!

Slide 2

Slide 2 text

Ross Wintle Software Developer Technology Consultant @magicroundabout Hi everyone - hope you had a nice lunch etc… I’m Ross, I’m a freelance software developer, technology consultant and, as you’ll ﬁnd out, not a UX Designer. I work for myself under the name Oikos Digital and I work as part of a virtual distributed agency called Hands Up. In all cases we aim to help organisations use technology to do good.

Slide 3

Slide 3 text

Please Be Nice! Now, I need to ask you, if I may, to please be nice. For a variety of reasons.

Slide 4

Slide 4 text

It’s my 1st conference talk! Firstly it’s my ﬁrst conference talk. And you know what They only went and put me on the biggest stage, didn’t they.

Slide 5

Slide 5 text

It’s the graveyard shift Second, not only did they give me the biggest stage, but they gave me possibly the worst slot: just after lunch on the last day. The post-lunch period is often called the graveyard shift because all the blood has rushed from your brain to your stomach to digest your delicious lunch, and you’re all now, eﬀectively, conference zombies. But fear not…this should be fun and exciting and if not I have jelly babies - shout if you need them for an energy boost!

Slide 6

Slide 6 text

I have baby brain Thirdly, I have a two month old baby - she has the most awesome geek name. We called here Ada! But that means I’ve not had as much time and focus as I’d like. So bear with me.

Slide 7

Slide 7 text

UX Designer Finally, for some crazy reason, I submitted a talk that about a subject on which I am NOT a subject matter expert. But you know what… It doesn’t matter. Because the whole point is that you don’t have to be.

Slide 8

Slide 8 text

My UX Journey You’re probably all thinking I’m crazy at this point so let me re-assure you by telling you a bit about my journey. I’ve always been interested in Psychology and human computer interaction. Even since my University days when my favourite courses were on these topics. That interest has carried through my 12 years working in software engineering and IT. And during the 5 years I’ve been a freelance web developer UX has become more and more important. I’m now having lots of conversations with clients large and small about the user experiences that we are creating together.

Slide 9

Slide 9 text

UX is 90% how you think 10% what you design  - Joel Marsh: UX for Beginners [MAKE A PIE CHART?] Joel Marsh in his brilliant new book “UX for Beginners” which has helped me a lot in preparing this talk and making me feel like I DO know what I’m talking about, says this: UX is 90% how you think and 10% what you design. I’m not a designer, and I don’t have all the answers… …but we can ALL think, and we can all change the way that we think.

Slide 10

Slide 10 text

UX is 90% asking questions and 10% having the answers  - Me! I’m going to mangle that to: UX is 90% asking questions and 10% having the answers. I didn’t create this talk to give you lots of answers. I created it to encourage you to and to give you the conﬁdence to and to equip you to ask lots of important questions.

Slide 11

Slide 11 text

Q & A In fact, at the end, if there’s time, there’s supposed to be a Q&A. But I’m kinda hoping they’ve spelt it…

Slide 12

Slide 12 text

Q & Eh? …like this.

Slide 13

Slide 13 text

User Experience:   It’s for everyone it’s important and it’s really hard! The full title of this talk was actually “User Experience: it’s for everyone, it’s important, and it’s really hard!”, but it got truncated in the submission process, which is kinda OK, because I didn’t want to tell you up front that it’s really hard because you might not come. But this is basically what I’m going to try and convince you of. And don’t be put off by the fact that it’s hard. Lots of things are hard, that doesn’t mean that you shouldn’t do them. So these are the three things I want to convince you of today. These will be your takeaways and having discovered these things I hope you’ll go away and read up on UX design, follow UX design blogs, buy and read some of the books that I’ll recommend, and try to ask more questions about the experiences you’re creating. Seth Godin talked about his speaking gig’s in a recent interview with Tim Ferriss and said: “...You have people in a room...eager to hear what you have to say...and for 45 minutes or an hour you have a screen that's 30ft by 20ft and you have a microphone that's amplified. And maybe just maybe you can get under their skin...and then...change the conversation…” And as we go I’ll share some experiences, tips, books, links and so on to help you find out more and start your own UX Design journey.

Slide 14

Slide 14 text

What is  UX? Before trying to convince you of those things, let’s quickly try to explain what UX is. People will argue about exact deﬁnitions and terminology. I hope I present something that most people agree with. First, some deﬁnitions.

Slide 15

Slide 15 text

UX = User eXperience  aka  UXD = User eXperience Design different to  UI = User Interface Hmm…you know what. I’m going to talk about user testing soon, and just to show you that I practice what I preach, I’ve user tested this slide.

Slide 16

Slide 16 text

UX = User eXperience  aka  UXD = User eXperience Design different to  UI = User Interface ✕ And my users didn’t like it.

Slide 17

Slide 17 text

UX UXD UI User eXperience User eXperience Design User Interface Before trying to convince you of those things, let’s quickly try to explain what UX is. People will argue about exact deﬁnitions and terminology. I hope I present something that most people agree with. User experience is just that - the things that a user experiences. But it’s also used as a term for the work that people do design user experiences - more accurately called user experience design. I’ll use UX and UXD interchangeably in this talk. These are diﬀerent from but related to user interfaces and user interface design.

Slide 18

Slide 18 text

UI is what you see  UX is how you feel Let’s try to get to the bottom of the diﬀerence between UI and UX because that’s important to understand and the subject of many, many metaphors that sometimes border on the ridiculous. Here’s a simple explanation I heard once: The user interface is what you see, and the user experience is how you feel.

Slide 19

Slide 19 text

Joel Marsh “UI is what you see  UX is why you see it” The UX for Beginners book reﬁnes this slightly to… It’s a bit more than just how you feel. It’s aﬀected by your context, your existing opinions and biases, any disabilities that you may have, for us - the technology you are using. And it creates feelings, memories, opinions. UX is the process that drives what you do and how you go about doing it.

Slide 20

Slide 20 text

“The best UX will often be no UI at all” Havoc Pennington  http://blog.ometer.com/2016/01/26/the-dangerous-ui-team/ Here’s my take. WordPress committer Aaron Jorbin recently blogged and tweeted this. from http://blog.ometer.com/2016/01/26/the-dangerous-ui-team/ (via https://twitter.com/aaronjorbin/status/697872726296367104)

Slide 21

Slide 21 text

And here’s a great example…Anyone know what this is? This is the button on the dashboard of my car that changes the clock. This is User Interface. Who thinks this button has a good user expereince?

Slide 22

Slide 22 text

My UX Journey with thanks to Innocent Drinks And here’s some comparisons of user experience of changing clocks when daylight savings starts and ends. From smartphones, which have no UI for this operation, to that one, single, unlabelled button on my car dashboard that you have to stab at in frustration until you give up and decide that it’s not worth it.

Slide 23

Slide 23 text

UX IS: Making users effective User  Goals Org  Goals UX is: Making users eﬀective. Your website has a purpose. Either for your users or for your business or organisation, or, hopefully, for both. The actions that sit in the middle of this are what your website is for and these are the tasks that you should make as simple as possible.

Slide 24

Slide 24 text

UX IS:  User journeys UX is: User journeys. This is one of the things that I talk to clients about a lot….and it’s one of the reasons for doing this talk. Let me explain…

Slide 25

Slide 25 text

This is your homepage. Well, it might be. You see, I spend so long talking to people about their homepage, it’s crazy. Because, actually, in a lot of cases the homepage isn’t that important. When is the last time you paid attention to what’s on the Amazon homepage? Developers: when is the last time you typed “stackoverﬂow.com” into your browser? When did you last go to www.bbc.co.uk or buzzfeed.com to see what was on the homepage? People could get to this page, whatever it is, from social media, from a bookmark, from a search, from a link in an email, from an advert or poster, from a QR code…(hmm…maybe not)…from a business card… …who thinks their business card is part of their UX?… And it may be an article, a product, or an information page rather than the homepage.

Slide 26

Slide 26 text

! "  #  $  %  &    (  )  ⋆  +    People might get to your website from any number of sources. And it’s useful to think about who the people are, what their context is: where they are, who they are with, what they are doing, what device they are using. And how they came across or navigated to your site. This is all stuff that happens off site. Perhaps some of it even happens offline. But it’s important. Marketing and SEO are part of the UX. You can have the nicest website in the world, but if no one can find it then it’s a waste of time. Classic case: I had a person come to me and ask if I could put six images, with text on the images, onto a website for her and link them together. I pointed out that this wasn’t very good practice and she should probably make something more web-friendly, and her response was that because it looked OK on her screen, it would look OK on everyone else’s screen. I ended up telling her that there was no point building something that no one can find and which some people can’t use.

Slide 27

Slide 27 text

! "  #  $  %  &    (  )  ⋆  +    ? And once they’ve visited your website what are your users going to do, or where are they going to go? This is where understanding goals come in. Your job is to help someone do the next thing. This is a really simple user journey with just a few steps. But there is so much else to consider. Ultimately this may involve shipping a product. In which case your user experience may include a returns policy, a user guide, customer support. It may involve taking a donation, in which case how you say thank you can keep or drive away a supporter. It may involve getting someone to book a service or call you. The user experience doesn’t end online either. This is all stuff that happens off site. Perhaps some of it even happens offline. But it’s important. Marketing and SEO are part of the UX. You can have the nicest website in the world, but if no one can find it then it’s a waste of time. Classic case: I had a person come to me and ask if I could put six images, with text on the images, onto a website for her and link them together. I pointed out that this wasn’t very good practice and she should probably make something more web-friendly, and her response was that because it looked OK on her screen, it would look OK on everyone else’s screen. I ended up telling her that there was no point building something that no one can find and which some people can’t use.

Slide 28

Slide 28 text

User journey: Dead ends Logo Home - About - Donate Awesome  Video  Here

Slide 29

Slide 29 text

User journey: Dead ends ? Logo Home - About - Donate Awesome  Video  Here ?

Slide 30

Slide 30 text

UX IS:  A process! UX is: A process. It’s not something you ever ﬁnish or really get right. There will always be something changing about your end-users or your organisation or your clients. There will always be optimisations you can make to improve the user expereince. But again, don’t let this put you oﬀ doing the basics well. This is your job.

Slide 31

Slide 31 text

UX IS:  Psychology Usability Design Copywriting Analysis UX is all of these things too. I don’t have time to cover all of them, but I do want to dwell on Psychology. Psychology: If this sounds scary, don’t be too put oﬀ by this, though I’d argue that if you think computers and code are interesting, the human brain and it’s behaviour are EVEN MORE interesting. There are behaviours and responses that are common to all humans and psychology allows us to understand and take advantage of these. Joe Leech says “A designer who doesn’t understand psychology is going to be no more successful than an architect who doesn’t understand physics” And for a lot of WordPress professionals these probably sound really expensive and complicated and time consuming for the sizes of projects that you are involved in. That EXACTLY my experience. BUT...I've come to see that this should not stop you asking questions, borrowing design patterns, being aware of principles and techniques and doing everything that you can do with the resources that you have to do some user experience design.

Slide 32

Slide 32 text

UX is for everyone And this brings me to my ﬁrst point: UX is for everyone.

Slide 33

Slide 33 text

We all have experiences as users We all have experiences. We have all pushed doors. We have all used clocks, we all use websites and we get things done with them; we enjoy them; we love them; and we hate them.

Slide 34

Slide 34 text

It’s a Norman Door WITH INSTRUCTIONS. This is roughly equivalent to…

Slide 35

Slide 35 text

We can send a 1-ton rover vehicle to Mars and land it using a hovering, rocket- powered crane… But we still can’t make a printer work nicely! - Me I’m sure we’ve all used a printer and got to the point of throwing out of the window. Probably fewer of us have used Martian Rovers.

Slide 36

Slide 36 text

We all create experiences And if you work on the web you all create experiences for others. Some might say that this is the designer’s job. But no…I want to argue that…

Slide 37

Slide 37 text

UX is for… managers and consultants UX is for managers and consultants. Because it involves business and user objectives, and because it runs through the whole web design and development process, it’s deﬁnitely for managers and analysts and consultants.

Slide 38

Slide 38 text

UX is for… designers UX is for designers….clearly….because design plays such a huge part of the process.

Slide 39

Slide 39 text

UX is for… implementors UX is for website implementors who build websites without coding because you’ll still be working on site structure, page layouts, navigation, user journey, content, calls to action, and so on that are the key ingredients of user experience.

Slide 40

Slide 40 text

UX is for… developers UX is for developers, because performance and load times, uptime, SEO, animation, feedback, form validation, responsiveness, and so many other things that you are responsible for aﬀect user experience.

Slide 41

Slide 41 text

UX is for… copywriters  media editors  content creators UX is for all of these people. Copywriting, as I’ve said before, is a key part of the user experience. But introducing photos (and the right photos), videos, audio and other embedded media, and ensuring that the user journey is right and that SEO is done properly and that email and social media integrates well are all part of UX and part of your jobs.

Slide 42

Slide 42 text

UX is for… everyone! UX is for all of these people and more people that I’ve probably forgotten to mention. We all have experiences, we all create experiences and we can all make the experiences we create better.

Slide 43

Slide 43 text

UX is important My second point then is that UX is important! I’m hoping it’s fairly obvious that making users eﬀective at their goals and making it easy for them to take the actions you want them to take is good for everybody. But lets look at some examples.

Slide 44

Slide 44 text

UX can… make a difference    (positive and negative) UX is for all of these people.

Slide 45

Slide 45 text

https://twitter.com/Una/status/698003448323641344 This is a quote about UI, not UX. But I think the principle is exactly as important.

Slide 46

Slide 46 text

UX can… increase sales

Slide 47

Slide 47 text

–Greg Linden - Make Data Useful - 2006    https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt Every 100ms delay costs 1% of sales This is the classic quote from research done for Amazon back in 2006. This is a quote about web performance really, but I’d say that performance aﬀects experience greatly, and we see a change in behaviour as a result.

Slide 48

Slide 48 text

–Adam Silver     https://medium.com/simple-human/embracing-simplicity- cf9ca9fe6a9e#.xpwld4p72 Just Eat removed a fancy, JS accordion form and replaced it with a multi-page form. “…this resulted in almost 2 million extra orders per year.” This is from an article on embracing simplicity in design and implementation…

Slide 49

Slide 49 text

UX can… raise more money

Slide 50

Slide 50 text

–Steve Guy - British Heart Foundation    https://www.youtube.com/watch?v=EIR2BamKwl8 The BHF simpliﬁed a form and raised an extra £2m per year

Slide 51

Slide 51 text

UX can… make people smile It was hard to ﬁnd concrete evidence of this - everyone’s focussed on money, which is the end goal I guess. But take Slack as an example.

Slide 52

Slide 52 text

–Lots of people    https://twitter.com/slacklovetweets “We love @SlackHQ…” Any Slack users? Slack is…

Slide 53

Slide 53 text

UX can… change the world? Again, I don't have evidence for this, it’s just a hunch. But I have this sense that if UX helps us be more eﬀective, more eﬃcient, can make more money and make people happier and more productive…perhaps those are steps towards bigger more exciting goals. Think about it.

Slide 54

Slide 54 text

UX is important

Slide 55

Slide 55 text

UX is hard And this brings me to my ﬁnal point: UX is hard This was actually where my idea for the talk originally started. Remember that UX is 90% about how you think? Well the idea was to take a really simple web-based thing and show what sort of questions you can ask about it. An in doing so show that very little of what we do on the web is simple. And to show that we can all ask these sorts of questions, and that these questions are important, and that they are hard. But being hard doesn’t mean we shouldn’t do things. Lots of things are hard. So before I get to my more in-depth case study, I want to look at a some more simple things.

Slide 56

Slide 56 text

Who’s seen Facebook reactions?

Slide 57

Slide 57 text

UX is hard

Slide 58

Slide 58 text

Should I have a home link in my navigation? So there was this question that I saw in a Facebook group recently. The question was… Who thinks this is a simple, innocuous, yes/no question? What’s amazing about this question was the number and variety of responses.

Slide 59

Slide 59 text

No, people know that they click the logo. Should I have a home link in my navigation?

Slide 60

Slide 60 text

Yes, people don’t know to click the logo. Should I have a home link in my navigation?

Slide 61

Slide 61 text

No, people use breadcrumbs Should I have a home link in my navigation?

Slide 62

Slide 62 text

No, people use the back button Should I have a home link in my navigation?

Slide 63

Slide 63 text

Yes, people expect it. Should I have a home link in my navigation?

Slide 64

Slide 64 text

It depends. Should I have a home link in my navigation?

Slide 65

Slide 65 text

What about on mobile with collapsed nav? Should I have a home link in my navigation?

Slide 66

Slide 66 text

Have you considered the user journey? Should I have a home link in my navigation?

Slide 67

Slide 67 text

Test it Should I have a home link in my navigation?

Slide 68

Slide 68 text

I tested it!  (and people do crazy things) Should I have a home link in my navigation?

Slide 69

Slide 69 text

YOU’RE NOT NORMAL! Talk about biases and user behaviour

Slide 70

Slide 70 text

UX is hard

Slide 71

Slide 71 text

https://twitter.com/rUv/status/695055910683615232

Slide 72

Slide 72 text

https://twitter.com/lionelrudaz/status/695147236670455808

Slide 73

Slide 73 text

UX is hard

Slide 74

Slide 74 text

The Simplest  Web App  In The  World Case Study

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

User journey • Discovery • Arrival (at homepage?) • Sign up / create account • Log in • Change status

Slide 79

Slide 79 text

User journey • Discovery • Arrival (at homepage?) • Sign up / create account • Log in • Change status • Push notiﬁcations?

Slide 80

Slide 80 text

Acquisition is hard And this brings me to my ﬁnal point: UX is hard This was actually where my idea for the talk originally started. Remember that UX is 90% about how you think? Well the idea was to take a really simple web-based thing and show what sort of questions you can ask about it. An in doing so show that very little of what we do on the web is simple. And to show that we can all ask these sorts of questions, and that these questions are important, and that they are hard. So before I get to my more in-depth case study, I want to look at a simple question that I saw in a Facebook group recently. The question was:

Slide 81

Slide 81 text

Homepage How did the user get here?

Slide 82

Slide 82 text

Homepage How can I get more people here?

Slide 83

Slide 83 text

Navigation is hard

Slide 84

Slide 84 text

Homepage What should be in my navigation?

Slide 85

Slide 85 text

Homepage What should NOT be in my navigation?

Slide 86

Slide 86 text

Homepage What about when logged in?

Slide 87

Slide 87 text

Homepage Should I have a home link?

Slide 88

Slide 88 text

Calls to action are easy (mostly)

Slide 89

Slide 89 text

Homepage What might the user want to do next?

Slide 90

Slide 90 text

Homepage Can I easily take action on mobiles?

Slide 91

Slide 91 text

Homepage Can I simplify by limiting the number of choices?

Slide 92

Slide 92 text

Homepage Should the action change when logged in?

Slide 93

Slide 93 text

Copywriting is hard

Slide 94

Slide 94 text

Homepage How can I simplify/ edit this?

Slide 95

Slide 95 text

Homepage What DO I need to say.

Slide 96

Slide 96 text

Homepage What DON’T I need to say.

Slide 97

Slide 97 text

Homepage Have I clearly and succinctly explained what this is in a way that a new visitor will understand?

Slide 98

Slide 98 text

Homepage Do I need to explain this to new users? Or is some prior knowledge assumed?

Slide 99

Slide 99 text

Homepage Is my page too long? Or too short?

Slide 100

Slide 100 text

Homepage Are my lines too wide? Or too narrow?

Slide 101

Slide 101 text

Mobile-friendly is hard

Slide 102

Slide 102 text

Homepage Responsive!

Slide 103

Slide 103 text

Forms are REALLY hard

Slide 104

Slide 104 text

Slide 105

Slide 105 text

Slide 106

Slide 106 text

Slide 107

Slide 107 text

Slide 108

Slide 108 text

Slide 109

Slide 109 text

Slide 110

Slide 110 text

Slide 111

Slide 111 text

Slide 112

Slide 112 text

Slide 113

Slide 113 text

Slide 114

Slide 114 text

Slide 115

Slide 115 text

Slide 116

Slide 116 text

Slide 117

Slide 117 text

User journeys are hard

Slide 118

Slide 118 text

Thanks! What happens now? What screen do users go to?

Slide 119

Slide 119 text

Thanks! Should the user be logged in?

Slide 120

Slide 120 text

Thanks! Do they get an email?

Slide 121

Slide 121 text

Thanks! Does an admin get an email?

Slide 122

Slide 122 text

Slide 123

Slide 123 text

Slide 124

Slide 124 text

Slide 125

Slide 125 text

Slide 126

Slide 126 text

Change status What is the button feedback?

Slide 127

Slide 127 text

Change status What else happens after pressing the button?

Slide 128

Slide 128 text

Change status Should I congratulate the user?

Slide 129

Slide 129 text

Change status Should people be allowed to upload a photo or note?

Slide 130

Slide 130 text

Change status Should people be allowed to change colour (as they now know the gender)?

Slide 131

Slide 131 text

Change status Should I offer sharing on social media…    …or by email?

Slide 132

Slide 132 text

Change status Should there be an “oops” or “undo” option?

Slide 133

Slide 133 text

Change status What’s the balance of more options vs getting out of the way?

Slide 134

Slide 134 text

The Simplest  Web App  In The  World Case Study

Slide 135

Slide 135 text

2 actions Case Study

Slide 136

Slide 136 text

46 questions Case Study

Slide 137

Slide 137 text

UX is hard And this brings me to my ﬁnal point: UX is hard This was actually where my idea for the talk originally started. Remember that UX is 90% about how you think? Well the idea was to take a really simple web-based thing and show what sort of questions you can ask about it. An in doing so show that very little of what we do on the web is simple. And to show that we can all ask these sorts of questions, and that these questions are important, and that they are hard. So before I get to my more in-depth case study, I want to look at a simple question that I saw in a Facebook group recently. The question was:

Slide 138

Slide 138 text

Which way now? So. Hopefully I’ve convinced you that user experience is for everyone - including you! That it’s important. And that, yes, it’s hard, but that’s OK. So what do you do now?

Slide 139

Slide 139 text

Beg, steal, borrow Resource: http://www.goodui.org Look at what others do…make use of UX blogs, shared research, books. UX is a hot topic. So much shared knowledge, design patterns, information etc. I’ve had SO many “Aha” moments just by reading about how other people improved their user experiences, or by hearing about commonly used design patterns.

Slide 140

Slide 140 text

Ask questions Resource: Your brain Dig into your user interface. Ask as many questions as you can about it.

Slide 141

Slide 141 text

Test and Observe Resource: Your mum, dad, grandma, cat Watch people use the things you’ve created. Not your designer friends. Your mum. Your partner. Your friends.

Slide 142

Slide 142 text

Track and Analyse Resource: Analytics (Event Tracking) Use analytics to work out how your users behave. Set up some simple event tracking to see what actions users take and from where. Remember that ﬁnding and leaving your website are part of the experience too.

Slide 143

Slide 143 text

Change and test Resource:  Google Experiments, Optimizely, InVision Make some changes. Use Google analytics’s simple experiments function, or a tool like optimisely, to test the change for a percentage of users. See what improves.

Slide 144

Slide 144 text

Think outside  the screen Resource:  Your own experiences Remember that your user experience is more than just what people see on the screen. It might involve a support query. Emails. SEO. Social media. Packaging and delivery, or even a returns or refunds process.

Slide 145

Slide 145 text

Ask, Discuss, Learn Resource:  Each other  http://uxforevery.one I’ve set up a twitter account, Facebook page and website where I’ve curated lots of stuﬀ that was useful in the preparation of this talk and I hope to keep it updated with information and thoughts for beginner UX’ers like.YOU! … Come and ask questions…of me…of each other…of other UX people who may want to help. Perhaps we can build a little community as we learn and experiment together.

Slide 146

Slide 146 text

Questions? (But not necessarily answers) Ross Wintle  @magicroundabout oikos.digital UX for Everyone uxforevery.one @uxforeveryone I hope you have questions. But I hope that they’re not question that I can answer. They may not be questions that you can answer. But I hope that you might feel like you have some ideas about what to ask and how you might go about ﬁnding the answers.