Zooming in on Legibility
Author photo
Topic icon

Most Web sites aren't designed to be viewed on the small screen. But with a few clever zooming tricks, they can more legible on mobile devices.


Mobile device interface designers have a challenging job, and it's one that doesn't get any easier over time. Processors get faster, carriers offer more services, bandwidth increases, and it results in more content being delivered to the user. But the display size doesn't get any bigger. How do designers deal with increases in speed and information density, when they are stuck with the same little screen they had two or three years ago? And until retinal projectors arrive on the scene, they aren't going to be getting more screen real estate to work with in the near future, either.

The challenge can be summed up in the old saying, "you can't put ten pounds of stuff in a five-pound bag." One way to get around the problem is giving the user the ability to decide on which five pounds are the most important by using some clever zooming tricks. Patrick Baudisch, a human-computer interaction research scientist at the Visualization and Interaction Research Group at Microsoft Research has been working on two projects -- "summary thumbnails" and "collapse-to-zoom" that make it easier to read web pages on mobile devices.

Many sites have wised up to the demand for small-screen versions of their content (TheFeature's XHTML site is an excellent example), but unfortunately, many don't offer mobile-specific pages. When you visit these sites on your mobile device, they're rendered either as single columns -- which makes pages difficult to navigate and requires excessive scrolling -- or as thumbnails -- which provide nice single screen snapshots of pages, but are impossible to read, because the text has been reduced below the point of legibility.

Baudisch's solution to this problem is called "summary thumbnails," which he developed in collaboration with Heidi Lam at the University of British Columbia in Vancouver, Canada. It is a mobile browser that renders pages as thumbnails, but keeps the text large enough to read. It achieves this by displaying readable text fragments. For example, a CNN.com headline that reads "Chimpanzee Attacks Supermodel at Circus" might be shortened to "Chimpanzee Attacks." All the other headlines and story summaries on the page get the same treatment. There's no artificial intelligence at work here -- it's simple truncation. But it's surprisingly effective. Baudisch and Lam conducted a user study and discovered that users found what they were looking for in web pages 41% faster and at a 71% lower error rate than they did when they looked for the same content on browsers that rendered pages as single columns, and that they zoomed 59% less than when they used ordinary thumbnail rendering browsers.

"Collapse-to-zoom" is another useful, slightly trickier way to present complex information on a small screen. Developed in collaboration with Xing Xie and Chong Wang of Microsoft Research Asia, collapse-to-zoom allows users to use their stylus to draw lines across areas on a thumbnail display of a Web page to either zoom into desired content or collapse unwanted content. When users collapse an uninteresting section of a Web page -- advertising perhaps, or news of a snowstorm 3000 miles away -- the rest of the content expands to fill up the reclaimed screen real estate.

Another concept being explored by several researchers is speed dependent automatic zooming. SDAZ gives a mobile device user the ability to quickly scroll through a lot of information, and when the user slows down or stops scrolling, the information (text, graphics) enlarges. SDAZ shows a lot of promise in preventing the motion-sickness people get when they scroll through a lot of information. It also helps them find what they need more quickly.

Even when most major Web sites finally get around to offering mobile versions of their sites, nifty zooming tricks will still be useful. In fact, if things like collapse-to-zoom and SDAZ become standard in mobile browsers, Web designers will come to rely on these when they create mobile web sites.
Rate this article by clicking + or -   
Comments

XHTML+CSS+CC/PP

Although I agree on the importance of extensive zooming capabilities in mobile devices, I think that ultimately a wider deployment of technologies such as XHTML + CSS (strict structure/layout separation) and CC/PP (delivery context) is the most efficient remedy to most of nowadays' mobile browsing woes.
Some further references:
- W3C's Device Independence project: http://www.w3.org/2001/di/
- My recent Web-Graphics entry on serving XHTML to mobiles: http://web-graphics.com/mtarchive/001504.php (note Dean Jackson's comment)