Designing for Speed | Google Senior UX Designer | Mustafa Kurtuldu

Just to follow-on from the MC I'd like to dedicate this talk to Larry Tesler who passed away if you think imagine any point in your career designing a feature as important as copy and paste so this is for you Larry, so wide like to talk to you about today is designing for speed design friction my talk is broken down in several parts, I'm going to cover love research and I'm gonna give lots of UX examples, but the first partner tell 3 stories which allude to the rest of our talk but before I actually yep get on to it I want to give some definitions when I'm talking about speed I'm speaking about the technical things you can do to improve the speed of your site, so you know optimizing initial images, minifying code stuff like that, when I'm speaking about friction I'm talking about the things that we do just deliberately slow down a user and distract them, and by the end of the talk I'm sure I'll have convinced you that slowing someone down actually makes them speed up which makes no sense but it will do now yeah if there's anything you remember in this talk and there's gonna be a lot of stuff it's this story you should remember and it's a story of occupied and unoccupied time and it's pretty much this off summary of the entire talk now Houston Airport had this really big problem they had passengers would complain about the time will take four suitcases to arrive in the terminal building when the plane had landed so Houston stayed invested millions into solving this big pain point they improved the process to hired more people they got more new tech and they got them that the time down to seven minutes which is really impressive plane land seven mints layer suitcases arrived but people still complained oops you're not working so that face if you can see it that's the face of every UX designer when you try to do something can the user still complain what you want so they thought okay how can we frame this problem it's like you can't optimize anymore it gets to a point where you optimize the design you actually degrade on the experience I mean you could get the suitcases faster by throwing them across the terminal building but the experience would be bad right so they reframed the problem it's like a snot the speed as much it's more so much as the waiting for the bags are annoying and what they discovered was when they were assessing how the planes would land they realized that the planes parked really close to the terminal building so they fought what would happen if we parked the planes further away from the terminal building and complaints dropped to zero very evil I could talk about the ethics of this but I won't and so what is happening there well seven minutes divided up the first minute you're walking to the terminal building and then you're waiting forever for your bags reverse that six minutes you walk in one mini way it's magic your bags appear if there's anything to remember this story is great dinner parties so legacy systems this is a very common problem for all of website makers you have systems built with old code that code I can't say code called old cold you can't just rip stuff out you hear these new technology acronyms all the time you know PW a TWA and whatever you want to do these things but you can't and this is like the story of a slow elevator so managed building managers get these complaints from their tenants you know the elevator is too slow and this is a big problem for them because you'll lose tenants eventually oftentimes they'll say okay clicker it's not working no they don't say that right so they say make elevator faster so what you do you install new motors you upgrade the systems create new algorithms stuff like that feasible wise this is expensive you can't really do this but to rip out an elevator is a long process and means less elevators in the building and it's the same sort of thing if you've got like a node sorry using it legacy WordPress ripping stuff out it's not a feasible thing to do so again you reframe the problem it's not so much the elevator is too slow so building managers will test people what they'll do is they'll employee they'll reframe the problem and they'll say okay it's the waiting that's annoying so what they'll do is they'll part mirrors play music and install a hand sanitizer and magically it feels faster so in the talk I'm going to give some us examples of the equivalents that you can actually do but it's something to think about and this is usually the first step for anyone who wants to actually build for speed the final story is a story of search now way back when finding stuff on the web was really hard it was a complex problem oftentimes the new works you have a choice you either solve complexity for your user or you pass on the complexity to the user and for a long time search was passed on to complexity because coming up with a very clever classification system is a hard thing to do so what did we do an input field widgets and a sea of UI it's like that seems to be the first thing there's designers we do we just Chuck some UI a that will fix the problem but oftentimes it's the opposite effect and more powerful did the powerful thing to do is to remove features I find because then you focus the experience so again reframing the problem finding the wrong content is annoying so what do you do you come up with a good classification system now this isn't a simple thing to do I found us at Google or PhD students and if you know about anything about academia how you classify good science is citations generally speaking the more citations the better the paper and vice versa so you replace citations with a concept of links now you only need three pieces of you are a search input field and two buttons and that's it and that was a radical thing now it's like accepted but it's very radical at the time so instead of passing on the complexity you've solved the complexity now to talk up these experiences slow low friction slow high friction fast eye friction faster friction this is where you don't want to be and on all these stories this is where most people style the system is slow and there's nothing distracting the users there's no walking to the terminal building oftentimes you'll stop here when you start optimizing for speed you know the small hacky things that you can do to hack user perception most people will end up fast high friction because a lot of sites contain media and there comes a point where you can't really optimize anymore without degrading the experience this is where we everyone wants to be this is like the best place just being fast and no friction at all and you think about search it's not just technically for it's perceptively fast as well like simple UI allows people to get to the experience as quickly as possible so like ages ago Facebook went from a hamburger menu to bottom navigation in one of their experiments and they found that users for it was perceptibly faster because instead of two tabs this one tap to find the actual thing that you're looking for so the perceptive speed is really important and like I said like there's an issue in Silicon Valley and I think technology industry as a whole way we think adding features increased value we're adding features actually decreases the experience and the focus which is a really big problem so speed is broken is broken down into two things the real and the perceived so now I'm talk about technical speed then I move on to the other topics so a story of Financial Times the Financial Times is a financial newspaper in the UK that's one fact about them another fact is they have a very expensive subscription model and also a very low budget they can't tag every type of user so what they did was they come up with this clever lor algorithm called the tipping point when a user visits the site and reads five article a month that user is more likely to subscribe if they can push that user to nine article month then they'll definitely subscribe but what they found simply by making the site one second faster they increased engagement for everybody so this is really critical from a technical point of view I know most of you are designers but to be thinking about this is really important likewise the opposite is also true like we find 51 percent of users will abandon a site like a not finished purchase if it loads slowly like of the top three things the other two are difficult to navigate and difficult to find again these are perceptive things if I can't find what I want to do with the thing is too slow I will just leave now user behavior is affected by many different things now these are the ones which I come up with based on the research I've been involved in so occupy time we've spoken about intention state of mind state of body I'll go on to importance is a weird one whenever you do a study on speed oftentimes you'll slow down an experience to see what is the breaking point where people will just abandon and then after 20 minutes people are still using the site and you think what's wrong with you often times that indicates importance so if you're in a foreign country you're trying to get the map to load you're gonna weigh if you're looking for the address of a hospital and the websites taking forever to load you're gonna wait it's important if you have to fill out a tax return on a government site you have to wait there is no choice that's a bad thing to depend on because users will never forget that experience especially if they're in an anxious point but it's important to know that that's a that's a fact of that will affect user behavior so let's go on to intention 30% of users on the mobile web I just window-shopping there's nothing there no intention there just you know doctor's office bus stop whatever this goes up slightly for retail sites which to 34% 30% actually want to find some the calc that they might do in the future this goes up to 49% for travel sites which again makes sense you want to find out when the next holiday is cheaper 29% of people actually want to do something there and there this goes up to 57% for financial sites which makes sense because no one just checks out you know insurance for love but the question is is like the financial times can we get people jump from one bucket to another does a slow experience impact this that's food for for state of body state of mind when I first saw this I was quite surprised most people on the mobile web are visiting stuff from home but when you think about it make sense Wi-Fi connections stable you haven't got a boss so if you're looking over your shoulder saying why you want Amazon all day unless you work for Amazon and then like people relax when they're at home like when you're anxious you won't complete your transaction and incidentally experiences feel faster when you're sat down if you're standing up walking around they'll feel slower my assumption is is more adrenaline in the body means your brain will process things faster everything slows down but what are we doing on the mobile web they're slowing things down for people like most people worldwide on a 2g connection so what can we do to actually optimize this okay so this is the UX hierarchy and the most important thing for users is how long it takes for a page to load they're after how easy is to find something how well if a slight fits on my screen and how simple to use all of those things are about perception like remember the UX of speed it's not just about the technical speed it's about the perception how attractive a site looks is at the bomb which is depressing because I studied graphic design 20 years ago but you know branding is important branding is very critical for like recognizability but if you ask user the most important thing on the mobile web they say speed so here's some quick wins Paul Berg I hope I pronounce you officer name properly mention this briefly and his talk so images make up a large portion of webpages about 52% of the weight of a page so me and my team we design that board squish its I might not be able to give a demo because I have to switch screens but anyways you can check it out so swoosh is a progressive web app you drag and drop images onto it and then you can compress them and we demoed this I can't do the demo yeah so we demoed this that chrome dev summit 2018 and even our own marketing websites we've managed to reduce them by 83% a simple process so the idea is you load an image and you can change the settings and you can download the image like as designers whenever we're supplying these graphics to light developers this is an easy thing to do you can put it like WordPress plugins to do this sort of thing or Drupal or whatever the common thing is these days but please do optimize image it's the one thing you can do it's so simple to do so you can check out screw store app and if you're into like progressive web apps you can actually steal the code for free from our labs but speed matters but the perception of speed is just as important and this is a very scary statistic a third of users still perceive technically fast sites to be slow so what are we doing but what's going on you've optimized everything so what can you do next so the first part is perception putting navigation front of center now you all look like a bunch of normal people I say that really menacing as I drink water but I'm not normal have you ever asked yourself this question what makes a button a button it's a weird thing it's quite philosophical for designers but an important one you know buttons should always look inviting in the physical world you have like like clanks clicks quite often car designers actually designed the mechanism to make sounds because they're satisfying they don't need those sounds it's like an affordance to give say yes the door is closed we don't really have that on the digital in the digital world yet but what we do have is so that I'm about to trash material design which is very dangerous for a designer from Google going out in a blaze of glory the context of designers you're in sketch figure Murph flash once upon a time photoshop whatever your design is elegant piece of design it's balanced the typography is perfect but no one recognizes that it's a burn that's the one over there text buttons are really hard to recognize the ugly one which is like hey I'm a burden people recognize that people see that like it's really important to make affordances obvious to users there's no value in hiding Alethea the functions so also the function should be clear of a bug there's anyone here speak Japanese because the rest of us talks in Japanese I'm just kidding that joke works every time I'm still waiting for someone say yes and so this user of EXO asked this important question and the question is why is the Save icon a vending machine the visual visual things change with time right the same icons been mentioned many times it's like 20 years ago when I was a student they were still used but visual metaphors change with time and with cultures things translate very differently people start looking at the shapes rather than understanding the meaning so when I was working on this talk I had a bunch of icons up and my dog walked into my study and asked are you a detective I hadn't really occurred to me that this was like from Sherlock Holmes because we born and raised in the UK most kids are indoctrinated of Sherlock Holmes being a detective you over the hat you have the magnifying glass it's deadly when this icon was shown to rural India they asked a different question why the search icon a ping-pong paddle when you are using icons always use a label now to my German and Dutch friends I know your words are a mile long I am sorry but if you're going to use icons always use a label like there's no value in hiding things right most of you are designers so you would definitely have iPhones and in a second you're all going to take out your iPhones I guarantee you and that's you're trying to set the piece of text you're trying to select it doesn't work try select again doesn't work this is wrong what you're supposed to do is hold down the spacebar and the keyboard turns into a trackpad and everyone can start taking out their phones right it really is no one knows this and you lot of power users hide you your works and this is what happens but we have the same problem Android if you want to switch between like tabs in Chrome you just swipe the URL bar and if you want to know the history of a page you hold down the back button which will happen in a sec go back to the Guardian and you see your history yeah but nobody knows this if critical paths of your experience are hidden people are not going to tap or click on them that's just a fact of life so if you want low conversions hide your UX relationships between items employee but closeness to items proximity implies relationships so I was on a plane and the whole flight the same thing happened again and again the toilet sign will go to green people get up walk to the toilet they open this cupboard so if they open this door and they realized as a cupboard and then the host I assess the whole flight no no it's the one over here now if you're on a plane you open a door and something weird happens at that point you're not opening any more doors because I when you're doing you I make sure that things are close to each other like that I'll relate it to one another because people will make or separate them if they're different if the relationship is not the same because people will make these assumptions give visual feedback so like the life of a burn you tap and you see a button you engage with a bone you get enraged by the bone because it's not doing and think and then you tap it again because maybe it didn't work right the first time and oftentimes you end up resetting the whole system by doing this like you're doing the sole action so in material design we say call this thing called the ripple this is just how we apply things stylistically but it's just it's just telling user yes we've a sector your command the thing is working don't worry we're processing just a small visual feedback so friction I've only got five minutes and I got so much more to do so some speak even faster than I already a.m. so people are weird the loading bar at the bottom people think that's loading 11% faster than the rest because the way the ripples are animating people are weird we find that when you stagger animation you starve slows build up the whole thing feels like it's loading faster and remember the hand sanitizer and playing music this is the equivalent doing these little distraction things on the web where you can will distract the user enough to give you time for your system more slide to load I'll get so much over this YouTube we animate this bowl and it's that hangs towards the end that's fake loading screens so I won't really this stuff is public I just say that because it sounds funny so loading screens I've done a lot of research on loading screens because I have no life so early late last year I did a study on our documentation sites to see like how people perceive differently if there is a difference because some people argue there is no difference between loading screens so there's five different variations loading a low pixel image replacing with the top quality image a spinner skeleton screen no transitions whatsoever and then a loading ball and so like when we did this study we found that 90% of users do know an actual notice an actual difference majority of users prefer content placeholders that they find that's really important that it makes the experience feel faster and it's Adeiny when you're doing these studies you show one video after another then you ask a series of questions comparing the two you're throwing some fake questions just to throw people off so they don't know you're talking about speed at the end you ask a one question for them to assess was each one fast or slow like as this wolf scrubber the skeleton screen received no votes for being slow so this is my top four I was going to do some music but now to get it finally got three minutes right top four this is the worst thing you can do a blank screen don't do this because people have no idea when what is coming next coming on a spinner people have negative connotations with spinners partly to do with the beach ball or the sand oil so and also doesn't give any indication of how long something's gonna load moving on from that skeleton screens are popular but the way we implement them is often wrong conceptually it's the same as a spinner we wait we wait then we do this mass reveal content and also gray boxes feel broken to use this because of the color what we find is the whoops the bear approach is have metadata where possible just to give it some context of the use of the type of content that's coming the moment something is ready to actually load load it straight away and do image replace with a low pixel one of a high pixel one again you want to do all these smaller things which are distracting think about you know Houston Airport story that's basically what we're doing from a conceptual level and again it's all like depending on your own experiences so on YouTube when the connection slows down what we do is we just load the video and we just graph and chaos like logic would dictate that video is the heaviest thing on the page therefore you leave it to last but it's the most important thing on the page from a UX point of view right now no one comes to see thumbnails so like always adapt these like treat all these things as a plate of food to take what works for you experiences and discard the rest again like another example there's Google photos a common behavior when people open up Google photos or start scrolling straight away but you don't start loading those images to later on so what you do is you you have the first images in the viewport you preload some and then you know those rays images but what the team wanted to do is to blur out with the images because low-res looks horrible like browsers when they see a pixel image will partially blur things but that also looks ugly but what they found when you add this filter to like 100 images things slow down so they said no let's do for it to be pixelated but then when you tap on an image it will blur it out and then load the full quality ones so two different techniques for essentially the same thing so like you need to adapt these things like don't just go right we need to implement skeleton screens now think about your experiences in the context of what your users are doing and work with your engineers to get the experience really fast so the final thing distracting uses when trivago site goes offline what happens is you get this fun little game and they'll say look don't worry you can it you dirty your settings are saved we're going to get you back online just way and you know dead zones happen all the time and what they found is 67% of users came back to the experience that's quite powerful right I mean you try pitching back to your boss we're going to work on a front game but it worked you know and these are the things that we need to try start doing more of so like in summary you know reframe the problem think about user perception keep navigation clear and simple avoid blank screens show content as soon as possible and always parked the plane further away from the terminal I'm not done and you just clapping whiskey I am sort of done so I love giving away free stuff we did a book with awards calm a collaboration it's about speed as more stuff about research a lot of technical stuff so you're engineer you'll love this if you work of Engineers please do share with them it's a PDF yeah this is a book on the progressive web apps it's a website but not a PWA no but you can download please do check it out if you're interested in these features and if you're UX designer don't bother clicking on this next not worth it but if you're not and you're interested in UX or your work of people or I've got a free course on a skill show that you can just take for free so with that I say thank you so much and hope you enjoy the rest of the show

Channel: awwwards.

Views: 29,483

Rating: 4.9675384 out of 5

Keywords: design, web design, digital design, designers, UX, business, marketing, ted talks, design talks, awwwards, awwards, awwwards conference, awwwards conference amsterdam, digital, designer, technology, UX design, Google, UX Designer, UI, navigation, performance, web, apps, mobile, research

Id: Drf5ZKd4aVY

Length: 23min 44sec (1424 seconds)

Published: Thu Apr 09 2020