A mobile website is a must for any company today. With mobile search queries overcoming desktop search queries, the age of mobile has truly dawned. If a business ignores mobile audiences, it risks losing a large majority of potential customers, who may be looking for their site.
Mobile users are more targeted and specific with searches being made to meet a particular need or find something important. Also, smart phones are intensely personal gadgets and this ensures that mobile presence helps companies build rapport with users.
Designing a mobile website is not very easy, because the space available to make an impression in the mind of the user is very small. A designer needs to utilize the limited real estate available on the phone screen to make a powerful impact.
User Interface (UI) is the junction between user and the mobile site. It is the set of actions a user has to perform in order to use or access the site, and get the results he or she desires. The cleaner and simple the UI is, the better is the user experience (UX).
In order to maximize your customer’s experience and add value to your brand, here are a few tips for you to design an aesthetic and informative mobile website, and create a great UI.
1. Optimize
Speed is critical to how well your mobile site performs on a smart phone.
All that you have on the site need to be optimized for faster loading. High quality images are great, but they should not take forever to load.
A survey by Digital showed that 53% of American online shoppers expected an ecommerce site to load in less than 3 seconds whereas a significant 14% want sites to load immediately and automatically. Google is of the opinion that if it takes more than 2 seconds to load an URL from your site, then the crawling activity of browser becomes severely limited. Though this may not significantly affect your rankings, it does show how critical loading time is.
You can reduce the bandwidth of your web pages by compressing them. GZip is a handy tool for this purpose and help you cut down HTTP response time. Images can be optimized using image editing tools and photo editor apps like Acorn and Pixlr.
2. Enable Browser Caching
When a user visits your site for the first time, he has to download various elements of web page like the HTML document, stylesheets, images, CSS files etc. If you leverage browser caching, your user’s browser remembers most downloaded resources and will be able to render it quicker the second time around. In short your webpage files get stored in the browser cache and drastically cuts down the number of HTTP requests.
You need to mark pages or parts of mobile website pages that are updated at different intervals. The web server tells the local browser which files can be cached so that they need not be downloaded when the user visits your site again or refreshes a page or even move to another page on the site. This reduces loading time providing a better UX.
3. Avoid Long Forms
Long and tedious forms are big put offs as far as mobile website UX is concerned. It is difficult enough to fill up long forms and too many form fields on desktop; the task becomes even more painful on smart phones.
Users try to avoid any type of form-filling when they are using mobile devices. Not only is the process time-consuming, it also prompts users to look elsewhere to have their needs met.
If long forms are unavoidable, as in an insurance quote request, ensure you keep it as minimal as possible. The long form should ideally be split into sections for various question groups. You can also consider rendering the form in multiple pages. Include a ‘call back’ feature alongside so that the user knows that there are options available.
If the user chooses to abandon the form mid-way mail him a link to access the form later on a PC to complete the rest of the fields. Also keep in mind that the user most likely is aware of the complexity and lengthy nature of insurance forms, so he may not be your regular mobile user who will refuse to get on with the process outright.
Remove unnecessary form fields and keep forms clean and simple. Auto-fill forms and auto-suggest entries wherever possible. Also make it easy to use inbuilt tools like GPS, camera, address book and number pad to take the pain out of mobile forms.
4. Keep User Intent in Mind
A responsive design alone cannot take care of your company’s mobile site needs. Of course, an easily navigable, readable and tappable site is critical, but in addition to that you also need to pay attention to the content you will put up on your site.
User behavior and user expectations are completely different as far as your mobile website is concerned. A mobile device user will prefer information and instructions to be available quickly, so ensure that all important facts and details your visitor wants is available in the landing page.
Links and touch targets should be legible and tappable. Do not place them so close together that the user will end up accidentally tapping the wrong field, link or icon. The touch targets should be large enough for users to tap with relative ease and enable them to find what they are looking for.
It is recommended that tap target size should ideally be about 7mm in width or 48 CSS pixels on an optimized mobile site. The spacing between tap targets should be a minimum of 5mm (32 CSS pixels), both horizontally and vertically. Web.dev Guidelines recommend these measurements considering that the average width of adult finger pad is 9mm.
Quick action is what most mobile device users look to achieve, and your site should facilitate that. You can dedicate the more detailed brochures, long forms and other features to the desktop version of your website where they are more convenient for users to browse through.
5. Cater to User Needs Foremost
The unique needs of mobile web users include ease in finding information, simplicity in going deeper into a site, quick access to important contact information and a lean checkout process. A site that caters to the unique needs of the user will enable him or her to make quicker decisions without wasting time trying to find something on the site.
Conclusion
Designing a mobile website requires you to cater to the unique needs of a smart phone user. A responsive design helps your site to adapt to different screen sizes, but it is important you remember that mobile design is not only about a change in technologies, but is also about delivering a unique user experience. If you keep the user in the center of the designing process and build a UI based on customer needs, you will be able to ensure customer delight and satisfaction.
