With the usage of tablets (iPad, Samsung Galaxy Tab to name just a couple) on the rise, increasing numbers of users are accessing the web through touch screen devices.
With this in mind, there are some key usability guidelines to consider when designing a website. This helps ensure a user friendly experience for all users, irrespective of whether they are using a finger or a mouse.
Be wary of ‘tap’ size
Historically, there has not been a great focus on ensuring that target areas (e.g. links) within a website are of a certain size. Now, however, the touch screen nature of tablets (and many smartphones for that matter) means this is more important than ever.
Users are obviously able to hit smaller targets more reliably with a mouse than with a finger. This means that, when using a tablet, users may ‘mistap’ a button or link if the target is too small. Users are forced to first zoom in on the device in order to correctly select the target. This can cause a straightforward task to become more cumbersome and time consuming; negatively impacting the user experience.
When designing your website, ensure that users are able to easily touch buttons and links with their fingers. In terms of the required size of the target area, Jakob Nielsen indicates in his ‘Usability of iPad Apps and Websites – 2nd Edition’ paper that a general rule of thumb is 1cm x 1cm for each target. Obviously this size is not a magical solution for all websites, however adhering to this wherever possible will help to minimise the issues mentioned above.
Avoid hover states or provide alternatives
Hover states, often used within main navigation menus or to provide contextual feedback to users, do not function correctly on tablets or other touch screen devices. This is an important factor to consider when designing a website.
As such, if your site has been built using hover states, you need to come up with another method for providing the functionality and information that would normally be presented to users through hover.
One way to achieve this is to ensure that every element within the website that has a hover state also has ‘on’ and ‘off’ states. For example, main navigation menus which expand on hover should also provide the option for users to tap on each menu item to open the related submenu (i.e. ‘on’ state), and the ability to tap on the item again (or tapping elsewhere on the screen) to revert the menu back to its original state (i.e. ‘off’ state).
Make interactive functions clear
With the emergence of touch interfaces, gone are the days of just ‘click’ and ‘drag and drop’. Touch gestures are much more intricate, and also have much more variation than a traditional mouse. As a result, affordances are incredibly important to tablet users. Ensure that each interactive element provides a clear indication of how a user should interact with it, whether that be a tap, swipe or pinch.
Minimise text input
Anyone who has used a tablet will know; typing on one can often be a chore. Unlike physical keyboards, onscreen keyboards such as those used on tablet devices can be cumbersome to use and often interrupt the flow of the process.
For this reason, it’s important to be aware that text input should be kept to a minimum in order to accommodate those visitors to your website who are using a tablet. Ensure that all of the information users are required to complete within a form is actually required – if users perceive information marked as mandatory to be unnecessary, they will be more likely to abandon a process, whether that be a website registration form or the checkout process of an eCommerce website.
Minimising text input not only helps to facilitate a more positive user experience for those visitors using tablets, but also improves the efficiency of the process for users who are browsing with a traditional keyboard and mouse.
Designing your website with these four key tablet considerations in mind will help to promote a more positive, user friendly experience for all visitors to your website; not just those using the traditional ‘keyboard and mouse’ combination. With the shift towards tablet browsing, there has never been a more important time to ensure that your website is ‘touch friendly’.