In concentrating upon Gibson's criticisms of representational theory, therefore, this paper aims to emphasize the point of his alternative scheme and to explain some of the important concerns shared by Gibson's ecological approach and operant psychology. National Center for Biotechnology Information , U. Didn't get the message?
Find out why Add to Clipboard. Add to Collections. Order articles. Fetching bibliography My Bibliography Add to Bibliography. Generate a file for use with external citation management software.
Create File. When people first see your designs, how do they experience them? To understand what makes UI design work, you need to understand the psychology of human perception. This is what allows us to create meaning in a complex and chaotic world.
Theories of Visual Perception
And having a solid understanding of how these principles work will help you in three ways. The figure-ground principle states that people instinctively perceive objects as either being in the foreground or the background. They either stand out prominently in the front the figure or recede into the back the ground. In the image above, for example, your eye instantly sees a white apple sitting on a black background.
Browser out of date.
This determination will occur quickly and subconsciously in most cases. When people use your website or mobile app, one of the first things they do on each screen is to determine which is the figure and which is the ground. The Basecamp homepage has a bunch of graphics, text, forms, and other information.
And because of the figure-ground principle, you can immediately tell that you should focus on the content in the white foreground areas. AngelList uses the figure-ground principle in two ways below. Second, the white text in the menu on the right stands on top of the black background. The principle of similarity states that when things appear to be similar to each other, we group them together. And we also tend to think they have the same function.
For instance, in this image, there appear to be two separate and distinct groups based on shape: the circles and the squares. A variety of design elements, like color and organization, can be used to establish similar groups. GitHub uses the similarity principle in two ways on the page below. First, they use it to distinguish different sections. You can immediately tell that the grey section at the top serves a different purpose than the black section, which is also separate from and different than the blue section.
Second, they also use the color blue to distinguish links from regular text and to communicate that all blue text shares a common function. The principle of proximity states that things that are close together appear to be more related than things that are spaced farther apart. Proximity is so powerful that it overrides similarity of color, shape, and other factors that might differentiate a group of objects.
Notice the three groups of black and red dots above? The relative nearness of the objects has an even stronger influence on grouping than color does. And Vice uses it to distinguish between the images, headlines, descriptions, and other information for each of its stories. The principle of common region is highly related to proximity. It states that when objects are located within the same closed region, we perceive them as being grouped together. Adding borders or other visible barriers is a great way to create a perceived separation between groups of objects—even if they have the same proximity, shape, color, etc.
In the example from Pinterest below, the common region principle is used to separate each pin—including its photo, title, description, contributor, and other details—from all the other pins around it. The principle of continuity states that elements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve.
Visual Perception Theory
In the image above, for example, the red dots in the curved line seem to be more related to the black dots on the curved line than to the red dots on the straight horizontal line. Amazon uses continuity to communicate that each of the products below is similar and related to each other. Sprig uses it to explain the three-step process to use their app. And Credit Karma uses it to illustrate the benefits that their services provide.