HTML5 Zone is brought to you in partnership with:

Allen is a published fiction and non-fiction writer working on his second novel. He currently resides in Hanoi, Vietnam where he is traveling around SE Asia. He is an avid reader and lifelong geek interested in fiction, philosophy, and technology. Allen is a DZone Zone Leader and has posted 284 posts at DZone. You can read more from them at their website. View Full User Profile

Making scrolling less confusing

05.14.2013
| 1628 views |
  • submit to reddit

Editor's Note: This article has been syndicated on DZone with the express permission of the original author, Jonathan Svärdén.


Scrolling through a long text on a featureless background is confusing. When you’re done reading the text on the screen you have to keep track of where you left off. This means keeping your eyes fixed on a certain point on a moving field of visually homogeneous text. Even with lots of practice this is difficult, and introduces a mental overhead that takes you out of whatever it was you were reading.

The accessibility implications of this are often overlooked, but I’ve seen many inexperienced computer users, particularly old people, struggle with scrolling. People with certain disabilities, such as strabismus, can also have a hard time tracking text on a screen.

Some people have suggested pretty radical ways of improving scrolling, for example Richard Wallis in his “I want the world to scroll this way”. I don’t think you have to go quite that far though.

Taking a lesson from touchscreens

Notice that on a mobile device, this problem does not exist , at least not nearly to the same degree. When you scroll, your finger indicates a fixed point on the page, and you don’t lose track of where you are.

Using that basic concept as a model, I’ve put together a quick prototype.

Demo

The page shows an icon indicating where the bottom of the screen was when you started scrolling. Try scrolling with and without the indicator. I find that you get used to it quite quickly and start missing it if you turn it off. The code for this concept is available on GitHub. Feel free to fork and improve it.

Designing your site with this issue in mind can help alleviate many of the problems described. Replacing a completely white or single-colored background with a subtle background pattern, for instance, can be a great help. Creating your content to provide natural visual markers, such as being liberal with the use of headings and using short paragraphs, is something else that’s easy to do. In those situations where none of this is possible, or for whatever reason undesirable, I think something like the concept above can be a nice touch that provides enhanced accessibility.



Reference: http://svarden.se/blog/2013-05-07-making-scrolling-less-confusing/