2

I'm creating a web page with a lot of text, and elements that animate in once the user scrolls past a certain threshold. I need to determine exactly how far the user should scroll before triggering an animation, and I realized I don't have a clear picture of how users scroll as they read.

When reading a long passage such as a lengthy blog post or news article, do users tend to:

  1. Read until they reach the button of their window, then scroll down a full viewport height and continue reading from the top of the window?

  2. Read until they reach the bottom of their window, then continue scrolling in small increments, such that they're usually looking at the bottom of the window?

  3. Scroll continuously while reading, in small increments, so they're usually looking at the center of their window?

  4. Something else, or a combination of the above?

As I thought about this, I realized I'm not even sure what I do, myself! I tend to follow behavior #1 when I'm thinking about it, but I'm pretty sure that's not how I'd scroll under normal circumstances.

My own research on scroll behavior kept turning up articles on how far users scroll, rather than how they scroll. I know that a lot of people won't read long passages to begin with, but I want to optimize for those users who do.

I'd ideally like to see some type of eye tracking study, and especially one which has data for different screen sizes and/or types of users. Lacking that, however, anecdotal experience would also be extremely welcome—even anecdotes about yourself, If you're better at observing your natural behavior than I am.

2
  • What kinds of elements animate when a user scrolls past a certain point? Human vision evolved to be highly sensitive to spotting movement. If you're really optimizing for the users that read long passages, I'd recommending being very critical of including any animations, as these may be unpleasant distractions. – maxathousand Sep 28 '20 at 18:18
  • @maxathousand Minimizing distraction is actually one of the reasons I'd like to better understand scroll behavior—my hope is that if I can trigger the animations at the right time, they'll serve as a quick "break" rather than a persistent annoyance. For the purposes of this question, please assume the existence of the animations is a forgone conclusion. Thank you! – Wowfunhappy Sep 28 '20 at 18:29
3

Without any previous study or search, a simple analysis of the type of movement of the eyes when reading on a screen, with the head in the correct position, can help to find a generic answer, that is, without attending to any particular specifications.

  • In a text on the screen the reader is forced to perform eye movement from left to right (western reading)
  • The movement from top to bottom is restricted by the line break.
  • Eye movements to the corners are infrequent.

enter image description here

In other words, the movement to be analyzed is the one from top to bottom, and when the reader decides to stop doing it without moving his head. The maximum possible angle is defined by the top and bottom of the screen.

enter image description here

This field is further reduced with the text height:

enter image description here

If the reader is forced to make an eye movement from left to right, up and down, without moving his head and with as little eye effort as possible, I think the field is greatly reduced.

Taking the line that marks the axis of the normal position of the view on the screen as a reference, the angle defined by the upper part of the text to the highest possible angle below that line, determine the "comfortable" field of vision.

enter image description here

Once this angle is covered, the reader will look for the possibility of returning to the starting position (scrolling) to try to move his eyes as little as possible from that normal position line:

enter image description here

My personal opinion is that generally scrolling is performed when the central axis of the comfortable viewing angle begins to move away from the limits of the angle itself.

0

It's quite easy to monitor your own behaviour in doing this so I'd just ask some people what they do:

Personally, I look in the same place on the screen and scroll the text up to it (3)

Take a sample of users and see what you get.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.