If you think about it, the best way to gauge the user-friendliness of a mobile website is to visit a couple of sites on your smartphone and take notes. Is the site highly readable within the four small walls of your phone? Are you torturing your fingers with too many clicks, pinches and taps to get to that important piece of information?
Design and navigation are the life blood of any mobile website -- optimizing them to the small screen can drastically improve usability. The five tips discussed here tell you how you can do exactly that.
1. Keep it Simple and Easily Readable
Simplicity and usability go hand in hand. Navigating your site shouldn't be like solving a jig-saw puzzle. This means no frames, tables and unnecessary formatting. Limit the padding too -- the loading time taken when users click the links on your mobile site can put them off (they are more patient with the loading time for normal computer-screen web pages).
Boil the design down to the most important categories that users are most likely to access, and arrange them in descending order of hierarchy. For instance, you would want to have a search box for "item" or "keyword" so users can directly get to what they want.
Under this, you can include a "store finder" where users can punch in a zip code to visit the particular online store. Further below, you can have a browsing section where the A-Z of product categories is given.
Tailoring your mobile website design for a large number of screen widths and resolutions does not make good business sense. For instance, many basic Blackberry phones have a resolution of 320 x 240 while the same can go up to 786 x 1024 for the iPad and 1280 x 800 for Samsung Galaxy Tab. What you can do is assess the display sizes and resolutions across different mobile devices to make a calculated call about your mobile layout.
A golden rule is to avoid a graphic-heavy design for the simple reason that it increases page loading time. See if you can add image icons (thumbnails should do) to facilitate easy interaction with your page and add a bit more sparkle to your mobile site’s overall appearance.
2. Reduce the Amount of Text Users Can Enter
Entering large amounts of text is a big pain even in the best mobile keyboards and keypads. Users are also more prone to making errors when typing on smaller mobile keyboards. You may want to brainstorm with your mobile web designer and content writer about the best approach to limited text entry.
There are a couple of ways around this issue. The three simplest ones are:
- Give registered users the option to re-use their stored details when they make purchases. Once they sign into the "My Account" section, the delivery address they had stored previously should be accessible so they can pick it easily instead of having to type it all over again.
- Add drop-down menus and checklists for language and location.
- Offer an option to enter the PIN as opposed to a password.
Some more innovative ones are:
- If you’re selling or marketing apps, you can incorporate QR codes. Users who scan the codes can be instantly directed to an app store
- Allow users to make instant calls when they tap on the phone numbers provided on your "Contact Us" page
3. Understand Your Audience to Get Your Navigation Design Right
There is no such thing as perfect navigation. If your layout is in the form of a single column, adding the navigation menu on top of the page would shove the content down. If the layout is different, you could place the navigation menu at the top to cater to users who would like to navigate to a specific category immediately upon landing on the page.
In most cases, a navigation menu at the bottom works well enough, mostly because it doesn't interfere with reading the page and is still quite easily accessible. For faster access, you can position an anchor link on top.
Users will be scrolling down a lot on a mobile website. A simple way to address the vertical scrolling is to place "back to the top" buttons at the bottom of the page. For users who want to switch back to seeing your full website, you can add a "Full website" link on the header or footer of the page.
4. Make Text Links Easy to Use
Like text entry, clicking the text link on mobile websites can be a handful. It is annoying when all the links are highlighted at the same time when you move the cursor while scrolling the page. You can increase the area of the clickable text or use bigger fonts for clickable text. Another option is to change the background color of the links and buttons.
5. The Don’ts of Mobile Website Design
It is best to completely avoid certain design elements that can be disruptive to the mobile site browsing experience. These include:
- Flash and animation
- Large pictures
Once you have the blueprint of your mobile web design, make sure you test it prior to deployment. Nothing beats personal experience when you have to make a calculated decision about customer engagement and sales.
Image courtesy of kulyk (Shutterstock)