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.
Travelers. Expect when thinking about that experience. What brands, are you, needing to think about that there might be comparing, themselves to so. If we look at the next slide, you're not just comparing yourselves, to. Your peer set within travel, you really need to think about what. Other sites, are travelers, visiting, because, you're you, know in truth, competing. With all, brands. That a traveler is visiting so you're competing with the best experience that, a traveler has had online whether. It be when they're buying coffee buying, pizza, it's, not just within the travel industry and. So. When, thinking about e-commerce interactions. On the phone or thinking about a few different phases we're. Thinking about the, discovery, phase. Engagement. Phase conversion. And retention and, we, can move on to the next bit Chaney they're great and, you. Know as the sites or brands, we need to think about are we making, those, phases as efficient. As possible or as pleasant, as possible for, our users how, can we reduce, friction. In each of these steps so, that the user has a seamless experience and. Moving. Away from this simple linear line if you know travel, you know that the pathway is not simple it's not a linear journey it's, actually quite complex, so. It's important to consider this specific travel, journey and how. The experience, can impact a user that's jumping in and out of the journey, throughout. The whole way and. So. If we look at this next slide you, can see that you. Know users are discovering, in the beginning and then they're doing research then, they might be bouncing, out to discover another slight site, and doing more research and research is happening throughout the whole thing and then, bouncing back in between sites so. I'd like to have Cheney who, as he introduced himself a mobile solutions, consultants, engineer. To. Walk us through what. Components. You, know would really help this holiday planning experience be. Frictionless, and then we'll go through and, dive into the technical side of what certain feature implementation. Might look like to help guide this journey Cheney. Over to you cool. Thanks Erica so I like to kind of like before we dive into kind of nitty gritty details, JavaScript. And all that kind of stuff kind of try, to figure out what's different about travel, I think travel is really interesting, it really exists, on one complete, side of the spectrum it's one of the most complex. Experiences. User journeys at to Erica's point that you know any user, can probably go through you're, probably coming in like you know you're reading an article you're looking at a top ten list for many sites out there like a news publisher, that's kind of what a journey end and you might direct, them to you know it's a different place. So it's kind of like I like to use his house analogy, we're just kind of window shopping you're looking at a house with a saying you know that looks great from the outside but. For travel, user a lot of that is isn't, stopped at the front door you kind need to go through the house there's, some sort of task, completion, right, because you you left your keys in you, know the the kitchen when, you're about to check out at your air B&B or something like that so you have to walk, through this probably. Somewhat unfamiliar, house, like you've only visited once before go, all the way through different rooms and figure out where you left your things and so, I think the quality, of that website.
Or In this case I'm going to metaphor, the house is super. Important. Oftentimes, we, kind of approach building, a travel site building any website, really kind, of so focus, on features we're just gonna need to build the sharing feature we, need to add this image carousel we, need to add a way for users to XY, and Z while all the things are great and really provide value to the users and. They. Really don't function the way you want to unless they're on a very stable foundation, very similar, to the way you build, you know a nice. House, and. For a lot of travel sites it's not a simple College in the woods where you don't need a very strong foundation it's, much like a skyscraper where. You need to dig you know something, that's like I don't know however many meters, deep axe, you, know strong steel structural, footprints, and things like that and in many ways all the engineering efforts you do to allow your, you. Know nice user-facing, features, to function well really, a lot it really requires, an external foundation, so I think used is kind of like analogy here now if I refer back to this a little bit work you, know the house you envision when the designer gives you a mugging this is this beautiful new web application or a native application this is what it looks like it looks great but when implemented, oftentimes, you get with the left side where oh I, tried to click on this link the page flash white, things. Were moving around I was trying. To swipe this carousel and for, some reason that animation, wasn't quite tracking, with my finger what, happens when you come to a website, like that you're probably distracted as a user you probably forgot, what you're looking for you might come into a great marketing, campaign because, it's a great deal to Bermuda, you land in and suddenly maybe thirty percent of the users cognitive. Ability. Is now spent trying to figure out where they are and that that's, a chance, that you're. Taking away from them actually converting, so, going. Back to the user journey right now you, want to deliver a great, first experience and we'll keep going down the journey about how to continue, delivering that great experience because at the end of the day a good, travel experience, isn't a series of interconnected pages. It's one, continuous analog. Flow so, know, step one is something that you guys for those who've joined on previous, hackathon on air you're. Probably used to the idea of you. Want your page to load fast sites mean something that you know we I could go up and talking about for a very long time so. A lot of the things I just mentioned you know things like, elements. On the page moving around. Things. Sliding, up and down things, being loaded and really slowly but then popping, up suddenly like an interstitial, to, sign, up for a newsletter or, add your application, that kind of takes over the entire screen there's, all things that kind of affect, what the users perceive, the, page for being slow obviously. There's a lot of technical issues here too about you know just sending. Maybe gigantic, images, so I think gigantic, JavaScript files sending. Things, that you don't even need because maybe you did a one, month test with an a/b testing. Third-party. Partner and you decided not use them anymore so. These sights we see out there just you know they just naively, kind of leave that script. Tag at the top of the page bringing, in in that resource, for the initial first experience, even, if they may not even be using that service anymore. So. You've heard these stats before you know 53%, of users will be in a Pho it takes more than three seconds to load and the truth of this if you look into the data from like Sousa and things like that you'll find that a lot of these speakings, actually, even happen way, below, that that, five-second, mark it's not improving. From ten seconds to five seconds we see that you know they affect on a minimun. On engagement, really, accelerates, as you move faster, towards that one second, piece so. Again shout, out to you click, the the Google link here to, check, out the previous hackathons, on errors about how, to make your site show, up as fast as you can. We're. Going to be talking about completely today because, travel, again, like getting from point A to point B it's, not about just point A it's about actually getting through maybe that you know six taps three swipes one scroll.
Experience. All way to actually booking. A stay looking, up a train. Schedule or something like that, of. Course you want to prioritize content, that matters to the user right like. You, can't. Bet. On your page being the only thing that the user is going to see most, likely, they're going, to land on the page because they clicked on the you know search, results, or maybe something from a Twitter share saying check out these three awesome things to do at you, know in the city they'll, click in you want what. Their intent is to actually show up as fast as possible, so many times we see web sites where because. Travel, tends to be very. Marketing. Forward, in terms like you want to you, know showcase with a city you want to show. Awesome images, about you know some some. Activity, a lot of times the page is very rich in media and so you start seeing things where like well, on a mobile page, obviously you can keep scrolling down and down, but, what if you load images that's a very bottom of the page that's. Good if you spend time loading things there that's gonna affect that very very first, metric. You can spend all the time in the world making sure everything, is compressed, making sure everything is minified, making. Sure that you know your javascript, file is all concatenated, together so if you're not trying to tool things from like six different servers, but, at, the end of the day we see you know teams, having. To struggle with prioritization. You, know too many parts. Of the company, wants to make sure that their feature there's. Their subcategory, maybe it's because you, know you split out your business towards, flights. Hotels, cars. Deals, and each of these are equally, important, and they, need equal, space on the page a lot. Of times that's gonna hurt user excuse our experience they're gonna land on the page you're gonna see about maybe ten call to actions before they even start scrolling and that's gonna hurt their the chances of them moving down funnel. So. Let's. Think about enabling. Repeated, searching, and exploration.
Right Because at the end of the day we want them to find something quickly using maybe you know two to three main calls to action allow, them to scroll, maybe, open up a hamburger menu maybe have. A form search, with the date picker with no, city search' autocomplete something, at the top of the page help them refine but, after they were fine what are they gonna do they're probably gonna click search they're, probably gonna click, on a tab, or something like that and a lot of times what happens there is you know you, from a technical perspective you say, well okay let's talk to the server please, send me the contents. Required to get to this, other page, and then we start back at the beginning where okay the page is gonna flash white, and then, we're going to start. Living in JavaScript, so our loading in more images and CSS right, you can optimize that to be loading. As fast as you know to two, seconds, one second, but what happens when we really see though is that this adds up over time again, going back to the whole user journey here how many clicks do you think your users going to do before, they get, to some point of value to your business to booking something to finding. That's train schedule to do anything any of that it's very well like at least, you know four clicks not even counting, the things that they had to type into any sort of form fields so you, potentially, want to make sure that everything, that happens, after load still, stays fast for the user this, is what is a big difference maker between some of the best native, apps out there and. A lot of you know websites, out there trying, to achieve, the same sort. Of engagement the same sort of session time as unit. Applications, so that brings us to a topic that comes up very often, and. I think will become a theme in 2018, this. Is the cost of JavaScript. This. Title. Here to cause a JavaScript, it's actually. Named. After a, article. Written by addy Osmani for. Mark from deverel team so feel, free to google that it's a great article, about this topic a little bit because, we don't have a lot of time we won't cover this to, extreme. Detail but, - long, story short for. Travel, sites they're. Very interactive right, so most likely you're bringing, in JavaScript, ones that you've you know found, online because it's a package, that.
You Rely on because it's. It's. Helping you manage. State, it's helping you build, application. Like features, a lot of times it's you know your own code because, you have custom logic you need to do to talk to some. Flight. Search API talk, to your own API is because you you know have some sort of data stored on your server you want to bring it into your. Web. Application, and then what happens when you get data into a typical, site you, probably need to massage it creating. Dom elements, move things around, react. To user input so when the user clicks something you don't want to necessarily do, a full page load so. A lot of times you're sending all this code to your website and. What. We start to see is that the. The, site. Speed story suddenly isn't just about what, you're sending. To, you, know a mobile phone typical. Mobile phones are going to be not as powerful with your you know MacBook Pro or your latest, Windows laptop, or anything like that and you're, probably it's not going to be you, know quite. As. The. User expectation, that's well you're not comparing, it to a website you're. Comparing this to native apps where a lot of the code that can already be executed, on a device, because it's been pre downloaded, so, what happens is we look at the the bottom here you know you wait for the Josh good to be requested, it arrives. It probably executes, which is the yellow bar here then, the after, that execution, time then. It fetches content that you might need Allah this is dynamic content like pricing data or anything like that it arrives and then you're probably doing even more things after it arrives because the user is swiping. Activating. Things that you've created, a new event handler, to really. React to so a lot of times when we talk about speed, we don't actually consider the yellow portions, here we just think about requesting, everything, is content. Loaded and at, this point at the end of this blue bar we typically say oh okay, the user should at the site speed it's done it's, everything slow that either should be able to use everything and for, news or websites, that might be true but for travel especially on very small screens the users going to try to do something they always scroll you're always gonna tap something's because they're, so purpose driven the. Problem is there's all this time before, JavaScript. It has actually, been evaluated. And parsed, to, eat to actually, react, to that user input, and, you. Know one of the things that I like to kind of point out is. Optimizations. Usually, say okay gzip your JavaScript, and then, you get that down to maybe like 200, kilobytes which is still pretty gigantic to send to a mobile device the executor but at 200 kilobytes, once. Uncompressed, could be maybe one, you, know full megabyte, of code, that needs to be parsed, you, know evaluated. Before, and, then executed, before your page can actually do anything and respond to any sort of touched so that fancy, animation, that sidebar, slotting out might not actually work creating, sort of uncanny valley where, the, user really isn't looking on the web application, anymore your website at that point really this is a glorified, flyer, it's, something that you printed out put an image up and left. It on the screen and you can create this discontent. With, the user and you can imagine this, compounds, over time going back to the user journey you know some JavaScript, compile, a shoe that's obviously you know saved and can actually be reused, but, your own executing, code might still be creating jank on the page so as you go to the next page you're waiting for that javascript to run and then just create some really really slow encumbrance and experience, a lot of things you think you don't see it's not that you know font slightly different it's not that an element, feels looks broken since they're trying to use with a otherwise. Probably. Pretty beautiful sight but they can't actually do anything and this isn't that youth an issue just for glowing devices, it's not just in moto G even, something like an iPhone 8 you know for a lot of script times and this this data was thanks, to Pat meaning for pulling.
Some Of this but, a lot of the script times it's. Because it's. A it's non-trivial no, a megabyte, of JavaScript, might even take up to 500, milliseconds, to actually be fully parts eval and execute it on an, iPhone 7, iPhone 8 and that's going to be time where the user is probably, trying to tap on something and you can't quite respond, with the same expectations. That they're used to using their native applications, and that's gonna be a reason why they bounced why they stopped engaging and they. Create this mental model over time about okay, every, single thing I do has, a cost associated with it and you. Know if I click on something incorrectly, because we tap on something you thought I was gonna work and it. Feels like everything's broken what do people usually do they probably touch other things and then they probably end up somewhere where they don't want to be you have to pay the full cost of loading the page again so, in, the future they're probably gonna be more careful, and less likely, to engage with your page and. So there's, a lot of different ways to deal with this right in this whole you know well what how can we optimize for, a UX, where users. Are going to do a lot of things where they, you, want to commit move instead, of moving from page to page you, want to build around user flows so, one of the things that we talk about when we talk about progressive, web apps about modern webs is to think about whether a single page app makes sense for, your brand there's. A lot more complexity, potentially, to doing this because it requires you to think, about. All different, page States that you have no, longer is it that you go to a URL and it's always going to be that exact, you, know set of data potentially, you're you're gonna have client-side, JavaScript that's. Actually, reacting. To user input bringing. In data from some API from, some other third-party data source and then updating, search results, updating. Views if you're moving between a you, know identity. Page a login, page to, a browse. Page to you know a payments, flow that, could all live inside a single. Page application, and one of the common patterns that we generally you know encourage people to think about is you, know trying to separate, your dynamic content, for, your applications, show and. You. Can kind of see this you, know idea spread. Out right here where well, there's a lot of things that any of the apps do well one, of the four things about native app obviously is that you have to download, everything and that's a cost you pay, but. What if you can leverage the, things that they do well which is well after you download, something. That. Static content should just live on your device so when you're clicking over to a different, you. Know different page you're only needing, to update that's, part, of the webpage that requires, change without going, through the entire previous process, of loading everything of writing. Parsing more JavaScript downloading. More things so, this is one of the common ways of which we see kind of you know patterns. That help travel sites really build really fast, engaging, experiences. That is reactive, to all sorts of user interactions. And. So one. Of the key kind of advantages. Of doing that really is you, don't want users to feel like you, know you're waiting on, the.
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.
You. Don't know who I am I need a sign in again and then you type my password what what was that again how do I go, to type, a no, pound sign on my keyboard this that's potentially, areas, where you really confuse a user so, I chrome dev summit this year we did kind of start talking about this one tap sign up sign in flow we can learn more about it. Right, at our Google developers, website but the idea is you, know we can help you use Google, to help the user sign into your site maybe. It's because they've. Signed in and career in account with you or writing we know that because they've done so on desktops, and when they come to you in this case we go calm on. Your mobile phone willing, to simply say hey, do you want to sign in using your previous, credentials, and you can just click through continue, and you're done and the best part about this, is you know one of the big problems about identity. Is that you, when, do you actually ask user to sign it early, on so that you can tied it, together so you can do research results, but, that might be a blocker for them maybe lit much like milk maybe much, later when they're about to convert but, maybe that means that you're adding a complete, another steps to check out phone though and they're not checking out or. Maybe, that they get to the point where they don't remember their credentials, and they. Just click you, know continue, as guests and suddenly, it just looks like a complete new user which you can't personalize, for so, this is a great way of one. Belonging. To remember, the credentials, but to also. Without. Having, to move them to a complete different sign in the page allowing. Them to sign in right, on whatever, context, there are so, there you already have them about wanting. To engage somewhere, wanting to make a stay at this hotel they, don't need to leave that they don't need a see they just to stop seeing whatever, made them want to sign up in the first place and you need to sign up sign, them up or sign them in at that moment. And the other side obviously you know payment just this is a quick shout-out here to some of the web peanuts work that's been going on across, the web and, what you see here is a. Payment. Request sheet, that, browsers, can implement and so a lot of times you know as web developers we spend time creating our own form, fields. And. These potentially, break and you. Know from, site to site these, checkout forms, are probably different the users probably really. You. Know big in the situation, where they're not quite sure how this is different and my clicking on the right thing there's. An error where then they're scrolling back and forth or. You have JavaScript, that's making the page unresponsive, so they can even fill it out so. The payment. Requests. Here allows. The browser to basically, say well we know a lot of information already so, why don't we help the user by, showing the name native, rendered.
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.
2017-12-24