Best Practices for Designing for Touch

Written by Joe Ybarra  |  June 16, 2020
Best Practices for Designing for Touch

There is no arguing that the majority of consumers engage with brands on their mobile phones or tablets which means that the days of designing and developing web applications that cater to a one dimensional world are not only long gone but nearly ancient history. In fact most consumers expect to be able to interact with applications from their phones and tablets to their automobiles, appliances and home entertainment all with the touch of a finger.

So how do you keep up? Careful planning and attention to detail...which most often starts at the design process and one of the most basic concepts, which is that if it looks like it’s clickable then it had better be clickable.

Nothing frustrates touch screen users more than having to play Battleship with objects on the screen.

Can I click on this? …nope. What about this?…nope. I didn’t mean to click on that… (you get the idea).

And at an average of 50-60% mobile users versus traditional desktop users it is important that your website reflects the user interface of your demographic, and in many cases to achieve that it might be time for your brand to undergo a digital realignment.

Here at Thinkbean our team of designers and developers not only leverage the power of adaptive and responsive design but more importantly understand how to design a user interface that also delivers a beautiful user experience. Our team includes experienced user interface and user experience designers who excel at crafting strategic solutions designed to convert and built to scale as your business grows.

Lets take a look at five critical factors that we use, and your should include, in your design and development process for an engaging, and effective, touch-screen experience.

 

#1 Get to Know, and Understand Your Users (and their needs)

Anytime a design is created the most important part of the process is understanding who will be using the application, or product, and defining their targeted goals. It's important to identify the age range of users, language, location and any additional characteristics like profession, average time on page etc. From here you can better understand how users will utilize the application and therefore design accordingly. 

For example if your demographic skews older, or younger for that matter, the layout of your page and design elements may change. If your users are based in the USA they are going to be used to different elements than say users predominantly based in a European country. 

 

#2 Design with Touch at the Forefront of Your Mind

When designing for a touch experience you'll need to tap into both digital and industrial design concepts and strategies. Touch screens quite literally place information in the users hands and it's imperative that your design matches the users touch workflow. Designing for touch use is a combination of digital design and industrial design and should take the following into consideration:

  • Approach your design with the physical object it will be displayed on in your mind.
  • Make sure to map out your UI to match touch events and touch interaction zones (ie; thumb and Index finger interactions)
  • Whenever possible place the content above the controls.
  • Create a strategy for your design focused on the frequency of usage and location on the touch device. Remember...it should feel intuitive and seamless. 

 

#3 Invest in Navigation Strategy

The last thing you want is for your users to feel like they need to "figure out" how to use your application. To prevent this you'll want to focus keeping navigation elements simple, clean and consistent. Check out our top three tips to get you started:

Use Common Elements

While creativity is important it's even more important to make sure elements like your navigation and buttons are at the top of the screen and clearly accessible. The last thing you want is for a user to have to hunt around for the navigation to get the information they need. 

Minimize Touches/Clicks

In order for a user to have the most positive experience you will want to make sure to minimize the number of times they need to touch a button or link in order to accomplish their goal. Let's face it, not only are people busy these days but their attention span is very short - if something takes too long you will loose the conversion and engagement will decrease.

​​​​Don’t Hide Navigation

Nothing is more frustrating than trying to find a way to exit a page or to go back. Keep navigation elements always available and easy to access.

Avoid Clutter & Limit the Options

In order for users to have the best experience on a touch screen it's important to limit the number of options you present to them along with clutter of unnecessary content and design treatments. Too many options or busy design elements will not only confuse users but may decrease your likelihood your information being delivered and conversions from occurring.

 

#4 Pay Attention to Button Size and Placement

While technology may be moving full steam ahead, the ergonomics of the human finger are not. No matter how stunning an efficient, clean and minimalistic is a user still needs to be able to engage with it at the tap of a finger. Here are some good rules of thumb to keep in mind in regards to size and placement:

 

Plan for how the device will be held

The interaction of a user is very much controlled by where their thumbs and fingers land which are dictated by how a device is held. By keeping this in mind during your design it will increase the likelihood that your buttons and navigation are placed where a users thumbs are more likely to click.

 

Scroll, Zoom and Swipe...aka; Gesture Support

If your users often engage of mobile devices or tablets that have a larger screen you will want to incorporate the ability for gesture controls such as; zoom, scroll and swipe. However, keep in mind that if you do choose to include these elements you'll want to make sure that a user has enough space to perform the gesture without getting frustrated by clicking on something that had not intended. 

 

Button Size/Spacing

While there is limited guidance for large button sizes, when it comes to the minimum recommended button size it's currently 44pt x 44pt - which allows your users the ability to see and read your content. 

 

Information Visibility

Users don’t have x-ray vision. Be mindful when designing the UI that a user will be blocking portions of the screen with their hands and fingers while trying to click. If they are changing values on the screen, make sure they can still see the data while editing.

 

#5 Don't Delay

In many cases slow and steady wins the race, which explains why many touch-optimized browsers force a delay (roughly 300ms) on screen taps to double check that a user didn’t intend to tap more than once (or at all) or perform a specific gesture. However, in more situations than not, this delay is a nuisance to users and can actually make the application feel less responsive and like it's "not working".

Instead make sure your UI elements respond to touch events.

 

Design is such an important element for any brand, and with today's ever changing consumer market and the platforms in which they engage with you, it's imperative that your design keeps up. Utilizing these steps will ensure you get there and get the most out of your design efforts.