Picture this. Ravi is out on the streets, headed for an anniversary dinner. He has decided to pick up some flowers on the way. He fishes out his cell phone from his pocket and carries out some local searches to arrive at your website. You have a store selling flowers at a location nearby to where Ravi is now. In this situation, how do you develop a website that will easily convert this online lead into sales? You need to have a mobile version of your website that Ravi can quickly browse through, find what he is looking for and make the purchase he wants. You have to pack in your entire standard website into a pocket-size edition, like this one:
Before hitting the first tip, ask yourself: what are the web pages on your website that a user on the move will most likely require. For example, if you function only as a brick and mortar store, a mobile phone user needs to know your address and some assistance to reach that address. Why don’t you provide this information the moment a cell phone user checks into your website? It saves a lot of time for the user and you can quickly get down to business. Instead of taking the users, who have already decided to buy, through pages of sales pitches, give them what they need: a quick guide to reach your store. That is the first navigation tip for you: give the user what they want as quickly as you can! Look at this example:
Go high on the convenience factor. Ravi is headed to a nice cozy anniversary dinner. Buying flowers should not make him break into a sweat! You can provide him that convenient experience by following simple conventions of navigation designing. The user must know clearly which drop-down boxes reveal what and where web links need to. There should be no ambiguity about the navigation designs. A simple example is to use the sign of a magnifying glass to suggest that it is the search box. Attention to little details like this can elevate your mobile website’s acceptability among users. In this context, be more mindful of the font size. Mobile devices can be small screens or larger tablets. The user must never go through the trouble of zooming in on your content!
Keep an eye out for the color contrast. The background color of the website and the text written on that color must not form an oddball combination. Contrast in color should elevate the experience of reading what is written on it. It should not take away anything from the mobile website’s acceptability. Since the user is probably waiting on the signal to turn green while he is sorting through your website, you are best suited to provide the content in a contrast that sharply accentuates the written words.
While we are on this point, think about the factor of the touch-screen that the user is checking the content on. On an average, it requires about 44 pixels, up-down and left-right, to select an item with a finger touch. Be sharp about this bit. You don’t want the user to feel intimidated by a touch pattern that makes them conscious about having fat fingers! Use touch feedback to ensure that they get what they tap for, even if the taps are a little misplaced.
Mobile users checking up your website’s mobile version should not find it thematically different from your website’s desktop edition. In terms of navigation and user experience, of course, the website’s two versions have to be completely different. But in terms of color use and basic designing, there must be some similarity to establish the link between the two versions. It may be that Ravi has browsed through your website’s desktop version in his office a couple of days back. Now that he is on the road and tuned into his cell phone, he must not feel completely at sea about the two website’s versions. Give him visual aids to make that connection. It must end with colors, fonts and themes! Beyond these touchstones, the mobile version should be an entity by itself. Look at this as an example of the same website should look on different devices, depending on how each device is used, as that, in turn, reflects on how the website is perceived by each user: