Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
The User Experience of Social23:11 with Luke Murphy-Wearmouth
Social media, in its current incarnation, has been around for the last six years. In that time, we've been inundated with suggestions, tips, articles and rants on why it's brilliant for our business and that you'd have to be stupid to 'not do social'. As developers and designers, we've been integrating social media into our sites and apps as standard practise. However, when it comes to how we implement social into the things we build, more often than not we use plug and play content streams, or bolt-on buttons, making social another tick box that we need to complete in the overall build. What we end up with are poorly designed social interactions in our user journeys, that make no sense in the wider context. While this might not hurt the bottom line in itself, it's a big missed opportunity. It's time we start putting context into the social elements of our sites and apps, using User Experience Design and playing with the social APIs that are out there. Luke will look at how we currently use social media, how we can apply basic UX Design methodologies and then move onto the how, with practical examples of how we build better social interactions, using the major social APIs.
[MUSIC] 0:00 Hello. 0:01 How are we all today? 0:02 Good. 0:09 so, I just want to, quickly just get a bit of a gauge right. 0:11 So how many guys here are developers? 0:18 Guys and girls I should say. 0:21 Okay good, good. 0:24 Any designers at all? 0:25 Wow, okay. 0:28 And sort of product guys little no, one awsome. 0:29 Two three four a little bit okay cool. 0:34 So so my talk today is gonna be, it's 0:36 very focused around user experience and how we integrate things. 0:39 But this is something that I think that more 0:43 developers need to know about and be aware of. 0:45 Because when you're building things, you're the 0:48 guys who are telling the designers what's possible. 0:49 And a lot of it comes down to you being able to sort 0:53 of you know, shape that thought for the designers and for the product. 0:56 So if you wanna get me on Twitter and ask any questions or hurl any abuse at me 1:00 then I'm @lurkmoophy Similarly if you like what I'm 1:04 talking about then I've got some writing, over on lurkmoophy.com. 1:07 So, I thought I'd start off with a little bit of background about myself. 1:10 I studied in Sydney, Australia. 1:14 That's where I'm from originally, and I studied music. 1:16 So I fucked around with studio technology and 1:19 music for a couple years, which basically meant 1:23 at the end, when I got my degree, 1:26 my career prospects were loading, looking pretty grim. 1:27 So I sat around in my pants for about seven months 1:31 playing Elder Scrolls, and then finally got myself a job working at 1:33 a grain company designing everything from annual reports to web sites 1:38 cuz that's every boy's dream, to design for an agriculture company, right? 1:43 So about four years ago I decided that this 1:47 wasn't really wanted to, what I wanted to do. 1:50 Packed up all my stuff, moved across to the 1:52 UK, got myself a job in a social media agency. 1:54 Actually doing social media. 1:59 So, I spent all of my time telling my clients how what they were doing is 2:00 wrong, didn't have near enough social buttons plastered everywhere, right? 2:05 They, you couldn't, you couldn't like every element on the page. 2:10 How ridiculous is that? 2:14 So that's what I did for a couple years and then after that, after a while, I 2:15 bought myself a checked shirt, some glasses and 2:20 a MacBook and moved over to the creative side. 2:22 Became the the creative lead of the agency. 2:25 So, all of a sudden I was building the websites that 2:28 for two years previously I was tell them weren't social enough. 2:30 So that was, that was a bit of a fun experience. 2:35 And since then gone freelance. 2:39 So now doing my own thing. 2:41 But about mid-2012, I read this article by Paul Boag. 2:42 It, Social Media as part of the User Experience. 2:48 Now, this was the first time I'd heard anybody talk about 2:50 social media in a context other than just stick social on everything. 2:53 He was actually thinking through things. 2:58 You know, thinking about how we can make this a better experience for our users. 3:00 So this started to strike a chord with me, because up until then I had just 3:03 been plastering it over everything you know, because 3:07 that, that was all we needed to do. 3:11 Ya know, we needed to get the likes, we needed to get the follows, 3:12 and so this was something I started to look into quiet a bit more. 3:15 Now d, does anybody here know what Facebook is? 3:20 Good, yeah, not, not many? 3:26 Okay, cool. 3:29 So at this point I, you know, I was gonna throw at you 3:30 a whole bunch of stats as to why you should be doing social media. 3:32 For your, for your company. 3:35 But you guys don't need that at all, right? 3:36 It's, it's saying that we know is valuable to business, and it's saying that 3:39 we know that we need to be integrating into the sites that we build. 3:42 Yeah? 3:44 But what I am more interested in is how we 3:46 can make that experience a lot nicer for our users. 3:49 How we can do it with a little big more thought. 3:53 And how it can not be just a bolt on. 3:56 I actually really like the way that Paul Boag summed it up where 3:59 he said, too many of our sites that we build are social by happenstance. 4:02 And this is very much how I think we're at at the moment. 4:06 So it's something that we need to start thinking about a bit more. 4:08 And so, before I get into the actual hows and whats, 4:11 and whatevers, I want to start a little bit on the why. 4:15 So to give you a bit of background as to 4:18 why we do things, why we interact in certain ways. 4:20 So first off to cover off, there are really three modes of social interaction. 4:24 Right? 4:29 There's sharing, we all know what that is. 4:29 There's subscribing, so that's your like's and 4:31 your follows cuz that's what you're doing. 4:33 You're subscribing to receive more information. 4:35 And then there's your discussion. 4:36 So things like commenting systems. 4:38 These sort of fall under the whole social umbrella as well. 4:41 Then there's a few psychological principles that we 4:46 need to think about when it comes to social. 4:48 So things like social validation. 4:50 So, as humans, we try and form social groups. 4:52 That's what we're hard-wired in our brains to do. 4:57 And a lot of that comes down to 5:00 maintaining this sort of sense of self, right? 5:01 And, and upholding that. 5:05 And when it comes down to it, if there's an interaction that is going to 5:07 support that self-concept, that how I see myself, 5:11 then you're more likely to interact with it. 5:14 So that's something to, to remember when you're building interactions. 5:16 Then there's reciprocity. 5:20 Basically, if somebody gives us something, we will want to give something back. 5:21 So as I said, we as, oops, gone too far. 5:25 We as human beings are hard wired to build social groups and to make them stronger. 5:28 So it makes complete sense that this, this idea of reciprocal exchange 5:34 is something that is very sort of deep rooted in, in our interactions. 5:38 And then there is social proof. 5:43 It's my favorite. 5:44 It's like a, it's a phenomenon where a whole 5:46 bunch of people start behaving in a certain way, 5:48 that amount of people reaches critical mass and herd 5:50 mentality kicks in, and then they don't think anymore. 5:53 That's awesome, right? 5:56 Cuz we can take advantage of this, not in bad ways. 5:57 Just, just, you know, want to make that, that certain. 6:00 I'm not a fan of dark patterns but we see this. 6:03 I mean, in the design industry who here has ever coded up a 6:06 design that could be labeled as flat design in the past couple years? 6:11 I mean, this is something, you know, that a couple people thought 6:16 was a good idea and then a few more people started doing it. 6:18 And all of a sudden as soon as it reached that certain level it just what we do. 6:22 That was how we design sites now. 6:25 Flat design is the cool thing to do, and a lot of people do it without thinking. 6:27 And with social proof, there's sort of two main areas that it kind of falls into. 6:31 So there's informational conformity. 6:35 Which is where you are trying to behave 6:38 correctly, as society tells you, and normative of conformity. 6:40 So, that's where you are trying to 6:45 get acceptance from a social group and approval. 6:47 again, just something that's really useful to 6:51 keep in mind when you're building interactions. 6:53 Cuz if you play to these things, then you'll, 6:55 you'll start to you know, get a lot more results. 6:57 Then there's the motivations behind everything. 7:01 So really, when it comes down to it, there are two main motivations. 7:03 There's intrinsic motivation where the reward is the activity itself. 7:05 So you know, things like games, playing. 7:10 That kinda of stuff. 7:15 And then there's extrinsic motivation where award is external to 7:16 the activity, so obviously, the main one there is work. 7:20 Right? 7:24 We don't, most of us don't do work purely because we enjoy 7:24 the activity, we do it because we get payment at the end. 7:27 And when it comes down to it again, if you're building an 7:30 interaction, and that doesn't play to 7:34 either of these motivations with your user. 7:36 There's, you're not gonna get anything. 7:39 It's not gonna work. 7:40 Okay, so we've got that far. 7:42 You're, you're all still with me? 7:45 Good. 7:47 Haven't fallen asleep yet? 7:47 Lunch, lunch lull hasn't kicked in. 7:49 Cool. 7:51 So, let's get to the crux of it, right? 7:53 How do we make the way that we do social better? 7:55 How do we make it, so it's not so happenstance? 7:58 So, I just wanted to go through a few of the ideas I've been having over the past 8:00 yearish of how we can make certain elements of these better for our users. 8:04 So let's start with sharing. 8:12 We all like to share, right? 8:14 And the way we share is we just stick, stick share buttons over everything. 8:16 That's the way we do it. 8:19 So share this page, that's a common interaction, right? 8:22 We, we put those on their, on our websites. 8:24 You have them everywhere. 8:27 Now I actually. 8:30 So as I said, I'm from Australia. 8:32 So I fly back there quite often. 8:33 Flying back there in December, actually. 8:35 And the other day I was booking the flight. 8:37 So on a fairly big travel site, was going 8:39 through you know, booked, picked my flight, picked my times. 8:43 Went through to the next page, where you put in your, your, your 8:46 data, your information about me, and finally got to the payment details page. 8:48 And I noticed that sitting at the top of 8:53 all these pages is a little share this page button. 8:54 Why the fuck would I want to share 8:58 the page that I'm putting my payment information into? 8:59 I mean, it just makes no sense. 9:01 Right? 9:04 From a technical point of view, I can't kind 9:05 of understand it, because this is what happens, right? 9:06 We put these buttons and just put them site wide. 9:09 Yeah, but that doesn't make sense when, if the a user is on a page 9:14 where there is no logical reason for them to share that page, shouldn't be on there. 9:18 So we should have the power to turn these things on, on and off. 9:22 When it comes down to it, it's just about using common sense, right? 9:26 And then there's positioning. 9:29 And this one is a bit of a bug bear of mine. 9:32 It's where you put these, these sort of interactions on you page, 9:34 because really what it is you shouldn't be disrupting a user journey. 9:38 So a lot of people put them at the top of article or the top of pages. 9:42 Right? 9:47 Before it gets to the sort of real content. 9:47 And to me, this is kind of the equivalent of walking into a 9:50 restaurant, walking up to the waiter saying, I'd like a table for two please. 9:53 And then the waiter pushing you back out the door and going, tell all your friends. 9:57 Just makes no sense. 10:02 It's just, it's not a smart way of doing these things. 10:03 So again, we just need to think about 10:06 where this would sit within the user's journey. 10:08 And actually, so GigaOM. 10:12 Really good example of this. 10:14 Actually I really like the way that they, they implement this. 10:15 Right? 10:18 At the beginning of each article, they have this little summary here, which is 10:18 a bit of a too long didn't read version that people can then Tweet. 10:22 They click the Tweet button. 10:25 It opens up Twitter. 10:26 It has the summary and a link to the article. 10:27 It's very nice. 10:30 It's making it very easy for the user. 10:30 However, it's sitting before the article itself. 10:33 So, basically, they're asking you to come in, read the headline, read the summary. 10:36 And go, yeah, I wanna share this. 10:39 That's awesome information. 10:40 Unfortunately, I know that it works a little bit too well for them. 10:42 Because a lot of people don't read articles these days. 10:45 But it's not particularly great for the user journey. 10:47 It's disrupting that user journey. 10:50 This was something that we were actually working with was working 10:54 with a group of theaters to try and make their experience better. 10:57 And this is, this is an example of how they came to us and they 11:00 said, well, you know, we want to stick a share button on the tickets page. 11:03 Makes sense, right? 11:08 But we thought, well, hang on a second. 11:08 Is there a smarter way we can do this? 11:10 Now, I know that when I'm booking when I'm trying to get 11:12 a group together to go to the theater, it's an absolute fucking nightmare. 11:14 Trying to get everybody together, trying to get the right dates, trying to 11:19 you know, find out when people are free, all the rest of it. 11:22 So we though, oh wait, maybe we can make this a little bit better. 11:24 So what we looked at was using a service called Doodle. 11:27 Right? 11:31 Has anybody here ever used Doodle? 11:31 It's awesome, right? 11:33 You just stick in a bunch of dates, send 11:34 it to your friends, and everybody inputs, and it's great. 11:36 Tells you when, when everybody has finally put 11:38 in the dates that they're, they're interested in. 11:41 Doodle has an API. 11:43 So why doesn't it make sense to just stick this in the ticket booking page. 11:45 Automatically create a poll, and send it out to your friends? 11:48 Right? 11:51 It interrupts the journey a little bit, cuz they go off the site. 11:51 But it's, it's making that, that process a lot easier for users. 11:53 unfortunately, this got shelved before it actually got put into place, 11:59 but you know, these are the things that we deal with, right? 12:01 And then think about presentation. 12:05 So, it's very, very tempting to just you 12:07 know, grab the Twitter buttons off Twitter site. 12:09 Although you know, it's, it's, that's what a lot of us do. 12:13 We just grab them, stick them on the site and we're done, right? 12:16 But thinking about especially when it comes down to microcopy. 12:20 Microcopy is very important in getting somebody to interact with you. 12:23 Language is very important. 12:26 Because if you can make language emotive, then and, and contextual. 12:27 So it's in context of what's happening. 12:33 Then you'll have much more success when you 12:35 try and get people to actually do something. 12:37 So again, an example of this is a site we were building recently for a tie company. 12:40 And we were thinking, okay, we wanna share a button on product pages. 12:45 But why would people share? 12:49 Why would somebody want to send out a product to a bunch of their friends? 12:51 Well, a lot of the reasons is because they are trying to 12:55 get advice, so we thought okay, maybe we can just shortcut that, right? 12:58 And we can just put a little need advice ask 13:01 your Twitter followers and Facebook friends if this would suit you. 13:03 So it's a nice little bit of copy, but 13:06 works a whole lot better than just writing share this. 13:08 And 13:11 then there's making it contextual. 13:14 So this is something that I'm quite interested in is these contextual 13:16 Tweet buttons, this thing that Paul talks a lot about in his article. 13:20 Where the idea is that you go through your content and you find the 13:23 most sort of relevant pieces of information, 13:26 pull them out and make them easily shareable. 13:30 So this is something that we put in place for hotels.com. 13:32 Where we had this massive content document, they 13:36 wanted to be able to share the page. 13:38 But we thought, well wait, how can we 13:40 make this a little more interesting for our users? 13:42 So we went through, found the interesting quotes and 13:44 information and pulled them out into little Tweetable snippets. 13:46 So throughout the copy. 13:50 When you click on the button, it just opens up 13:51 a little dialogue using twitter intense very easy to do. 13:53 And it shares that and actually the results of this were the 50% 13:58 of the shares that came from our site was via these quote buttons. 14:02 Which was quite nice to show that these work. 14:06 But we can make this better. 14:10 And this is I mean, as I said I'm a 14:12 designer and I'm a front-end dev, so PHP scares me. 14:14 But we can add social proof via APIs. 14:19 And it's the thing that I'm working on at the moment. 14:21 This is saying that a lot of sights are already putting into place. 14:24 So you look at Lanyard, right? 14:27 Say if you, say your heading something. 14:29 So this is to follow. 14:31 If your logged in I really like this little touch. 14:33 Right? 14:37 It has the attendees, but around the first couple it has these little borders. 14:37 There people that I follow. 14:41 So it tells me the information that I want to know first. 14:44 Which is that my friends are going to this event. 14:47 Therefore I'm probably going to, you know, that's social 14:49 proof, I'm going to think that, that has more 14:51 worth as an event because my friends were already 14:54 going, and it bubbles that information to the top. 14:56 It's quite smart Eventbrite do it too, but with Facebook which means that 14:58 whenever I'm going to a dev event I usually only have one friend going. 15:04 Don't really have many real friends. 15:08 But then I thought, well, you can do this with the sort of contextual tweet as well. 15:11 We can just pool the data when somebody shares. 15:15 We steal their username. 15:18 Then when they first. 15:19 You know, we can stick some little avatars next to the 15:21 Share button to say, well these people have already shared it. 15:24 And this is saying that we're working on at the moment. 15:27 It's really easy. 15:29 It's basically just you know, pull the data when they first 15:29 share it and then when they go to share it again. 15:32 Check if they're following the people who've already shared it. 15:36 Just checking against, comparing to a raise, right? 15:41 It's very easy. 15:43 So, this is something that just you know, adds that nice little touch there. 15:45 So, then there's The Follow. 15:50 So, I run a club night in London and like 15:52 any self-respecting club night we had a glow-in-the-dark party last year. 15:55 And so I needed to go out and buy some UV lights. 16:00 As if you've ever bought UV lights online, you 16:02 know that most of the sites are really dodgy. 16:05 And so I went onto this site and all of a sudden I was confronted with bow! 16:09 . 16:14 I was confronted with this. 16:14 well, it's bit of an exaggeration, but I was confronted with, when 16:18 I went onto the site, I had a follow us on Facebook. 16:23 Like us on Twitter. 16:27 The other way around. 16:28 Follow us on Pinterest. 16:29 Follow us everywhere worth being. 16:30 Now, what was my intended user journey here. 16:33 I wanted to go onto the site, I wanted to find a light, I wanted to buy the light. 16:36 That was the end, right? 16:41 They stopped me at the first site to say no, 16:43 no, no, no, no, go away and do this first. 16:46 Because you know, you already trust me as a 16:48 brand, so you might as well subscribe to me, right? 16:50 Just makes no sense. 16:53 So this is where you need to think about where it makes sense when you're 16:54 putting these sort of things in and generally it's at the end of the journey. 16:57 So, another good example when we were doing the, the theater site. 17:02 This was how they ended when you bought a ticket from them. 17:06 Thank you for purchasing tickets to Madea. 17:10 Back to previous page. 17:12 So I want to go back to my payment. 17:14 Makes sense, I just bought a ticket. 17:15 I want to pay them again. 17:17 Or continue. 17:19 Continue to the front page, cuz I've just bought tickets again. 17:20 I wanna go to your front page and look at what else you got going. 17:23 It doesn't really make sense, right? 17:26 But at this opportunity, it's a great example of where you can use some very 17:28 nicely worded microcopy to say, well look, 17:33 these people are also going, oh, that's awesome. 17:36 My friends are going to this as well. 17:38 Why don't you let people know that you're going as well. 17:41 Aw, yeah, I might do that. 17:44 And then, oh why not follow us on Twitter and Facebook. 17:45 And you know, you can let us know what your thoughts about this show. 17:47 That's a great idea. 17:51 That just continued my journey, right? 17:53 Instead of being a hard stop, they've just 17:55 continued me going on and interacting with them. 17:58 Commenting. 18:02 I could do a whole hour bitching about commenting, 18:04 but I'm going to just do a very short period. 18:07 I have a real problem with the way 18:12 that, that commenting is currently implemented on sites. 18:14 Just cuz I feel that it's a bit lazy, right? 18:18 Cuz at the moment, commenting systems often result in, in this. 18:20 Or is anybody here on Dribble? 18:24 Oh God, there's one. 18:30 [LAUGH] On Dribble, this is the kind of feedback you get, right? 18:30 Dribble, so for those who don't know, Dribble is a community of designers 18:36 where you post your work, that you're working on to get feedback on it. 18:40 Great idea. 18:44 This was the best feedback I've ever got. 18:46 Love flat designs, nice. 18:48 That's really helpful, right? 18:53 And the problem here is that at the moment their, their call to action, right? 18:54 Leave, leave your feedback is, add a new comment. 18:59 Just a bit lifeless, right? 19:02 We need to guide our users and provoke that discussion. 19:04 And there's a few people who are doing this really well. 19:07 I love A List Apart. 19:09 Does anybody here read A List Apart? 19:11 Should just stop re, asking questions, really. 19:13 I love the way that A List Apart used to do their comments. 19:16 Which was, at the bottom of the article, they didn't have 19:19 the long stream of comments, so you could see all the trolls. 19:22 They just had a little, little box. 19:24 Discuss, was it good for you too, join the discussion. 19:26 During the discussion. 19:30 Makes you feel like a part of the community. 19:31 Makes you feel like you are taking part of something that is not just a broadcast. 19:33 You know, taking part of something where other 19:37 people are actually going to respond to you. 19:39 Just again, really nicely to get a microcopy that works there. 19:41 And for God's sake, have a think about comments 19:45 and if you don't need them, turn them off. 19:47 Right? 19:49 Cuz otherwise, they're just useless. 19:49 Just fluff. 19:51 Right? 19:53 We don't need fluff. 19:53 If you do need them, then make it easy for your users. 19:54 So have a think about implementing something like 19:58 you know, the, the twitter and facebook login. 20:00 This is something that a lot of people already do, right? 20:02 But if you are going to put in something 20:04 like a comment system, don't throw up a form at 20:05 me and tell me that I need to fill 20:08 in loads of information before I want to do something. 20:10 This is the new A List Apart, and I, I absolutely love their, their copy, right? 20:14 We reserve the right to delete flames, trolls, and wood nymphs. 20:18 It's brilliant. 20:21 So, how do you make the decision? 20:25 Alright, how do you make the decision of what 20:28 you're going to, how you're going to implement these things. 20:32 Well, as I said, it comes down to the user journey. 20:36 And it comes down to thinking about those, those three main ways of interacting. 20:40 You share, you subscribe, and you discuss. 20:43 So all it takes is mapping out user journey. 20:48 It's a really simple user journey for an ecommerce sight 20:50 it's actually the silks and ties site that I showed before. 20:53 So they come onto the main page. 20:57 They go onto a category page, they have a look 20:59 through, click on a product Go through click, buy the product. 21:01 Go through to the checkout. 21:06 Go through to the forms, put in your information. 21:07 Go through to the thank you page. 21:09 Go through each of these, and have a think 21:11 about whether that makes sense to add social in here. 21:13 Right? 21:16 So in the front, you put a, maybe wanna put a share, because from a brown point 21:17 of view, somebody might want to share oh, 21:20 I found the site for, for Robert Keyte Silks. 21:22 Right? 21:25 Makes sense. 21:26 Subscribe, people kinda expect you to put a 21:27 subscribe on your front page, that makes sense. 21:29 Second page. 21:31 Category page. 21:33 Probably don't need a share, because edge case people who are going to 21:35 share stuff, they'll probably just gonna copy and paste and put it in Twitter. 21:40 But subscribe, especially with a little bit 21:43 of nice microcopy might make sense here. 21:45 We don't have the product you're looking for, follow us on Facebook 21:47 and Twitter and we'll let you know when we get new stuff in. 21:50 Product page, share, need advice, did that one already. 21:54 Makes sense. 21:57 Checkout page. 21:59 Don't need anything there, doesn't make sense. 22:01 Form page. 22:03 Don't need anything there, doesn't make sense. 22:04 Thank you page. 22:08 Oh, we can put loads on here, right? 22:09 We can inundate them with shit. 22:11 Because they've already finished their journey. 22:12 We can get them to interact with us a bit more. 22:14 We can try and continue it. 22:15 And we haven't lost out on anything. 22:17 Because, hey, they've already given us their money. 22:18 So you know, it just makes sense. 22:20 So, really, when it comes down to it we just need to 22:23 think about, are websites today, that, that they are too social by happenstance. 22:26 And really, we need to move them to being social by design. 22:32 This doesn't mean that we need to add in another you know, five day's development. 22:35 It doesn't mean that we need to add in another couple days of UX work, right? 22:39 All it really means is that we just need to give it a little bit of thought. 22:44 So I think I've run a little bit under here, but that's me. 22:50 So as I said, you can get me on twitter at @lurkmoophy or lurkmoophy.com 22:57 is my blog, so you can check out the rest of my writing there. 23:02 And if you've got any questions, that would be great. 23:05 [NOISE] 23:07
You need to sign up for Treehouse in order to download course files.Sign up