Touch first, ask questions later

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.

Why?

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.

Large targets

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.  

Other elements to consider are:

• Text input
• Scroll bars
• Range controls
• Buttons
• 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.

Browser testing

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:

Users browsing on touchscreen devices may expect to be able to pan, zoom and use other gesture based actions. In some cases you can set specific touch friendly values.

Things to consider

Hover states

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.

Responsive layout

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 

UX Cambridge: Crafted’s in-depth round-up

A few weeks ago, the Crafted creative team was lucky enough to attend UX Cambridge, a community-driven, practical User Experience conference.

All of the team found both days extremely useful, with some strong themes running across the two days.

If you weren’t able to make this year’s conference, or just want a recap of the main topics covered, our creative team has put together a detailed round-up of the event for you to download and share. 

UCS students take a trip to Crafted

Last week, we welcomed nine students from University Campus Suffolk (UCS) Bury St Edmunds to the Crafted studios to discover the latest digital trends influencing web and app design.

Keen for a taste of what it’s like to work at one of East Anglia’s largest full service agencies, the BA (Hons) in Graphic Communications students spent the morning learning about user experience, eCommerce and SEO.

Using real-life examples, our Head of Design, Barnie Mills, and our Search Director, Ian Miller, explained how digital solutions need to be built with functionality in mind and looked at some of the design fundamentals that ensure websites and apps can be easily navigated by customers and quickly found by search engines.

Organised by UCS Bury St Edmunds, the trip was part of a range of initiatives that aim to enhance student employability and give them a greater understanding of how integrated digital solutions can optimise delivery and get measurable results. 

The photos from the morning are on our Facebook page. 

A guide to image licensing

30 years ago, photography was a slow process; developing a negative into a positive image took hours and often days. In the digital age, images have become simple to produce, edit and share.

Today, we can take a photo with the device we carry in our pocket and publish it to any number of photo sharing services within seconds.

This, along with the ability to search for images on the likes of Google, seems to have devalued photography in some people’s eyes – no longer are photographers viewed as a select band of skilled professionals, anyone with a camera or even a phone can be viewed as a photographer.

However, photos taken by photographers should still be viewed with the same reverence as they ever were; the work of a professional (or enthusiastic amateur) has been crafted with as much care and attention as any designer, artist or carpenter.

It’s for this reason that image licensing should be taken seriously, not just to avoid lawsuits or cease and desist requests, but to respect the craft of those who spend their time creating images.

In my guide to image licensing, I’ll take you through the process of finding images online, the various licensing types that apply, the restrictions that each license type places on you and how and where you can use the images that you have found.

You can download my guide here. 

By Chris Plowman

11 tips for a successful eCommerce site

When it comes to creating an effective eCommerce site, a well-designed user-experience is essential to turn browsers into purchasers. Here are some navigation and UX essentials for online stores. 

Set out your stall… logically

Categorise your products logically to make it easy for shoppers to browse, search and find what they’re looking for. Obvious it may be, but if customers can’t find the products they want, you can’t blame them for not buying.

Properly labelling and optimising category pages is vital to avoid crawler and duplicate content issues which can occur if there are multiple variants of the same product. It’s important to either keep all variants within one URL, providing thumbnails of each variant, or create specific pages per product and optimise for each type of variant, such as colour or size.

Don't reinvent the wheel

It’s all very well letting the creative team go to town on the store’s user interface, but shoppers ultimately want to find the product they’re looking for quickly and easily. It might seem cool to make the user drag products onto a water slide so they whizz into the basket with an awe inspiring animated sequence, but a familiar user interface presents much less of a barrier for shoppers. The easier the process, the more likely a purchase.

Picture Perfect

Show shoppers exactly what they’re going to get with good quality photography, preferably with multiple views. No one likes buying blind, and, as much as they’d like to, customers can’t touch, smell or try on any listed products on an e-commerce site, so enabling them to view the product in detail will give customers the comfort that they’re getting the product that they want. Try to show pictures of your products in action. For example, you could show clothing on a mannequin or model to portray particular outfits in the best possible light.

Clearly show available options

Make all the available options for each product clear (size, colour etc…), preferably in the product listings page and on the product detail page. Include images of different options where necessary. Differentiate between products that are available and those that are temporarily out of stock and incorporate a 'let me know when this product is in stock' reminder function. If the product is temporarily unavailable, you could mailshot an alert to interested consumers when items are back in stock. Even if they’re no longer interested in the product, something else may spark their interest.

Buy! Buy! Buy!

Make a clear call to action to 'Buy Now' on your product page. If the user misses the buy button, they might assume that the product is out of stock or unavailable. You could also encourage a sense of urgency by using more immediate language; why say 'Buy' when you can say 'Buy Now'?

Be upfront about delivery

How many times have you thought that you’d snagged a bargain online only to be confronted with an enormous delivery charge? Annoying isn't it? Be upfront about delivery charges before the user arrives at the checkout process. Displaying the standard national delivery charge along with the price on the product page will make shoppers feel like you’re being open and honest about the transaction. Trying to sneak in an astronomical delivery charge just before a customer commits at the checkout means they probably won’t buy.

Checkout - as easy as 1, 2, 3

A straightforward checkout process will not only help encourage users to buy, it’ll encourage them to come back and buy again. Split the process into simple steps and make these visible from the outset. Minimise the work the user has to do by incorporating 'accelerators', such as postcode lookup and pre-populating the delivery address with the billing address the user has entered. Incorporate a summary page before a customer commits to buy to give them a chance to double check their order.

I'll pop back in a minute…

Everyone’s pressed for time. Give users the option to save their basket for later, just in case the door goes or the bus comes half way through the checkout process. Make it as easy as possible for users to retrieve any saved items; customers aren’t always keen on spending time creating accounts for sites they may only use once for a purchase.

Upselling - make it useful

Trying to force up-sells on a user is the online equivalent of being pounced on by an overly intrusive sales assistant in a high street shop. It might pressure the odd person into a purchase, but it almost certainly scares more people off.

Position your up-selling more in line with a courteous, helpful, well informed, shop assistant that can advise on other items the user might be interested in. Make the user feel like the up-sell is an extra level of service, rather than a desperate attempt to fleece them out of more cash. For example, if a user is buying a coffee maker, a useful up-sell might be the option to buy some spare filters.

Don't make them sign their life away

Never force users to sign up in order to make a purchase. Instead, give them the option to create an account once they’ve completed the checkout process. This way, they’ll have already filled in all the relevant details, so you only need to ask them to create a password and it’s all done.

Baby come back…

If you’ve incorporated all of the above tips, users should be begging to come back to your site. However, if you find that they need a bit more encouragement, offer incentives for return customers through discount codes and loyalty schemes, such as 'introduce a friend'. More importantly, as a result of offering rewards programmes to boost sales and encourage repeat business, you can discover who your customers actually are and build up a reliable demographic profile of the most likely repeat buyers.

By Barnie Mills