As discussed in the first blogpost in this series, there are several steps involved and issues to keep in mind while designing mobile-friendly websites. One should always start with the user, and that's what we do here - in this post, we look at how to design the user experience for a mobile-friendly site.Its a different world / Know thy userA mobile user is completely different from someone who accesses information from a desktop. A mobile user wants to check email in a bus, view friends' photographs waiting in a line, wants to find out stock quotes any time anywhere and is looking for help when lost in an unknown place. A mobile phone too is completely different from a PC - it does not have a large monitor, completely usable keyboard and a fast broadband connection like a PC.
Fig 1: The world of mobile phones is very diverse
Screen-size makes or breaks the experienceAs mentioned earlier size of the screen and the keyboard are one of the biggest constraints to be kept in mind while designing websites for a mobile phone. Do not make the website for just one screen size and one kind of keyboard. Make it generic or carefully choose a handful of common target screen sizes of your users. The screen size on mobile phones today ranges from 176x208 to 320x480. Add to this different dpi ,orientation and browsers and it makes the world of mobile devices very diverse. But here's the bright side: a mobile phone user normally only wants to do the one or two things frequently on your website. Keep the primary features and information in mind and make it very easy for the user to discover them and use them.
Fig 2: The most common screen sizes and orientations
Typing is painfulDon't make the users type a lot because even on the smartest of phones typing is not as easy as on a desktop. Make the site more click based. If the primary use cases demand keyboard input from the user, give auto suggest as the user types and have incremental search for items wherever possible.Up & down is better than sidewaysKeep the site contents as vertical as possible. Expanding the site horizontally results in bad user experience while scrolling back and forth. Also some older phones only allow vertical scrolling. Also repeating the header contents in the bottom of the page is a good idea since it makes it easier for the user to switch to a different use case instantly without scrolling a lot.GPRS is slow, unsteady and costlyIn terms of quality and cost to the user, GPRS has a lot to catch up in comparison to the normal broadband internet connections. Unlimited data connections are still not available everywhere. 3G networks are still a dream for many countries. And many of the cheaper data plans have high loss rate and exceptionally high latencies for SSL connections. Keeping all these considerations in mind, the website should not have too many images and data. It should maintain the right balance between richness and latency depending on which device the user is using.
Posted By: Chunky Gupta, Software Engineer & Ram Brijesh, User Experience Expert, Google