This Parachute Design blog article was originally published in March 2015 and has been updated and enhanced for changes in technology for 2016.
With the rise of the touchscreen devices, I’ve invested countless hours in researching and testing best user interface design for touchscreen websites and other applications. Like any experience, there are common design conventions and expectations to understand, adhere to, and to share freely amongst web designers.
I’m betting if you were to look at your website analytics, no matter what industry you’re in or what purpose your website serves, you’d see a very significant portion of your day-to-day traffic is mobile-based. I’d even go so far as a wager an educated guess that in many cases we’d see more than 50 percent of traffic is from mobile devices. For the sake of this article, let’s say 50 percent of traffic is mobile based, on average. Now, consider how many mobile devices feature a touchscreen instead a traditional keypad. I bet we’re looking at 90 percent or even higher, to be reasonable. We can extrapolate from this data that about 45 percent of total monthly traffic is using some sort of touchscreen device, if we’re being conservative. Given this percentage, we can easily see how important it is to understand how people interact with a touchscreen based user interface.
In addition to understanding design for a touchscreen web interface, I’d also highly recommend looking at our blog post on Mobile Design Patterns and the Thumb Zone for more background information on mobile user experience design as a whole.
First, let’s look at the best user interface practices for touchscreen devices.
Use Larger Design Elements
In my Toronto web design company Parachute Design, we begin all of our website design strategy with a mobile-first approach and work backwards expanding our information architecture to desktop environments. By taking a mobile first approach, we allow ourselves time to carefully consider and account for all elements within a web design and how these pieces will scale up and down responsively. On the smaller touch screen mobile devices it is imperative that web page elements, especially navigational elements, are large enough for the user to press on without the risk of touching the link next door.
This practice is less critical with traditional desktop websites however, for consistency, including proportionately sized graphics and page elements can help create a more fluid and consistent browsing experience for users and help to build a more unified brand for your business. Apple’s iOS mobile operating system design guidelines recommend a minimum size of 44 pixels by 44 pixels for “touchable” elements. As this the most popular operating system amongst touchscreen devices, this serves as a great benchmark for user interface designers, no matter what mobile environment they’re designing for.
If we look at the smallest touchscreen environment we can expect to deal with as web designers, we have a digital canvas with dimensions of 320 pixels by 480 pixels within which we can create our user interface design. As we move higher up the ladder to more contemporary mobile devices, we have much more screen real estate to work with, but it is critical that designers consider which touchable elements are most important at the smallest resolution within their responsive web design.
Ensure that Navigation is Always Accessible
When it comes to mobile interface design we must consider much more than easy-to-use navigational elements. Both mobile user interface and responsive website design have pushed UI and web designers towards the creation and adherence to a universal set of design guidelines and conventions. Feedback from user testing and analytics services like Google Analytics, have helped designers draft and refine these conventions in order to ultimately create a set of best practices recognized by the design community to help application and web users find and interact with navigation and content more intuitively. What it really boils down to is familiarity for the user, and that we provide them with a navigation system that is largely familiar and expected.
The beauty and challenge of user interface or web design for touchscreen devices are permanently entwined with one another. In most cases, a touchscreen has less real estate for designers to work within, but at the same time, offers a far more interactive and engaging experience for the user. Unlike the more traditional desktop environment, website designers have to think more strategically and use more creativity in their navigational system design for a responsive website or mobile application. Depending on the depth and complexity of the navigation, we may choose to display a short list of links at the top and bottom of a website, or for deeper more complex navigation, we may hide the navigation off-screen only to have it slide into view when requested by the user. The latter being the more contemporary choice for designers and users alike, as this design convention continues to build steam.
In addition to common conventions, web designers must also pay close attention to legibility. Navigational elements and labels should be large and clear enough for the user to quickly scan as they move through the interface. We have to be careful with this in mind to avoid creating unnecessarily large navigation that eats up a significant percentage of the screen. A good user interface designer has a bag of tricks to help maintain readability at smaller sizes. Some common tried and true tactics are the use of a heavier typeface, and leaving a reasonable amount of padding or breathing room around the navigational labels so that elements are not competing for attention at the same time.
Eliminate Visual Distractions
It’s a problem I run into frequently as a website and user interface designer. Most often, it is usually a client with a strong personal attachment to the work who wants to hop in the designer’s seat and hijack the design process, because they “need” to include this, that, and a series of grainy photos left over from their old website that they’ve grown a strange attachment to. Eventually we end up with a visual maze that users will not be able to navigate with ease and will undoubtedly be overwhelmed and confused. Scenarios like this ultimately lead to user frustration and increased bounce rate, resulting in loss of sales and decline in both traffic and finally search engine page rank. This problem can quickly be compounded in mobile UI design, as we’re challenged with communicating the same message, but in a fraction of the space we have available on a traditional desktop website or application.
A practice I like to go through with my responsive web design clients in particular is to create our wire frame document together during the information architecture portion of our web design strategy. Without the distraction of design elements such as colour, scale, and imagery, I find that my clients are more often able to get past their own visual preferences and focus on the elimination all unnecessary elements within the design. Removing elements that could potentially slow down the website on a mobile network, or distract users from their key purpose for visiting the website, will ensure a better performance for both user and website owner alike. Once we’ve simplified the layout for the mobile environment, we move on to the creative design phase at which point we have the opportunity to test out different ideas and bring some of the secondary elements back into the design, if they offer benefit to the mobile optimized user experience design.
Swipe space is, in my opinion, the most often overlooked fundamental component to a great touchscreen user experience. Touchscreen devices do not offer us a mouse or click wheel for users to scroll through a website or application. Touchscreen forces users to use their finger (or thumb) to swipe up and down the user interface. Understanding this simple fact is the basis for the concept of swipe space.
Swipe space is the area within the UI design that is free of navigational or interactive elements in order to allow a user to touch the screen and swipe up, down, left or right, in order to navigate without accidentally engaging another link. Earlier in this article we established that touchscreen devices tend to have much less space to work with, which urges designers to come up with a few tricks to accommodate the concept of swipe space subtly, without disrupting a website design.
One of the most common tricks designers keep up their sleeve is line-height. A slight increase of space between lines of body text, allowing the user to easily press and swipe directly on body copy, is extremely subtle, but goes a long way. This often works even if there is a hyperlink within the text, as the user can easily place their finger between lines of text. There’s no need to go overboard and end up with a design that looks like a double-spaced essay you wrote in high school, but consider an increase in line-height of about 20-25% to ensure your content is still readable and looks professional. As with just about all these practices, there’s room to experiment and create an experience tailored to your user interface design.
Another common practice is to increase the margin between paragraphs on a page. Again, not to the point where text flow or continuity becomes an issue, but just enough to allow someone to place their finger between bodies of content and swipe in any direction to continue on with their experience.
As touchscreen technology and screen sizes continue to evolve, so will web designers and their best practices. The most important part is for all user interface designers to take notice of these best practices for touchscreen design and help create a more friendly and usable web.