scrolling - Why are nested elements scrolled to the opposite direction?

My question is about scrolling conventions, and spatial scroll conventions in general (even here it's only horizontal, but same applies for vertical scrolling).

Looking at the below mockup, why is it that the perceived expectation for clicking on the left << button is that the nested boxes inside the big container move right, and vice versa for the >> button on the right, I'd expect the nested elements to move left.

^{download bmml source – Wireframes created with Balsamiq Mockups}

This way of scrolling seems to be the default I have seen on many sliders, scrollers, carousels, etc. When I created a prototype where I tested a reversed sliding direction of the nested elements, it just didn't feel right.

What is this standard behaviour based on, and why does it feel counter-intuitive to move the nested elements in the direction of the arrows?

Does anyone have examples where the direction is in fact different to what I am describing here?

Answer

There is very simple logic behind it and that is difference of perspective. For example Make a frame of your fingers and like shown in the image below and turn your "frame" towards the right and see what happens.

• you move your frame right and your vision moves left.


• you move your frame left and your vision moves right.

Now you have to pic one of the two perspectives to explain who is going where. If you talk of your frame of fingers, then they are MOVING LEFT but if you are talking about the VISION then VISION IS MOVING RIGHT.

In computers, our screens are stationary and they do not move. That is why whenever we think of moving something, we imagine its the VISION that is moving instead of screen. Keep the same learning which you had above, this will explain that why >> actually means to move the VISION TOWARDS LEFT and << means move the VISION TOWARDS RIGHT.