web app user interface design principles
hello. i'm here today to talk aboutdesigning for a mobile mind. about great design fora smartphone websites. so my name is jenny gove andi'm a user experience researcher at google. before we get intoour latest learnings about how to designgreat mobile websites, i want to tell you a storyabout a missed opportunity. a mobile experience ihad just the other week.
so, sometimes iget the opportunity to go and work in new york. and i really enjoythis because i can take advantage of all thecultural opportunities there are there and see someshows or see some event. and when i was therelast time i decided to go and see this great littleconcert that i saw coming up. so in my hotel room, on mylaptop, i booked a ticket. and it was kind of thisvenue which has small seats.
it was nearly soldout, but i managed to get some ticketson a small table that has, like, three seats left. the next day at work iwas talking to a colleague and she was at a looseend for that evening. and so i suggestedshe come along. and so i pulled out my mobilephone and i pulled up the site. and because i workon this stuff, i was pretty delighted tosee from this kind of venue,
a really nice mobileoptimized site. so i pursued that and ifound a couple of buttons. one was for the venue,to choose the best seats. and one was for me topick the seats myself. which in this instance isobviously what i wanted to do, since i wanted to chooseseats next to mine. so i clicked that button,but nothing happened. there was a big white page. very disappointing.
and as i was fumbling aroundthe site, looking for what else i could do to buy tickets, i waslooking for like a call button, maybe i could call the venue. but meanwhile my friendsort of said, you know, don't worry about it, i'llfind something else to do. so, this was, youknow, such a shame because it was such a missedopportunity for this venue. i was about to purchasetickets and i couldn't. the venue had done really well.
they've done a lot of work ormobile optimizing their site. but they haven'tdone well enough. and i wanted to spendmy money and i couldn't. so effectively they werethrowing money away. so why are we talkingabout this now at i/o 2014? well, we know that there isamazing smartphone growth. we heard just yesterdayin the keynote, some incredible stats . let's recap those stats thatsundar started his keynote
with yesterday. so the industry shippedover three million devices last quarter. and they're ontrack to ship well over a billion phones each year. the number of 30 day activesfor android is over a billion. it's been doubling every year. and we have people checkingtheir phone 100 billion times each day.
so to put this in perspectiveover the last few years, the media have kind ofmade comparisons for us. one of those onesthey made is, you know there are more mobiledevices, and mobile device subscriptions than there aretoothbrushes in the world. so these kind of stats putit in perspective for us. mobile growth is phenomenal. this very recent graphshows a dramatic growth in mobile usage of thepercentage of web usage.
this is page views. just from may lastyear to may this year. the growth is strong everywhere. and all this growthis great, right, because using our devices isalways such a great experience, right? just like this, just likewe see in the marketing. it's so easy, these peopledon't have a care in the world. they're happy smiling people.
they don't haveany frustrations. they don't havefrustrations while they're trying to check outon their mobile. all the type is legible. well, as a userexperience researcher, i spend my timeobserving people's use of phones and mobile websites. and in the last few yearsi've heard a lot of things like this, fromprevious studies,
i've heard the mobile websitesfeel like they're cut down. they're harder to navigate. they're sparser in features. they're smaller, poor indesign, and unfamiliar. so some of these thingshave been true in the past. sometimes companies have notput all of their inventory on mobile. and people areconfused because they know they can purchasethese things from a company.
or they know that they canget particular information from a company. and they just can'tfind it on mobile. people can be worried thatthey might miss something. they often have a senseof time urgency on mobile. so to get some morecontext, here's a participant quotefrom a shopping studies that i ran, where oneof our participants described shoppingfor a birthday gift
on a mobile phone. and i'll quote her. she said, "i was worriedi would miss something. i was worried aboutscrewing something up. and you know her birthdaywas coming up quick." so i think this really nicelyillustrates this quote. it illustrates thatpeople are just trying to get stuff done whenthey tend to mobile sites. so we want to fix the poorexperiences you've heard about.
and the good news is, we know itcan be done, because there are some examples of reallygreat sites out there that are engaging users. so we at google have been prettyvocal in the last few years about the importance ofcreating a great mobile site. but given those thingswe've heard users saying about mobileexperiences, we think we need to do moreto help you make those great mobile experiences.
so we decided to put resourcesinto creating materials and guidelines to help you. and there's compellingevidence we should do so. if we look at somecase studies-- so the huffington postredesigned their mobile site. and that work led togreat success for them. it resulted in 50% timespent on their mobile device. 37% more unique visitors. and they managed to reach29% of all us mobile users.
so, in a different vertical,plusnet's telco, in the uk, they redesigned all theirsites through the creation of responsive site. and they had a tenfoldincrease in mobile conversion. and their time toconvert decreased 40%. one more example here. this is the cancer.org, it'sthe american cancer society. and they went mobileand that resulted in 250% increase inmobile visits in one year.
a three times increasein mobile revenue, that donations in thecase of cancer.org. and they saw higherrates of mobile access to key areas of their site. and i love the quote thatcame from the principle of digital platformsat cancer.org. she said she wanted todistribute cancer.org experiences aswidely as possible, to as broad anaudience as possible.
and it was missionimperative to mobilize all the cancer.org content. and i think why thisis so compelling to me is becausethis can go for, kind of, any company really. if you don't pay for yourmobile users on the web, then you're missing abunch of your users. mobile web can be agateway to your business. so we're focusing on thisnow because mobile usage
is growing so rapidly. and because mobile provides anincreasingly important gateway to your business. and we want to putyou in a position where you can create abetter experience for users. we want to develop a betterecosystem for the mobile web. and we want to tell you howthe designs of sites that provide a really goodexperience differ from those that haveuser experience flaws.
and we want to do this on thebasis of data versus expert opinion so that you can haveconfidence in the information that we give you. so i decided to run a study. i wrote a research plan. and then we teamedup with answerlab, which is a userresearch company. and they have to scale. and they helped us toreally make this happen.
and we examined howa range of views is interacted with adiverse group of websites. so i'm going to tell youbriefly how we set up the study. we studied user interaction ona 100 different mobile sites, and these ranged fromreally large retailers, to service providers, and sitesthat had information on them. we also included somelesser known websites that been growingin recent years to make sure weweren't only capturing
what those bigcompanies were doing. participants brought in theirown ios or android devices so that they werefamiliar with the phone. and this study focusedon smart phones. so there were 119 participants. and although those numbersdon't seem big by google scale, this is the usability study,so each participant came in for a separate hour, sothat's 119 hours of the study. and so really, it was avery large usability study.
and participants worked throughtasks for each of these sites. the method we used wastraditional usability testing with think aloud protocol. so they spoke aloudas we had them go through differenttasks on their sites. this provides us withinsight into understanding the details of where therewere problems with sites and where the experiencewas really, kind of smooth and seamless.
and they also providedratings for the site. the result of thislarge usability study were collated to form 25mobile web design principles. and these keyfindings are intended to help you buildbetter mobile sites, and increase engagement andconversion for your business. so we've categorizethese into five sections. these are mobile homepageand navigation, site search, commerce and conversions,optimizing form entry,
and site-wide designconsiderations. so these principlesare all about creating a betterexperience for users, enabling them to have a troublefree experience on your site, whatever kind of site thatis, information, retail, e-commerce, or lead generation. so we're going tolook at some examples from these 25 principles. and we're going to talkabout the guidance based
off the study results. so let's start with mobilehomepage and site navigation. so the first and theforemost important thing to do for yourbusiness is figure out the primary purposethat your site exists. in our study wetested interfaces similar to the one on theleft and the one on the right. when users got tothe one on the left they had a particulartask in mind,
but the only actionavailable to them was for them to learn more. it was kind of vagueand they really didn't have theconfidence that they were going to be able to getto what they wanted to get to. in contrast, in theprogressive site on the right, leadgeneration site, they've made it really clearthat users can get a quote, they can find a local agent,they can make a payment.
one women's magazine site thatwe saw had buttons at the top. and they were labeledspecials and looks. these were very vague,and participants really didn't know what they would get. so mobile users really wanttheir information here and now. and figuring out what thosekey calls to action are is the primary thingyou need to do. secondary contentand calls to action can be accessed eitherfurther down the screen
or behind the menu icon. the next thing is to keepmenu's short and sweet. so we saw a number ofextensive menus on mobile, and nobody is going toscroll through them. but we kind ofanalyzed the sites, and we saw thatsome sites have done a really good job of movingfrom desktop to mobile, and reconsidering theirmenu structure for mobile. so macy's does agreat job of this
if you take a lookat their site. consider how you can presentthe fewest menu items possible, but still keep thosecategories really distinct. you can do some user testingto help you with this. do users understand thedifferent menu items you're offering,and do they know what would lie beneath them? when mobile users navigatethrough your site, they want an easy way toget back to your home page.
for example, perhapsthey want to get back to do another search,or perhaps they want to start a new browseexperience through your site. in this study the usersexpected tapping the logo on the top of thepage, on the left to take them backto the home page. and they became reallyfrustrated if it didn't work. so this is a really good exampleof the principle in action. 1-800-flowers doesthis well here.
so let's summarize thehomepage takeaways. keep calls to actionfront and center. so, even if you'redeveloping a responsive site, you need to think about how thatshould be designed for mobile. keep menu's short and sweet. make sure you're not having toscroll a great deal on mobile through your menus, andthat they're distinct. and make it easy to getback to the home page. next we'll look at theimportance of mobile site
search. so along with the home pagethat focuses on calls to action, our study showedjust how important it is to provide good,clear search functionality. so the design on theright here, is great. you can see when you doyour such immediately. there's a nice big search field. now, it might soundsurprising to me, you know, like, google sayssearch is important, you know,
wow. well, i can tellyou that in our team we actually had quitea bit of discussion about this before weactually ran this study. the thought being that, peopleoften find it difficult, so we heard, to type on mobile. so maybe navigationis the primary thing that we should be doingon mobile devices. but we found search tobe really important.
it's all to do with usershaving that sense of urgency, and wanting to get to theircontent, sort of immediately. so we found that,particularly in retail sites, search is hugely important,and on many other sites too. and often on other siteswhen users couldn't find that key callto action-- i think they're having afootball match next door. they will turn to search next. ok.
so, often it's tempting to putthe site search behind an icon. we found that it was muchmore noticeable and visible to people when the sitesearch was an actual field, and people found it moredifficult to find search behind an icon. and i feel like, you know,if site's like home depot and macy's can do this well,so can the rest of us probably. so to really scaffolduser's tasks, the search needs to be smart.
and signs of smartsearch include providing auto-completein the search field, suggesting searchterms and filters, correcting misspelling, andproviding related matches and search results. so all of those things togetherin providing great search is about getting users tothe relevant results as soon as possible. now, the site search resultsneed to be relevant, of course.
and this goes for search resultsas well as auto-complete. so, you can see somedifferences here. too often we saw resultssuch as those on the left. in that example theword kids is surfacing lots of differentthings, but things are particularly usefulfor people in a clothing store in terms of logicallygrouping the responses. on the right, macy'sdo a good job here. they lead you to differentcategories of clothing.
so kids sweaters, kids boots,kids shoes, kids jeans. on other occasions, in thesearch results themselves, we saw lots ofirrelevant results. and people reallydon't have the patience to scroll throughmultiple pages of results. if the first fewresults aren't relevant, they might leaveand go away and then you potentially lost that user. one way forwardwith this might be
to consider usinggoogle's custom search engine in your site. so, filters go evenfurther to helping users find theresults they need. in some cases inour study we found that even thoughcompanies had gone to the extent of making filtersavailable, unfortunately they weren't discoverable. so, this is a mock-up as youcan see, on the left-hand side.
but it's an exampleof an actual site we found where people weresearching for clothing. and they had to scroll throughabout six pages of results in order to eventually find thefilters to narrow their search. and they had thousandsof search results. so this was really,really painful. and we found lots of peopleabandon this task in that case. note that the user shouldnever inadvertently be able to filter the resultsto a null set, of course.
but we did seethat in the study. as the user's usecontrols, make sure that you can do thingslike provide them with the number of resultsthat they're going to see. and that gives theman idea of, you know, is this the kind ofresults that i want to see? if it's got 20 items, orif it's got two items. now another way to assist usersin narrowing the results to get to what they want is in whatwe call a guided approach.
you can think of these arekind of like, pre-filters, or simple questions toprovide more of a guarantee to your users that the searchterms they eventually put in, or the navigation they dohere will lead to the results that they need. so in this example,imagine you're selling a limitedset of products, like shoes, bagsand accessories. after asking the user whichof these their interested in,
you might upfront ask,you know, whether they want women's shoes, men's shoes. you might also ask the size. and then the userknows they're going to get perfectlymatched search results. and for you, you're makingyour user more satisfied. the thing thatyou're doing here is you're pulling away alot of your content, so that it doesn't sortof infiltrate the things
that they want to look for. i can give you a reallynice example of this in one of the sites we studied. it was the fightfor providing care. it provides things like seniorcare, after-school care, and pet care. now the last thingthat somebody wants when they do a searchfor senior care is to find pet care intheir search results.
and so they had a guidedapproach like this. and it made sure thatwhatever search they did, they weren't going to endup with after-school care in their senior care, orpet care in their senior. so a few questions upfront for some businesses can really help ensurethat those users get more relevant resultsright off the bat. and it's particularlyuseful if there's one to three keyattributes that you
can ask upfrontto get them there. so let's look at thetake-aways for site search. make site search visible. that nice, clearfield at the top. ensure that theresults are relevant. implement filters tonarrow those results. and guide users tobetter search results if you're able to dothat with your content. there were a number ofways that we discovered
the design of site can helppeople towards confession people really want toconvert on their own terms, very definitely. so we want sites towork with people, rather than work against people. and unfortunatelyin the study we saw quite a few examplesof sites themselves being barriers to thatengagement and to that use. so, firstly, beware of makingenemies at registration gates.
don't require custom accountregistration upfront. and you'd be surprised atthe amount of this we saw. we understand that gettingaccess to customer information and preferences can be reallyintegral to your business, but don't ask for it too early. many of the sites thatuser's rated the lowest were those where they wereforced to create an account upfront in order to continue. users want to exploreand browse content,
perhaps get someof their tasks down before they commit to providingtheir personal information. and similarly, let userscheck out as a guest. if you're enabling peopleto purchase something, or perhaps they cansend off for information you want to aim forthat option to enable users to check out as guests. this is because, in our study wefound that participants really perceive the value of this.
and it's because, whilethey're doing their tasks, they're thinking, i wantto purchase this thing, or i want to getthis information. i don't want to stop and haveto think of an email password, or whether i want to connectto my particular social network to this account, andwhether that's ok. so, if you waituntil afterwards, enable users to dotheir tasks, then you can also haveanother opportunity
to ask them to registerand you can offer them tangible benefits aswell, such as perhaps, tracking their order. and remember youdon't want to negate the benefits ofpurchasing by having a process thatisn't smooth here. all browsers allow the abilityto auto-complete in forms. so make sure youdon't turn that off. users really like thebenefit of auto-completing.
so just let the browserdo it's job at that point. and there are other waysto convert users too. and there you cansee the check-out. so, picking upwhere you left off. now, we've talkedabout this quite a lot at thisconference already. and providing users withthe opportunity to do that was really helpful. within this study itself,we saw a number of users
want to pick up onthings later on. after all, in thisparticular situation they were in a usabilitystudy, they often found things theywanted to see later. now this can happen inreal life too, of course. perhaps you want to look atsomething on a bigger screen. another goal. perhaps you're distractedat this moment, you have to dosomething else, and you
want to just pick upon this thing later. so we painfullyobserved several users copying and pastingthe url, which is really quitehard to do mobile. then going and opening theiremail client, pasting it in. it was really, yeah, itwas really quite painful. and then, of courseyou have the issue that you might lose thatuser because they've kind of gone todo something else.
so the best practices we sawhere at this present time is to offer users opportunitieswithin the site itself to pick up where theyleft off later on. so, i've seen opportunitiesfor people to pin things. i've seen opportunitiesfor people to email within the site itself. you keep all thatwithin the site, but they can email themselves. and obviously, postings onvarious social networks.
often at the moment,this is used for sharing, but we saw a numberof examples of people using this for themselves topick up where they left off, for themselves at alater point and time. and related to this,you need to create a consistent urlstructure on your site. so that when peopledo share url's from their mobile or theirdesktop they can use them. so on that note,our recommendation
is to build aresponsive site that enables that consistenturl structure rather than resortingto an m dot site where they have be redirectedfor users between sites. and if anyone saw paullewis' talk today, where we saw the hit thatredirect causes in terms of time lag to loadthat mobile page. so let's review the commerceand conversion take-aways. so let users explorebefore they commit.
you can always fillthat registration in at a later point. let users purchasesas a guest, and enable users to pick upwhere they left off. optimizing form entry. forms, don't you lovefiling in forms on mobile? it can be reallypainful, i know. and you know, it's arguablythe most painful thing that you can do mobile.
so let's look at afew of these things. now i should say beforei start, we actually learn a lot of thesethings on desktops. but somehow when we moved tomobile we forgot a lot of them. so these are just oftengeneral good design principles, but they mattereven more on mobile. yet that form on the left. design a form that's efficientfor the user to fill in. and not overwhelming likethat one on the left.
we saw more formsthan we'd have liked to have seen in this studythat looked like that. one thing we found was, it'sreally good to chunk the form. again, this is aprinciple that's taken from our experiencewith forms on the desktop. and it's helpful to make surethat those chunks in the form, are of equal size,and equal difficulty. so you can seethis example here. there's, i think fivedifferent steps to this form.
and the user on theprogressive site can easily see what they'regoing to have to fill in. so make sure yourforms look more like the one on the right--think about your site now. then the one on the left. another useful way to streamlinethe conversion experience for users is to know anduse what already exists in terms of information theuser has already provided. we found that auto-filling,whenever possible,
was of huge benefit to users. it's a bit sad tohave to tell you this, but when this happens, whenauto-complete and auto-filling worked, the users weresurprised and delighted. of course it shouldn't be thatway, but that's the way it was. because they're so used tostruggling through forms. so they would eitherstruggle through the form or they'd abandon their task andtry to do it a different way. so it's justfrustrating for users
to have to put it in twice. we've all been there,it's kind of horrible. so for registered users,remember and pre-fill their preferences. for new users, offerthird party check out, and sign-in services. one specific example is to checkthat you don't require users to, for example, enterbilling or shipping information that hasalready been entered,
that already exists in theirthird party check out account. now every tap counts on mobile. for submittinginformation, users really noticed and appreciated websitesthat would automatically present number padsfor entering zip codes, using the contextualkeyboard in the right way. or automaticallyadvance the number fields as they entered them. it can be really painfulfor users when that happens.
so the experience thatpeople are left with is a really poor one. and you know, two forms canlook very, very similar. we tested two pizzadelivery forms, and they lookedincredibly similar. but the number of tapsit took on each form was very different,because one of them wasn't doing thingslike surfacing this contextual keyboard.
so seek out anyopportunities to eliminate any wasted taps in your form. and here is some additionalinformation and technical help that you can get on choosingthe best input type. and this is part of theweb fundamentals materials we've been talking a lotabout at this conference. so, good labelingis really important. if forms aren't labeledaccording to best practices, and again users can get totallyblocked and they can't proceed.
so, they can be labeled, ofcourse outside the field. and it's becoming more andmore popular to label them inside the field, but justbe careful how you do it, and make sure that if usersback out of that, then the label becomes visible again. because we had auser in our study who was entering their emailaddress, and then they got distracted, and then theycame back, and went back, saw the word address,but didn't see
that it was emailaddress and started entering their home address. so this labeling needsto be really clear. now working with dates. the recommendation here isto provide visual calendars where you can. because users oftenneed more context when schedulingappointments, and travel dates, and things like that.
provide them with a calendarbecause if they don't have one they are often unableto figure think about what day ofthe week it is. that's often the primaryinformation people need, like, i'm going toleave on a friday. and so figuring out what theactual date is, can be complex. and we saw users, again,come out of the tasks that they were doing, and goto find their calendar app. you know, again, you'vegot the possibility
that you could lose them. we found on travel sites,that it was problematic when users had to choose anoutward date and a return date within the same calendar. that seemed to be likean experience that was very difficult for them. it wasn't smooth, and sothe best practice there is to provide two calendars,one for the outward date and one for the return date.
note also that there are systemways of dealing with dates. but on the mobileat this time you don't get control of stylingin the custom chrome browser. now remember that i mentionedthat completing mobile web forms was arguably the mostdifficult experience on mobile. well i may have been wrong. because what's morepainful than that is having to doit all over again because you did itwrong the first time.
yeah, lot's of nods. so, there are standardbest practices, of course, when itcomes to helping users recover from, andcorrect their errors. we need to provide clear errormessaging, not cryptic error messaging, and weneed to highlight the fields that needto be corrected. we need to make sure thatthe error message isn't just at the top of thescreen, and nothing
is highlighting the field. but really, the best way toaddress submission errors in web forms is toavoid them altogether. if we can combine thoseclear descriptions with real-time error validation. this was the mosteffective combination for enabling users tojust go through that form once and get it done. and there were examples,but not very many
of sites out there thatwere doing real-time error validation, and it was by farand away the best experience. so let's summarize the takeawaysabout optimizing form entry. so designing efficient forms,chunking them like we saw. using pre-existing information. streamlining thatinformation at entry. go and test your formson your websites. see how many taps it takes. see if you're usingthose contextual inputs.
minimize form errorswith labeling. provide visualcalendars for dates, and real-timevalidation of forms, so that your users only haveto go through them once. now there are a number ofsite-wide design principles that we uncoveredduring the course of doing this studyon multiple users. and we're going tolook at this now. so one of the main reasonsthat you make a mobile site
is because it's painful to doall that pitching and zooming when desktop sitesappear on mobile. it's hard to pan and zoomaround on mobile, especially in multi-dimensions. and it often leads to troublewith users viewing your images properly or viewingyour text property. some really frustratingexperiences that users had was when the home screenloaded fully zoomed in. they had no ideawhere they were.
and when a userzooms in on a screen you really losecontrol of your design, increasing the likelihoodof discover-ability issues. so make sure, even if you feelthat you've mobile optimized, or made your sitemobile friendly, make sure there aren't anyaspects of that site that require users to pan and zoom. now images on mobile, whilewe're talking about that, they can be verysmall and people often
want to see details whenthey're purchasing something, for example. so, the best thing to do ismake sure those images are tappable and expandable. on retail sites, customersreally want to see the texture, they want to see the details. and participants gotfrustrated if they weren't able to see these. a good example oftappable expandable images
is provided byjcrew on their site, so i suggest going andhaving a look at that. now location. we saw some examples ofgps location information being badly applied. so the example on the leftis going to be problematic. and the reason is, becausethe user doesn't really understand what you'regoing to be doing with that. they kind of need to seethe context of how you're
going to be usingtheir gps location. in our study, when userswere asked to book a hotel room in boston for a conference,that's the task we gave them, on a particularlypopular hotel's website, they were prompted toshare their gps information immediately aftertapping the find and book call to actionon the home page. accepting the requestresulted in the location field automatically populatingwith the user's current city.
but we saw that severalusers automatically accepted this request. they didn't reallythink about it. and one user becameparticularly frustrated because they were trying tobook their hotel in boston, but it kept bringing uphotels in their home city. and we also saw ui issues. for example, where asite had a field that said current location,it looked to the user
liked they needed totap that, and they needed to interact with it. and then they thought thattheir current location would be populated. but it wasn't the caseon this particular site, if they left it alone, whichis what the developer intended, this would result intheir current location being detected. but the user just couldn'ttell, and got very frustrated.
so a better experience isto make sure the user always understands why you're askingfor location information. and then it's helpfulto let the users choose to populate the locationfield at the appropriate place in the flow, and to aclear call to action, something like find near me. now this point aboutthinking about keeping users in the single browser window. we've already lookedat that a little bit.
we've looked atit about, in terms of sharing information and alsopicking up where you left off. but you need to thinkabout all the reasons that users mightleave your site. because it's not reallywhat you want them to do. you want them to stay,you want to potentially have them convert onpurchasing something or getting more information. having the user switchbetween browsing windows
can be problematic becausethey do have this tendency to go off and lookat other things. so think of all theways, one of those ways might be that they go andlook for coupon codes. so we found some good examplesof sites, this site here and then i think we saw somepizza sites, and other sites where they decided toprovide coupons of their own. to kind of stop users doing thisand to keep them in their site. so try and do everything you canto ensure that your users stay
in the browser window. address those reasonsconsumers might leave. now many of thewebsites we tested, and the companies we werelooking at also had apps. and all of them promotedtheir apps in some way. not surprisingly,participants weren't at all pleased with the situation thathappens on the left hand side. i think we've seenthis all too often. this has being describedas the door slam.
the user came toyour site to get some experience of yourcompany, or to do some task. and they didn'tappreciate anything that hindered themfrom doing that. in some cases thiswas where there was perfectly adequate, verygood mobile optimized ui right behind it which userscould actually use. and so, in thissituation, you're losing the opportunityto engage with users.
so this full pageoverlay or interstitial is not a good idea. it annoyed all but the mostloyal and familiar customers. many sites promotedtheir sites as banner along the top orbottom, and users were fine with thesebanners if they were reasonably sizedand dismissible. they weren't too happy,however, when the banner started taking up too muchspace and wouldn't go away.
in landscape orientation,think about that too because thebanners can take up really valuablevertical screen space. so both androidand ios users were used to seeing thesebanner promotions, and they were quite happyif they could dismiss them, or perhaps they wouldwant to use them. but the thing i reallywant to emphasize here is that mobile web isan opportunity for you
to engage your users. you might end upwith a great pool of committed, engagedusers on the mobile web. it's a gateway to yourbusiness, but you also might have a populationof users there. so make sure that yourpromotions are not getting in the way ofyour key call to action. and this is one of themost important principles. it's about taking allthese design practices
and creating a mobile optimizedsite all the way through. our study clearlyillustrated how much uses preferred mobile optimizedsites over desktop sites viewed many things, we saw loweruser ratings for desktop sites on mobile, lower tasksuccess, much more errors, all the things you'd expect. however, we foundthat some sites mixed mobile friendlypages with desktop sites. so you start offreally, really well.
you like, yeah, i cando this on this site. hit a button, andthere you go, the text is too small, it's a desktoppage, terrible experience. and we found that those actuallyrated the worst of everything. and it's because it reallystopped users in their tracks, right. they're trying todo their tasks, and it's even more of adisappointment in a way because it was more unexpected.
so optimize yoursite for mobile, and you need to optimizethe entire site. i know some of the sites canbe really humongous efforts, and their can be thousands ofpages to make mobile friendly. so in those cases, if you canonly do it, sort of in chunks, i really advise thinking aboutthe main navigation parts that people have to go throughto make sure that you're not providing them withthat experience of going from a friendly pageto a desktop page.
you can look, of course,at your analytics traffic to try and work that out. so the site-wide take-aways. don't make users pinch andzoom, at all on your site. provide expandable,tappable images. be clear why you need theuser's location for them, so that that can be used wisely. keep your user in asingle browser window. so think about all thosereasons that they might leave.
don't let promotionssteal the show, and optimize yourentire site for mobile. so that brings us to the end ofthe principles we're reviewing. and we hope these thingsthat we've gone through are going to be helpful to youdeveloping a better mobile web experience. and i know you'reunlikely to have to memorized this presentation. so the good news is, thatall these 25 principles
are available in awhite paper for you. and that white paperexplains what you need to do. we also have webfundamentals, which is an online resourcethat tells you about how to do some of thesethings on the multi-device web. so if i've justcovered the what to do, which is the whitepaper, you can think of web fundamentalsof that as a how to do it. it covers a lot of thetechnical guidance,
how to avoid the commonpitfalls that people make when building sites. and it advocates forresponsive design. and we have a numberof performance tools. the primary one is thepagespeed insights tool. and it's available to you. it not only gives you insightinto the speed of your site, and how that loads, and whatyou can do to improve that. but it also has someuser experience feedback.
another easy way that you canhelp yourself make a better site is simply to haveusers go through it. this is actually inour usability lab, but you don't needany fancy equipment. you can just watch afew users, perhaps set some time to do that each week. see where the main problems are. and honestly you justwatch a few users and you'll comeacross those issues.
you'll probably seesome of the things we've talked about today. and everyone can useanalytics, so trust that data and incorporate itwith your user testing. and then you'llexplore a pathway to getting moreconversions on your site and improving theexperience for users. so, creating a mobile websiteis really imperative these days. and what i want tosay is it's not just
about shrinkingdesktop to mobile. responsive design is a greatunderlining technology. you've got the one codebase, which in the long term will make things easier. but you do have to think abouthow those elements of your site are going to surface,and what's important at the different device sizes. the different context thatusers are using those in. so i want to concludewith, now is the time
to really make improvementsto your mobile site. think about all of theresources and the effort that's being put intocreating desktop sites. and think about applyingthat same resource and effort and putting that intoyour mobile site. so to get going on mobilesites, we have the principles, we have webfundamentals, and we're going to develop a betterexperience with more conversions, so that you canhave happy and more engaged
users. so thank you for your time. and i'd be gratefulfor hearing from you. so feedback on thepresentation will be a great. please check out the principles. and i'm going to be aroundfor discussion and q and a after this talk. thank you.
Tidak ada komentar:
Posting Komentar