Small Screen Usability Experiments

Came across this excellent article by Mark Frauenfelder on The Feature last night, talking about experimental techniques in small-screen usability design.

At it’s most basic, many sites try to assist small-screen users by allowing their multi-column layouts to ‘break down’ into a more usable, stacked, one-column layout on smaller screens. Although this is certainly a start, it usually requires users to do a lot of scrolling on devices that usually don’t make scrolling either fast or easy.

Patrick Baudish, a HCI researcher has done a lot of thinking in this area over the past 3 years. Some of his alternatives include:

1) Summary Thumbnails: An elegant idea that simply maintains the relative proportions of the content areas but scales the fonts up to a readable size. Obviously to achieve this, the amount of content presented has to be cropped, but surprisingly, this cropping doesn’t seem to detract much for the meaning.
2) Collapse-to-zoom: This is a little like SitePoint’s collapsing nav column, but allows the user to collapse any content area with a simple pen swipe. The font in the remaining sections then scales itself up to take advantage of the new real estate. There’s no reason you couldn’t make this functionality available to all users.
3) Speed-dependent Automatic Zooming: This is an experimental technique developed at the University of Tokyo. The method is a little like the way a bee might collect pollen. While the bee is standing on a flower he has full access to that flower, and he can also comfortably hop to any adjacent flowers he can see.

However, to find new, more distant flowers, he’ll need to zoom upwards to get an overview of the area. Upon spotting something promising, he can ease the power and drift down for a closer look. That’s roughly how this technique works as their little Java Demo shows.

Although the concept is a few years old now, it’s probably only relatively recently that PDAs and phones have become truly viable web browsing devices. Coupled with a stylus, maybe it’s time may has come.

Of course, this will all be redundant in a few years when everyone is using personal, heads-up retinal projectors.

I am hopeful they’ll tone down the ‘Robocop vibe’ just a touch by then though.

Excuse me, I have to go. Somewhere there is a crime happening.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.lowter.com charmedlover

    Why not just restyle your website using CSS? Mobile styling is quite easy.

    And if you use Opera on your phone it has some of the best on-screen rendering and makes most of these techniques worthless.

  • obrienkev

    CSS! Here Here!!