Mobile in Context: Design Principles of Flow and Navigation (GDD India '17)

Mobile in Context: Design Principles of Flow and Navigation (GDD India '17)

Show Video

So. My name is Jenny Gove and I'm really honored to be here today to talk with you about mobile, design so. I'm going to start with telling a story about our two mobile platforms, the mobile web and native, apps, setting. What you're seeing here at the conference in context. And then. In looking at design, patterns, and principles, we're, going to talk about the flow and navigation. We'll. Be looking at system, patterns and material. Design and then. We'll look at some of the mobile principles. That we have that are based on user data and, we'll, end with some pointers, for user testing. So. The focus of this conference is on the latest and greatest technologies. That you can learn about and, apply, to your work as it should be there. Be many topics, such as those, that you see here in the word cloud but, in some cases you've gone into real depth on that's. Included, tools for increasing performance, exploring. IOT, and Android things the, Google assistant, conversational. Apps details. Of progressive, web apps and more, you've. Covered many technical, issues so far and tools, and features that you as developers need, to be aware of I'm. Going to be taking a different approach, for the first part of this user experience, talk we're. Going to take a look at a short history just. For fun of how, the tech media has, characterized. The mobile web and apps so, this is just going to be a bit different you can come on me with this with, me on this journey, and. We're gonna see how they've engaged with this over the years taking. Us to the point where we are now that, native, apps and the mobile web both matter very much and that. There are use cases for each and they're both are developing, and really interesting, and important, ways. So. Let me start by asking you, a question. When. Was it that the web, was first declared to be dead, have. A think about it any, ideas. You. Could do a search for it which ironically, you'd probably use the web but, okay. So I'll put your misery it was in 1997. By Wired magazine and, they. Had an article which they titled push kiss, your browser goodbye, the radical, future of media beyond, the browser so. That was back in 1997. That they were declaring, the web to be dead and then, in 2010.

Steve, Jobs made this statement, that. People aren't searching on their mobile devices as they do on desktop what's. Happening, is that they're spending all their time in apps. That. Same year wide published, a piece with, with an hour much rift on title, the. Web is dead long. Live the internet and. Then. Just a few short years later there were headlines like this, that. Mobile, app usage, increases. In 2014. As mobile, web surfing declines, in, fact, there were a succession, of such quotes and headlines. So. The web is dying and apps are killing it the decline of the mobile web and things like that so, why were there headlines like this what was fueling, it well, it was because of a study that was published by a company called flurry and they, found that on mobile devices only 14%. Of the time is spent on the mobile web while, 86%. Of it is spent in apps and studies. By comScore and Nielsen found similar, so, let's take a look at where the stats on this lie today it's, pretty similar today, we know that on mobile devices only 12%, of the time is spent on the mobile web while, 88%. Of it is spent in apps this. Is a study by comScore and other, research companies, have found similar, but. How exactly ask people spending their time with apps. So. The answer is that they're spending their time in primarily, and social networking in, music, games, multimedia. Apps and more two, thirds of the time are spent using apps with, regards to entertainment. Or communication. So. While it is indeed a great deal of time that people spend using apps it's, not evenly, distributed across verticals, so. They found stats like this back in 2014. - but, when people started, looking at this more closely there. Were some telltale, signs. The mobile web had some great things going for it too. So. When they started to research more started, looking at the data they, found that the mobile web accounted. For more traffic for, many verticals, than mobile apps for example this chart this was from a year later in 2015, it shows at retail, and Finance, and travel and typically. See 50% or higher proportion. Of their visits from their mobile web so. Data like this led people to question some of those sort of more simplistic stats that were put out that, seem to imply that native apps were becoming the only important, platform on mobile, so. This kind of data, provided. Further details, and that led to the headline. The. Web is dying wait. How. Are you reading this I love, that one and so. Then there were lots of u-turns. Let's. Have a look not so fast on the death of the mobile web that. Is the web dying no. Mobile. Web might not be dead after all long. Lived the mobile web and wired. In contradiction. To their famous article of 2010. In, 2014. Claimed that the. Web is not dead and then two years later. The. Web is not dead after all Google. Made sure of that and that. Reported, about the advancement, of activities, that can be done in the browser and, the early successes, of progressive, web apps the. Article, ended, by saying the, truth is that app universe, and the web are not, mutually exclusive we, use both, just. Maybe the, web is more alive than ever. Now. More recently the headlines have shifted to focus on apps but, they're kind of more tempered, now or positioned, to be taken a little bit more tongue-in-cheek. Learning, lessons from the rounds, of headlines that came before that was focus, so assuredly on the death of the web, authors. And editors now, know that the analysis, is more complex, and that there were multiple changes. Happening. Changes, in the web and the app ecosystem, and opportunities. With burgeoning, technologies. Like, AR, and VR. Virtual reality, augmented reality apps. Themselves are, also evolving. Incorporating. More activities, and more, services, in some cases increasing. The time that's spent within them so. Now we get headlines like this. Very. Alarmist, right the. App is dead long live the app absolute. Dead it's all about channels, in 2017. This, one I think is the most important, you know mobile, apps aren't dead they're evolving all, these things that are evolving, and isn't we're at a very interesting juncture, and we, know that there are some native apps are doing very very well that broke into the market, very recently, ride-sharing apps, and food, ordering apps some more, there. Exists huge, businesses. Such, as Myntra, and make, my trip a vote, that have built their businesses, primarily, on apps and, we. All know of some business that our app only and have been very successful. Indeed. Our company, Google have released a number of app only products, ourselves so. We have our trips app for planning, and booking travel, we. Have REO, our food ordering and home services app for our India market and we. Have pays our Indian, based payment, app. There. Are other businesses that recognize, themselves as being mobile web focused, or turning to the web now Flipkart. The large Indian online retail store and, interestingly.

Geo. Cinema. Here. In India they recently, have gone to the web for the first time with a progressive, web app and then. I want to highlight West Elm they, were furniture, store in the US and they've, never developed, a mobile app mobile, a native mobile app that is their. VP of innovation, Luc chatelaine. Explain. This clearly at a retail conference, earlier this year when. He said that what. People just don't buy a couch on their phone every day and, another. Way of saying this is you know make sure you understand, you'll use the behavior, and do what's right for your users, for, your business, in a way that really meets those users needs, indeed. His insight is very spot-on in a, study I conducted earlier, this year participants. Often explained, that. They, tend not to download, apps unless they decide they. Could really use them a lot so. It's all about frequency. Often, because. Of the download process and, so forth, it. You know adds something else to their phone so, some, of them say adds clutter to their phone and of course apps take up storage on the phone in. Our, studies we found that this was a burden for some of our participants in the US and other, studies a family in India. 33. Percent of users run out of storage every day. So. We know from user research that users like the convenience, of launching, apps from the home screen if it's, something that they will turn to regularly, if you've. Been following the PWA, developments, launching from the host screen is no longer the domain of native, apps only but, also can be available for web apps as he seen here with this example of the trivago app which, is a hotel, booking app. In. All. What's happening, is that we're making the user experience, across both platforms, web. And app both. We're making them both better and kind of making up for the deficiencies, that each have and as. Part of doing this we've created more. Tools for developers, that can help with user experiences. Like, polymer, elements, for the web and material. Design for, both web and app and there's. Already availability. Of tools to help with speed and performance on, the web which is so critical for user experience, and for. Native apps as Android studio with all the tools built into that and firebase, is a suite of tools so, aid app developers, as can be seen here so, here, we have things like test lab and analytics. And fire, store which there's been a talk about here at this conference and a be testing. And many more tools. So. The two platforms mobile, web and app are now, addressing the user experiences. That they have been deficient in. We're. Helping users discover. And experience, native. Apps more readily through encouraging, developers, to create instant, apps and you can see an example here from, jet comm and. We're. Helping developers. Create apps with speedier, downloads, that take up less storage on the device and. On. The web we're encouraging, developers, to create offline, experience.

So Their experiences, on the web stay, engaging, and the. Progressive web app technologies. That enable ists this, serviceworker. In the cache API not. Only handle offline. But, also provide, resilience. To network problems. And. We're encouraging, developers, to re-engage users, through notifications as, well as you can see here in this example, flight, app so. These, capabilities. For. Engagement and, reengagement, on, the mobile web they, didn't exist before so we're really trying hard to think about this. So. The changes, to both of these platforms are really fantastic as I said it's evolving, as you've. Already heard at this conference many sites are pushing, these modern features of the web from, amp to, serviceworker. To, add to homescreen to. Push notifications. To sign, in to better payment, systems, these. Companies, want to deliver, better, mobile website, experiences. And, this. Is just a map of some of the samples, of brands, that are raising the bar globally, and India, has been especially, rapid, in adopting this technology it's. Leading the world in many in many cases, in terms of its progressive, web app development. But. In addition to, some of these cutting-edge, technologies. At the fundamental, level we have to provide really, great mobile. Experiences. Great design we, do this through the provision. Of creating. Great design and for, this talk I've chosen to, review some elements of mobile navigation because. That's common, no matter what, vertical, you're working within so. This should be applicable to many of you. Let's. Talk first about Android. System patterns so, these patterns can be used consistently for, creating, strong navigation. And flow, so. We'll start with the UP button shown here it takes, the user upward. In the apps hierarchy. Until, they get to the home screen taking, users through all the previous, screens they viewed. The. Back button that works differently to the UP button because. Whereas the UP button has users remaining, in your app the back button navigates, in reverse chronological. Order through, all the history of the recently viewed screens, whether or not that's in same up the. Back button does other things as well it dismisses, floating, windows, such, as dialogues, or pop-ups it dismisses, contextual.

Action, Bars and removes the highlight from selected, items and hides, the on-screen, keyboard so you don't have to navigate back, through those things so. Those, are some of the main kind of like system, patterns for Android so. Let's now look at some material. Design things that can happen that help with navigation. So. There were many different elements that can help with navigation, and flow in material, design both, for the web and for apps starting. With top tabs this, is likely to be quite familiar to you is a very useful navigation, element and users. Can switch between different categories. Of content easily with top tabs so it's good when you have not, that many categories of content few. Top-level, views it, provides a very good mechanism for, promoting, awareness as well as the alternative, views within your app. So. This illustration, shows some, of the different types of top tabs, and we find that using a label and an icon works by best, we'll talk more about that in a little while, it's. Also possible, of course to provide a bottom, navigation bar and as, with top tabs enables. Frequent, switching between views and promotes, awareness of alternate, views on mobile. Devices the bottom navigation is located, in a very ergonomic, position and we see that, young. People, are more used to holding their mobile devices on one hand and therefore, getting to these bottom. Navigation bars very easily. But. What if your app has a lot of categories of content in other words ideally, you'd have lots of these you, know different, tabs but, it's not really functional, well. So then we can use the navigation drawer it, enables, quick navigation. Between views, that perhaps are unrelated. In this case and it also allows for a deep navigational. Structure, and it. Can reduce the visibility of infrequently, visited, destinations. Which. Is helpful in some places this, is nested, navigation. When we have a hierarchy in the content we wish to display is a, deep, navigational. Structure. With many different views and this. Also enables very quick navigation between unrelated, views so it's an advantage when you have these unrelated, views. And. What do you do if you have this deep.

Navigational. Hierarchy. Well. The navigation, drawer also enables, you to expand, that hierarchy, the dropdowns open, up the hierarchy. Some. Apps start off with that navigation, expanded, on the perfu of mobile so people can see what's there. Now. This is embedded, navigation and when we talk about this we're, talking about a directly. Expandable. Surface, so. This calculator, in this example it, uses, an accessible, panel, to, be a navigation. Aid to, the Supplemental. View so. This. Image has the navigation panel, expanded. The function panel and it overlays a standard, keyboard in, the, collapsed, space state, what you would see is kind of a peak of that so that the user knows that they can expand, it that's. Kind of the embedded, portion, so. It's not formally, using tabs or bottom, navigation for example, to. Label that content, is just, directly, expandable. In the surface, that's, another element of material, design. Floating. Action buttons, these, allows users. To to. Action, the most common, or primary. Action on the screen for that screen in the application, and the, icon may be animated. The, floating action button it animates, onto the screen as an expanded, piece of material by default, so here we see a floating action button used for sharing. And. Use. To add something here to use to add a note. And. Perhaps. For play or pause in this application, here and. Lastly. Of these just. Your navigation, it enables, users to navigate between content. Using different gestures users, can swipe to navigate between sibling, or P of use the, gestures, include touching, and dragging the screen horizontally left, and right or vertically, up and down and zooming out so. When do you use this well, this is recommended when. You do have related, content, right it's, the sort of naturally, ordered relationships, such, as pages representing, consecutive, calendar days or views. With very few siblings, or. Views of similar content types. So. That gestural navigation. So. Let's recap these are the material, design navigation. Elements we've reviewed we. Looked at top tabs, bottom. Navigation bar, navigation. Draw. The. Nested, navigation. The. Expanded, navigation, drawer and we looked at embedded navigation we also looked at the floating action button, and expanded, navigation. So. You can find out more about these within the material design. Guidelines online. Now. Over, the last few years we've completed, many use of research that is developed, to develop, three sets of mobile design principles, that's. Seventy five design, principles, in all that we've created and. We. Did many user tests for this and we wanted to do user testing at. This scale as Google. Because. We knew we'd be releasing, these principles, to developers, and designers around, the world and we wanted to be really sure that these principles released, would, be robust, and based. On this kind of user knowledge, that we've done through these testing, procedures. So. Our user studies took place in our usability lamps. Um. Participants. Were prompted. To visit, and perform, a key, conversion. Task for, six different apps or sites during their session each. Session, that we bought uses in four lasted an hour to. An hour and a half per person, and. We had participants, bring in their own smartphones, to conduct the task so that the phone that they had was not unfamiliar, to them and both. IOS, and Android were, used in the studies in equal proportion. So. They worked through tasks, on the site or the app and the, method we used as traditional, usability testing, with link allowed protocol, so, that's. When the facilitator, asks a question so in the case you see here the facilitator, is asking for them to order dinner for tonight and, the. Participant, speaks out loud as they're doing the tasks and what this does it provides us with insight, into their understanding, and provides. Us with details about when they get chuckle lost we can very much see what is happening and this, is what makes it different than collecting your logs data or or survey. Work but you know about attitudes. And. And, not really about observing, behavior. So. For all for the three studies we conducted, around 250. Usability, sessions, and we did this in collaboration with a third-party company called answer, lamp they're a usability company, we. Tested a hundred mobile, sites for, the app study we tested a hundred apps and for a study specifically, focused, on retail we tested, apps and sites, with tested 50 of each and the participants, had longer sessions for the latter we really wanted to get in depth we had an hour and a half with each participant.

So. The sites or apps tested. Ranged from large retailers, through information, providers, and service, providers, and we looked at many different types of services, like travel, and e-commerce, we. Looked at groceries. And, purchasing. Groceries we looked at news sites. We. Looked at food ordering we looked at the category of home-and-garden. Transportation. Legion services, such as insurance. And more, so those are just some examples of, what we looked at we wanted to keep it very bored. So. You can get to all of the principles, that we resulted from these studies so if you, want to be able to get to them I suggest you take out your phones and take a picture of the links and. So this, was further principles, of mobile web design. The. Principles, of mobile app design, and the. Principles, for retail, which, were based on studies as I mentioned for both mobile web and app and. The. Reason we've got two links for each of the the first two was, because, we produced a second set but they're the same principles, but the second link for each of the first two has, developer. Resources embedded, in there so, links to api's, and, code snippets, and so forth, so. The first ones you can pass on to your non, coding colleagues, they're, nicely and cleanly presented. And then the second ones have got these links in for developers. So. Let's pull from a few of these principles, in order, to understand, a bit more about navigation. So. Let's. Start with talking about those users expiry. That can really stop users in their tracks they're. Really fundamental. And so when, implemented. Incorrectly they. Stop that navigation, and flow and often lead to users, abandoning, the experience, so this is when you see drop-off, the. First one is allowing users to browse your content, before asking them for personal information so before you ask them to sign up or register or, collect. Other kinds of personal information from them it's important, to provide them with an excellent experience so they can become a real. Enthusiast, about your product and use, those abandoned, sites we find or our, apps when the, the Prada asked them to provide, this personal, information up front unless. And we've kind of seen this in recent years there's some sort of immediate, payoff that users. Are really. Clear. About so, things like the car service, or food delivery, information most, users understand, now that if I'm going to ask for that and want that then obviously they're going to need some personal information from, me, in. Particular apps go with a low brand recognition, and those where the value proposition, is unclear, all those, where that personal information really isn't needed, you. Know they, need to clear clear a higher hurdle when they ask for people to register so. Only as users to register if it's essential, so we can see here that, the. Users being asked to register. Straight, off that. Doesn't go down well, but. Here they can get into the experience. I'm. Sorry that's good that one they, can get next to experience, and they can register later on much.

Later In the flow, so. This one is similar it's. All about putting a barrier in in between peoples experience and the. Guidance here is like don't let promotions, still, the show is often, us that are more interested, in making that promotion to users and not the users themselves so, specifically, here we're showcasing, promotion, lines such as instances, that. Word instance, this, yours or for apps. On. Your mobile website right, recommending. A customer, download your app, so. Instead of something that you see like this on the left hand side a better. Option is to go with a small banner. That. Doesn't interrupt the user experience, that, your user is having on your site however. Your best bet rather than even this is to make a fantastic mobile. Web experience particularly. With progressive, Web Apps capabilities. Where users can add to homescreen work. Offline and more. So. Just adding some data to this example I can give you some data, from google plus a couple of years ago our Google Plus team showed, that including, such an experience, with this kind of friction led to 69%. Of, users simply, abandoning. The whole experience, with Google Plus at that point that's a huge drop-off right so they, knew about this principle of it they kind of didn't believe it and they wanted to look at the the data so that's what they found and. Here. It was this is what it looked like and the. Team changed, to a much smaller less. Intrusive, at banner at the time that looked like this. And. That. Resulted, in a, direct. Increase. Of 1-day active users by 17%. So, that was pretty significant. And now. They don't have a banner at all on their site they went with the idea of simply providing. A great experience on each platform no matter what the user wanted to use that's what the users come for so, now we have a great mobile web experience and great app experience and, then. The third of these that provide these barriers, to people is about permissions. And I think you've probably talked. A little bit about this at this conference already. It's. Really important to get this right users, can get stuck, in a task when they denying, permissions, that are integral, to the proper functioning of the app and they often do this when, permissions, are asked out of context, so often.

We Ask permissions, at the beginning of the experience in the app and and users. Don't know what they're asking for and they often deny them so. To mitigate, this app should ask for permissions in context, and also. Communicate, the value the access will provide to the user so the user understands, it and this, is possible in both iOS, and Android and, for Android it was enabled back when Android M was made available two years ago so. Make, that permission, request directly relevant for the task and the, user will be more likely to grant it so. Let's have a look on the left you see that the, user is asked right up front when they open this app this this. App they, want to use a location, it's. A poor experience often people say no because they don't have the context for it in this. One they are in, the app they're using it and at this point they want to search for a store so they click this button and, it's. A much more obvious to the user why, they're, being asked for this permission at this time. So. That's. The last of those you. Know experiences. That really stop users in their tracks. Now. Note, that you might, only get one chance when, you ask for permissions so it's important to service them when there's the best possibility, of them being accepted, as very, few users will work out how to change their settings once they've blocked a permission if, we. Look at chrome data some, analysis, there has, shown that users, ignore, or temporarily. Dismiss, permission, ponts. More, than 90% of the time so. In Rome 63. Permissions. Are going to become modal, this. Makes users 5 times, more likely to accept or deny, requests. Rather, than temporarily, dismissing. Or repeatedly, ignoring, them so that's a change that's going to be happening so. You've, heard much of it's at this conference about the importance, of overloading, the home page and others, pages fast we've talked a lot about speed, well, once that page is loaded, they. Better have really key, calls to action of, course this is important for mobile web and apps it's. About figuring out the primary purpose of your site or your app for your users and in. Our studies we tested, some sites that we came across that had similar calls, to action like this try, it now, or learn, more and, I've, still seen these kind of things more recently but. It's just not clear enough it's just too vague for the user and the user can't be convinced of what they came for, so. The design on the right here is, a. Lot, more clear to the user if, you're going to a real estate site then, you're likely to be there for renting, or buying or selling, so. Figure, out those key tacky, calls, to action for your product and feature, them really prominently, and this is something you can find out for user testing too sometimes, we're so embedded in our prod we can't recognize it ourselves so, secondary. Content, and course of action can be addressed either further down the screen or behind, menu icons, and we talked about the use of a navigation, drawer and other ways to search the surface, those navigational, elements. Now. When we think of menus, a lot of thought has to be put into organizing. And labeling menu categories, to be user friendly so. First, of all menus, should be sure no user, is going to want to really scroll through long menus on mobile right but. In addition our studies have shown that if we don't think really carefully about those menu categories, then. We don't reflect users, men mental, model of those categories, for your topic area so. This is where the user research activity. Of doing a card sort can come in so, that we can get into the minds of users and have them saw, the topics in the category, and across a number of users see how those fall out and it might be quite differently. Than the way that we would organize it it, helps we build the best structure for the organization. Of our content. So. I give the example here, we saw things like this in our studies where here, the. Menu categories, have kind of muddled both, the product and the activities, and so, this, creates, a conflict in users minds. So. If they're looking for like men's hiking, boots is that in men's but we're always it in hiking okay. So think about your categories, like this on the right-hand side we, see that you know they've just focused, on the activities, so much cleaner and it doesn't give users, this kind of conflict in their minds. Now. Providing. Text labels, and visual keys to clarify visual. Information is really important, so, let's. Take a look at this we have some icons here and they're, unlabeled, so just in your head think, about what you think they they, might be for when you're booking a flight.

Just. Take a little moment what would that plane, before and the check mark and the. Star and the person. Have. You labelled them all, okay. All. Right so let's take a look at and think to yourself whether this is what you thought. So. The first one we've got it strips the second, one is book. The, third one is club like the you. Know the airline, club and the, third and the fourth one is account, some of you probably got that one correct that's a bit more standard. But. We really found despite, you know thinking. That some of these icons are super super common, that. Generally, when we're testing them without labels it isn't the case and so it's surprising, things. That you think would be common like icon super menu or cart, or account, or even store. Locator, were. Quite often muddled, by participants, and also. Labels, for it's, important to label actions, as well like filtering, and sorting, and, these, weren't Universal, you might think they are but they're not necessarily, well understood, across apps so, icons, are labeled a much more likely to be used appropriately and this, can help in navigation, and, then. Being responsive, with visual, feedback is important, so that users know the results of their action, so. When users add an item to the cart or submit an order the, lack of feedback can cause them to question whether their, action has been processed, or not apps. Are provided visual animation, or another type of visual eliminate. The guesswork for the user and you, can see this here in the positive example, this is a negative example here, nothing happens basically but. We have a toast. Or. A. Snack. Bar element popping, up to give the user this information, that an items been added and, then. Lastly we're going to look at transitioning, between apps and the mobile web and where that's important. And you have to do it making, frictionless. So. Here we see users checking, in for a flight in this, app they're moving, them to, the mobile web but. The experience, really disjointed and, has a very different look and feel in. The. Good example, the designer. Was really thought about this the teams of work together often it's different development, teams and the, experience, is much cleaner again, this, is a navigational. Thing it's, best to try not to move people from one platform for another but, when you really need to do it make, sure that it's speedy, and the benefit, in contrast, to any remaining friction is worthwhile. So. Just to recap again remove. The barriers registration. Promos. Position. Those are the things that can stop users in their tracks, brick, great key calls to action organize. And label your menu, categories, provide. Labels, to clarify visual, information. Be. Responsive. With your visual feedback and make. App to web transitions. Frictionless. Alright. So. Here again if you didn't, take a picture of it last time at those mobile web principles, and remember. The second of each of these links have additional, resources added for you so, that brings me to the end of the principles we're going to talk through let's. Talk, about the. Benefits of user research. So. Your apps and your sites need user testing, your, product is an exception, so if you haven't done it so far I'm telling, you you need to do that because we always learn something you, can start small though start, by understanding the user journey this, is really important this this one is for the process of buying coffee. We're, looking at new customers. And existing customers, and it's, important to understand that current, process so, you can get into their mental model and understand, that and see. How those, experiences might. Map or not map to your experience, and what they're going to get meddled with so, iterate, on the designs, the content, the navigation, the flow in the usability I want. To give you an example I have, a use of researcher, on my team at Google who worked on this product Aereo is the food and home service are ordering out that's launched here in India and it's quite active here in in Bangalore, she. Did many studies of food and home service or being in India as the team iterated, on their early concept to get the act right the.

Research That she conducted helped the team understand, the experience, they needed to build to, fit him with users lives. Specifically. We. Tested, the one on the Left this was not all release product. It, exposed, all the services, that Aereo offered, she, conducted usability, studies and found that people just could not get a quick overview in their heads of everything, that was offered we felt that they could like design-wise it feels like that right but, when we actually use a tested, it we couldn't do that users. Couldn't do that so, she also did a card sort there, helped with grouping, it helped with renaming, some, of the categories and it helped with localizing. The category, content, and the service provided and, all. That design work resulted, in the design you see today. Because. Of the testing, that was found to work well for users and in addition, the research helped, to identify where. The imagery, needed to be localized, things, like the within. These drawn diagrams, here there was an inclusion of meat and alcohol and and we decided to exclude, those in the end and we, also decided to make the color palette more vibrant. So. If your app or site already exists, it's still important and helpful to understand user journeys, both, with and without your technology this really helped for our REO products, as well and. You. Also need to test your app on site and while, yes there's all sorts of biases, for testing with family, and friends it really is like a suitable place to start if you've never got started before and it can lead you to that aha, moment so, say in your data you're seeing a drop off this, can often be the aha moment you realize, why you, know they don't understand, the label that's on the button or you. Have some other insight and as. Your testing, gets more mature you, can iron out some of those biases, in your testing if your testing with family and friends and start, to do this more formally, and with proper screening procedures, to get the right participants in and to. Help you get started in user testing, we've got some great resources again, you might want to take a vote of this link Google. Ventures the, venture capital arm of Google has. Done a lot of supporting, startups through. Doing use of research and they have a lot, of great resources at this link so. I, want to sum up this talk the, story of mobile web and apps is still evolving I think it's really really exciting we're, looking to see where it's going to go next and we're working to like make sure that the experience on both platforms is really.

As Best as we can make it and making up for those deficiencies that the platform's have so. They're, getting to be much more comparable, comparable, for, example both, platforms, can deliver a speedy, user experience, the web service. Workers, and, and. The, cache API and. And other. That. Technologies can, provide a really reliable, experience, whether that's on stable, 4G or, poor. Sort, of 3G networks, both. Platforms, can support the functionality, to take photos for instance and the, use of location services. Are more for both platforms they're available on the mobile web as well as apps the. Native apps there, were many ways in which these are becoming more discoverable, because, that's been the big issue for apps right from. Being serviced. On Google search and, in. Our ad formats. On search now as well so both in organic and unannounced, as well, as obviously being, in display ads and through. To the affordances. And the capabilities. That we're having with instant, apps to have that instant experience. Without, needing to download. So. The most important, thing for development, teams to focus on though is to, create experiences that the best for users whether that's web or native. App design and in. This talk with reviewed some of the best practices for mobile design and provided. Links to more so that you can follow these best practices, for your design and development work, and. Remember to conduct your user research, to improve the mobile experience you're building, start. With understanding that user journey and design. With that in mind and then iteratively. Use a test to provide you and your team with, the best opportunity to create a really fantastic the, best experience, in your vertical for your users so. That. Ends, our look at user experience, design and navigation patterns. For today if you want to get in touch I'm going to be around afterwards, in the mobile and web design, area and we're going to be offering one-on-one feedback, on your native app or your mobile web app so you can come along to that area and we can and we can chat and you can contact me at any time on twitter at journey LG, and i, want to thank you so much for your time today thank, you.

2017-12-07 18:09

Show Video


Hope you guys had a nice time in India ...

We've had a great time! It was amazing to be part of Google's biggest ever event in India to date!

Helpful. Very helpful. Thanks a lot for the talk!

My pleasure! Glad that you found it helpful. Thanks for your comment!

Other news