2D navigation on a mobile screen

Navigating large information spaces can be disorienting even on a large screen. On a small screen it should ideally be avoided, but that is not where we are headed. Increased storage capacity and higher bandwidth mean that you can have thousands of songs, images, messages and whatnot on your phone. We need good ways to interact with all this data. This post looks at 2D navigation and investigates what techniques good mobile browsers employ to make it easier to interact with large web pages.

2 dimensional content

When designing for mobile phones you often encounter situations where the content you need to display exceeds what can be shown on a single screen. For example an email message. The obvious solution is to format the text to the width of the screen and allow people to scroll the text up and down (vertically). You may choose sideways (horizontal) scrolling to let people interact with image galleries or wizards. Vertical scrolling works, horizontal scrolling works. But horizontal and vertical scrolling at the same time does not work. People get lost almost immediately.

There is one case in particular where this 2-way scrolling problem raises its ugly head, and it's called the Web. People want to be able to browse the Internet on their phone, but most web pages are meant to be displayed on much larger screens. Human eyes just can't read a page designed for a 19" screen when it's displayed on a 3" screen.

From an interaction perspective solving the "web browsing problem" is particularly hard. As pointed out elsewhere, a web browser is not exactly a natural for a mobile phone. "It would be hard to create a computing architecture more inappropriate for use over a cellular data network." (Michael Mace)

Good examples

I think it would be interesting to look at two approaches to the 2D scrolling problem. The Safari on iPhone because it currently offers the best web experience on a mobile phone and Opera Mini because it has some interesting tricks up its sleeve and it works really hard to make the web usable on very small screens.

The two browsers represent different philosophies:

Apple: Adapt the phone to the web.
Opera: Adapt the web to the phone.

Apple makes both the hardware and the software and has only one screen size to worry about. The iPhone uses direct manipulation, the user controls the browser directly with finger gestures like tap, double tap, drag and pinch. This gives a great sense of control.

Opera arguably has a harder job. Opera Mini runs on many different screen sizes, and it works on phones that has indirect manipulation. Since it's a Java ME application there are additional technical restrictions, for example the size and type of fonts Opera Mini can display.

Direct vs. indirect manipulation

On a direct manipulation device like the iPhone, you just tap anything directly.

On indirect manipulation devices, one item on the screen always has focus. You use the joystick as an intermediate device to move the focus to the item you want and click it. If the screen has 20 focusable items, for example 20 links, you may have to step through 19 links to get to the one you want.

Because of this, prioritizing is very important on a indirect manipulation device. You want to put the most important or most used stuff on top so the user has to do as little clicking and scrolling as possible.

But as we know, web pages are not designed in such a prioritized manner. The top area is usually filled with a number of links for general navigation, ads, search, etc, etc.

Example: The New York Times page shown to the right. The top headline is the 73rd link on the page. There is about 350 links before you come to the "subscribe to RSS" link. There is about 375 focusable items in total including images, forms, buttons etc (yes, I counted them).
No one is willing to step through hundreds of links. You need a strategy that makes it possible to reach any link on the page without stepping through them all.

Lesson 1: Zoom instead of scrolling

The main trick to solving the 2-way scrolling problem is to avoid it entirely. Both Safari on iPhone and Opera Mini encourages you to zoom in and out instead of scrolling. Scrolling both vertically and horizontally is disorienting. But if you shrink the content to fit the width of the screen the user won't get lost.

On the desktop, a browser usually has size and resolution enough to both display the entire width of the page and show the text in a readable size. In a phone browser it is necessary to zoom in to read and zoom out to navigate. There is basically two views for each page. The "Overview" where you navigate around the screen and the "Detail View" where you read or click links. The purpose of the Overview is avoid getting lost. Its like in a film. A scene often starts with an establishing shot, an overview of the scene before going to a close-up. The establishing shot tells the viewer that "we are now back at the mothership" and "here are the people in the scene". Without the establishing shot, the viewer might think that we were still down on Caprica.

Dual views of course require additional user interaction. In addition to scrolling, reading and clicking links, the user has to zoom in and out as well. You would be mistaken to think this bad a thing. This zoom in/out mechanism is greatly preferred by users compared to a keyhole experience. Just check how people are praising Safari and Mini. The number of clicks is not the most important parameter for user satisfaction.

Lesson 2: Throw pixels at the problem

The iPhone screen has twice as many pixels as a typical smartphone. (The screen is not physically twice as big. It is bigger, but the pixel density is also higher than most other phones.)

Pretty much all other mobile browsers are "keyhole browsers". They show a tiny part of a bigger page. Even Nokia's version of the WebKit browser takes this approach by default. You don't want the keyhole effect. Both Safari on iPhone and Opera Mini avoids the keyhole effect by showing you the entire page as default. The more pixels you have the better you can do this. Thanks to the high resolution of the iPhone, you can often read headlines and this makes it easy zoom in on what you want to read.

Safari on iPhone also attempts to provides a "pixel perfect" rendering of the page. (I know, there is no such thing as pixel perfect when it comes to browsers...).

Opera Mini runs on any screen size and can't depend on pixelcount, so it displays a rough representation. Even though you can't read the text, you see headlines, images, text columns etc. Enough to know approximately where to zoom in. This works because after two decades of conditioning, people know what the usual elements of a web page is. They have a "web page schemata".

Opera Mini renders most all text and images in columns that will fit the width on the screen when you zoom in on it. Actually, it narrows text and images that is too wide and leaves the rest as it is.

This sometimes results in "gaps" in the page overview. The iPhone displays the layout perfectly, but sometimes the text is too wide and does not fit the screen when you zoom in.

We have another philosophy difference:

Apple: If we need to sacrifice anything its certainly not going to be the web designers work!
Opera: Never mind the pixel-police, readable text is more important!

 

Lesson 3: Render for a small screen

How wide is the World Wide Web?

• The Web is currently 1024 pixels wide 
• The iPhone is 320 or 480 pixels wide 
• Smartphones are 240 pixels wide 
• Small Feature Phones are 128 pixels wide

Small Screen Rendering basically means creating a version of the web page in one single column and as wide as your mobile phone screen. Here is an example of how Opera Mini reorganizes the web page to make it easier to consume it on a small screen. 

The page has a fairly simple structure, chosen for clarity. As you can see, Mini decides what the header is, what the footer is, and what the main column is. It stacks the content to the best of its ability and scales images to fit the phone screen. (I you want a closer look at Small Screen Rendering, press Shift-F11 in the desktop version of Opera to view any web page with Small Screen Rendering.)

Safari on iPhone does not reorganize the screen, it simply zooms in on the area of the screen that you double tap on. If the column is wide and the text is to small to read, you can tilt the phone to horizontal.

Lesson 4: Follow the flow

Both Opera Mini and Safari on iPhone "snaps" to the column. Opera Mini even has this cool effect where it follows the column even when it's not straight. The browser slaloms or snakes down the column.

The magnetic or "gravitational" effect is especially important on the iPhone where you scroll by dragging or flicking. Without it, it would be very easy to scroll outside the column and lose a bit of the text on one or the other side. None of the browsers prevents you from scrolling away from the column, they just help you stay on track.

Other Zoomable User Interfaces

There is a number of other approaches to the problem of navigating large information spaces. There is an amazing demo of Photosynth at TED. Mobile examples are Deepfish, Google Maps, Zumobi, etc.

Comments

[Garbrand]

Garbrand said...

Hmm... Lesson 5: adapt your content and / or design for your target devices.

[soo]

soo said...

this is an awesome post! thank you, i really learnt a lot! :)