As a web designer one of the hardest platforms to design for is the phone, particularly, the vertical format of the phone. The narrow and long format is not only opposite of the desktop but everything has to shrink as well. Compounding this is the fact that more and more commerce will be taking place on a smart phone which makes it ultra-critical to optimize this experience to avoid potential customers leaving in frustration. What can you look at in your current mobile version to help increase conversions?
1. Consistently Format Your Images
In my opinion, this is the biggest issue with eCommerce on a mobile phone. Images that are too small to see because of their orientation. They look great on the desktop but when they shrink down to the phone you can’t see them with any detail.
The first thing that can help is to make sure all your images are the same ratio. They can be vertical or horizontal or square but all the product images should be the same. This helps make the pages consistent. All the elements of the page will be in the same spot. The site also comes off as more professional looking as all the optical lines are even. It’s a subconscious thing however the viewer will automatically feel better about a site if everything lines up properly.
2. Make it easy to go from product to product
Going back and forth between products is another issue particularly when you have a large number of items. I know that many “responsive” templates have a built in breadcrumb navigation but sometimes the links are really small and not very conducive to fat fingers. (A breadcrumb navigation is typically just below the header and it shows you the path that you are following on the site. For example, Home > Category > Product would be a typical breadcrumb navigation.) Other than making sure the links are big enough, another solution is to keep the navigation always visible at the top so the visitor doesn’t have to keep scrolling back to the top to go between categories or sections. Bonus, if the visitor can see additional information as either a pop-up or a click and reveal, they can just close the box and continue to scroll after they see what needs to be seen.
3. Make the “Add to Cart” to “Check Out” with as few clicks as possible
This is my biggest pet peeve. When you click on the “Add to Cart” and you miss the animation where it “adds” the product to the cart. Now you are not sure if it worked then you click it again and behold, you have two in the cart! On top of that the cart icon is at the top of the page and out of view. Now you have to scroll up to the top to make sure the item is in the cart or click the cart icon to continue with the checkout process. This is not a good user experience. A great example of mobile checkout is Target.com.
Their checkout is basically four clicks, add to cart, continue with checkout, login or continue as guest, fill out info and submit. If you have shopped there before and have your information stored, then it is even faster. My only critique is that the top navigation disappears when you scroll down but overall the usability on the phone is great. The idea is to get the visitor from selection to completion in as few steps as possible. This will lessen user drop-off and cart abandonment.
Although this is not an exhaustive list, these are three things that I consistently see wrong when I use a mobile version of an eCommerce website. If you think about it, this is basically how visitors will use your site. They will see a product, want more information and then purchase it. You can almost call these the cornerstones of all other choices in design and layout on your mobile site. If these experiences aren’t good, then the rest of the experience isn’t going to be good either.
This article was originally published at www.migmanmedia.com
Digital & Social Articles on Business 2 Community(31)
