25 WAYS TO MAKE YOUR MOBILE E-COMMERCE REVENUE SKYROCKET

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!

!!

!

!

$4.99

$4.99

13px 16px

Make the body copy at least 14pxRather than requiring users to double

tap (or worse, pinch) your content,

make sure the font size is 14px and

above for maximum legibility.

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. 12 10px 14px

!

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.

Check 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.

1x 1.5x

$4.99$4.99

34

!

Desktop hover

Make sure that information found in hovers can also be found on mobileOn 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.

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.

56

!!

Shop Search About Support Contact Q&A Links Gallery

Mobile Visits

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.

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.

7

8

!!!.

$4.99

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.

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.

910

!!!!!!!!!!!!!!Include a home screen icon on your site

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.

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.

1112

!!!!!!!!

Ensure that images are high resolution/retina qualityExtremely 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, 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.

1314

!!!!

!!!!!!!!!!!

Feature images prominently on relevant pagesLarge 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.

$4.99

15

16

! !!!!!!

Make buttons with CSS rather than imagesButtons 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).

$4.99$4.99

1718

!

Email-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 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.

19 20

!

!!!

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 email

addresses, home addresses and usernames

should never be autocorrected and

autocapitalized.

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.

21

22

!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 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.

23 24

!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.

25

!

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!

!

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.

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.

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.

25 TOP DESIGN UPGRADES TO MAKE YOUR MOBILE REVENUE SKYROCKET

Mobile UX ChecklistButtons 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 email 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, e-mail us at hello@mobify.com.

Full deck at: slideshare.net/mobify/mobile-uxchecklistmobify

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.

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.

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 email 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, e-mail us at hello@mobify.com.

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.

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.

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 email 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, e-mail us at hello@mobify.com.