Pen stroke cuts PDA Web clutter

By Kimberly Patch, Technology Research News

The proliferation of the Internet and the increasing popularity of handheld computing devices pose a challenge: it is difficult to read and navigate through Web pages displayed on small screens.

Several research teams have addressed the problem with various methods of zooming in on relevant content from a Web page to make it easier to view.

Researchers from Microsoft Research, Microsoft Research Asia, and Tsinghua University in China have devised an interface that goes a step further by allowing a user to zoom in on relevant content and collapse irrelevant content with a single pen stroke. The interface could eventually be included as an extension to small-screen Web browsers.

The scheme solves a problem that can arise when a Web page is simply shrunk to fit a handheld screen. Content can be too small for the user to be able to find what she's looking for in order to zoom in on it.

The researchers' collapse-to-zoom interface allows users to identify areas of a Web page -- like columns containing menus, archive material or advertising -- that can be replaced in the small-screen view with thin placeholders that preserve context. "Collapsing content causes all remaining content to expand in size, causing it to reveal more detail, which increases the user's chance of identifying relevant content," said Patrick Baudisch, a researcher at Microsoft Research.

The interface was designed to use as little screen space as possible, said Baudisch. Users control the system using a set of single-stroke pen gestures rather than on-screen buttons. There are four basic types of pen gestures.

Dragging the pen diagonally downwards from right to left collapses all page content in the rectangular area covered by the pen. The content is replaced by a thin placeholder that provides context but takes little space. Clicking a placeholder restores the content.

Dragging the pen diagonally upwards from left to right zooms that area into a 100-percent-scale reading mode and collapses everything around the area. "This allows users to read a page once they have identified the relevant area," said Baudisch.

Dragging the pen diagonally downwards from left to right collapses an individual cell. And dragging the pen upwards from right to left expands an individual cell without zooming in on it.

The interface also uses an icon to indicate that a collapse-to-zoom action is taking place. The icon is green during upward, expanding commands and red during downward, collapsing commands.

The interface also allows users to click on links from both the zoomed-in reading view and from the thumbnail view.

In addition, the interface remembers how the user left a page. "If users collapse content [like] a news page, bookmark the collapsed page, and return to the page the next day, the page will be loaded pre-collapsed," said Baudisch. "Especially in this case, placeholders make sure the user understands that the viewed content is just a subset of the page and allows users to bring back content... by clicking the placeholders." Pages that contain collapsed portions also load faster, he said.

Key to the simplicity of the interface is that all the gestures are one-part commands. "To keep navigation efficient, we wanted all interaction to happen in a single stroke," said Baudisch.

Traditionally pen gestures contain two parts -- identifying an area, usually by circling that area, then choosing a command that will affect the identified area. In addition to being less efficient, the method can create confusion: if the user forgets what he's doing after he has already chosen an area, a subsequent gesture intended to choose another area may be misinterpreted as a command meant to affect the first area. These interfaces have two command modes, which requires users to pay closer attention and are more error-prone than non-modal interfaces, said Baudisch.

The researchers saw that the interface did not have to be modal when they realized that there are four ways of selecting a rectangle, said Baudisch. In an Excel spreadsheet, for instance, to select an area of cells a user can start at the bottom left, the bottom right, the top right or the top left of the desired area, he said. "You will get the same selection, independent of what drag direction you used to create the selection."

The researchers' system uses drag direction to allow users to select which command to apply to the selected area. "In Excel, that would be equivalent to using a top-right to bottom-left drag to delete cell content, [and] use the opposite direction to apply another command," said Baudisch.

The technical challenges to making the method work were figuring out a way to analyze Web page structure on-the-fly and working out a way to capture pen events in a Web browser.

The researchers have also devised a way to transfer the technology to smart phones that do not include pens, said Baudisch. "It turns out that the main commands required for successful collapse-to-zoom interaction are 'collapse column' and 'expand column', while the additional detail commands for manipulating arbitrary rectangular areas that we had created are less important." The smaller number of main controls can be used on a smartphone by simply mapping them to buttons on the phone, he said.

The researchers are also working on making the text in thumbnail views more readable.

These content viewing technologies are important because small-screen devices are increasingly popular for keeping people connected in transit, said Baudisch. "Today users limit themselves to a small number of manually adapted Web pages, because the browsing experience on the small-screen devices is still inferior to the desktop," he said. "Improving that experience will eventually allow road warriors to access any type of Web information anywhere."

At the same time, small-screen devices are more accessible than desktop computers in many places.

World-wide, cell phones are already more popular than desktop computers, said Baudisch. "In many countries that do not have a strong PC infrastructure today, such as India, a mobile device is likely to become the access to the digital world," he said. "While the majority of content is still designed for the desktop viewing experience, enabling small-screen users to access the Web in a useful way can... help overcome the digital divide."

Baudisch's research colleagues were Xing Xie, Chong Wang and Wei-Ying Ma. The researchers are scheduled to present the work at the Seventeenth Annual ACM Symposium on User Interface Software and Technology (UIST 2004), in Santa Fe, New Mexico on October 24 to 27. The research was funded by Microsoft.

Timeline: Unknown
Funding: Corporate
TRN Categories:  Human-Computer Interaction
Story Type: News
Related Elements:  Technical paper, "Collapse-to-Zoom: Viewing Web Pages on Small Screen Devices by Interactively Removing Irrelevant Content", the Seventeenth Annual ACM Symposium on User Interface Software and Technology (UIST 2004), Santa Fe, New Mexico, October 24-27, 2004, and posted at; video posted at


October 20/27, 2004

Page One

Biochip spots single viruses

Cooler material boosts fuel cells

Pen stroke cuts PDA Web clutter

Wide laser makes simple tweezers

Biochip levitates droplets
Nanotubes form transparent film
Molecules positioned on silicon
Mechanical valve design goes nano
Angles increase optical storage
Crystal links ultraviolet photons


Research News Roundup
Research Watch blog

View from the High Ground Q&A
How It Works

RSS Feeds:
News  | Blog  | Books 

Ad links:
Buy an ad link


Ad links: Clear History

Buy an ad link

Home     Archive     Resources    Feeds     Offline Publications     Glossary
TRN Finder     Research Dir.    Events Dir.      Researchers     Bookshelf
   Contribute      Under Development     T-shirts etc.     Classifieds
Forum    Comments    Feedback     About TRN

© Copyright Technology Research News, LLC 2000-2006. All rights reserved.