For over a decade now, eCommerce has been an integral component of the lives of consumers. In fact, eCommerce sales have more than tripled since 2003. Mobile web use has also exploded, increasing by 39% over the past year. Naturally, the number of consumers making purchases via mobile devices is on the rise. As such, many eCommmerce sites have started offering mobile-friendly user interfaces. A recent Google study found that 72% of consumers think it’s important for brands to have mobile-capable sites.
And who can blame them? Every smartphone owner knows how tedious it can be to navigate some mobile-unfriendly websites on a mobile device. Screen real estate is at an extreme premium on mobile devices, and even the most well-designed smartphones are more difficult to enter data into than a desktop keyboard. These present substantial challenges to a mobile eCommerce web designer, but here are a few great techniques being used on popular eCommerce sites that make the shopping and checkout processes well suited to mobile users:
Code form fields for easy data entry
Let’s face it; filling out form fields on a phone stinks. Some data entry is unavoidable when dealing with checkout, however. Thankfully, HTML5′s type attribute on <input> tags can help make the process a bit easier. Here, Crate & Barrel used <input type=”num”> so when the user gets to the ZIP Code field, the smartphone automatically shows the number pad as opposed to the full keyboard, greatly reducing the likelihood of typos while providing some simple form validation. Minimize the hassle a mobile user encounters in checkout by reducing the number of required fields to those which are absolutely necessary.
Embrace standard smartphone user behaviors
Since the introduction of the original iPhone, smartphone users have become accustomed to using gestures (such as swiping, tapping, and pinching) to interact with their devices. Make your mobile eCommerce site integrate smoothly into their user experience by incorporating features such as the swipe-able product photo gallery shown here (from NewEgg). Left and right arrows are provided to indicate that additional photos are available, and the arrows can be tapped in case the user is unaware of the swiping gesture, or if the user’s phone is not a touchscreen device.
Minimize text when displaying products
Given the incredibly limited screen area available to a mobile website, showing only the most important information is key, especially on product category pages, such as these, from the Gap. The default view (far left) shows a product photo, the product name, and the price. The Gap takes it a step further by offering an ‘Images only’ view, where everything except (larger) product images is removed. This allows a site visitor to quickly scan the available products to find ones that particularly interest them.
Want to ensure your eCommerce site is meeting the needs of the evolving web shopper? Providing a great experience to all your users, whether they use a smartphone, tablet, or desktop, is vital to success in online business. We’d love to help you deliver the best mobile shopping experience in your industry; just drop us a line!
