Great Travel UX on small screens
Everyone. Amidst, Amadeus again and welcome to our last, and final hackathon. Therefore this year. We. Thought we do, a little bit special. This time and we invited two. Experts, from the u.s. Chaney and Erika who. Are gonna talk, about travel, next. Most. Of you know and that, travel TX is kind of like a special case on the mobile web it's. Customer. Journey and. We want to discuss, the topic and see how. Can we optimize each. Step of the funnel so that we can provide, a good user experience. So. Today. We have a lot of people in the stream so it's myself it's Dennis in Dublin it's chaining Erica in the US so we have to switch back and forth a lot so if not everything goes according to plan we. Apologize. Already as. Always towards. The end we will, answer any questions you might have so type. Away any questions and. You. Know at the end if we have like 10 minutes left we'll pick them all up and try to answer, them as good as we can so that's. It from me for now and I'll, give. Over to Dublin, to Dennis, hello. Everybody thanks, Tom just a quick hello from Dublin, also. To act on Tom's. Intro, and please let us know if the, audio is all, right and everything so just type, the chatters if something, is not working and we'll. Fix it as quickly as possible. Well. Yeah, I think that's already everything, from me today because I want. To like introduce you to our mobile experts, from the yes so I'm first, up I will introduce you to Chaney who, hits if, I'm not incorrect in New York so. Let's send it over to Chaney hi Chaney all, right thank you so my name is penny I used, to sit in New York so you're partially, correct usually. Based in Mountain, View buy in the Bay Area and, right now I'm dialing in live from the Washington. DC office but. Nice, to meet everyone, on stream, I am a technical consultant here, at Google, working on all things, mobile web firm progressive, web apps who are awesome. You know Web API is, accelerated. Mobile pages and. I work a lot with travel. Partners and that's, why we're here to kind of dive deep, into some of the common you know optimizations. And issues that kind of has come up in some of our past conversations. And. Hi. Everyone I'm Erika, trechie I've been working at Google for. 11. Years all in the travel industry I am. Mobile, strategy lead which means that I help travel sites think about their overall mobile strategy, and also. How they can improve their mobile experience, for their users and. We. Haven't had a, hackathon. On air that was dedicated to a specific industry, in the past, and so. Why are we doing that we, think truffle well I personally think travel is pretty special as I said I've been in it for a long time but. Trouble has a few unique. Things that set it apart and. Move. On go ahead and start, us off here on the slides but one, thing that's distinctive, about travelers, is that. They. Want to accomplish a task quickly, it's. Not just about the booking it's also heavy on research even. When they're researching they're really task oriented, you can see on here that you, know over 90, percent of travelers. Using. Mobile devices will, switch to another site or app if their needs are not, being met they're. Very picky they want the. Experience to be very good and seamless so. When, thinking about that as a brand in a site and it's important, to reduce that friction. To. Assist the traveler whenever they're you know accomplishing, a task and, it's whichever task they want to do and. Another. Thing to think about is the travelers are on the go they. Are you. Know going from having mobile as one of their devices to having it be their, only device travelers. Have a clear time when they're a hundred percent dependent. On their mobile phones and over, 60 percent of travelers. Across. A group. Of countries that we researched. Agree that they always use their smartphones. When they're traveling and thinking. About what this means as a, site, it means, that they could be in flaky networks so when you're traveling you're often an air and at least here in the US, Airport. Wi-Fi is terrible, if, you've ever had to try to do research when you're at an airport you will agree with me that you need to make sure that your site is working, on these flaky or very slow, networks. And they have higher expectations travelers. Do because they're not. Always in relaxed, settings they're not always at home they could be you know like at, the airport or in a rental car moving around so. It's important to think about that when designing your mobile web experience.
Network And. Then this is one of the key differences to, I said I think that normal. Web sites have two native applications, when you do a site search there's. An expectation that the. There's. Some work being done in the background or, you could click on I want looking more like in this in this Japanese example here I want look, at more of this this, I'm not sure does a hotel or air B&B but I want to look more see more of it typically, a web site would say I got, your user input, I'm gonna do nothing I'm just gonna hang here you can keep scrolling this page you, might see this blue bar the top that's slowly moving until, suddenly maybe like an arbitrary three, to ten seconds later depending on your network connection we're going to flash that screen white and, we're gonna take you someplace different, it's basically. As if you teleport, the user if you. Get teleport somewhere completely different let's, say to some random town, in Germany. It what was your reaction you're probably like what. Does happen where was I I thought what, was I doing again those, thoughts again are getting, in the way between you and completing completing that key that transaction. I think, Flipkart's a progress web app here that kind, of tries to you, know think about the user journey a little bit more well, there's going to be parts that you click on where there is going to be delay but. Some, things don't change, you want some eight visual, anchor elements, that load fast and stay on screen, such, as you know the app shell the logo. The search bar so that the user can always bail out if you, know they feel like well this search is taking too long that wasn't what I was trying to do in, the first place and when you click on that you know that back or that hamburger, menu it can they go back to exactly where they work so you can encourage playfulness. Right, they can they can browse they can not know exactly. What they want look, around dive into the detail come back to it to generic search results page before, going any deeper, so. This. Is one kind of way that single, page apps as, well as new technologies, like service, workers can really help you can the build these types of interesting, experiences and it's you, know this takes organizational. Changes. Potentially a lot, of the design teams that we see they design you, know page by page mocks, so you're looking at the final, mock. Of the results page file mock the item page so we encourage really, everyone, to work with your design to, think about you know are there ways to you. Know you know look at the transitions, between something, to figure out the null States if there are no no results, how does that evolve, potentially. As a results come in and then think about how that can help a user understand. Going, from point A to point B because again go back to the journey it's an analog line not, a discrete. Line with a bunch of individual, points that. Being said I think at this point a lot of people I can't see that live chat with sometimes.
Some People say well we can't do a single picture application, because it's, complicated, I'm, just gonna it. Might, hurt SEO or something, something like that and you, don't have to necessarily create, a single page application, to recreate this effect law. And multi page application, so in this case is Ella Mia sorry, if I'm picturing that name over over. In China and they were able to build a, interface. Where you, know by again by its just separating, you, know the, static content from the dynamic content and being able to cache that very basic. Skeleton. Screen so that you can see on the right side it's a much slower CPU that. Requires, a full page load requires. Pulling, in data from the network but, they're able to get that instantaneous, kind, of feel for a user so. That they don't even, Seve the. Less. Processing, power that their mobile device might have because, of you know fixed elements because of a smart, loading screen because, of skeleton, screens that shows you what information should be there an icon, lines attacks or things like that all these small little affordances, really help a user figure. Out and keep, their bearings as they move through your travel application. And. So. One. Last point before I turn it back over it's an area for the talk a little bit more about the user journey is I think. Another common the best practices, here, is on the right side what, was wrong with this travel site I think. A lot of you guys on the screen I'm probably thinking of well okay the fonts are probably different it, looks like, things. Are just not consistent a, lot, what do I actually click on if I want to select a flight. Like. What happens if I click is, is that a button, is that a text, field I we don't know and, I think a lot of these questions you don't have to solve yourself, we, you don't want to spend time especially if you're a small you know company in this space, reinventing. The wheel take. Advantage mean that knit you can learn from native apps so, when you, create native apps a lot of times you, know you can just use a native component, for the sidebar, for the the, menu for a tab, structure right, you don't want to reinvent the wheel because a waste engineering, effort and. Your. Users are probably, not used to this, sort of tab structure because they're probably used a little bit more padding they're probably used to larger, tap Taric targets than. Those kind of affordances so, I always refer people. Building. Web knit websites that might work on the mobile phone to always turn back to the, Android, UI user interface guidelines the, iowa's you know humans HCI. Guidelines, to just, you, know because at the end of the day, users. Who use of mobile phone is going. To interact with some. Application. They're, not gonna really ideally, they're not gonna think about what kind, of technology is to be calling the application, why should the general. User, experience, expectations. Be different, between native application, and their. Website and I've. Seen sites where they they create native application, with a hamburger menu on the left side their, mobile website has a hamburger menu on the right side and the. Typography, is different, the padding, might be different and, sometimes. The call to action sizes. Are different look, why is that different you don't want a user especially for sites that are trying to actively, drag the native app in sauce to have, to relearn, a completely, new set of physics, of their, or of your website when they move over there where you should try to do the same thing so that when you do innovate. You're gonna help the user only has to learn the things that you want them to learn that it matters, to engaging. And converting on your site and not learning. A new image, and learning how to navigate a new image carousel, so. I think, it's a good point to talk a little bit more about kind of users and users expectations. From a product, level and so I'll turn it back to Eric let's talk a little bit more about things, like information information, input. Thanks. Jenny so, when. You're thinking about your site I don't think we've said it several times but I keep I will keep saying it think. Like your travel think like your user think. About what will make that. Research, and engagement phase, a lot faster, and easier. So. Having a site recognized where I am saves, time especially when looking for flights I am.
You Know almost 99%. Of the time going to be looking for a flight out of my home city so. Being able to pre-populate the from field so I don't have to fill that out is really important. The. Autosuggest, in search when. I lived in London I wanted to do a trip, to Reykjavik I'm not, such a good speller for Reykjavik, but having the auto suggests, and being, able to autofill. In, cities as long as I start is a huge help, another. Time-saver, here that Cheney is showing is surfacing, recent searches so, as we saw in that customer journey for travel, people, are bouncing, back and forth between different sites trying to do price comparison. Trying. To understand, where they want to go, you. Know the research comes back into play several times throughout that complex, journey so. Something a traveler would find really useful is, being able to come, back to your site if they have made several, searches come back to their site and be able to see what, they have searched for previously, and, continue. With those searches, so. You can see that left example, you, know maybe I want to come back to a few of my hotel, searches, that I've already done or maybe, I've made a few flight searches, and I want to come back to one of those easily, and this, you know isn't nice being signed in and having my you, know favorites, or anything like that this is just cookie based and this will help users save, time and. Another. Example is. You. Know it's great that sites have or often say we have hundreds of thousands of search, results or hotels. Well. Travelers, don't want to sit through hundreds. Of thousands, of results. We. Want to find what is relevant us, that's, Pacific time. Having. Really good search and filter. Functionality. Is critical. To travelers. So, doing things that save time like, you know avoiding dropdowns, don't make me have to push drop. Down in order to select three bedrooms like you saw right there just, make it an easy plus/minus, button, it's. Important to keep the number of taps to, a minimum, to, complete an action you, don't want to make the traveler have to do you. Know ten different taps in order to get the results that they want and. Then. Another thing when thinking about travel, travel is very visual, it's a very visual experience, users want to see what they're getting before, they commit you, know how many times do you want to dig into that hotel room and really make sure that the room looks exactly like you think it does, allowing. Users to zoom. And. Expand, images, can really help with engagement as you see from us that we've listed from Expedia, UK right there, however. As developers. You know that beautiful imagery for travel can come at a cost, Cheney. Can you maybe share a few recommendations for, how to think. About images, as a developer. Yeah. So, I think you. Know you want to make sure that images are always compressed, we, find that a lot of times you. Know your development, he probably has the best intention, they don't want to send gigantic, images to your. Your. Website but there's often times you're passing along images, from your graphic design team maybe. They came from the marketing team and cried make a last-minute edit before they uploaded some work through some CMS, that shows up on the page somewhere, they, can't go to developer, every time to say well we have a new image and so please upload it most likely it's probably probably being done automatically. In some way these, kind of are areas. Where you start seeing images are it just simply, way too large because, you're. Sending it down like 1,000. By 2,000. Pixels for, something, that exists on a mobile device where you simply don't even need that much data for for, image fidelity. Situations. Where you, don't want to you know, it's probably sometimes it's better to put send down a thumbnail. A much smaller image as. Well as a, chance. For the user to click through to see the higher resolution, image after a click instead. Of saying well let's just send down this large image so let's take this example for it as. Something. To talk through where, you, can probably send down a smaller, sized image because, you don't know if the user is necessarily, going to click through and actually expand, and zoom, so, then you can lazy load some of those things so try, to load image sizes on, demand because, you will, find out from a technical perspective if, you take something that's you, know 500 times. 1000. Pixels you try to size it down to, something that's like a third, the size well, the founder is still having to calculate and work through all of those pixels and that's going to make your page feel slower suddenly. Your your site slows, down your carousel doesn't swipe to you know user. These. Are gestures and things like that. And. I think that's that's, a great point there so. That's. Cases, to kind of like the end of the, conversion, flow which is ok the user can it has researched, they, they've, made a decision about what to do I think, a lot of times this is an area where you.
Might, Pass. It to a different team maybe there's a legacy checkout, system maybe there's a whole another team, that's, actually working on checkout, and we, see that has a really lost opportunity. For a lot of travel. Sites and, really any sort of e-commerce site where you, know you maybe you have a great experience getting. The users you want used to your user interface they, know where things are. And now you want them, to convert and suddenly. They're taking it potentially, to a different, site maybe it you're going from. Wwm. A travel site calm to payments. Thought my travel site , or in this case secure, dot. Some. My travel site calm you'll. Find that on some browsers, they. There are site animations, that shows the user oh you're actually going to a completely, different site, or, potentially, if you had a single page app you know beforehand. Well. And then you click over to to checking out well, now, you're potentially, your, the user is seeing that way I'm leaving your site I'm going somewhere else they have to recheck. And reaffirm. That they, trust this new destination, and those are all situations, where you're. Now distracting, the users from completing whatever, task you want to do and, the second thing that everyone's, probably aware of is this form fill and I think Eric I talked a little bit more about now early on when you're doing searching, and filtering there's. A lot of best practices you can do there to make that easier, for a user if you want have to be fast you want to you know encourage, filling. In things and and and relying. On recent searches well, the same thing you. Probably typed in your, payment information before, maybe on the same, site or maybe on the previous site and so think about leveraging. You, know different. Signals maybe it's the, you. Know normal, Chrome or or any other browser space all the fill selection to fill in addresses, let the user be, able to, select. Those things so it basically tag, your info fuels correctly, so that chrome can match up you know form. Fuels two other common forms of zap and save but, a lot of times is you, know if it's a return user well, make sure that you're reusing, a lot of their previously. Entered responses. If they told you as a brand what, their name is what their address is the other information. Have. Them confirmed, with one tab but, never apps never get into a situation where you're asking, again if at, all possible. And. So we do have you, know another side of things about that the other form. Field based UX. That's, really really annoying which is identity every. Travel side we talked to loves. The. User to be signed in but. For. Other the maybe your most frequented travel site you're probably not going to be signs in a lot of times on, foot. For maybe like I'm traveling. To Europe I need to get like a Eurail pass or something like that that's, probably the first time I'm there but maybe I did some research on the desktop and I'm signed in in Chrome, the problem is a lot of times is the, expectation, is that well I've now, have a relationship with your brand I've used you on a desktop device I move over to the mobile phone and I.
Sheet. From the bottom of the page that allows you to quickly you, know get that payment method get that address, and made a quick checkout and you. Just get the. You. Get to do, a checkout normally as you normally would this is just a layer that sits on top of that and, so. There's, all different ways of kind of like a walking. Through some. Of the common, things that a user might you, know react to as they're going for landing on your, page, what going all the way through being, signed in to, being to checking, out and. Then I think after, that is well, what if they didn't purchase immediately, what if they. Were washing, of, the. Cost of the flight and you. Know they they. Need to come back in you, know a couple hours a week or something like that so then you, want to set up your site to make sure that the. Second experience is third experience, this is still. You know great, and so I think you, know wants some of the work with the progress of web app things like that is to make those, previously. Features. That you, know you associated with anything apps possible. On the web the, things like act at home screen things, like, push. Notifications are all now becoming, more and more accessible on the. Modern, web and you can start thinking about how this might change how you build, your product you can start building really interesting, ways of you know engaging a user because, they look at a flight, before it didn't purchase immediately, and you know that the price, dropped or there's a deal you want specifically, target to the user so this way you can have a way for them to basically. Be. Enticed, to come back to the site or you. Know how encourage, them to add your site to the home screen on Android devices and then have, them be able to see that and come back in on on their own will Erica. If you have any other comments on kind of like different ways that brands, might be able to build you. Know more. Interesting experiences, here in reengage, users. Thanks. Janie I was thinking, you know pretty much exactly what you said I mean all of these. Experiences. That we talked about up until now you know in the discovery the research their conversion, in all of these phases they. All are helping lead to, you, know whether the user has a good experience or not you, know did you give that traveler. An experience, that makes them want to come back and. You. Know I think we all in trouble wants, to have loyal users but. It's really up to you and how you deliver, that experience for. Whether the user wants to come back and become loyal to your brand and exactly. As you know Cheney said when, you know I speak to travel companies they say oh we need our loyal customers we. Want you. Know to really push this from our native application, and that's, where we you, know can can really engage with our users but, with these great new, you. Know modern web, technologies. Such. As progressive. Web apps that Jane you mentioned you, really can do a lot of this engagement, with your, your. You know mobile web application. That you previously couldn't, so. Getting this push notification. And. There's a great case study if. You haven't seen it from trivago that, shows the great success they've had using. A progressive, web app from. This engagement standpoint, so.
They Have utilized, the push notifications. And seem you, know that, their push notification, subscriptions, have eclipsed email, subscriptions, that's, pretty big and that, they're able to get, users to add to the home screen so, there are ways to get, that same great, engagement, that you used to only get from your native application, now. On your em with a plication. And. I'll. Hand it up to you Channing to wrap us up yeah. So obviously. We didn't cover a lot I guess answers there's no quick tricks. To really kind of a take, your site to the next level, well all of this requires prioritization. For having good hypotheses about what to actually build now you can test a and test B and both, could be poor hypotheses, because they're built on four assumptions and one might convert better than, the other but, it might not actually be something that actually meaning your businesses, overall goals on another, thing to kind of think about is you spend time prioritizing, performance. Right you want to prioritize as your site grows because, you went from the house over, to a skyscraper. You can't use the same foundation as note, the old house but, a lot of times from a product perspective we, get so caught up in building the new features, that we don't go back and think about well, how can we actually make this, feel. Great make a user journey consistent. So that this doesn't feel like a Frankenstein, sort of product that we don't have a bunch of you know new modern, pages, stitched, to legacy, pages that feel like it completely does in sight those, are all going to be things that count against you which might not be completely evident so, now. We have a couple tools and just quick tips this. You. Know one of the common tools that if you use Chrome inside, the audit panel inside chrome dev tools there, is a tool, called lighthouse, is a relatively, new tool that gives.
You A report that, goes through, you, know a lot, of the best practices from accessibility, from, speed, from. Whether you're taking advantage of modern technologies, like serviceworker, and you can think, of this as a checklist of going, through and making sure if your site is meeting, user expectations. One, of the you know we don't see it here but one of the things that does come up very often is you, can actually look at your time to the interactive score using, this report that tells you you know on a average device, is four page actually interactive. And for a lot of sites you're gonna exceed. 10,000. And, higher so, basically 10 seconds, where the site was not actually usable. By any user so track that and try to make, it your releases improve. On those metrics if possible, and then from a product perspective the, things you actually change. On the page again, don't, try to cram everything in. The page the user. You. Don't want your site to be a glorified flyer you want to be an application so that the user can engage with so. That means that you're, gonna need to make hard choices about what to actually include how to show those things we don't have the answers, in terms of what to actually do so, you can do a/b testing, we obviously have optimized, as a Google based tool to do that and test, to test those hypotheses, and you can quickly see how that can help your bounce rates drop your engagement, go up and conversions, potentially, go up also, so. That leaves up with about 12 minutes or so for questions discussions. Hopefully, this was a whirlwind, tour over some of the concepts, that we do face quite often in the travel space and. I think we have some time for questions so, I will, kick it back over to Dennis and Dom, really. Quickly to see if there's anything out there. Well. Cool first of all thanks. Cheney. And thanks Erika for taking, the time to, provide. Such great content to the viewers I know it's it's, early over in the US so thanks. A lot I had, a look at the questions at a live chat doesn't. Seem to be a lot, of questions which is hopefully, a good thing there. Were some questions about links. To. The Android, UI guidelines the, iOS guidelines, and, also. We've posted, the, a. Medium. Link that apparently, returned, a for for so. To everyone we're making, sure to post these links now or, in the comments so that they're available to you we'll probably do it in the comments because the live chat will disappear. When. The, launcher was finished and. So. It will. Give you guys another five minutes if you have anything that's on your mind please anyway, right now we. Still have them Cheney. And Erica in the stream so definitely, make use of that and. Other. Than that I will. Give. It over to Dennis, and see. What double has to say. Well. Thanks. Dom infer stuff Thank You chaining erica great presentation, great insights, from mobile, trebly, x and wealth UX in general. So. Thank you for that. Yeah I don't have anything to add you're the specialist, here I. Think you covered a lot of stuff. If. There are no questions the chat would. Be great if you sign up at our, event. Page, this. Is where you can give us feedback this. Is where you can potentially, reach. Out to us and where, we can also post links, as Tom said we also try and post, them and in. The. Comments below and. In the comments you will also find. Already our main page so would. Be great if you guys could, sign up there. And. I, think that's and, feel free to reach out on Twitter if you. Have any questions, afterwards, and we, will try to respond. Yeah. Excellent, point. Yeah, with that I. Think. We're pretty, much done for this session again. Thank you very much, wishing. You a nice, holiday season. Nice. Christmas, or whatever your celebrate or just a nice time, off from work hopefully. And. We'll see you in a new year of our next jacket on on air live stream. Probably. Around the 23rd. Of January, but, again. If you sign up at our page you'll get a nice. Confirmation. Mail and we'll send you one. Or. Two reminders. Okay. I, think. That's it thank you very much thank. You guys and see. You soon bye bye thanks. Bye bye.