gnizak.com

Why websites scroll up and down and not left to right.

Have you ever wondered why websites scroll up and down and not left to right? It is rare to see something on a website that you must scroll right to see. There are many reasons why the internet has evolved the way it has. It seems that websites have scrolled up and down so long that we expect all sites to do this and get confused when they don’t. The following are a few principles to explain why websites are built ‘up and down’ and not ‘side to side’.

Why websites scroll up and down

Most elements of modern computing have evolved directly from other technologies. The tv introduced the horizontal screen format. Typewriters forced the paper to move, instead of it moving down the paper (creating a vision based user interface point that stays in one spot). The page up and page down buttons evolved from the tradition of typewriters, word processors and computer programming, where the document is seen to go on forever. Many input devices have evolved to work with scrolling up and down, like the mouse scroll wheel. Interface devices have reinforced the vertical nature of vertical movement.

Computer information continuously changes and scrolls vertically

Computer screens present information in a non-static way. The information changes constantly. In comparison, books present printed and permanent information. What is on a page will always be on that page. The vertical size of a webpage will also not always be the same, so the vertical size cannot be easily set for every device. All of this ‘extra’ information has to go somewhere and the obvious place is below. Since one webpage includes specific information, it is not always practical to start another page once the user gets to the bottom of the screen. One page would end up being multiple pages. Many articles do get broken into multiple pages but usually to prevent an extremely long scroll.

The internet has no start or end. Users psychologically go deeper into content when they want more. Deeper to the human brain is down like deep in the ocean down. Computer interfaces are complicated. Reading happens left to right, move down to next line. Books add an extra step, when the page is finished, flip to the next page. A website simply adds more page to the bottom once you run out of space.

Human bodies are up and down, and content is too

All computer systems (essentially) are used directly in front of a user. The screen, keyboard, interface hardware, or touch elements exist in a space that is in front. The eyes of a user echo the body and are quicker to follow the natural line their body is located. For most instances users are aligned vertically when they use a computer. The head is above, the feet are below. There is a vertical grid created by the body which echos vertically aligned screen content. Pushing away or pulling, pushing up or pulling down are psychologically closer to a vertically aligned mind than move something horizontally. When humans interact with information they want to bring the information to them and not go to the information. Website users want to pull the information to them, into the view-port (screen or window).

Even if a user scrolls down, the landscape frame stays exactly the same size. The information stays in front of us (conceptually higher or lower but still in front of us) Just like in the wild, if we scrolled (looked) left or right, the objects more to our left or right. We might start thinking the information has gone to the side of us, or eventually behind us. When the information is behind us it is no longer controllable and becomes unknown. (Think of a lion in the Serengeti, would you really want look away from it and let it get behind you).

The long history of portrait vs. landscape

There is a long history behind landscape vs. portrait format. There is an old art concept which describes why horizontal is called landscape, and vertical is called portrait. Humans have seen the world horizon since the beginning, and have it as a reference point. In this horizontal space we engage objects such as trees, people, mountains and identify them as objects. The landscape itself is an abstracted space (a conceptual space) on which all things happen. So over the long evolution we associate horizontal space as being less active and is easy to push back into the subconscious.

In a vertical image there is less space to the left or right to give scenery, which is why objects become the main focus in a vertical space. The pointing of a person is more commonly done in the vertical portrait format because we want the viewer to focus on the object first and not the space it is in. The object itself supplies the depth, unlike the landscape format which supplies the depth. Since most computer devices are a horizontal zone, it allows the brain to conceptually abstract the horizontal space just like a real horizon. Designers have used this horizontal abstraction to present objects (websites, info, images) into the computer landscape. The internet objects are placed into a landscape zone. Since the internet is simply content in a space, it makes sense to float the content vertically.

Horizontal scrolling on vertically shaped devices

Most computers screens are landscape format (new devices are vertical like phones and allow for a different complexity). Horizontal flipping works more on standardized device sizes. The ipad has a standard size so users know exactly how much fits on one page. Designers know the height expectations and can lock their content into that vertical space. Horizontal interaction is more successful when a standard device size is universal.

A smart phone held in the hand is often held vertically and controlled by the thumb. The natural movement of the thumb in this position is left and right. In this format horizontal movement is more natural and works. One huge example of this working is in the iOS home-screen which flips between spaces horizontally.

To conclude.

There are many detailed reasons why the design has evolved to the vertical scroll, which make great sense. We follow design conventions because they work, and sometimes only because they are there. In the case of vertical scrolling, our behavior has grown to prefer vertical scrolling based on function and psychology.

Joshua Gnizak

Let's talk

Email:
Skype: joshuagnizak Chat Now