Redesigning the Web for Touch Screens
A new crop of touch-based devices is changing the way users interact with Web pages.
By Erica Naone
Last week, in an essay criticizing Adobe's Flash platform, Apple CEO Steve Jobs drew attention to, among other things, its lack of support for touch--something essential to the experience of an iPhone or iPad. "Flash was designed for PCs using mice, not for touch screens using fingers," Jobs wrote.
But Flash is hardly the only Web software that wasn't designed to handle touch, and the advent of touch-based devices "is almost asking the entire Web to change its behavior from what's been built up over 20 years," says Raju Vegesna, evangelist for Zoho, a company based in Pleasanton, CA, that produces a suite of complex online Web applications.
Individual problems are often small, but they add up to something more significant, Vegesna says. For example, roll-over interactions are common on many websites, but these don't work on touch devices. Other common tricks, such as hovering over a link to see the connected URL in the status bar, have to be adjusted before a user can perform the same function.
A serious problem for companies like Zoho that specialize in complex Web software is that many sites aren't equipped with the ability to trigger the "soft keyboards" used on touch devices. Vegesna explains that touch devices pop up a keyboard when they recognize a text field on a Web page, but it's different for the more complex editors used as part of Zoho's online word processors.These These usually cannot trigger a soft keyboard to pop up, leaving users frustrated.
"This is a big user interface problem for Web applications," Vegesna says, "and means that many will need to be redesigned."
These issues are significant but nothing new, says Ben Bederson, an associate professor at the human-computer interaction lab at the University of Maryland. "There are a wide range of input and output devices," Bederson says. "Whether you are building a Web app, Flash app, or native app, you have to decide which range of devices you're going to support."
Bederson notes that Web designers will have to wrestle with several issues when considering touch computers. For one thing, touch interfaces don't give users the fine-grained control that they have with a mouse. Though tests have shown that a stylus can be an effective substitute, Bederson notes that the market has largely rejected that option. So designers need to simplify a website and increase the size of interaction points such as buttons and scrollbars.
There's a more subtle technical problem too. For example, a lot of Web applications were written with a certain sequence of mouse actions in mind. An application might be coded so that it must see a mouse hovering over a button before that mouse is able to click on it. In this case, it's not simply that the mouse-over action doesn't work as expected--it's that the site actually can't register a click without it, meaning that the application breaks when used on a touch device.
Designers can help avoid these problems by building websites to adapt to different interaction situations. Bederson recently worked on adapting the website of the International Children's Digital Library for viewing on the iPad. The designers aimed to make the site flexible enough to deal with a variety of languages, nonliterate users, and kids. As a result, the elements turned out to be flexible enough to adapt easily to touch. Bederson says the designers only needed to fix one bug in order to adapt the site to the iPad.
In general, however, redesigning outdated websites "is going to be huge," says Jared Spool, founding principal of User Interface Engineering, a consulting firm based in North Andover, MA. But Spool believes the coming changes will be largely positive. "To me, the little interaction problems of how to react when a user touches something will work themselves out pretty fast," he says. What's more interesting, he believes, are the emerging possibilities for interaction based not only on touch but on motion sensing and location information. For example, Spool points to the Star Walk application for the iPad, which uses this sort of information to show users a labeled image of the night sky matched to the spot where they are currently standing. That kind of interaction simply wasn't possible before, he says.
Spool also looks forward to user interfaces made possible by greater connectivity between devices, such as interfaces designed for a group of iPads working in concert. "I think the next year is going to bring out amazing creativity as people start to play with this interaction palette that's far richer than what you had before," he says.