A user’s experience on a desktop or laptop computer is dramatically different than with an iPhone, iPad or other touchscreen device. For one thing, instead of a mouse, you’re using your finger.
Plenty of other design changes for the increased use of tablets are likely in the works as well. Web designers should anticipate that in the not-too-distant future, websites may only (or primarily) work with touch swipes, taps and gestures.
How does this affect navigation and other elements of web design? Top navigation seen on most websites is tricky to duplicate on a touchscreen device, particularly hybrid touchscreen/keyboard combinations like those found on Microsoft’s new Surface tablet. More “mobile-friendly” site designs now place the navigation to the left or right, or at the bottom for easier use. A link that jumps to the bottom of the page, for example, frees up space for important content elsewhere.
Other possible touch-navigation changes on the horizon:
- A triple-tap in the top corner displays menu-bar or site-map.
- A pinch gesture reloads the web page.
- A rotating gesture rotates page orientation.
- Instead of “Click here to continue,” instructions will read “Drag this icon to continue” or “Tap here for more info.”
What about the relative size of links, buttons and calls-to-action on a touchscreen?
According to a study by the MIT Touch Lab, the average thumbs size is roughly equivalent to 72 pixels in width, while the size of the average finger falls in a range between 42-57 pixels. Designers, take note! No business wants visitors to its site inadvertently clicking on too many links at the same time, thus causing frustration and disengagement.
Speaking of links on touchscreens, they should be designed to be clearly distinct from other graphic elements on the page. Make links easy to identify with images that sharply differ from the background.
Touch-navigation and other impending design changes suggest that, in the future, simple wins out over complex or flashy. The designer’s first priority must be: On a tablet, mobile device and/or desktop, how easy it is for the user to access important links? Color schemes, typeface and background imagery should take a back-seat to this essential element.
When typography is being considered, the key is readability. People hold touchscreen devices at a different distance while browsing (and, of course, dimensions vary, too). Forcing users to zoom in to read content just adds another step to the process. Avoid, whenever possible.
The only way to know for sure that your touchscreen designs work is through rigorous user testing. Consider professional testing services or add a link on your site so users can give you their feedback.
If in fact universal touch navigation is just around the corner, design will focus on larger buttons and fewer hidden navigation elements. Now’s a good time to plan ahead.
