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

Computing

Redesigning the Web for Touch Screens

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

  • Tuesday, May 4, 2010
  • 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 usually cannot trigger a soft keyboard to pop up, leaving users frustrated.

Advertisement

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

Print

Related Articles

The Year in Mobile

Apple invented a new category of mobile device, consumers want faster connections, and the spectrum is more crowded than ever.

Touch Screens that Touch Back

New piezoelectric technology will make screens more tactile.

Better Touch Screens for Mobile Phones

Keypads on smooth touch screens are prone to errors, but new ways of providing tactile feedback could make them more accurate.

Close Comments

To comment, please sign in or register

Forgot my password

rached

1 Comment

  • 644 Days Ago
  • 05/04/2010

Solution for Touch Devices

It seems to me that the solution for touch devices (and any other devices that might be invented later) is to have an interface (on the machine) that would translate the touch "gestures" to mouse commands. This way the website would feel as if it is interacting with a mouse while the "driver" on the machine will take care of translating the new "gestures" to compatible commands.
Isn't this the way all software deal with hardware? You do not install a copy of office for every printer that might be connected to your laptop. Office deals with a "driver" that knows how to deal with the specific printer!

Reply

tanksali

1 Comment

  • 644 Days Ago
  • 05/04/2010

Re: Solution for Touch Devices

Drivers and such 'translators" are appropriate when there is no fundamental shift in what they do. Think two decades ago and imagine drivers being used to translate mouse movement into keystrokes to support apps which did not understand mice. It will serve a very limited purpose and unless applications inherently support the new interaction mechanisms natively usability will be hit.

Reply

StriatedPattern

8 Comments

  • 644 Days Ago
  • 05/04/2010

Re: Solution for Touch Devices

I imagine that a touchpad-mode would be useful in many circumstances. If a corner of the touchscreen was used to control a cursor, mouse-over functionality could work. Sometimes I wish I had a pointer to tell me exactly where I'll be clicking.

Reply

sfruechte

4 Comments

  • 644 Days Ago
  • 05/04/2010

Re: Solution for Touch Devices

It does sound a little arrogant that the web should change to accommodate touch devices.  If the touch devices are so clever, maybe they can change so they actually work on the web.

Reply

carlhage

84 Comments

  • 644 Days Ago
  • 05/04/2010

The solution is plain HTML

Flash isn't the only problem-- downloading software in general, including javascript makes assumptions on presentation and usage. The great concept behind the original WWW was HTML, where tags identify the meaning of the content, allowing browsers to interpret the presentation and facilitate navigation.

In a demonstration of great stupidity, some "web designers" replaced an ordinary link (href URL) with javascript, causing multiple malfunctions. Now, "web 2.0" sort of means you replace normal web pages with javascript software, which in practice seems to have a high probability of having bugs. We can redesign the web for all screens by returning to HTML (now augmented by style sheets).

Reply

Marrach

34 Comments

  • 643 Days Ago
  • 05/05/2010

Everyone does not have an iPad

   Maybe it would be a simpler solution if a webmaster came up with an alternate "Touch Sensitive coded" website for their regular website. Say-- Put an Icon of a BIG THUMB up in the corner. Touch that icon when you're on the iPad and Boom! You're at a touch-screen friendly site. If you don't want it, then have an alternate Icon in the shape of a BIG POINTER. Touch that icon and Bam-- back to the regular Mouse/Keyboard site.

   Having said that, I don't accept the rosy techno-future-phile view that Mice and Keyboards will disappear. On my Droid, there are websites that have mobile verions of the main website with less clutter and just the links needed to utilize the site using a webphone or a small touch screen. But even there, touching just the RIGHT spot to do something can be frustrating.

   Some of us just aren't 'screen-articulate' enough with our fingertips. I find both the Droid and iPhone keypad to be tiresome and aggravating with extended use.  Yet at the same time, I've seen guys with ham-sized hands bippity-bopping away without any problem. Yet My smaller fingers are treated by touchscreens as if I was "Bluto".

Reply

Advertisement

MAGAZINE

Can We Build Tomorrow's Breakthroughs?

Manufacturing in the United States is in trouble. That's bad news not just for the country's economy but for the future of innovation.

Sponsored Content

Technologies from National Instruments

Taking a Measurement
Learn how to use your PC to take measurements

> Click here for more National Instruments Videos <
Whitepaper

BUILD VERSUS BUY
Understanding the Total Cost of Embedded Design

National Instruments has gathered customer information and data regarding some of the cost differences between building a custom solution versus using NI off-the-shelf tools. Using this data, we built the Graphical System Design ‘Build vs. Buy’ Calculator. The calculator can help show the financial differences between building a custom solution versus buying an off-the-shelf system. This paper discusses the benefits and drawbacks of both a traditional custom design approach and off-the-shelf embedded tools.

View full PDF > Listen to story >
Find us on Youtube

Videos

A Robot Recruit that Can Do It All

More

Advertisement

Technology Review Lists

TR50

Our list of the 50 most innovative companies, including the following:

IBM

Amyris

Akamai

Novomer

More

Advertisement

Facebook

Advertisement