May 17th, 2011
Top Ten Tips for Designing for Mobile E-Commerce: Part 2
This is the continuation of Part I of the Top Ten Tips for Designing for Mobile E-Commerce.
6. Replace image based buttons with CSS
To reduce load times, get rid of as many image based buttons as possible and replace them with CSS. A handy tool is gradient-scanner.com that allows you to upload any image and select the gradient colours and angle you want displayed. Once you do that, it will give you the CSS equivalent to your image’s gradient.
7. Resize Images
Cellular connections are still not as fast as broadband internet so you should reduce image sizes for mobile devices. TinySrc.net is one of the resizing services that can be useful. It is great for handling huge, weighty assets that need a lot of resizing to fit on a mobile screen and load slowly on a 3G connection. However, if the change in dimensions is small enough, loading the full image and resizing with CSS can be more efficient. For these small changes, the time required to process externally is longer than resizing with CSS and does not offer a significant enough compression.
8. Help and FAQ should be mobile
Quite a few mobile sites are guilty of ignoring this.
People who go to the help or FAQ are there because they are having issues on your website. For example, if they are having trouble completing their checkout and go the help section, you want to provide them with the easiest and fastest way possible to resolve their issue. If a mobile user clicks “Help” and gets a desktop version, they are less likely to trawl through solutions to resolve their problem than they would be if they had an easily accessible mobile version.
In this instance, a mobile user would most likely abandon their purchase. Help and FAQ sections need to be some the most user-friendly parts of a site, because the people going there already have problems.
Alibris Mobile Checkout
9. Stay true to the branding
When a user is familiar with a brand, they expect a unified experience across desktop and mobile. This familiarity inspires loyalty and trust, both essential for mobile e-commerce stores.
Fonts, icons, and colours should be consistent across desktop and mobile. A great way to keep custom fonts identical is with TypeKit. Mobify-powered sites like the New Yorker use TypeKit to keep their brand consistent across desktop and mobile.
The branding also contributes to the whole buying experience. Many legacy mobile sites are built using generic templates. The only things that changes between these mobile stores is the colour, with different brands essentially using the same design as their competitors, with a palette swap.
Alibris Desktop Checkout
These stores lack the final touches necessary to create a feeling of familiarity on a mobile site.
Try and keep the checkout flow as similar as possible across platforms. For example, when designing Alibris’ mobile store, the UX was kept the same between desktop and mobile. As a result, the mobile site feels incredibly familiar to anyone who has used the desktop site, right down to the identical cart icons.
10. Always test across multiple devices – and multiple OS versions on those devices
This seems like a fairly common sense tip – but many people miss out on testing different OS versions on those devices.
For example, we recently encountered a problem in a Mobify-powered store that worked properly across all devices, except certain Motorola Droids.
It turns out that Android 2.1 doesn’t support the background-size CSS property, so larger sized HD images didn’t resize properly and ended up being too big for their containers. This is fine on most smaller screen-sized Android 2.1 phones, but our scripts correctly detected the Droid as having a large enough screen to handle HD images and served them. The result was a slightly broken and hard to use store – but only on Droids running Eclair.
Droids running newer versions of Android were fine, including the ones in our device testing library.
These small touches will help your mobile store succeed. If you have any questions about taking your store mobile, feel free to contact Mobify here.
