Mobile ui design ppt

control powerpoint from android and evolution of mobile communication ppt
LexiWills Profile Pic
LexiWills,United Kingdom,Professional
Published Date:31-07-2017
Your Website URL(Optional)
PRINCIPLES OF MOBILE SITE DESIGN: DELIGHT USERS AND DRIVE CONVERSIONSCONTENTS INTRODUCTION 03 METHODOLOGY 04 HOMEPAGE & SITE NAVIGATION 05 SITE SEARCH 11 COMMERCE & CONVERSIONS 17 FORM ENTRY 24 USABILITY & FORM FACTOR 31 TECHNICAL CHECKLIST 40INTRODUCTION Consumers increasingly rely on the mobile web for research and discovery, which makes it more important than ever for companies to have an effective mobile presence. But what makes a good mobile site? To answer this question, Google and AnswerLab undertook a research study examining how a range of users interacted with a diverse group of mobile sites. Our goal: To establish mobile site design best practices. 03METHODOLOGY The study was held through 119 hour-long in- The results uncovered 25 mobile site design person usability sessions with participants in principles, which we’ve grouped into five sections: Chicago and San Francisco. • Homepage & Site Navigation • Site Search Participants were asked to perform key tasks • Commerce & Conversions on their own phones. Both Android and iOS • Form Entry users were included. • Usability & Form Factor For each principle, we cover insights from our For each site, we asked the participants to study, the key takeaway for your site design and complete a conversion-focused task like an illustrated example from a best-in-class site. making a purchase, booking a reservation or researching plans/prices. The participants voiced their thoughts aloud as they Key Takeaway conducted their tasks and then rated their The common thread in all sections is that mobile users tend to be very goal-oriented - experience with each site. they expect to be able to get what they need from a mobile site easily, immediately, and on Researchers also provided ratings based on their own terms. Ensure success by designing site experience and task success, and logged with their context and needs in mind without errors/site issues by severity. sacrificing richness of content. 04HOMEPAGE & SITE NAVIGATION 05HOMEPAGE & SITE NAVIGATION A desktop homepage often serves as a welcome page, messaging center and promotional space all in one, but the mobile homepage should focus on connecting users to the content they’re looking for. In this section, we explore the principles for building a mobile homepage that gets users what they need, fast. PRINCIPLES 1 KEEP CALLS-TO-ACTION FRONT AND CENTER 2 KEEP MENUS SHORT AND SWEET 3 MAKE IT EASY TO GET BACK TO THE HOMEPAGE 4 DON’T LET PROMOTIONS STEAL THE SHOW 061. CALLS-TO-ACTION FRONT AND CENTER It can be easy for mobile users to miss menu items, so always put your key calls-to-action where you know users will see them. Study participants had the easiest time completing tasks on sites that clearly displayed primary calls-to-action in the main body of the site, with secondary tasks available through menus or below the fold. Your mobile calls-to-action will probably be different than on desktop, so put yourself in your users’ shoes when determining placement. Key Takeaway Feature your primary calls-to-action in your most prominent site space. Example from Progressive Mobile Site. 072. KEEP MENUS SHORT AND SWEET An extensive menu might work well for your desktop site, but mobile users won’t have the patience to scroll through a long list of options to try and find what they want. Consider how you can present the fewest menu items possible - for instance, a major department store refined the product categories on its mobile site, presenting study participants with a shorter, more clearly-defined list than on desktop. Key Takeaway A shorter menu with distinct categories is easier for mobile visitors to navigate. Example from Macy’s Mobile Site. 083. MAKE IT EASY TO GET BACK TO THE HOMEPAGE When mobile users navigate through your site, they want an easy way to get back to your initial homepage. In the study, participants usually expected tapping the logo at the top of a page to take them back to the homepage, and became frustrated if it didn’t work. Key Takeaway Use your logo as a navigation button to return to the homepage. Example from 1800 Flowers Mobile Site.4. DON’T LET PROMOTIONS STEAL THE SHOW Promotions and ads can overshadow the content they’re next to, and make it harder for users to accomplish tasks. Participants visiting one company’s mobile site were distracted by a large promotional banner and missed the navigational buttons beneath it, making it hard for them to learn more about the company’s offerings. Key Takeaway Make sure promotions do not interfere with navigation and are clearly distinct from calls-to-action. For app promotions, participants preferred easily dismissible banners as opposed to large interstitials. Sample screen for illustration only. 10 SITE SEARCH 11SITE SEARCH Site search is vital for helping mobile users find what they’re looking for in a hurry. This section offers tips for maximizing the value of your site’s search. PRINCIPLES 5 MAKE SITE SEARCH VISIBLE 6 ENSURE SITE SEARCH RESULTS ARE RELEVANT 7 IMPLEMENT FILTERS TO IMPROVE SITE SEARCH USABILITY 8 GUIDE USERS TO BETTER SITE SEARCH RESULTS 125. MAKE SITE SEARCH VISIBLE Users looking for specific information usually turn to search - so search should be one of the first things mobile users see on your site. In the study, participants responded best to easily-visible, open text search boxes at the top of a page. Key Takeaway Place your site search near the top of your homepage via an open text field. Example from The Home Depot Mobile Site. 136. ENSURE SITE SEARCH RESULTS ARE RELEVANT Participants didn’t bother to swipe through multiple pages of search results. Instead, they judged a site’s search based on the results it returned first, so make sure your first page of search results are the strongest. Make life easier for users on small screens with smart-search features like autocomplete and corrected misspellings. Key Takeaway Make sure your site search returns the strongest results first, and implement smart-search features like autocomplete and spelling corrections. Example from The Home Depot Mobile Site. 147. IMPLEMENT FILTERS TO IMPROVE SITE SEARCH USABILITY Participants relied on filters to narrow down search results, and actually abandoned sites that couldn’t reduce volume. However, you also need to ensure users don’t filter themselves into a box - one car dealer site allowed participants to specify configurations that didn’t actually exist. Help users avoid problems by letting them know how many results will be returned with a particular filter applied. Key Takeaway Offer filters to help users get what they need from search, but make sure users can’t filter a search to return zero results. Example from Macy’s Mobile Site. 158. GUIDE USERS TO BETTER SITE SEARCH RESULTS For sites that serve diverse customer segments, it can be helpful to ask users a few questions before they search to ensure they get results from the most relevant content segment. For example, a large shoe retailer began its mobile searches by having participants select the gender and size of shoe they were looking for. Key Takeaway If your offerings can be easily narrowed by segment, asking a few questions upfront helps ensure visitors see relevant results. Sample screen for illustration only. 16COMMERCE & CONVERSIONS 17COMMERCE & CONVERSIONS The customer journey is getting more complex, and users expect to convert on their own terms. In this section, we look at how to drive conversions by putting your visitors in control. PRINCIPLES 9 LET USERS EXPLORE BEFORE THEY COMMIT 10 LET USERS PURCHASE AS A GUEST 11 USE EXISTING INFORMATION TO MAXIMIZE CONVENIENCE 12 USE CLICK-TO-CALL BUTTONS FOR COMPLEX TASKS 13 MAKE IT EASY TO FINISH CONVERTING ON ANOTHER DEVICE 189. LET USERS EXPLORE BEFORE THEY COMMIT Placing registration gates too early in a site experience can be detrimental to conversion. In the study, participants became frustrated by sites that demanded registration in order to continue - especially if the site was an unfamiliar brand. Before offering their personal information, participants wanted to browse content and get a sense of what a site had to offer them. Key Takeaway Allow visitors to use your site without registering for an account. Sample screen for illustration only. 1910. LET USERS PURCHASE AS A GUEST Even when participants were making a purchase, they didn’t necessarily want to commit to creating an account with the retailer. Participants described the guest checkout as “convenient,” “simple,” and “easy and quick.” They were annoyed at a site that required registration to purchase, especially since the site didn’t explain how registration would benefit them. Key Takeaway Offer the option to check out as a guest, and encourage registration with tangible benefits. Example from Macy’s Mobile Site. 20

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.