We noticed you're browsing in private or incognito mode.

To continue reading this article, please exit incognito mode or log in.

Not an Insider? Subscribe now for unlimited access to online articles.

Intelligent Machines

Redesigning the Web for Touch Screens

A new crop of touch-based devices is changing the way users interact with Web pages.

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.

Out of touch: Drop-down menus often don’t react as expected when accessed on a touch-screen device.

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 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.

Want to go ad free? No ad blockers needed.

Become an Insider
Already an Insider? Log in.
More from Intelligent Machines

Artificial intelligence and robots are transforming how we work and live.

Want more award-winning journalism? Subscribe to Insider Plus.
  • Insider Plus {! insider.prices.plus !}*

    {! insider.display.menuOptionsLabel !}

    Everything included in Insider Basic, plus the digital magazine, extensive archive, ad-free web experience, and discounts to partner offerings and MIT Technology Review events.

    See details+

    Print + Digital Magazine (6 bi-monthly issues)

    Unlimited online access including all articles, multimedia, and more

    The Download newsletter with top tech stories delivered daily to your inbox

    Technology Review PDF magazine archive, including articles, images, and covers dating back to 1899

    10% Discount to MIT Technology Review events and MIT Press

    Ad-free website experience

You've read of three free articles this month. for unlimited online access. You've read of three free articles this month. for unlimited online access. This is your last free article this month. for unlimited online access. You've read all your free articles this month. for unlimited online access. You've read of three free articles this month. for more, or for unlimited online access. for two more free articles, or for unlimited online access.