Make your user flows easier by knowing the two types of vision

Human Eye with different lines. The line of si...

Human Eye with different lines. The line of sight (middle) is the only one permitting a view with good acuity. (Photo credit: Wikipedia)

Ever get frustrated by a site, wondering what you are supposed to do next, only to notice a few seconds later that a part of the screen changed without you knowing it?

It happens all the time. Why? Because the eye is not a camera. Our eyes don’t literally pick up on everything we see.

Instead, we have two types of vision. We have 1) central vision, which is what we use to look at things directly, and 2) peripheral vision, which we use to get an understanding of our environment. While the conscious mind focuses on central vision, the unconscious mind focuses on peripheral vision.

So when you want the user to flow easily, you need to remember two things:

  1. Keep the next step close to where the user is looking, within 80px or so.
  2. If you need to draw the users attention away from where they are looking, use movement.

Our central vision is limited in size, so keep the next step of the process close to where the user is looking. This is why it is so important to keep form field labels close to the field. Keep buttons and processes in a single, vertical line with elements within 80px or so of each other. This ensures the user will not need to search the page for the next action.

Movement will attract the attention of peripheral vision and move the central vision to the location of movement. If you need to jump the user’s attention, or you don’t know where the user is looking, a little movement will draw the central vision to that place.

Questions, comments? Let us know!