Guidelines to Mobile Usability

With the creation of smart phones and since your mobile device is conveniently available anywhere, mobile internet browsing has increased astronomically. As such, users have come to expect better experiences on their phone. Unfortunately, not all sites have a mobile version, which is a problem since there’s a good chance your site will look significantly smaller and possibly illegible on a mobile device.

This should raise a couple questions:

Is your site compatible on all cellular phone platforms?
Is the site being used on a cellular phone the same way it would be used on a desktop?

If you aren’t sure, don’t guess; check your analytics. Here’s a post on how to track mobile traffic.

Issues with Mobile Usability

The answer depends ultimately on the function of your site but of course regardless, browsing a website on your mobile is a much different experience than browsing on your desktop. That said here are some usability issues you may run into while browsing on your mobile:

Excessive Scrolling – Phones have been getting smaller and sleeker over the past couple years, which means screens are even smaller. While the width of a standard desktop screen is around 1052px, the standard width for a mobile site is 250px. Unfortunately because of the small screen restriction, viewing a site is very frustrating because of scrolling and/or zooming in. I’ve run into this problem so many times, when I search on my blackberry, I always have to zoom into the site to be able to read, which of course means I have to scroll from right to left to read the content properly.
Load Time – Non-mobile-friendly sites could take a long time to load.
Page Height – Along with having to zoom, the page could be longer than necessary, causing the user to have to scroll down.
Flash – If your site has flash, more than likely it will not be supported by all cell phone browsers.
Mobile Location – Another factor affecting mobile browsing is location of the user. While computers are generally stationary, cell phones are used everywhere (hence the world “mobile”). The contrast of the colors and font size on a site may not be legible while using a cell outdoors.

Mobile Design Tips

Here’s a list of guidelines for designing a more-user friendly mobile site:

Screen Size – Design your mobile site to be 250px
Limited content – Since the width is limited, height may be used to fill in space that is lost with width. However, it’s best to avoid having a long page of content. After all, this is a phone and is still quite small. Whether its touch screen or keys based, it’s much harder to scroll up or down than it is on a desktop.
Clear action buttons – Again, since the screen is small, it’s best to make sure if you do have images to make them clear, and if that means using the whole width that’s okay. Same goes for buttons, if there is a clear action, it will be seen, so the bigger the better. I highly recommend buttons over links; specifically for touch screen users. When trying to click on a link, it’s always so hard to actually click on the correct link. The link will usually be buried within text and other links.
Create a separate mobile environment – administering a site that is optimized for a desktop that is at the same time 100% mobile friendly is very difficult since both natures are completely different. That would mean you’re essentially limited to the parameters of mobile (for example, when choosing the width of images for your desktop site, you’ll be nagged by the limits of your mobile resolution). It’s best to have a separate environment specifically catered to mobile screens allowing you to have freedom in both designs.
Real Estate – Mobile “real estate” is very limited; to maximize the use of space in your design, simplify your site to the very basic functions of your company. For example, if your desktop has three panes; a side menu, content, and news. The side menu may not be completely necessary, especially since the navigation on mobile and desktop is completely different.
Meet the user’s needs quickly – If the South Africa World Cup is the hot topic, and you’re cnn.com, make sure that story is visible above the fold right away.
Clear functions – Make things clear and easy for the user to find. If you want someone to click on a button, make it large and bright to emphasize the action. For example, on a mobile site it would be smart to have a back button rather than a link because it’ll be easier for the user to find the button than a link since a link could easily get hidden through the text.
Ease of use – The user shouldn’t have to waste time scrolling up and down looking for something that should be easy to find. For example, in tip #5, I talked about “real estate.” With a limited width, you lose a lot of space for content, but what you lose in width you can make up in the height. This makes it much easier for the user to read rather than having to scroll from left to right.
Browsing Links – Use only basic browsing links such as home and back, you don’t need to include the whole menu that is on your desktop site. Make sure to add the browsing links at the top and bottom of the page.
Search – For some sites, it is very important to have search because the site is search based for example, Google or Target. Google is search based links, while Target is search based products. If your site is search based, including two search boxes may be really helpful. Some companies have sites that are entirely search based such as Google, their desktop and mobile site is just a search bar. As for Target and Amazon their home pages have a search bar at the top of the page with browsing links below, which is another way to go because you can browse products as well as search for them.
Testing – Lastly, make sure to test the usability of the mobile site on different phone browsers. This, of course, would be a separate checklist from launching your desktop site. Keep in mind, phones can be used in any location, for example, the contrast of a screen in the sunlight, has to be legible.

Having a mobile friendly site, will make it much easier for your customer to navigate, making for a better user experience, in turn, increasing your conversion. If mobile phones make shopping more convenient, you want to make sure your site takes advantage of that trend and make it easy for users to shop for your product as well.

And now that you have a mobile site, few things to keep in mind:

Search engine optimization (SEO), here is a link from the Google Webmaster tool on how to Help Google Index Your Mobile Site. Mobile websites are often returned in Google mobile search results (and other search engines too) in preference to non-mobile websites.
And once your mobile site is ready for prime time, you might want to drive qualified traffic through paid search (aka Pay-Per-Click) on Mobile, here are some ideas from the Google AdWords blog.
Last but not least, you gotta measure! A separate mobile website is easier to track on all devices than an integrated website where the tracking code might not run on all devices. Try Google Analytics for Mobile.

We’re in the process of practicing what we preach, so keep an eye out for the E-Nor Mobile Site! 🙂