Despite the fact that there are approximately 1.2 billion mobile web users worldwide, some websites are still a usability nightmare when accessed via mobile devices. The fragmentation of the mobile device market – with a relatively wide array of device – resolution – operating system combination has further complicated matters.
There can be many reasons that explain why usable websites become unusable when accessed via mobile devices. This article contains a set of rules which in my opinion should be kept in mind when designing and developing the mobile version of a website. These rules are by no means exhaustive but they should lead to you key areas for further research. So, here we go ….
Rule 1: Know Your Users
The mobile version of your website should be adapted for your user and not the other way round! A recent article on this blog highlighted this by explaining how to know your readers and write usable blog posts for them. Knowing your users is essential as otherwise it is practically impossible to design a mobile website which provides the best platform for interaction.
There are many ways which can help you build a profile of your typical user. I particularly find useful traditional methodologies such as conducting online questionnaires and polls. However, I have also obtained valuable user information via web analytics and usability testing tools. I consider knowing your user and identifying what your typical user wants from you as the first step in any web development project.
Rule 2: Make Your Mobile Website Accessible
Accessibility is a subset of usability. Therefore, by making your mobile website accessible, you will ultimately be contributing towards its usability.
Mobile website accessibility can take various forms. For instance, by allowing the toggling of options instead of forcing users to see them, hiding the number of widgets and features which are rarely used along with avoiding things like filling long forms are all techniques that contribute towards effective mobile accessibility.
When users have to access a website using a mobile device, a good proportion of their attention and focus should be on the content which will enable them to achieve their goals. This means you need to present the content in a legible format. Overall, there is a general disagreement with regards to the ideal minimum screen resolution that a mobile website should fit on. The most quoted resolution is 240 x 320px, although I highly doubt it since the average smartphone today has a screen size of 4 – 4.5 inches.
Rule 3: Keep it Simple
Mobile devices are typically restricted by screen size, processing power and internet bandwidth. Although all of these factors are becoming less restrictive with the advent of powerful devices such as tablets and dual core mobile phones, a mobile device is still less powerful than a computer.
With this knowledge in mind, it is thus advisable to keep the interaction as minimalist as possible and focus solely on helping your users achieve their objective. This often involves designing a separate website for users who access your website via a mobile device. You may also opt to developing an app for your users to download via app markets.
Rule 4: Communicate Via Colors
Color plays a key role in the usability of your mobile site. When used effectively, colors will convey the message you are trying to get through more effectively and in a much compelling fashion. A useful guide for choosing the right colors is this article entitled “Colour: User Experience And Psychology“.
Once you choose your site’s color palette, it is important to reference usability best practices where color is concerned. Of the most notable ones are the necessity of links to be blue and to provide a sharp contrast between text and its background. The key idea here is to use color to convey the objective of your site effectively.
Rule 5: Testing
Usability testing is a continuous process and not a one-time task. Your users will access your mobile website through a number of devices; hence the tests have to be conducted on multiple devices so as to address the multiple device -operating system – browser combinations. In an ideal world, testing should be physically carried out using a wide array of real devices. However, for smaller web development companies, this can be expensive.
A work-around is to have the more popular devices such as the iPad, an Android Tablet, an iPhone, an Android phone and Widows Phone. Additional testing can then be carried out using emulators. The latter should be used with caution as their rendering may not necessarily replicate the real device in an identical manner.
Conclusion
The above are what I consider as being five important steps towards designing a usable mobile website. You simply cannot afford to overlook them. Do you have any tips for mobile website usability? Please leave them in the comments section below!
Want to learn more?
If you’d like to…
- learn all the details of Usability Testing
- get easy-to-use templates
- learn how to properly quantify the usability of a system/service/product/app/etc
- learn how to communicate the result to your management
… then consider to take the online course Conducting Usability Testing.
If, on the other hand, you want to brush up on the basics of UX and Usability, then consider to take the online course on User Experience. Good luck on your learning journey!
(Lead image: Depositphotos)
