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.
Top Ten Tips for Designing for Mobile E-Commerce: Part 1
Ten Essential Web Design Tips for Mobile E-Commerce
At Mobify, we power a lot of mobile sites. Over the years, various design points – some obvious, some not so obvious – have come up again and again.
Together with our clients, we came up a list of salient points. In no particular order, here is Part I of the Top 10 Tips for Designing for Mobile E-Commerce.
1. The mobile homepage should be a roadmap for the rest of the site
Simple mobile navigation
First thing to do when starting to design a new site is analyze the main sections of the site you need to navigate to. This is different from a desktop site as subcategories are not on the first page.
The main menu should be easily available. This is especially important on mobile web vs. apps, as in apps, you can put a fixed toolbar in the header or footer. On a mobile site, there is no room on screen, as the browser has fixed chrome at the bottom and the URL bar at the top. It is possible to use JavaScript to fix an additional toolbar at the bottom of the screen, but this is a waste of screen space and redundant with good nav.
For example, Threadless.com’s desktop landing page has announcements, featured shirts, new designs, and options to score submissions. In order to browse their store, you have to drill down another level. While this works well on their main site, mobile is a different beast. All the aforementioned options are available on mobile, but the landing page has a separate design. On mobile, you immediately have the option Shop Guys, Shop Girly, Shop Babies, etc front and centre. This instant and obvious roadmap to the site is the landing page for mobile, and the feature that most mobile visitors will be coming for.
2. Don’t put too much on the homepage
You don’t know what specific items people are looking for. On desktop, there is the luxury of being to display a range of items and hope one of them is relevant to the user. On mobile, if you display a large range of items, it will appear cluttered and disorganized. The net result of this will be confused or disappointed mobile users. This will contribute to bounce rates and defeat the point of having a mobile website.
Content should be tailored to the device. Cramming too much content onto a small screen never looks good. A good example of a site that follows this is KiwiCollection.com. Kiwi Collection is a luxury hotel booking service. If you were to include an example of every level of hotel, style, and location in the world, the mobile site would quickly become crammed and unusable. Instead, there is a swipeable image gallery with a few properties and crucially, a search bar. You can’t guess what a user is looking for when choices are so broad; all you can do is make it easy for them to find what they are looking for.
3. Set different text sizes for portrait and landscape
Why would you do this? When people turn their phones from portrait to landscape, they don’t want longer lines of text; they just want larger text. A relevant point that makes this more pertinent is disabling zoom. Although the argument for and against disabling zoom can be debated for hours, it is Mobify’s philosophy that disabling it leads to a better user experience, when implemented properly. For a little more on disabling zoom on mobile devices, check out this post written by Peter, Mobify’s chief architect.
Make sure the text size is readable. As a general rule, titles are 13-15px and body text is 12-14px, with smaller sizes for metadata.
4. Make search easy and powerful
Search should be easily available, not hidden or on a separate page. Make sure that it is the same powerful search available to desktop users, not a scaled down version for mobile. For users of Google Site Search, a mobile version is also available and should be used.
5. Make sure scanability is high
What is meant by this? Make sure lists are not too long, are large and easy enough to view when scrolling down, and don’t take too many swipes to view the entire list.
Easily accessible search on Kiwi Collection
Because of the nature of their screens, phones are conducive to designing for portrait orientation and vertical scrolling. However, some designers use this as a excuse to cram in an much content as they can. We believe people are less patient on a mobile device, and when they don’t see what they are looking for quickly, they will leave. It’s all about instant gratification.
Long, vertical lists take too long to decipher, especially when they are not finger friendly. An easy way to get around this is filters in the list page. If you do truncate content, make sure you retain the filter.
If you absolutely need to have long pages, make sure list pages load quickly by using something like lazy loading that allows you to load objects only when they are needed. This way, objects at the bottom of your list will only load if someone scrolls down there.
Hope you have found this useful.
Part 2 of this article is available here.
