C3.22.1Content versus viewport scrolling modelsdesignresearch

Moving the content and moving the viewport are opposite models

Aliases: content scrolling · viewport scrolling · natural scrolling

What it is

Scrolling comes in two opposite models. Content-centric: the finger pulls the paper down, the ink follows, earlier content appears at the top. Viewport-centric: the window crawls down a fixed document, the scrollbar thumb travels down, later content comes into view. The same hand direction yields opposite motion of the text. The fight is not over which mapping is “natural”; it is over whether the screen is movable paper or a camera.

Why it happens

Direct touch treats the surface as a grasped object, so proprioception and vision share a direction: the object goes with the hand. That is the content model. Scrollbars and early mouse wheels split control from document: control-down means viewport-down, so the document moves up relative to the screen. The reversal is a choice of reference frame, not a sign error in gain. People who switch frames mid-thought stall on the first scroll and invert. Maps and canvases can add a third language: “I am dragging the earth” versus “I am flying the camera.”

Studying it

Give one document both mappings. Measure first-scroll direction errors, corrections, and which referent people name (“I’m pulling the paper” versus “I’m moving the window”). Factors include prior device (touch-dominant versus wheel-dominant) and whether a scrollbar is shown. Speed alone is weak—one reversed then corrected trial can still look fast while the models clash. Think-aloud captures the frame better than a questionnaire.

Where it stops holding

“Stick forward walks into the screen” in games is a different first-/third-person mapping; it does not explain lists. Writing direction (RTL documents) changes which side is “next page,” not this content/viewport pair. Inertia does not change the model, only where motion stops. This leaf distinguishes models; it does not mandate which mapping touch or a wheel should use—that is platform convention in the next leaf.

Applying it

  • Name the reference frame for each surface in design discussion; never invert it halfway through one scroller.
  • If a scrollbar is present, make thumb motion consistent with the chosen model: under content-centric, the thumb travels with the content.
  • Watch whether the first wrong scroll is immediately inverted; mixed verbal reports on one container mean the frame was never settled.

Related

  • Same group: C3.22.2 Touch defaults to moving content, wheels to moving the viewport · C3.22.3 Two mappings on one device scramble direction
  • Adjacent: C1.11 Scroll wheels and inertial scrolling · C3.07 Pan
  • Search: content-centric scrolling · viewport-centric · natural scrolling

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/C3.22.1