25 WAYS TO MAKE YOUR MOBILE E-COMMERCE REVENUE SKYROCKET

Transcription

1 25 WAYS TO MAKE YOUR MOBILE E-COMMERCE REVENUE SKYROCKET

2 Did you know that 59% of all time spent on e-commerce sites is on a mobile device? And more than 1/3 of visits to the top 50 e-commerce sites now come exclusively from mobile devices? That s a lot of mobile shoppers However, while more and more traffic is coming from tablets and smartphones, mobile conversion rates for e-commerce sites are still disappointingly flat. What s causing this problem? With consumer mobile satisfaction rates hovering at around 40% neutral-to-unsatisfactory, it s likely that customers are still having difficulty browsing and purchasing on their devices. Shoppers are not enjoying the mobile shopping experience. As it turns out, there s an easy solution to this challenge. Within this ebook, you ll find a list of 25 tried-and-true design upgrades you and your team can make on your mobile e-commerce site right now. By following these improvements, you will be able to rapidly increase your mobile conversion rate, average order size and revenue

3 1 Make buttons and touch targets at least 44px by 44px The bigger a touch target is, the less likely a user will hit the wrong button. Apple's design guidelines recommend touch targets at least 44px by 44px. 2Make the body copy at least 14px Rather than requiring users to double tap (or worse, pinch) your content, make sure the font size is 14px and above for maximum legibility. 10px 14px

4 1x 1.5x Make the line height at least 1.5 for paragraph text A line height of 1.5 also increasing readability, although this can be set tighter or looser depending on the context. 4Check that all aspects of the site are touch-friendly Your visitors expect to use common mobile gestures like swiping, tapping and dragging so you ll need to build in functionality for different kinds of elements. Accordions, drawers, carousels and off-canvas flyouts are great for increased usability.

5 Desktop hover Make sure that information found in hovers can also be found on mobile On mobile, hovers tend to work unexpectedly (or not at all). Make sure that any information found on your mobile site does not require a hover state to view it. 6 Ensure the website reflows for both portrait and landscape orientations Mobile devices are held in portrait and landscape orientations, so you ll need to make sure your site adapts for both. It s also an opportunity to think critically about how users might use the website differently in each orientation.

6 7 Make sure that common touch actions fall within the easiest to reach areas Take advantage of common touch hot zones by making actions easier to reach. Place key interactions like menus, add to cart and purchase buttons in these easily accessible areas. Mobile Visits 8 Optimize navigation for common mobile actions Use analytics to understand how mobile users are browsing your website. If there are common pages or features they are using the most (e.g. a store locator) be sure to place them prominently in navigation menus. To learn more, you can check out our guide: How to Build a Better Mobile Website Using Analytics. Shop Search About Support Contact Q&A Links Gallery

7 $4.9 9 Move non-essential menu items to the footer Similarly to the previous point, remove non-essential / infrequently used pages out of the primary navigation and into the footer. Are many mobile visitors going to your 'Terms of Service' page? Maybe it would be better served in the footer, thereby reducing clutter in mobile navigation. 10. Make sure the page context is extremely clear Smartphones have a much smaller viewport than larger desktop devices. This means that there are less visual cues to remind users what page they're on. Adding breadcrumbs, distinct headers, or fixed navigation are a great way to remind users where they are, and what task they're doing.

8 1 Include a home screen icon on your site If a user adds your website to their device homescreen, it's a great sign that they plan on visiting frequently. When a user opts to add your site to their device s home screen, make sure you have an icon that stands out among dozens or hundreds of other apps on their device. Check out Apple s guidelines for creating site-specific or pagespecific icons. 12 Remove text from images Separating text from images is a standard web design best practice, but it s especially important for mobile devices. Images with text in them will become unreadable and poorly formatted when scaled down for smaller screens.

9 3 Ensure that images are high resolution/retina quality Extremely high resolution images are a great way to surprise and delight your users, because most images on the web still look fuzzy, pixelated or even blurry when viewed on a Retina quality screen. This can have a big impact on performance, 14 so you need to make sure that devices are only sent the images appropriate for their screen type. Use vector-based icons instead of images Mobile screens typically have resolutions and pixel densities equal to or higher than a lot of desktop monitors and laptop displays. The result is that graphics can look fuzzy or blurry if they re not designed for such quality screens. Vector-based images will look great on every screen, no matter what resolution it is.

10 5 Feature images prominently on relevant pages Large product images can increase conversion rates by as much as 9%, so give them as much room as possible. Other content, such as editorial and product copy, can be inserted into panels where they can be swiped in as required. $ Make sure image carousels are swipeable On a desktop, using buttons to control a carousel is easy. On mobile, trying to hit small navigation touch targets is a pain. It's much more effective to provide a carousel that can be swiped backwards and forwards.

11 Make buttons with CSS rather than images Buttons that are images render poorly on mobile devices. CSS buttons give you much more flexibility, and require less resources to download on a user's device Ensure that there are no stacked user interface elements Elements that sit on top of other content can provide a quick and easy way to navigate on a desktop site. However, on a mobile device they re more difficult to manage. Instead of creating stacked user interface elements, use accordions to push content down the page (or let customers navigate to custom landing pages).

12 9 -specific Numbers-specific Check that forms use custom input types One of the benefits of software keyboards is that they include multiple layouts for different types of data intput. Make typing tasks easier 20 for your visitors by loading up context-aware keyboards. Make forms as short as possible Since it s more difficult to input data on a software keyboard, try to minimize the number of typing tasks required on your website. Your users will thank you by being more likely to stick with the task at hand.

13 1 Turn off autocorrect and auto-capitalize on form fields To combat the combination of clumsy fingers and non-tactile keyboards, mobile devices have more aggressive autocorrect systems than their desktop counterparts. However, fields like addresses, home addresses and usernames should never be autocorrected and autocapitalized. 22 Use device APIs where appropriate When making a desktop site mobile we sometimes forget that smartphones can access user location, make phone calls, take pictures and much more.

14 3 Label calls to action with descriptive information It's important to help users move further through your site. By making your CTAs more descriptive, your users will get a better understanding of where links will take them next. Make sure that calls to action in the conversion path follow 24 a common design scheme When a user moves through a conversion path, make sure CTAs that lead through that path follow the same design scheme. This will help users move through a series of pages faster.

15 5 Ensure your website loads in under three seconds on a 3G connection. Modern web design practices (including large responsive designs) can have a negative effect on the performance on your website. Since 57% of users are likely to leave your website if it takes 3 seconds to load, building performance into your design is critically important.

16 Conclusion Only a few short years ago, the idea of building a mobile-friendly web experience for your smartphone visitors had almost zero business value. Today, however, it s a different world now. One in five people in the world (over 60% in the US) own a smartphone, and they are readily using it for researching and purchasing products online. They have come to expect great (not just average) mobile experiences when they browse the web. They don't enjoy pinching and zooming, they hate waiting, and they want to quickly and easily complete tasks on any device. It s a remarkable shift, both culturally and technologically, and companies that aren t fully optimized for mobile shoppers are seeing conversion rates remain flat, while mobile traffic continues to soar. This represents a huge missed opportunity for online retailers. Now s the time to make sure you re delivering an exceptional experience to your mobile customers

17 Thanks for reading We really enjoyed putting together these tips for you. Just to make it easier for you to implement all of them, we ve attached a checklist to the end of this ebook for easy reference to all 25 tips. If you liked this and know somebody who cares about improving their mobile conversion rate, share this ebook with them LinkedIn Google+ Facebook Twitter Mobify helps high-volume online retailers maximize revenue across all devices. It is fast to implement, easy to maintain, and the only solution that is fully compatible with your existing IT website technology. If you have any comments, questions, or would just like to like to learn how to launch a mobile-optimized website, please feel free to reach out to us and say hello.

18 Full deck at: slideshare.net/mobify/mobile-uxchecklistmobify Mobile UX Checklist 25 TOP DESIGN UPGRADES TO MAKE YOUR MOBILE REVENUE SKYROCKET Buttons and touch targets are at least 44px by 44px. The bigger a touch target is, the less likely a user will hit the wrong button. Apple's design guidelines recommend touch targets at least 44px by 44px. The font size of body copy is at least 14px. Rather than requiring users to double tap (or worse, pinch) your content, make sure the font size of body copy is 14px and above for maximum legibility. The line height of paragraph text is at least 1.5. A line height of 1.5 dramatically increases readability, although it can be set tighter or looser depending on the context. All aspects of the site are touch-friendly. Your visitors expect to use common mobile gestures like swiping, tapping and dragging so you ll need to build in functionality for different kinds of elements. Accordions, drawers, carousels and off-canvas flyouts are great for increased usability. Information found in hovers can also be found on mobile. On mobile, hovers tend to work unexpectedly (or not at all). Make sure thtat any information found on your mobile site does not require a hover state to view it. The website reflows in both portrait and landscape orientations. Mobile devices are held in portrait and landscape orientations, so you ll need to make sure your site adapts for both. It s also an opportunity to think critically about how users might use the website differently in each orientation. Common touch actions fall within the easiest to reach areas. Take advantage of common touch hot zones by making actions easier to reach. Place key interactions like menus, add to cart and purchase buttons in these easily accessible areas. Navigation is optimized for common mobile actions. Use analytics to understand how mobile users are browsing your website. If there are common pages or features they are using the most (e.g. a store locator) be sure to place them prominently in navigation menus.

19 Non-essential menu items have been moved to the footer. Similarly to the previous point, remove non-essential / infrequently used pages out of the primary navigation and into the footer. Are many mobile visitors going to your 'Terms of Service' page? Maybe it would be better served in the footer, thereby reducing clutter in mobile navigation. The context of each page is extremely clear. Smartphones have a much smaller viewport than larger desktop devices. This means that there are less visual cues to remind users what page they're on. Breadcrumbs, distinct headers, and fixed navigation are great ways to remind users where they are, and what task they're doing. A home screen icon is included on your site. If a user adds your website to their device homescreen, it's a great sign that they plan on visiting frequently. When a user opts to add your site to their device s home screen, make sure you have an icon that stands out among dozens or hundreds of other apps on their device. Check out Apple s guidelines for creating site-specific or page-specific icons. Text has been removed from images. Separating text from images is a standard web design best practice, but it s especially important for mobile devices. Images with text in them will become unreadable and poorly formatted when scaled down for smaller screens. Vector-based icons are used instead of images. Mobile screens typically have resolutions and pixel densities equal to or higher than a lot of desktop monitors and laptop displays. The result is that graphics can look fuzzy or blurry if they re not designed for such high quality screens. Vector-based images will look great on every screen, no matter what resolution it is. Images are high resolution / Retina quality. Extremely high resolution images are a great way to surprise and delight your customers, because most images on the web still look fuzzy, pixelated or even blurry when viewed on a Retina quality screen. This can have a big impact on performance, so you need to make sure that devices are only sent the images appropriate for their screen type. Images are featured prominently on relevant pages. Large product images can increase conversion rates by as much as 9%, so give them as much room as possible. Other content, such as editorial and product copy, can be inserted into panels, accordions, or simply placed further down the page. Image carousels are swipable. On a desktop, using buttons to control a carousel is easy. On mobile, trying to hit small navigation touch targets is a pain. It's much more effective to provide a carousel that can be swiped backwards and forwards.

20 Buttons are made with CSS rather than images. Buttons that are images render poorly on mobile devices. CSS buttons give you much more flexibility, and require less resources to download on a user's device. Elements which toggle open do not cover other elements. Elements that sit on top of other content can provide a quick and easy way to navigate on a desktop site. However, on a mobile device they re more difficult to manage. Instead of creating stacked user interface elements, use accordions to push content down the page (or let customers navigate to custom landing pages). Forms use custom input types. One of the benefits of software keyboards is that they include multiple layouts for different types of data input. Make typing tasks easier for your visitors by loading up context-aware keyboards. Forms are as short as possible. Since it s more difficult to input data on a software keyboard, try to minimize the number of typing tasks required on your website. Your customers will thank you by being more likely to stick with the task at hand. Autocorrect and auto-capitalize are disabled on form fields. Mobile devices have more aggressive autocorrect systems than their desktop counterparts. However, fields like addresses, home addresses and usernames should never be autocorrected and autocapitalized. Device APIs are used where appropriate. When making a desktop site mobile we sometimes forget that smartphones can access user location, make phone calls, take pictures and much more. Calls to action are labelled with descriptive information. Making your CTAs more descriptive will give your customers a better understanding of where links will take them next. This will make it easier for them to move through the site. Calls to action in the conversion path follow a common design scheme. When a customer moves through a conversion path, make sure CTAs that lead through that path follow the same design scheme. This will help users move through a series of pages faster. The website loads in under three seconds on a 3G connection. Modern web design practices (including large responsive designs) can have a negative effect on the performance on your website. 57% of users are likely to leave your website if it takes 3 seconds to load, so building performance into your design is critically important. If you ve got any questions or just want to chat mobile UX, us at hello@mobify.com.