Ever since it was reported in April that Microsoft is planning on launching a smaller 7-inch version of its Surface tablet to compete with the iPad Mini, Web designers have had to refocus their efforts to accommodate the user experience on a variety of touchscreen devices.
Needless to say, this gradual change from desktop/laptops to touchscreens will have numerous ramifications for designers.
"Top navigation elements common to most websites is tricky to duplicate on a touchscreen device," explains Jeremy Durant, the business principal at the San Diego Web design agency Bop Design, before adding, "Particularly hybrid touchscreen/keyboard combinations like those found on the Surface tablet."
The gradually increasing use of touchscreen devices has led to a number of common new design techniques meant to appease all visitors, regardless of the tool they're using to access a site. For instance, many mobile-conscious site designs now put navigation tabs at the right- or left-hand side of a screen, or even at the bottom in some cases, to make them easier to view and use. Another common trope is the inclusion of a button that lets users jump right to the bottom of a page, to allow more space for important content up top.
More sites are also starting to have "triple-tap" features in the upper corners of their homepages that display menu bars or sitemaps, as well as "pinch gesture" functionality that reloads a page, rotating gestures that (obviously) rotate pages and now include instructions like "Drag this icon to continue" or "Tap here for more info" instead of buttons that say things like "Click here to continue."
Another important consideration that designers have to take, however, is the size of the various elements on their Web pages. According to MIT Touch Lab, the average thumb size is around 72 pixels in width, and the average finger is anywhere between 42 and 57 pixels.
This is something that designers should be weary of, says Durant, to make sure that the key elements of a Web page accommodate these dimensions. Otherwise, users may inadvertently click on too many links or the wrong buttons, which will end up causing them to become frustrated and disengaged. So, for instance, links should be easy to identify and distinct from other graphic elements on touchscreen.
"Touch-navigation and other impending design changes suggest that, in the future, simple wins out over complex or flashy," said Durant. "The designer's first priority must be: On a tablet, mobile device and/or desktop, how easy is it for the users to access important links?"
He then added, "Color schemes, typeface and background imagery should take a back-seat to this essential element." Of course, the main consideration should still be readability, especially since users hold these devices at different distances while they're browsing, and forcing them to zoom in or out to better read content makes the process even more laborious.
But the fact of the matter is, the best way to truly discover the effectiveness of your design is just to try it out. As Durant said, "The only way to know for sure that your touchscreen designs work is through rigorous user testing."
