Hi. Everyone and welcome. To our newest, hackathon. On air, usually. We talk a lot about web, performance. But. This hour we decided, that we want to dedicate purely, to design, and UX and as. We promised in previous, episodes. We try. Really hard to get experts, in. The, room that you, usually won't see so this, time we invited, Claire, and Emily to you and specialists. From out in you who, are joining us and they prepared a deck and they will talk you through. Common. Design practices, and how you can improve your X on. Various pages and through all verticals, and. Yeah. I would like to give. Over to Dennis, who's sitting in Dublin. Everybody. Hi from Dublin thanks. Tom for the intro yeah. Just very briefly as always, if you have questions please let, us know in the live chat that's what it's there for and, also. Please let us know if you if the audio is all right if you can hear us and. As. I. Said before if you have questions, after. The scream scream feel free to add. Us on Twitter and ask questions, there as well and. Now without further ado that's handed over to San Francisco to Emily and Claire. Hey. Everyone, my name is Emily Ferdinand, II I am a mobile specialist. I specialize. In, Finance, clients, and, my. Name is Claire Elmer I'm a mobile, UX specialist. And I work with our top growth segment across all different, verticals, so, really the whole, spectrum so. Happening us today. Thanks. For joining um yep should we just jump into the content. Yeah. Great so what we want to walk you through today is a, brand, new type. Of event that we've been running we've done four of them so far and they're called mobile UX design, sprint workshops, so. The purpose of our. Presentation. Today is to share with you a lot of the best practices, that we share at these workshops, and then, also give you some more information on, if you wanted to run a mobile design expert workshop within your own company so, that's the the goal of today. Sounds. Good and so I wanted to start off before. We get into the actual processes. And the content, just talking about. Why we specifically, focus on mobile. As. Well as mobile UX and, the. Number I really want to call out here is about 62%, of, people say. If they have the negative, interaction. With. Your brand on mobile, they're, actually, much, less likely to purchase, from you in the future and especially, because, mobile is really a lot more upper funnel people. Do a lot of research, on mobile they may not be familiar with your brand so this is your brand's chance, to. Really win them over and by making sure that your mobile UX is really, streamlined, it helps the user you, know complete the action find, the information that they want. That'll, really help you know making sure that people, move cross device as well as are able to convert and. Just. A reminder that we, really. Urge you to not think only about your competitors app so, the, companies within your own industry, or even within your market but. Think about every single brand experience. That your brand is being compared to so. When you think about the UX of Airbnb or Spotify, even, Amazon, Google these. Are the services. And the companies that your, potential. Customers use every day and these, are the interactions that they're comparing, your brand in your mobile site to and. So. Briefly I want to talk about the design sprint methodology. And how you can use this in your company so, the, design sprint framework, there's, a lot of different companies that do design sprints but. The, Sprint, framework that we use was started at Google Ventures and. What. Is a design, sprint is basically, it's just a framework for answering. Critical, business questions and mostly. Product. Challenges. Or product, launches, through. Design. Prototyping. And testing ideas, with users really. Rapidly. So. A lot of the time a design, sprint when you think about you. Know your product roadmap.
Usually. Mud so you know maybe you have a long term roadmap of six, months a year but. A design sprint is actually a much shorter, time. Span so it typically ranges three to five days, and, really. Condenses. A lot of the work that's done to. Really solve challenges. Quickly, and. Really iterate. Learn, id8. And then go through that process again to get, to a final result that you can test. And. So. The. Design, sprint if you're not familiar is, really kind of centered on this divergent. And convergent thinking. So. You can kind of see this in the the, triangles, that, we laid out but. These are really the different days or, the different phases that, you would go through if you're you're going, through a design sprint so. Really what you want to do is, go through throwing. All of the information out there and then, deciding, on what's important, then, throwing all of the ideas out there and, quickly deciding, on which ones you want to work on then. Prototyping. As much as you can and testing. Really quickly so. You can kind of see this this, divergent. And convergent thinking, it. Really gets you to an end results, in a five day period. So. I'm briefly going to talk about the five phases, and, how you would use each of these phases in a design sprint even though we're not going to go through all five. Phases in the hour today we want to get an understanding, of how. Each phase works, so. Typically. If we, divided, this into a five-day spread the, first day is understand. And this, is where you have basically, throughout. All the information, related, to the problem you're trying to solve so. You want to gain a deeper understanding. A. Lot of times this involves. Looking through analytics. Inviting. Folks who, you, know are really familiar with the problem, or different aspects, of the problem to give lightning talks. And. You might do some exercises, like affinity, mapping, to. Understand, you know how, can we group some, of these solutions or, problems, or pain points that we're seeing, so. This is the day where you get all of the information out on the table. Second days where you sketch so. This is you know thinking about your, user journey, and potential. Solutions based, on all of the things you uncovered, in the day before so. This is really brainstorming. We always say, you. Know no idea is a bad idea you just want to get everything out on paper, and. We really do recommend doing this on paper as much as possible is. The fastest, and easiest way to make sure everyone is involved. The. Third. Day is decide, so, basically. Sharing, out all of your ideas and going, through prioritization, exercises. So. Probably, the sketch day you come up with a lot of different, solutions a lot, of potential ideas and this, day you want to actually narrow down to what your the couple may be one, two three ideas. You really, want to focus on, testing. With the end users at the end of this process. Day. Four is. Prototyping. So this is why you really want to make sure your. Design team is involved, as well, as probably folks from engineering, and marketing to really sign off of whether the. Things that you're working on prototyping. Are feasible in real life, but. The end goal of this day is basically to generate a prototype, maybe. Be a clickable prototype. It could even be a prototype on paper. Something. In InDesign, or another. Kind, of prototyping.
Service I'm and. Incorporate, those technologies, and best practices, and then. The fifth day which. We don't do in our workshops, but is the most important, part is really. Getting feedback and, testing, with your users so you want to make sure that you are testing every, single thing that comes. Out of the design sprint, process. And. Basically, what happens is you want to make sure what you're building and what you're launching actually, works for your users so. This. Takes this really long product development, or maybe product, change process, and brings it down to three to five days where you go through all of this and come, out with something at the end that you can at least really test some. Hypotheses, against. The problem you're trying to solve and. So. Typically, when we when we run, these workshops. Especially. Because we focus on mobile design we. Also focus, on the conversion, experience. Because, we see that this is where a lot of the advertisers. And companies that we work with have. A, lot of trouble of helping their users convert, on mobile. So. We typically go in and we talk to our, advertisers, and the companies we work with about improving, the conversion, experience, for mobile users that's, the the problem statement the goal and then, the outcome is to generate, a prototype, with. This improved, conversion flow. Incorporating. All of the technologies. And best practices, and try. To test, and validate that within the next 30 days. And. So. This is a sample agenda from the Sprint you. Can see that we start with, introductions. Getting, everyone in the team just. To start talking it's always nice to do an icebreaker. Especially. If in your sprint you have folks from different teams who might not interact all the time like someone. For marketing someone from engineering, someone, from design, great. To get the creative juices flowing, you. Always want to make sure that you really Center on your problem statement so we talked through that, then. We get into the lightning talks which is that understand. Part, of the design sprint and so, today we're actually going to be going through the Lightning talks that we frequently give on conversion. Principles, form, optimization. Sign-in. And payments, and then a quick one on speed and, then. The rest of the day morning, typically, in our workshops is for some of those exercises, that, help with the understand, and decide so. We do an exercise called how nightly we. Do affinity, mapping, which is grouping, a lot of the lightning talks and potential solutions and. We do user journey mapping and, then vote on what, we what, the team thinks, is the most important. Things to tackle during today in. The afternoon we sketch and we prototype, and then, at the end of the day we go through a sharing. And feedback session, so, even. Though this, is only one day versus, a three or a five-day full sprint you can see that we basically get through a couple, you know top. Specs of most of the. Days and sections, ready. For you guys to go back and finish that five that fifth section which is test and validate and, we'll share more at the end about resources.
But We have a YouTube, channel where, we walk through all of these activities, that Claire has mentioned and show you what you need how to do it so, that you could potentially run these within. Your own companies and. With. That I'm going to hand it over to Emily to start off our lightning, talks great, alright so we. Wanted to begin with conversion, principles, which is the idea of getting, someone, into your, conversion, flow so once they land on your mobile site how, do you get them to take that first action, and begin the conversion process. I've, six, best practices, that I wanted to share with you as we go through feel free to pull, out your phone take a look at your own site see. Which of these you're doing and which ones you could potentially put on a testing, roadmap, the. First and I would say for, most in, the easiest is, to have a clear. Call-to-action, above. The fold so, I've tried to include some examples, here of sites. That we think do a really good job of each of these principles in. Kara. We're just showing you they have a clear, bright. Very. Obvious, call-to-action all above the fold and matter what device you're on so, this is something that I think every, company should do hands down no matter who, you are. If. You. Wanted to take that a step further what. We're seeing as a new, and I think very successful. Best, practice is using descriptive CTAs, we've. Had a lot of the next, submit, just, kind of very mechanical. Call, to actions, and people, are getting sick of that they want a little bit more of a personal feel, so. Using. A descriptive, CTA to tell. Your, customers. What they're doing next just. Adds a little bit of personality, to your site and a little bit more guidance for the user so for Geico this Geico example you can see, this. Is got a quote then, you start your quote and then you continue to purchase so, you get a little bit more flair I would say then just next. Next, next. Additionally, when it comes to mobile specifically. It's very important, to give your users choice, that. Means not just giving, them one call-to-action, and forcing, them down that particular path, but. Also giving, subsequent. Calls, to action that you, mark as you know they're but a little bit less important, so for these examples, you can see the primary call-to-action. Is blue and it's bigger you, can add to cart or you can get a quote but. Both of these examples also, give you other routes, if that's not what you want to do at that particular moment, so you can find a store add to wishlist call. Progressive. Find. An agent, we. Often see on mobile, that folks, will send someone to let's say a lead form and then, get rid of the menu get rid of the link back to the homepage through, the the, logo icon and that, forces users just to leave if that's, not the path they want to take so, instead of forcing users down one path or, making. Them quit altogether you. Want to make sure you give them options so they can find the path that's right for them at that particular moment. Cross. Device is something that we, see more, and more users wanting, to do on mobile perhaps, it's starting, a large, process, and you're in the research phase and you're not ready to commit. Yet or. You, know you're just have a short amount of time and you want to get started, so. To do that there's a few, great ways to do that the first is to email, yourself the information, that you've started with the second is to always have a call button there's, nothing more frustrating to, users than when they want to call you they're on their, phone and they can't find the phone number and the phone number is not clickable so.
Making It easy for them to just pick, up the phone they're already holding and give, you a call is something. That's very very helpful to users and usually, converts better from what we see on the back end, do. You want to show the example about cindy's yeah, I think zoomies is a great example of, someone who does this really well, thinking. Specifically, about their, core user so. I don't, know how many folks, are familiar with zoomies but it's basically a, teen. Or tween, kind. Of skate, streetwear. Store. And so their key audiences, basically, folks, who are around the age of maybe 9 to, 15. And. So they noticed that a lot is there they. Were getting a lot of traffic on mobile they were having a lot of people add to cart' and then, no one was checking out and. They thought you know maybe it's because kids, want to come in store, but, then they realized what was happening, was that all of the kids had cell phones but. None of them actually had credit cards so. They, could shop all they wanted and then they were basically sending, their parents, all, of the things that they wanted for their parents, to buy online, instead. Of having to go into a store so they actually added this email my bag so, that kids, who had phones could, easily shop, you, know put together their cart and then email it to their parents to then buy so. This, is a really, great example of how they're thinking really, critically, about how their users are moving across device even. Between members, and. So it's a really great use cases of how to think about this critically. Another. Easy, opportunity. That we've seen a lot of folks decide, to test in the mobile. Design, sprint workshops that we've run is just, adding the value props at every stage of the funnel so giving. Users a reason, to continue on, in, the process not. Just in the beginning at the end but throughout the entire experience. So, here are a few examples from, credible of their homepage their product detail page their, conversion, funnel. All. Of these lists different you. Know value props that they have it's a great place for them to promote what makes them special and unique and also. Just gives the reassurance to, the user of why they should keep going and why this is a great choice for them to make so, this is an easy win I'd say for a lot of folks to test you already know why your company is fantastic. So. This is just a good opportunity for you to share that with your users one. Thing too is I really like that they think, a lot about mobile formatting. So having, bullets, you, know not having a big value, prop paragraph, but just knowing that people's skin. And. Then. Last, but not least another, great, one to test really quickly is using, urgency, and social, proof to, help narrow down decisions, one thing that really stops users, from moving forward with purchasing, we find it's, just an overwhelming amount of options so. This is a really nice way to narrow, it down for, your customers, to help them choose so. This is a little bit 2-fold the first one on the left is, the. Sense of urgency. Perhaps. You've booked with sites like booking.com in, the past something like that where they just have this, huge sense of urgency that you feel like if you don't book this room right now it's, going to be gone forever and that's. Probably very effective, so, there's a few examples, going on here to call out they have the, in high demand they have read them estimation, points they have only two left they have a deal, going and there's. A lot happening that you could test from here to, just kind of let users know that this is a valuable, commodity that they need to move quickly.
When. It comes to narrowing it down it. Can be as simple as just highlighting, staff pics or something that's new, favorite. You. Know most commonly, purchased whatever, that may be and that, just helps users say like okay I know that other people like this product, maybe I'll just choose that one too and that, can make the shopping process a lot easier. So. With that I will turn it back over to Claire to talk about sign-in and payments. Awesome. So, now, the person. Has explored your site they understand, your value propositions. They're, ready to take whatever, action that. You've described, to them and made super, clear, a lot. Of times especially. You, know across industries, the companies we work with have either some type of sign-in, or payments, process, that goes into that conversion, flow so, either you need to get some personal information you. Need to pay and this can be a huge area of friction, for users, so. The. Reason, for abandonment during checkout, the. Number, one thing is this site wanted, me to create, an account only, second, to two long and complicated, checkout, process but. Creating an account is a really, frustrating. Process. To go through especially if you only plan on buying from someone one time you. Know maybe you don't know if you're bought in for that second purchase, and. It's, a really big pain point especially on mobile and, I'm. Sure a lot of you have gotten to a screen and thought through these things which is like can I skip this, what. Is my password typing, is really hard I have super fat fingers, the. Most common password in the world. Is one two three four five six if. Anyone knows the second most common password, it, is password. And. So we're really bad at this right and a lot of times we forget which, is technical, overhead, for you all so, the, first thing I always talk. To retailers. About especially. Is. Allowing for checkout as guests most. People will abandon a checkout if this is actually not an option just because, especially on mobile your time constrained, your resource constrained, folks don't want to go through the process Patagonia. Does this really well they actually by default, have, everyone, check out his guests and this is in their cart you can see you. Are checking out of this guest if you really do want to sign in and. Maybe get some saved information, or signup you can but, they really default to that guest checkout process, Michael. Kors. Additionally. Has kind of the the more common one that we see which is I think the. Overview, of all of the processes, but, I like that they do a good job of keeping all of it above the fold so. You can get a clear overview that, guest checkout is an option. The. Other thing that people frequently. Forget if you are going to make someone sign up for an account even. If you're not is at, a value, prop around why someone, should create an account so are. You able to save, articles are you does. It get you over worth program, or, ability. To manage with wish, lists save personal, information, those are some of the really common ones and, what. I like that petco does in the middle as well is that even, if you do check out a guess as guest. It says account. Is not required to complete your purchase however, you can enter, a password on the final checkout page and complete your register, so. Basically. Making, it really easy if you want to create an account after all that process but they don't make you do it upfront. Signing. Up with social accounts is a really easy way to remove. Friction friction, in, the conversion, process. So. You'll frequently see either these buttons, or, maybe smaller buttons, on a sign-in, or a sign-up page that, allows you to link. To an existing social, account and create a tokenized. Password. Where. You can log in. The. Other thing that is really frustrating, when signing in is if you you, probably have a couple different passwords, that you use you know one that has all lowercase one, that has an uppercase, one, that has a weird character in it so. Actually tell the user what they, need to put in so, if it's an uppercase letter a lowercase, letter and a number and, it has to be eight that's, a lot of things for the user to get sacked unless you prompt them and tell them what they need so make sure you're using password, hints and, this. Is usually in the signup process but. I also think it's something you can do in this sign earth it's in the sign up process but you can also do it in the sign-in process so.
Even If someone has an account telling them hey use your password with. One uppercase letter and a number and, they're, more likely to remember and get less frustrated, when they're actually signing into their account. The. Other thing that is super frustrating on mobile I, typed. In my email why, do I need to type in my email a second, time I know my email I can see it right there so. Don't. Make users confirm, account info. Don't. Make them duplicate. Things as. Much as you don't have to usually, they know what they're doing even with password, just making it possible, for the user to see their password, as an option instead, of having to type it in twice. And. There's. Some really cool things that. Folks at Google, have been working on to really. Ease this process, so. One. Tap sign up and auto sign in for the mobile web just. Launched recently and you can kind of see this gif over on the right, we go which is one of the first partners to implement it but. You can see at the bottom this little drawer pops up and it says hey, are you Leslie you, just tap and. Say yeah I am and it. Continues, to the site logged, in and. So. How does this work for new users as long. As there has been a, cookie. From a Google platform, in the last 24, hours, so that's Gmail, YouTube. Chrome, any of, our products that have over a billion users, if. You have been on any of those platforms and, been signed in in the last hour you have a cookie, we, know it's you basically. That's what triggers this drawer and you tap and it auto creates, an account for you so, if you've never had an account you can create one really, easily kind, of the same way you would with the sign-in, with Google button but. Just making it even easier and, the. Nice thing for returning. Users is that it actually Auto signs you went across device so, this, is great if you have, a longer purchase. Cycle, you. Have a longer conversion. Flow if, someone creates, an account on mobile or maybe gets through the first step adding, to cart and they, go back on desktop, and they'll, actually Auto be signed in to your site as long as they have been on a Google platform, on that device, in the last 24, hours so. Really, cool and that most, advertisers. And, folks that we work with actually see more cross-device, activity, because they have more people logged in as. Well as it removes that friction of creating an account and. So. We are actually saw 10x account, creations, after enabling this and. HotelTonight, saw. 23. Hire-purchase. Conversion. Rate for, users, who are signed in so. Some. Really good initial, findings from this and if, you're interested in learning more I would just say go to. Search. At Google for one top sign in on Google developers. Now. Sign-in is frustrating, but payments, is the last step this is usually right, before you're finished with this process we also want to make this as easy as possible and, there. Are over 2 billion mobile. Econ. Transactions, a year and this is growing at a pretty rapid, rate so, checkout, is really the last opportunity. Where, you can make a really good impression make. Sure someone, doesn't have that bad experience. And. So. A couple easy tips make. Sure you show the security, of your site, this. Could be as easy as a. Lock icon and, saying 100%, secure and authorized there's. A lot of site seals out there especially. In the finance realm, folks. Talked a lot about encryption, and how, secure, your data is so. Think about your user and what they might care about but. Make sure that you're talking about security somewhere, on your site clear, one question that I feel like oh I think you're gonna get there to get a lot is which is the most trusted. Yes. Yeah. So especially. In the e-commerce space there, was some research done. The. Asked, you know which is the most trusted seal I think Norton is the most common, and. Google consumer surveys being. The next one I. Think this might be the US but, these, are some great sales some are free some are not, but. Something to think about especially in the e-commerce space, as. Gaining. That user sense of trust. The. Other thing that you can do instead, of having people choose, their credit card number if you are using credit card is that, you can auto detect, card type via, the number so all these is start with four one four seven why. Do I need to select, Visa if you actually already know my credit card type when I start typing it in so. That's a really easy way to get rid of one step or one a couple, clicks when, you're starting that credit card process. The. Other thing that you can implement is Google pay this.
Was Just relaunched, across. All, platforms. So. As. Long as you have paid for something with Google or you have saved card. Or payment information to your Google account, when. You click this is the new and, UX, used. To be, kicked out into, an app if you had Android pay this, is now cross-platform. And, crossed. So, if you click in you basically get access, to all of the personal information you have saved with Google so you can see visa, account. Information as, well as shipping address and it's just a couple clicks to, enter in that information, so. The really cool things about Google pay there are hundreds, of millions of cards on file. Saved. To Google accounts, and it. Also allows. For access, across all of googles platforms. Including. The assistant, so, the Google pay API, is the. Way that we are bringing payments, to new, platforms new, devices, in store assistant. Desktop. And mobile and so. It's basically one API that you need to integrate and then can be enabled across, all of these platforms. It's. Very, little in terms of lines. Of code it's, available globally. So just check with your processor, to make sure that it works with Google pay, and. There are no fees so, it's, it's, a free platform, that just is basically the interface, by which to get the, information, you. Still have to use a processor, and a gateway the same you would any other way when you're taking payments, so this is just an API that sits on top. And. So, the, folks who have implemented this it just launched, maybe a month or two ago are. Starting to see really good results, so, spot. Hero was able to actually get this launched. Fully in one week, I know, Shopify, actually, just enabled their integration, where you can check a. Check. Box to, turn it on if you have Shopify, and I know other CMS's, are working on that. HotelTonight. Saw that folks who paid with Google pay saw it were 64 65, percent, more likely to complete their booking flow and, at. B&H. 68. Percent of Google paid transactions. Were from new users, and, 24. Percent of, those chose, to create an account afterwards, so. They're getting more account creation as well as higher conversion, rates and. With. That I'm gonna hand it over, back. All right I hope that this, gift translates. Internationally. But we usually start talking about form optimization, and we talked about it in the frame of removing. Friction there's, a lot of friction especially, when it comes to mobile experiences. So how can we make that as smooth and easy process for users and, one. Way to visualize, that is with, a slip and slide so, a slip, and slide if, you haven't, used one in years perhaps is. You, know you set. It up on the grass you run the water and, then you get a full running start and, you hope, to slide down the slip and slide and have tons of fun but. Hopefully, this works across the DVC. But. The reality, is that sometimes, it doesn't go the way that you want you, take that full running start and then you absolutely, just get stopped, and end, up with your feet over your head so, we're trying to make this a much smoother process and avoid this slip and slide experience. It's. A pretty informal. And. This is really important, because a, lot of times when things are too difficult there's too much friction there too long we just leave, you're leaving users that you've paid to get there that have gone through this shopping process. And. Then you're losing them at the last second so we want to help you avoid that as much as possible with a few of these recommendations. So. The three things that we'll talk about in terms of removing. Friction is taping which is, has. Always been will. Likely continue, to be hard on a mobile phone so how can we remove it as much as possible. Making. Sure forms aren't unnecessarily. Complex, and then, no. Personalization. Which we talked about earlier how can we personalize, the experience and make it fun, it's fun, as possible for a forum. Okay. So. Removing. Typing. This. Is the best way to remove, friction in my opinion is just to remove it altogether to. Take, the questions out so step one is remove, any question, you don't need for.
Example We see things like salutation. Do you really, really use in need salutation. Or can you just delete that field, for. Any field that you must have try. To use autofill that allows the user to just tap, on the information they already you, know selected, and prefilled, so they don't have to type it in again or, there's. Additionally, it's so for example in the US you can you zip code, enter, your zip code and that automatically. Can fill in your city in your state so, for us in San Francisco, that's a lot of typing that you save by entering in your zip code information. Another. Way to do that for address is using the Google Places API so. This will start, Auto filling your address as you're typing and hopefully cut down on some of the typing that you need to do and also, make sure that you enter it correctly. This. Is another one similar to call the action above the fold that has no excuses. Using. The correct keypads, this is something that everyone, should do from, what I understand, it takes maybe five to ten minutes to implement, and it's. Becoming just a pain, point for users that is very easy to avoid it, also just shows the users that you care that you've put this effort, into your mobile site to make it easy for them so. I know that zip, code might, not be available, for everyone to use the numeric keypad internationally. But, things like phone number credit card social, security number birthday and month and date those are always going to be numbers so, show the number keypad. Similarly. There's an email keypad, room you're asking for email as well so you're not going back and forth between the ad and the letters, and the dot and the letters again I think, another thing that they do really well in this example from Geico, for birthday, so, there's a lot of ways you can put your birthday in so they have placeholders. In each of the fields exactly, how they want you to input it so, you know that I need to put month first then date then year which has to be four characters, so it makes it really easy instead, of having those like dropdowns, where you're scrolling for however long to find your birthday that, is the worst I we, get this question a lot and I would say in my opinion, the best way to do, birthday, is, prompt.
The Numeric keypad with, this layout. And then use auto advance so as soon as they type in twelve, it auto advances, them to the day so, they literally just have to type in these eight numbers, completely. Agree. So, making forms clear and simple sometimes, we make things harder on ourselves than it really needs to be so. To do this we talked about removing optional fields, you can consider having full name instead of first and last if, that works with your back-end system, you. Can have billing the. Same as shipping checked, by default so that they don't have to enter their address twice and don't. Ask for the same things multiple times Claire, mentioned that already and asking for email twice and password. Twice, so. In general we see it's a best practice to have about six to eight fields. So, just keep that in mind a couple other things I, wanted to call out in this example, we. See a lot more folks doing, the field name inside the field itself versus, above that just makes it more condensed. The. Best practice, here I believe, is to type that in and as when you start typing to move the, field, name up to the top left corner or the top right corner ASIS so. Users can remember what they are typing, in but. You're not having it just static above it above the field that. Allows you to have the call, to action again, always above, the fold so that the user knows they're not going to go on forever with this form they can always see it at the end is in sight. So. Here's an example of, you. Know not, what. Not to do really so we have an optional field at the top we have, both. Outside. And inside, the field so this looks like it's twice as long as it really is because, they have first. Name twice last name twice etc, and. Then you don't, see any next, sort of button so you don't know how long this form is actually gonna be yeah, and, if you're gonna do it this way i would definitely recommend not, duplicating. And putting, the input. Text put. Something like john smith or, something, that's different so it doesn't look like it's just repeating, on, what you have there. Pagination. Is really important, if you have a long process, I mentioned I work with finance clients some of these forms. That they ask folks to fill out or sixteen pages something, like crazy, like that, it's. Okay to have multiple pages but make sure that you let, the user know that making progress a couple. Things to note here is never. Start, at zero so. When, you are going through this process I, believe BEST, WESTERN starts. You after, you pick your hotel you show up here and you're already on step two or three and it, makes you feel like oh I have accomplished something I'm almost done so. So using, our show. Users where they are in the path and make, sure that you're starting. Them off on you, know at least, step two so they don't feel like they're starting over from nothing when they've already done, research to get to this point a. Couple. Last quick, wins real-time, validation, there's nothing, more frustrating to, me than when you go through an entire form and press submit and a, few things happen either, you just can't press submit and you don't know why or it, just kicks you back to the top and you have to go through and try and figure out what you did wrong the. Worst worst is when it deletes everything that you've, already done at that point it. Makes you start over so avoid, all of those with real-time validation. So, if you start to type in your phone number and only get four digits or six digits I'd go, to the next one it tells you immediately oh you, missed a number so, you can fix it right away. Last. But not least is personalization, and this is just kind of creating, then the. Idea that forms can, be fun at, least more fun so, here's a couple of really great examples I think the. First one on the left from lemonade, prom. Student says hi I'm Maya I'll get you an awesome price in seconds ready to go versus. Really this kind of mechanical, impersonal, language like submit. A form to get a quote, so. Here they have let's do this as the call to action on the. Right we have ladder life insurance, and. They. Kind, of turn this into what I think of as a bad lips so, you can fill out I am a man or a woman and I am X years old so, you don't really feel like you're filling out a form you feel like you're just telling someone about yourself in kind of a fun game, way. So. Yeah last but not least I will will, go quickly through speed.
And Which I know is a big focus area for a lot of the. Previous, hackathons. On air so we'll just touch on a few of why we, think, speed. Is a visual, designers, problem as well yeah and I. Want to focus on really the visual. Designer part of it a lot of times they think as designers, you know maybe some of you guys are engineers or, even G folks but. We design these beautiful, designs and then we don't really think too much about how it impacts, how, the engineers, do their jobs how the page loads, and. We want to think really critically about that so. 53%, of people will. Abandon, a site if it takes more than three seconds, to load I don't, know about the 47%, that, are sticking around I, don't think I have that much patience, anymore. But. We. Have a couple studies that really show. Why this kind, of three second. Mark especially, this is actually on a slower 3G, network, you. Can imagine it's even faster if you have higher 4G. Or LTE coverage. In, your country, but. We see speed, directly. Correlate, to conversion. Rate and bounce rate so the willingness people have to stay on your site to, move between pages and to convert, and. What I always like to point out here is going from something like ten seconds, to six seconds is great. You do see a little bit of uplift, but, where you get these really large and criminal gains is when you go from maybe, five to six seconds, to this two to three second. Mark and then again this is on 3G, and you, see this conversion, rate really really, escalate an increase, and this is with no changes, to design. Just. A note - we think of everything. To the left not to say that instant is it better but. This was just done on 3G, and nursing, can be a really high rate of 404, pages so, as that oh. You. Don't want to be the crying emoji that's, really. What we want to focus on um. So. This is a bit off. Sides. But, um really, when we're thinking about UX, and, the hierarchy, of what users want and what they need on mobile, speed. Is by far the most import, thing so. We surveyed and said you know which of the following things, are important, to you and 75%, said, that the speed it takes to load a page is the most important, thing. 66%. Said you know how easy it is to find what I'm looking for, which. I think goes more to design you know how we design navigation. Help users find the answers to their questions and. The. Last one towards the bottom only 24%, said. That the most important thing was how attractive. A site books and. So the system, internally. Using Google consumer surveys but. I think really shows that you know you could have the most beautiful, site in the world and if someone can't get to it it's not going to matter. So. I want to talk through three steps to ensure that your designs are speedy the. First one being creating, a shared performance, budget with your engineering teams. To. Really focus on what matters most when. It comes to performance, the second. You can design for mobile technologies. That are built with speed in mind so we'll touch briefly on amp, which. Helps pages load in under a second, and, check. Easy, tools before. And after launch you as a designer there's lots of tools even, for marketers and non dev folks to use to. Basically check and kind. Of keep your team in check on where your page stacks out either verse competitors, or vs. best practices. So. We talked to a lot of companies about a shared, performance, budget and. A lot of times what this means is just looking. At the metrics that your team consistently, looks at and every, one being, geared towards, those metrics, so, the, three that we really focus on a. Lot, of the time and I think give as best practices, are speed index so, that's a measure from. Webpagetest, org it's an external testing, tool that. Looks at the load of the above-the-fold content, and.
The Reason that we focus on above the fold is because it's, what really, correlates, to the users perception, of the, site being loaded so, there can be stuff floating below the fold there can be JavaScript. Executing, in the background, it's, not gonna really affect what. The user sees and feels as, the loaded. First. Contempo, paint is when we talk about a lot so trying to have it less than two seconds, on 4g this. Means that something, is showing up on the screen. Ideally. Something like a hero image. Text. A CTA button something. That the user can actually see and interact with and. I don't know about you my, most frustrating thing on mobile is when, I just stare at a blank screen for, five or six seconds, and I have no idea if something is loading or not so. That's, what this metric really gets at is you know how fast can you get something on screen to show the user that, there's content that's going to load and, this. Is one that the designers, can have, a lot of impact on which is page weight so, setting, a target. You know one megabyte, is, plenty. For, mobile but. If you were putting a 1 megabyte image you, have used up all of your performance, budget on that one image instead. Of all the CSS, and JavaScript. And fonts, and other things that are on the page, so, if you've set a limit and everyone, has to follow that limit then, you have to be really conscious of what you need to cut out or compress, or resize, to. Make sure that you're staying within that performance budget. So. The three biggest, problems. That we see when sticking to a performance, budget, the first one is images. Who. Knows how, big this image was when I downloaded, it from. Google Images this. Is a 4.5 megabyte. Image you can see it's pretty high def and if, you were trying to load this on mobile the, same size that is on desktop, would, take about 15, to 20 seconds for the whole thing to load it so be. Really, careful about. The images, that you're using and making sure that they're compressed, we. Recommend, 50 to 100 kilobytes max for, that's, like a hero image you. Have thumbnail, images and retail you, know 20, is, really, plenty. Large, and. There's ways to do, this really well like using responsive. Image techniques, loading. Different images for different devices as, well, as lazy loading, so focusing, on loading images, above the fold and then, lazy loading, any images, that are, below the folder that the user might not see. The. Second one is fonts. Fonts. Designers. Love fonts, you, can have really beautiful, pretty custom fonts and you're using an italic, and underline, a bold, a semi, bold and it. Makes your site look great but, I think designers, frequently, forget that each of those fonts is a different, file that has to be loaded and if.
You Use one, icon, from a font you're typically, downloading, the whole font, file not just the one icon so. Think really critically about. Why. Are using fonts if you're using a font I've worked, with a lot of folks that have like one line. In the footer, that's. Using a different font and it takes about you know three, seconds to load in is render blocking, so. This is a really easy fix not only on the inch side but also from the designers, perspective. The. Last one is CSS, I think, that we get really used to just adding, CSS in, and. Maybe not taking it out so much so, there's. A really helpful tool in chrome dev tools it's. Called the coverage, report, and. What it does is it actually looks at the CSS, and JavaScript, that's being used on a page and it. Shows you how much of it is actually not being used so. This. Sample that I took out. So, you can see who it is but. You. Can see that, 99.3%, of, that top, CSS, file is not, being used on this page so. That's a pretty good indication, that you can probably go back in and. Clean out some, of that old unused. CSS, you, do want to make sure it's not used, on other pages, but. The code coverage tool makes it really easy to just just do a double check and. See you know how much of this, is being used and devote, some engineering resources and time to going through and cleaning this out. The. Other thing that you can do is, consider. Designing, in, amp, and building, an amp amp. Stands, for accelerated, mobile pages and, was. Is an open source project that, was started at Google to, help, everyone create. Better, pages, for the mobile web and so. It uses certain, amp HTML. As well as amp components. Instead of JavaScript. To, basically create pages, and the, really key benefit is that you can serve those pages from the Google cache so. Especially, from search and ads we will actually pre, cache and pre render the, pages when the search results, are loaded. And so if someone types or clicks, on your listing. Or your ad the. Page loads in about on average. 0.4. Seconds, so, it's, lightning fast super. Easy to implement we've. Worked with a lot of teams on this and they're able to get it launched and maybe. One. Sprint two, to four weeks get. A page up to test so. I would recommend checking out amp project org, there's lots of case studies and resources, if you're interested, in, building. Amp pages or maybe transitioning. Your current site over to amp. Last. But not least, this. Is my favorite, new tool it was launched, at Mobile World Congress. And. What it does this is the mobile scorecard. And impact calculator, it's on think with Google and it. Takes chrome, user data or user, anonymized. But it takes the chrome sessions, and basically. Looks at you know how the users. Experience, them on. In, real time so. You can type in your domain as well as other domains, competitor. Domains any, domain you want and see how, fast your. Page loads for real users so, you can do. Some calculations on, what, working on speed would. Have in terms of impact on conversion rate and your bottom line. So. Just, to summarize, it up I know that we've covered a ton of best, practices, today hopefully, you've been able to take, away one or two that you'll be able to test on your own level site we. Suggest amy testing, everything, to, make sure that it does indeed improve, performance. But. Hopefully, have a couple ideas that you can take back and get testing, in just a couple of weeks. In terms, of next, steps as, I mentioned, in the beginning we, just created a new YouTube, channel that, goes through all the activities, that we mentioned in the beginning of the session so, if you go to youtube and search for a Google mobile specialist, that's our channel name and it, goes through each part, of the sprint the five parts that Claire went through one. By one so that you should have all the resources that you need to run your own sprint. Otherwise. We really suggest auditing your own site for some of these opportunities that you could implement whether it's testing. Payments, or just getting the correct keypads across the board we. Really encourage everyone to run a mobile design sprint it's a lot of fun we've had very very great success for, the first, four that we've run, and. Then test and validate see what works see how much you can actually move the needle on that mobile conversion, rate that we're trying to improve and last. But not least we would love to hear about your successes, or your questions or, anything, that we don't get to with the Q&A of this.
Hangout, So. If you would like to reach Claire and I and our team feel free to email mobile, does that mobile, design sprint at google.com. And. We'd. Love to talk to you. So. With that we have seven. Minutes left for, Q&A, if there's any questions, cool. Thank you very much for this nice, overview, hmm. Let, me just check I think we had a few questions but, everybody. Start, out with a I'd. Say fairly, easy one I'm Janice, asking, what you always recommend, using all numbers. For birthdate instead. Of the written out month their, go-to recommendation. Here a. Case-by-case. Decision. I think, numbers. Is pretty, standard, just because, it's the easiest, way to input, you. Can imagine like putting, in oh three nurses, typing, out March is going to be a lot faster you just really want to give the user expectation. Of what they should be typing so that's what I talk to when I said that the. Input fields, if you put em in that says you know you should type in two numbers, if you write, out March then they should they should put the date but. I think just be of ease-of-use that's, why numbers are more standard. Anything. With the scrolling I think, that can be frustrating, to scroll and try and find the right month. If it's pretty, selected that way so, always, test but we've seen numbers performed, with us my favorite, is when there's a date drop-down and it starts at 1900. Would. Really like to know. 110. Euros. Cool. Yeah maybe one, question for me would be so. Let's say I'm. A client and like I have my own business I'm gonna try, this out in my own, company. It's, there certain. Size because, I'm guessing we have like very, large companies, tuning in unto like I don't. Know 10 people companies, is there any scope or size you have to have or can like anybody start out with their first designs for like maybe their, suite. Recommend so we based a lot of this off of the book sprint, and they, have a reference there to Ocean's, eleven, where you want to have a representative. From, a different kind, of expertise. Area, all in the same room so you definitely don't need to bring your entire design, team or your entire engineering, team your entire marketing team you, really just want to have one, to - I would say representatives. From all across, the, folks.
That You need buy-in from so. Usually, in our Sprint's we have groups of five from each company and we recommend, one. To two UX, designers. One, developer, to do two tests for a technical. Feasibility someone. From marketing and perhaps a product manager or product, owner but. Essentially, you just want a representative from, each group that you'll. Need their buy-in - the former yeah I think the other thing that we also focus, on so that is really the problem that, you're trying to solve and is, it a problem that, is, adequate. For Sprint where, you need a lot of brainstorming and. Maybe problem, solving, and prioritization, or is. It something that's small enough where you can maybe like tackle, it in, a. Smaller. Group so, for, example if you're rethinking your, conversion, process. Uh dot. Is great for a sprint and so there's, lots of best practices, there's data, that you can dig through if you're, just doing you know form. Optimization. And you're only focusing, on that that might not warrant, a full you. Know multi-day, sprint, or even you know day workshop, or. It might just be, a day workshop to like knock that out so. You want to make sure that you're really solving, a problem that, needs everyone's, input, and. That has put, in multiple potential, solutions, that you want to brainstorm and act around. Cool. Sounds, good, one. More question from the chat maybe I think we have a few minutes left I think. This is quite, interesting, Arianna. Says this was great do you have any insights, a similar workshop for user in, experience. Maybe. Also tying to like can, a lot of these best, practices, like translate. To apps or, is this like a totally, different field, I. Think. A lot of this translates, to apps especially the best practices, a lot, of them are pretty common-sense I think, a lot of these actually, come from the app space, and have, moved to mobile as more, people find more value on the mobile web I, think. You know in in, apps. You can run some, you know do something similar in terms of your conversion, flow there, might be more native elements, that you can integrate or, look at material, design, but. A lot of the same principles and kind of heuristics, apply in same for the sprint methodology, that would be the same as well one. Thing we like to say is that everyone. On this call is mobile expert we all have phones that were on probably, five hours a day so. Sometimes, it's just a matter of going through the flow in, your own experience, and highlighting, where you there's the biggest opportunities. And from. There the sprint, methodology. And as Claire said a lot of these best practices, translate, as well yeah we. Focus on conversion, rate for our Sprint's but you could do you know the account creation process a user, journey for like your top five, percent of users who use your app the most advanced. Really exactly, shopping, Clos and finding your product, it's. Really just you know where are you saying. Any problems, and what are you trying to just solve for. Okay. I think we might have time for one last question. This. Might be a tricky one. Any. Best practices, for mobile, menus. For, navigating. 60k. Products. So a. Wide. Product portfolio, how to tackle this and mobile yeah. So I have. A couple talked to Lou I'm sure clear as to the first thing that comes to mind to me is Site Search when, you have that many products, you want to make sure that site search is available. That, it's easy to find and that your results, that you're sending back are very relevant so that would be my number one, I don't.
Also Just say submenu. Categories, we. Forget. The best practice in terms of menu. Items. I think it's five to, seven perhaps per menu so. You don't want to drop down and have 20 different menu options off the bat you want users to be able to kind of guide, them through the process of the. High level categories and. Then drill down from there to find what they're looking for, yeah I I think that, those two are two, things do we touch on the most site search is super important, and you want to be using things like Auto Feld or. All those suggestions, for products, and categories, making. The menu is really, easy to navigate from, like. Category, to subcategory. To even one more level and I, think the only thing that that, it would be in addition is, using. A filter and sort is especially. If you have that many products frequently, overlooked, and is, really, important to help you find what you're looking for on mobile especially. When we're time constrained, so. I would say definitely look at some of the leading e-commerce partners. You know if you look at Amazon they. Have tons and tons of like different filters, per category but. Just making sure that the top-line filters, are there, that your users care about and that they're really easy to use so like drawers and UI, elements like that. Yeah. I think with that we're pretty much over. Time already, thank. You very much for this great presentation. Again. I think we will also link, other. Videos, in our common, so you. Have an easy access to the following videos, I think they're also a bit smaller so like, you can have a step by step guide which, is really nice my, a sneak. Preview there. But. Yeah thank. You so much, every. Birthday till. You do to dumb maybe, you have another question before, we like close. So to stream, we're. Getting. Questions. Please feel free to email us.
2018-03-28