What is a ‘Touch friendly’ website?
As the Internet has evolved, so has the technology that we use to engage with it. In recent years, we’ve seen the rise in the popularity of touchscreen devices and user experience web design.
Touch friendly websites are becoming more commonplace as the sales of touchscreen technology rise. It’s a natural progression; in order to engage with consumers, businesses need to be communicating via websites that can be used effectively on a range of devices.
The way that we interact with touchscreen devices is different to the way that we interact with other technology; therefore we need to take these differences into account during the design process. ‘Touch friendly’ is a set of simple principles that we can apply to make the user’s experience on a touchscreen device as positive as possible.
There are several key reasons why it’s important to design for a touch friendly world, not least the growing popularity of tablets and smart phones. The graph below identifies the ownership of internet-enabled devices in the UK (2012).
According to Ofcom’s 2012 report:
- Growth of accessing the Internet on laptop and desktop computers is slowing. Since January 2004 the number of desktop/laptop Internet users in the UK rose by 6.2% on average each year to 39.7 million in January 2012. However, annual growth has slowed from 10.3% in January 2009 to just 1.6% in January 2012
- Tablet ownership has jumped from 2% to 11% in 12 months
- 39% of people in the UK use their mobile handset to access the internet
As consumers find themselves with multiple ways to access the Internet, they’re coming to expect a seamless experience between each device, whether they’re browsing on a laptop or a smartphone.
From a client’s point-of-view the better a user’s experience on a website, the higher the likelihood that they will enquire, sign up or buy.
How do you design for Touch?
Focus on content
Stripping back to the core function of the site and developing a content hierarchy will improve usability. The user should be able to find what they’re looking for easily and quickly. Organising content rationally, using space effectively, removing clutter and producing large and clear calls to action will accomplish this.
Fingers are a less precise pointing tool than a mouse and cursor. Making sure that calls to action, buttons and links are large enough for users to successfully touch, with either a forefinger or a thumb, without accidentally clicking other elements increases mobile usability. It’s recommended that the minimum target size for these elements is 42px to 57px wide.
Optimise form fields
It’s important to consider how on-screen forms will behave on touch devices, as these can be notoriously frustrating to use on mobile devices. Using HTML5 you can control input types on your form fields.
For example: <input type=”email”> displays an ‘@’ and a ‘.com’ button for email addresses.
- Text input
- Scroll bars
- Range controls
- Radio buttons & checkboxes
- Tool tips
Taking these details into consideration forces you to anticipate how a touchscreen device will handle all aspects of a user journey. How easy it will be for a user to action, select, move or control elements of the site? The result will be a better understanding of how a user might engage with your site, and this will be transferred across all device types, whether it’s an iMac with a 27” display or an iPhone 5 with a 4” display.
Make sure you test your site across as many browsers as you can, in order to create the seamless experience that is becoming the norm. The table below gives you an indication of the usage of some of the key browsers:
Things to consider
Content or menus that rely on a hover action will not work across all devices. Make sure you consider touch devices first. This will ensure that your site works well across all input types, from mouse to finger or stylus.
Where possible, don’t use drop downs that rely on hover states, there are several ways of accomplishing a similar effect that works well for touch devices. For example, displaying a link menu on click rather than hover. Alternatively, you could link to a listing page, this method could also add benefit in terms of SEO.
Small buttons and links
The bigger the better! Make sure the user can get to what they want. Don’t slow them down or risk them becoming frustrated by not being able to see or touch links easily.
Behaviours that aren’t universal
Make sure that you supply clear instruction where needed to help the user with controls or behaviours that may be new to them.
A responsive layout will allow you to set ‘breakpoints’ within your design that will render it in a different manner depending on the screen size. For example, on a standard laptop you may have a three or four column layout, whereas on a smart phone with a much smaller screen size you may have a single column layout. This approach will help to produce a positive user experience from device to device.
It’s important to consider all types of device that a user may be using. Designing for the smallest screen resolution first naturally restricts the available screen real-estate and forces you to focus on the most important content and actions.
Once you’ve considered the importance of how a site will function on a small screen, a lot of the work can be carried through to larger resolutions.
It isn’t compulsory to build a responsive layout in order to have a touch-friendly site, this can still be achieved with a single standard resolution. But if you’re looking to establish a successful user experience across a number of screen sizes and devices, this is the most effective way of accomplishing it.
Don’t forget to make it look good.
It may seem restrictive to have to create a beautiful looking site working within these parameters, but these challenges are what design is all about. The capabilities of the web are advancing constantly, HTML5, CSS3 and web fonts can be used to help us create a visually appealing website, as well as a functional one.
By Ally Wright