With smartphones and tablets literally putting information at our fingertips, the way in which we interact with touchscreen devices is different to how we engage with other types of technology. From a digital marketing point of view, these differences have some important implications that need to be taken into account during the design process.
Whether browsing on their desktops or scrolling on their smartphones, our customers are coming to expect a seamless user experience across devices as they find themselves with an increasing number of ways to access the internet. Get this right and we are likely to see an increase in traffic to our sites, enquiries and even sales. Get it wrong and our customers can quickly find a better alternative.
In the age of the smartphone, digital marketers would be wise to touch first and ask questions later! By embracing ‘touch-friendly’ design, we can make a user’s experience on a touchscreen as positive as possible, and ensure that our sites deliver the best results for both our organisations and our customers.
So, how can you ensure that your websites are ‘touch-friendly’?
Content is king
Customers on the move need to find what they are looking for quickly and easily, often on a small screen that restricts the amount of space available for content. This can force us to make some strong decisions about which content is really important.
Developing a content hierarchy based around the core function of your site is a good way to rationalise your content. Allowing the user easy access to the key top-level information, and giving them the opportunity to drill down into detail if they choose to, reduces cognitive load (the amount of information the user has to process), making for a more pleasant user experience.
The bigger the better
It might seem obvious, but fingertips are far less precise as pointing tools than a mouse cursor. With this in mind, it is vital that you make buttons and links large enough to be accessed with forefingers or thumbs if you want to avoid frustrating your users. If the design of your site means that customers keep accidentally clicking on buttons either side of the information that they really want to access, it will not take long before they simply give up and jump to a competitor’s site. To increase mobile usability, make clickable targets a minimum of 40 x 40 pixels.
On top form
Contact and enquiry forms can be real pain points on mobile devices, so you will need to give careful consideration to how on-screen forms will work on touchscreens. HTML5 makes it possible to control input types in form fields. For example, consider making the ‘@’ and ‘.com’ keys available on the touch keyboard for email fields and a numeric keypad available for phone number fields. These simple changes make form filling that little bit easier for those using smaller screens on the move.
You will also need to think about how a user might interact with scroll bars, range controls, buttons and checkboxes, as well as how a user will input text. Just as when designing for desktops, it is important to anticipate exactly how a touchscreen device will handle every aspect of a user’s journey throughout your site. For example, how easy will it be for a user to select, move or control elements on the screen? Giving thought to these aspects will give you a much better understanding of how a customer might engage with your site. This knowledge can then be transferred across a wide range of device types, whether this is a desktop with a 32 inch monitor or an iPhone with a four inch display.
Hover states
Unfortunately, content or menus that rely on hover actions will not be accessible on touchscreen devices; the concept of a hover state does not exist with touchscreens, you either touch an object or you do not. Fortunately, there are several ways to accomplish similar effects that are more touch-friendly. For example, you could display a link menu instead of a hover, or a link to a listings page, which may also yield additional search engine optimisation (SEO) benefits.
Responsive design
A responsive layout enables you to set ‘breakpoints’ within your design that will render differently depending on device. For example, on a standard size laptop, a three or four column layout might be used, which may reduce to one column on a smartphone.
With a responsive layout, it is best to design for the smallest screen resolution first as this naturally restricts the space available to you, forcing you to focus on the most important content. Once you have thought about how the site will function on a smartphone, for example, much of your work can then be carried through to larger resolutions.
Although it certainly is not compulsory to adopt responsive design to deliver a touch-friendly site, it is an extremely effective way to create a site that delivers a successful user experience across a number of screen sizes.
Testing, testing
Just as your customers now have a wide variety of choice over the devices they use to access your website, they also have increasing freedom to pick from a selection of browsers. It is advisable to test your site across as many browsers as possible, from Firefox to Opera, in order to deliver a seamless user experience no matter how someone accesses your site.
Looks matter
With touch-friendly principles making it imperative to consider the function of a site first, it might appear daunting to create a visually appealing website within these seemingly restrictive parameters. However, these challenges are what make design so exciting.
The look of a site will be the first thing that a customer engages with on your site, so it is just as important to consider aesthetics when designing for touchscreens as you would when crafting a site for desktops. The capabilities of the web are constantly evolving and tools such as HTML5, CSS3 and web fonts are useful aids to help create beautiful looking websites that function effectively no matter what device they are viewed on.
With our customers now enjoying considerable choice over how they access the internet, it is vital we provide them with a seamless user experience regardless of the device they choose. By thinking ‘touch-first’, we can ensure that our websites work effectively across a variety of devices, helping to keep our customers happy and maximising our sales and enquiry potential.
