This is step 2 of a multi-step series on how to design a mobile optimized website for ecommerce. In my last article, I unveiled my mobile ecommerce site along with some real data that I collected from my online store. In case you missed it, you can check it out below.
Today, I’m going to talk about some of my goals and criteria in designing the mobile version of my online store website.
As you are reading this article, keep in mind that making an ecommerce site mobile is a lot different than making a blog or article driven site mobile.
For one thing, optimizing a blog is all about framing the content whereas ecommerce stores must also focus on photos and intuitive navigation.
To make a blog mobile, often times it is as simple as running large blocks of text down one skinny column. If you were to do that with an ecommerce site, you would drive away a lot of customers.
Second of all, when it comes to online shopping, having a minimalist design is much more efficient. After all, online shoppers don’t want to comb through gobs and gobs of text and product descriptions just to locate the item they want to buy.
Sure, they might want the “option” to read all of the verbiage, but you have to be flexible and give them a choice. Bottom line, mobile customers are even more fickle than their desktop counterparts.
So is designing for mobile phones a tough problem to solve? Yes! It’s a major pain, but I’ll try and break down the essential criteria in designing a killer mobile website.
Tailor Your Mobile Design For People With Fat Fingers
The first problem that mobile users face is that clicking on links using a finger is much less accurate than with a mouse.
And in order to create an effective mobile website, you have to understand the difference between “tapping” and “clicking”.
I’m not going to lie. I didn’t really fully comprehend the concept either until I watched my little 4 year old daughter shop on our site.
One day, I decided to show her what Mommy did during the day by directing her to our online store website on my iPad. So I handed her the tablet and watched closely as she navigated around the site.
Me: So if you touch right there, you can see our “About Us” page. And if you click there, you can see some really pretty products that we sell in our store
Daughter: I want to see some pretty products Daddy.
Me: Okay, go ahead and touch “Bestsellers”
(Daughter taps the wrong link)
Me: You have to pinch to zoom in first and then touch it
Daughter: I’m sorry Daddy, my fingers must be too big.
Big FLASHING RED light! How the heck could my 4 year old daughter’s fingers be too big? In fact, she found the first problem with our desktop website. Our text links were too hard to tap!
The main problem with mobile users is that they don’t use mice so they can’t tap on links very precisely. Therefore, all text based links must be converted into large buttons that can easily be pressed without accidentally hitting an adjacent link.
Never Make A Customer Scroll Sideways
This one is actually pretty obvious, but for some reason I never saw the big deal until I actually tried to shop at my online store on my cell phone. Having to zoom in to click on links followed by zooming out to see the pictures was a major pain in the butt.
Therefore, creating a single column website that automatically adjusts to the width of a cell phone screen was my number 1 criteria. In addition, I also discovered some areas on my desktop site where I used mouse hovers to enlarge pictures from a thumbnail.
Because there’s no mouse on a phone, these images were either not getting blown up properly or taking up the entire screen when someone accidentally did tap on it.
Make Crucial Navigation Elements Accessible
This is probably one of the hardest parts of mobile website design and I’ll go over all of the tradeoffs that I dealt with in a future article.
But in a nutshell, you have about one eighth of the screen real estate as you do on a desktop and you still have to manage to cram all of the important navigation elements onto a 4 inch screen.
In order to figure out the most important elements of your site, you have to rely heavily on your analytics. Figure out which pages a customer looks at the most and make those pages the most easily accessible on your site. Any filler pages or non-crucial content should either be pushed all the way down to the bottom or removed in its entirety.
If you thought that the search bar was important for your desktop site, it becomes even more crucial that your mobile site has a search bar present at all times. People get frustrated easily on a phone so the easier it is to find a product, the better.
Mobile Sites Need To Load Quickly
With mobile connection speeds and mobile processors getting faster and faster, this will probably become less of a factor as time goes on.
However, right now phones are largely limited by processing speed and connection speed. Therefore, it’s important to create a mobile website design that is leaner and faster to load than your desktop site.
According to the Gomez Group, mobile customers expect their page to load in under 5 seconds or they are outta there.
Right now, my desktop site loads in a little under 2 seconds on a cable modem connection. Since phones have much higher latencies and slower bandwidths, that means I need to cut down on the image sizes for my mobile site.
Phone screens are only 4-5 inches anyways, so there’s no reason to send a customer a high res photo when a small photo will work just fine.
Here are some other ways to make your website load faster.
Too Much Text Will Overwhelm A Customer
When I first designed my desktop site, I made sure that I wrote a decent amount of verbiage for every category and product description.
Not only was this good for providing a customer with more information about my products but it was also beneficial for SEO as well.
On mobile however, the problem is that when you take a whole lot of text and compress it into one skinny column, you get a ton of pages to scroll through.
When shopping on a phone, pictures are much more important than text and you absolutely don’t want to have someone scroll through pages and pages of verbiage just to get to the “Add To Cart” button.
The best way to deal with this problem is to use “collapsible” elements in your design.
Give a customer the choice of whether they want to read the descriptions or not. Provide as little information as possible up front, and let the customer explore your products on their own volition.
What I described above pretty much outlines most of the goals that I wanted to achieve with the mobile version of my online store website.
In my next article, I’m going to talk about some of the many tradeoffs that I had to make in order to complete this mobile project within a reasonable time frame.
Unfortunately in the real world, it is not always possible to get everything you want without a lot of sacrifice. As with any task, you have to weigh the development costs with the potential gain. My next post should be interesting so stay tuned!
- How To Organize Your Mobile Website To Maximize Usability And Sales
- How We Doubled Our Mobile Sales By Designing A Mobile Version Of Our Website
- Making Forms Mobile Friendly And How IPhone AutoCorrect Almost Cost Us A Big Order
- How PayPal One Touch Can Boost Mobile And Tablet Conversion Rates By 31%
- 6 Ways To Speed Up The Loading Of Your Website