Summary: Websites and mobile apps both frequently cram options into too-small parts of the screen, making items harder to understand.

A computer screen’s precious pixels are the world’s most valuable real estate. Amazon’s Add to Cart button is 160×27 pixels, or 0.003 square feet (0.0003 m²) at a typical 100 dpi monitor resolution. You could crowd almost 800,000 Buy buttons onto the floor space of the average American home, which currently sells for $160,000. Even a single Buy button will often bring in more than that — let alone the revenue from 800,000 buttons.

Normally, when something is extremely valuable, you try to conserve it. But screen space shouldn’t be hoarded, it should be spent. I see too many designs that cram highly valuable content or action items into tiny spaces while wasting vast amounts of screen space.

8 years ago, I analyzed the space allocation across 50 website homepages and found that only 40% of screen space was used on navigation or content of interest to users. This was in the days of 800×600 monitors when space was particularly precious. Today, many websites are a bit better, and bigger monitors obviously allow for more room to play.

Still, sites frequently open important features in tiny pop-ups, violating two guidelines:

• Don’t pollute users’ screens with pop-ups.
• Show stuff in a space that’s big enough to let users see everything they need to see without scrolling. For example, follow the guideline for e-commerce product pages to make photos really large when users click the Enlarge Image button.

Wasted Mobile Space

Even on a big desktop monitor, space is at a premium and should be utilized. Mobile screens are so small that it’s a sin to waste space.

Let’s look at a screen from an iPad study we ran recently:

ABC News iPad app: home screen.

The user interface to the current news is a huge sphere; you can spin it using gestures. It’s a neat graphic and the initial interaction is enticing: at first, users found it “kind of cool,” “really cool,” “fancy,” “eye-catching,” and “kind of fun.”

Despite these positive initial reactions, users didn’t like the screen and turned to an alternate view as soon as they discovered it. Regular users of the ABC app told us that they preferred the more standard-looking news listing as their main screen when using the app.

ABC News iPad app: The alternate home screen with more news.
This is what people actually use.

Why do users favor the regular, slightly boring design for everyday, actual use? Because it shows more news at a glance.

Higher information density = less need to move around and higher likelihood that you see what you want.

The sphere offers a clear view of only a single story. Other stories have distorted images and captions that are hard-to-impossible to read. What a waste of screen space.

A second example from the recent study comes courtesy of NASA:

NASA iPad app: The home screen with drop-down menu expanded.

The main screen on NASA’s iPad app is a visualization of the solar system. This is not a highly efficient use of space, but it’s actually okay because it’s an engaging image that offers a wide selection of choices from the opening screen, while clearly communicating what the app is all about.

In user testing, the main problem with this screen was the risk of touching the wrong heavenly body: the distance between Earth and the Moon is only 60% of our usability guideline for separating objects in touchscreen applications. (See full report with mobile usability guidelines.)

Another usability problem related to space utilization (screen space, not outer space). The drop-down menu featuring satellite missions was hard to use for two reasons. First, the button’s icon looked more like a fish skeleton than a satellite, but that was a relatively minor issue.

The bigger problem was that it was physically hard to move through the long list of missions — doing so seemed to require almost infinite scrolling. Also, each satellite was hard to recognize from its picture and acronym. Most satellites look much the same unless you’re even more of a space nerd than NASA has the right to expect of its users.

The designers tried to emulate a mega-menu, but failed to achieve its benefits for several reasons:

• There’s no categorization of the menu items — a good mega-menu would have broken the missions into groups and given each group a title. Doing so would make it much easier to find certain types of satellites, such as those for inner-planet exploration.
• Labels are not explained — for example, it might be helpful to know that “ACE” measures high-energy particles, whereas “AIM” studies mesosphere ice.
• Illustrations are meaningless. Pretty fluff, but still fluff.

Instead of the ever-scrolling menu, it would have been better to take users to a separate full-screen overview that showed all the missions in a single view, making them much easier to compare. Spending more screen space is okay, as long as you give users an easy way back to the main view.

The proliferation of small, hard-to-use interaction areas in iPad apps is partly Apple’s fault because of a design mistake in the default email application. The inbox is shown as a skinny menu down the side. This is great in the landscape view, letting users quickly alternate between the inbox and individual messages so they can quickly process their mail.

In the portrait orientation, however, the inbox menu appears as an overlay that partly obscures the message content, making it impossible to work with the two panes simultaneously. Why show two panes, when you can’t use both? It would be better to display the inbox across the entire tablet screen, showing more messages and/or more extensive previews of each message.

Bigger is Better

Mobile devices and tablets are inherently small, so you must optimize the use of their screen space and show things as large as possible. Desktop screens are bigger, so you can often achieve a better user experience by enlarging things even more.

There are very few exceptions to the rule that bigger is better in user interfaces. One example is found on sites that insist on opening new windows and maximizing them — even on the biggest of monitors. Once people get a 30-inch monitor, they don’t want maximized browser windows anymore; it’s highly annoying to find, say, a glossary entry taking up 2560×1600 pixels and obscuring the other windows you’re working with.

Mainly, though, let’s stop cramming information into tiny peepholes. Optimizing the UI for the available screen space is a key strategy for improving usability (and thus lifting your conversion rates).

Written by: Jakob Nielsen, Alertbox
Posted by: Situated Research