Movement / Motion

The primary problem with standard website navigation is that there is a user disconnect when transitioning from one page to the next. For example, in a typical situation, when you click on a navigation element, you are immediately moved from one place in virtual space to the next with no physical indicator explaining this to you. Just BAM! there you are. Some Web designers are trying to smooth the transition by offloading some of the perceptual work onto the human motion perception system. This is done by focusing the user’s attention on the transition, and relating it to normal motion, which helps the user to understand the change from one place to the next, much in the same way that you do when you walk from one room to the next. For example, the first screen cap below begins with the first page that you arrive at on the (demo) site. If we click on the “Portfolio” navigation element (1) you will run through a transition that leads you to page two. In the second screen you can see that the Portfolio page slides from the left side of the screen to the right side of the screen (2). This allows the user to understand their transition by using a standard motion that we are already adept at understanding, which in turn tells them they are leaving one page and arriving at the next. In the third screen, after the transition has completed, you are still being giving location information from a depth queue (3) in the form of a drop shadow that runs from the top of the page to the bottom about a quarter inch from the right side. This is an indication that you are looking at a different page by hinting that one page is on top of the other.

Another way that designers can move you through space is with a numbering system, much like what I’m using for this blog. For example, if we look at the first page of the instruction manual for Denon’s AVR-1910 surround receiver (1), we can see that they have created an ontological (hierarchical) system that guides us through the various functions that we may be interested in reading more about. By doing this, they have provided us with a logical structure through which we understand that if we are interested in Part Names, we need to move through the manual to the a designated place in the “space” of the manual. Now if we shift our attention to the Part Names and Functions page (2) you can see that each little thing on the face of the receiver has a corresponding number (2.2 & 2.3), which is accompanied by a brief description. Also note that they show you where you are in the manual (2.1). All of these system work naturally with our automatic cognitive processing relying on the actions of saccades and fixations to help our brain understand the boundaries of the manual’s space and how we move through it. Additionally as we turn the pages, there is a smooth cognitive transition that allows our brain to understand where we came from and how we arrived at the new place in the manual’s space.