Ancient scrolls used to be quite long, and while someone was reading, only a certain part of it was in view. Having the initial and final scrolls in each hand, you could get some idea about the overall progress by their thickness.
After thousands of years, we continue to view documents in portions, while the scrollbar shows the part of the document that is in view.
We may notice that the movement direction of the scrollbar differs from the movement direction of the content while both convey the correct metaphor:
So, why the division between natural and reverse scrolling? And when did this split occur?
Today, the way we manipulate scrolling with mouse wheels and touchpads differs on non-touch devices. “Natural” and “reverse” scrolls are the names introduced by Apple in 2011:
Actually, for most of GUI history, “reversed” scroll behavior was the only option for any devices except those with touch screens, until Apple reversed it and called it “natural.”
Why did this happen? I’ve tried to find out the history of scrolling to track down the reasons behind this division.
In case you’re stuck trying to reverse how you scroll, or perhaps you want to remind yourself of the differences before we move on, here’s how you can change the scroll direction:
Scrolling makes very little sense without a display, so before screens, there was no problem with content not fitting the viewport. Initially, computer text was punched into cards in a single line (or “string”) and it was printed in sections. With some devices, you could move the cursor by typing a command specifying the line number in the file.
The first devices for manipulation with interfaces were styli (or light pens), but at that time, the graphical interfaces were mostly fixed based on purpose — real-time control of a radar-networked airspace or data visualization, for example.
In the late 1960s, the first text editors started to appear, and that led to new ways to manipulate the cursor and the viewport. Today, trackballs are not that popular and usually much smaller than back then, but the default behavior is still the same — trackball manipulates the content (what Apple calls “Natural” scroll):
Graphic 1, a 1960s stylus-based graphical display system – AT&T Archives
See more from the AT&T Archives at http://techchannel.att.com/archives NOTE: This film is silent. There’s nothing wrong with your speakers or volume. The Graphic 1 was a “remote graphical display console system” created by William Ninke at Bell Laboratories in 1965.
And one more invention appeared: arrow buttons. They allowed users to navigate through the files in a reversed manner, corresponding to the direction of the movement. Arrows have come a long way to become what we’re familiar with today.
While the first computer mouse prototype was built in 1964, it reached personal computers much later. The Xerox Alto was one of the first computers designed for individual use in 1973 and was the first one to support a mouse.
In 1981, the Xerox Star was shipped with a mouse and with the navigation adapted for it. That includes the introduction of the scrollbar.
This new scrollbar was quite a misleading one, trying to combine natural and reverse behavior. That pattern was quickly changed to the reversed one, which is still the convention for the scrollbars on every device.
Apple presented a mouse prototype with a horizontal thumb wheel for scrolling in 1989. The first commercial mouse with a scroll wheel came in 1995 by the Taiwanese company KYE Systems. The concept has become incredibly popular, and from the start, all mouse wheels worked in the very same reversed way, mimicking the direction of the scrollbar.
While the first touchpad is dated 1983, it became widespread much later. Before the multitouch feature (allowing the use of several finger gestures), touchpads contained a separate scrolling area. Same as the mouse wheel, it represented the scrollbar and the movement was reversed. After its introduction, multitouch preserved the same behavior.
In the late 1990s to early 2000s, touchscreens became more common. Companies first introduced them with PDAs, and later with smartphones and tablets. Some of these devices presented two options for scrolling — either by manipulating the content if you touch the content part (the “natural” way) or by touching and manipulating the scrollbar (the “reversed way”).
While we quickly adopted the common behavior and it remains unchanged today, scrollbars on touch interfaces were slowly evolving to almost complete extinction. Today you can find them rarely and in an updated form.
In the year 2010, everyone was scrolling without any trouble or any thought about the superior direction. Except for one man: Steve Jobs. After 15 years of reverse scroll being the conventional behavior, he decided scrolling in sync with scrollbars is something unnatural, being the opposite of what is already common on touch devices. So, he decided to unify all Apple devices’ scrolling direction.
With the release of OS X 10.7 Lion in 2011, Apple introduced natural scroll as the default behavior and jumpstarted the discussion of which is the better option. Users didn’t initially welcome the change, but it didn’t take long to get used to it. Apple expected such a reaction, and it was the first release with an option for changing scroll direction; Windows would introduce it much later.
Have you ever been in a situation where you use a computer for the first time, you scroll your mouse wheel down, and nothing happens? You’re trapped within the tiny confines of a document and can’t move any further!
Unless your mouse was disconnected, this has probably never happened to you. The hard switch Apple made showed us that scroll direction is not a big issue, and it is quite easy to figure out how to manipulate your interface.
The only problem materializes if you have to change your habitual behavior (as Apple users in 2011 or anyone switching the operational system now) — that’s something you should be careful about. But at the same time, an unexpected switch of direction may become a useful tool. For example, in games, reversing the scroll directions may represent some state of disorientation.
While scrolling is generally covered by OS, the same input methods and gestures are used in different situations: zooming in and out or changing the volume level are still less synchronized on different websites. So, if you are going to work with custom solutions including gestures, make sure it won’t be too stressful for your users.
Header image source: IconScout
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Visual communication and UI/UX design work together to enhance user experiences. Here’s how you can balance both in your designs.
Designing for enterprise isn’t just about looks — it’s about making complex workflows easy. Here’s how to do it right.
When familiar patterns start to feel stale, these seven ways will help you revive your design inspiration and to create standout user experiences.
Here’s the lowdown. Scaling icons properly keeps them crisp and clear on any screen size. I talk more on this in the blog.
Learn more →
