Touchscreen Interface Design Best Practices

How to design a great user experience for the touch screen interface.

Over half of all website traffic comes from mobile phones today and this number has been steadily increasing over the last decade. With the consistent rise in mobile traffic comes an increased emphasis on responsive web design — and rightfully so!

Yet web designers often overlook an essential aspect of mobile website design which focuses on touch screens and how people interact with them. This rise in mobile traffic means a rise in website visits on touchscreen devices. For the past twenty-plus years, websites have been designed for a single user experience on desktop web browsers where only cursor-focused navigation input was a given.

In an increasingly mobile world, website designers must understand and adapt to the user and the technology used to view the website. This means paying attention to touchable elements in their website design strategy. Failing to do so leads to a clunky interface and frustrated users. When users are not happy, bounce rate climbs and rankings and conversions drop.

Luckily, this is easily avoided if you pay attention to the nuances that come with viewing websites on touch screen devices. Let’s look at the guidelines for designing for touch screens.

Pay Attention to Touchable Elements

If you’ve ever been on a website that is not optimized for touch screen devices, you know the frustration of trying to tap a link target or button but missing repeatedly. And the last thing you want when a visitor lands on your website is for them to become frustrated and leave.

The reality is that a human finger does not have as much precision as a 1–2mm mouse cursor. You must design your website with this in mind and make links, buttons, and other touchable elements big enough to touch.

Apple’s guidelines for interface design recommend 44 x 44 pixels as the minimum size to use for touchable elements. And while not all mobile browsers will be on Apple devices, this is a good starting point for your design — especially since Apple is known for its simple and intuitive user interfaces.

Even though phone screens seem to be getting larger and larger each year, you should consider the smallest screen that website visitors will use to view your website as your starting point. This information can easily be found in your Google Analytics. With this technology in mind, optimize your site for visitors on 320 pixels to 480-pixel screens and make sure items designed for touch are large enough for people to cleanly tap.

Keep Navigation Accessible

When viewed on a touchscreen device, a long webpage feels like a serious thumb workout to scroll through. Users caught in the middle of the page may not bother to hunt for your website’s navigation. Though this may seem dramatic, a common reason users will leave a website is that it is too difficult to navigate.

The solution is to make sure the navigation is easily accessible within the interface at all times.

Most websites can fit their touchscreen navigation into the “hamburger” menu users are accustomed to, while savvy designers can create an interactive solution where more complex navigation is presented to the user when they need it.

Remember your visitors are on small screens so it’s important to ensure the sticky header or navigation bar isn’t covering up any website content.

Also, ensure that the elements in the navigation system are large enough to press with fingers. Having your menu visible but unusable doesn’t encourage user interaction, and will lead to frustrated visitors.

Design Responsive Buttons and Links

One of the key elements web designers use to create engagement in desktop user interfaces is hover states or responsive interaction design. Interactive hover features add a dynamic element to the page, making it obvious to users that elements are clickable with the mouse. On touchscreen devices, we have to think of fingers and be more creative with the design of touchable elements within the user interface.

Touchscreen users don’t have a mouse cursor that changes when it hovers over different parts of the screen. As a result, touch screen user interface design best practices require links and other input elements to be more obvious within the UI design — without the help of fancy transition effects or visual feedback used in desktop interactions.

Basically, links need to look like links and buttons need to look like buttons. If a visitor can or should interact with an element, it needs to be clear.

The best practice is for link behaviour on touchscreen technology to activate upon release. This means that instead of a link triggering on click or press, it triggers when a user lifts their finger from the button. This allows for some creativity with the behaviour of a link or button when initially pressed.

Understand The Thumb Zone

Good design requires harmony between appealing visual aesthetics and functionality. Blending UX and UI design with the development of a content management system like WordPress creates a perfect harmony that engages users and powers your digital marketing.

When creating a responsive website design, there are specific considerations that must be made for the mobile user interface.

Perhaps the most important consideration is our hands. More specifically, consider the way your website’s visitors’ hands will interact with your site on touchscreen systems.

Most people are right-handed and when they hold their phone, their right thumb will block the bottom right corner of the screen. If you put important content or design features there they may be covered up and out of sight. Users may also find trying to interact with these parts of your website awkward and lose focus on more important interactions.

You also need to consider the thumb zone for the touchable areas of your user interface design. There is a comfortable range of motion for a user’s thumb. For example, when interacting with your site, if a user has to stretch to reach a touchable element, it will be frustrating and uncomfortable for users and hinder their user experience on the site. Important links and buttons should be well within the thumb zone.

Swipe Space

White space is every designer’s best friend. This is especially true for user interface designers whether they create responsive web design or interfaces for kiosks. Proper use of white space can make or break a website’s usability on a touch screen device.

We’ve all been casually scrolling on our phones when we unwittingly touch a link and lose our spot. Or perhaps you scroll to a position on the page and a non-scrollable element like a map is taking up the whole screen and you’re stuck without a place to swipe.

Designing for a touch screen interface requires that you pay attention to how user’s scroll — by dragging their finger across the screen. With this in mind, you need to leave the appropriate swipe space to perform these actions. This is the area available for mobile users to scroll without interacting with a link or other element unintentionally.

There are a few simple ways to enhance the mobile user interface and allow more swipe space. Increasing the line height by 20–25% gives a bit of room between lines of text where users can swipe.

You can also increase the margin space between the paragraphs. These subtle shifts allow better usability without negatively impacting the appearance of the page or app.

Eliminate Visual Clutter

Have you ever been on a site with so many ads that it’s impossible to tell where the content ends and the advertisements begin? Too many elements on a page can leave users overwhelmed and confused as to what to do next. Keep it simple and eliminate the parts of a page that don’t add to the goal of the site — even if this means getting rid of photos or website copy to provide a clean and clear experience that users expect.

Less is more in this process, especially when designing for touchscreens. There’s a limited amount of display space on a mobile touch screen interface so designers must use it wisely.

Optimize Text Inputs

It’s much easier to type on a keyboard than on a smaller touch screen device. So whenever possible, minimize text inputs. You can use sliders or spinners for number or date inputs and drop-down menus for text-based options. This makes it much simpler and intuitive for the touch screen user to complete forms. You may also consider designing number inputs so that the number keyboard pops up instead of the full QWERTY keyboard.

It’s not always possible to entirely eliminate the need for a full keyboard. Username and password fields or email sign-up forms require users to input unique information.

Remember that on touchscreen devices, the keyboard pops up on the display screen. This is the same screen where you are trying to communicate with your visitors. Make sure that the user can still see the information they need with the keyboard covering up a large portion of the screen.

Use Touch Screen Interface Design Best Practices

With the rise of modern touch screen devices, designing for mobile is essential. Whether you are creating an app, website or design for kiosks using these touch screen UI design best practices, you can ensure that your website visitors have a positive experience. The more thought you put into the design process, the better position you’ll be in to convert users into customers.

Need help with your website design project? We design and develop websites from scratch that are tailored to each brand, business, or product. Contact us today to learn more about how we can help you build a site that fits your needs and impresses your visitors.