iPad: Scroll or Card?

How do you navigate content on the iPad? Scroll or flip? In 1987, the biggest neck beards in tech held a conference on the Future of Hypertext and there were two camps, “Card Sharks” and “Holy Scrollers”. They had an epic battle over this question: Should you scroll or flip pages on the screen? Who won the fight?

Interface design — eye/finger coordination and movement with scrolling vs column


As happens in every new field, a struggle is already taking place over which hypertext methods are the best, with creators defending their philosophies. Many hypermedia developers are divided, for example, over whether to break up hypertext into small notecard-like chunks, the way Apple’s Hypercard does, or to give unlimited size to the chunks.

“There are two camps: Hypercard and scrolling”, said Jef Raskin, formerly of Apple and now president of Information Appliance of Menlo Park, California. “I’m a holy scroller.”


In practice, it’s pretty clear who won the debate: 99% of all websites scroll, and most desktop applications scroll when they display a lot of information. While scrolling won the race in most cases, there are instances (see PowerPoint) where the card model makes more sense. What instances?



iPad Usability: First Findings From User Testing, Jakob Nielsen


When to Use the Scroll Model


  2. Layouts need to be automatically generated (daily newspapers)
  4. A complex information architecture requires chunking

When to Use the Card Model


  1. You have full control over the device
  2. Your information entities don’t need more room than one canvas
  3. Accessibility is not an issue
Use cases for scrolling vs cards on a touch screen

When Not to Use the Scroll Model

By now it should be clear that a linear information architecture (PowerPoint, novel, children’s book), demands the card model. The scrolling metaphor breaks when pages become too long (20 pages or more) and the scroll bar becomes so tiny that it no longer offers a visual clue about page length.

When Not to Use the Card Model

Cards are generally difficult if your information architecture has more than one dimension. As soon as you add a dimension other than just forward and back, cards become stacks. And that’s where things get confusing:

  1. Information Architecture: The more comprehensive the image you have of the overall application, the less conscious effort you need to navigate. A horizontal series of different sized scrolls makes a simpler site map than a plane of identical cards.
  4. Interaction: Swiping requires a big gesture, scrolling is a small gesture. Using big gestures for big actions (next article) and small gestures for small actions (continue in article) corresponds to the weight of the action. Similar gestures for differently weighted actions are less intuitive.
Typographic and macro-typographic issues for single scrolling vs multi-column cards

The iPad Is Here, So Shave the Neck Beards!

You often hear the argument that the iPad is all new and the Internet is all crap (too cold, too technical, not pretty enough), so the nerds should be ignored. After all, the iPad is closer to a printed magazine than the Internet, right? No, it’s not. It’s a touch screen device. Touch SCREEN device. It’s light years away from print.

While a touch screen follows different rules than a desktop interface with mouse or touchpad, you still need to understand how screen interfaces work. Dear paper tiger, the iPad is not going to undo the Web, it’s accelerating the change you hate so much. Nerds have learned to care about typography because it improves the performance of interfaces. If you want to make it on the iPad, it’s time to learn a couple of things about interface design.