In this video, we'll be talking about how we process visual information or how do we go from having a bunch of photons hit the retina in the back of our eye to actually looking at an image like this and interpreting it as a bowl of fruit that has oranges, apples, plums and bananas. Or perhaps more relevant how do we look at an image like this and interpret it as a web page that's presenting a bunch of boots that are available for sale at specific prices, with different brands, and different model names and so on and so forth. While, psychologists who study human vision describe it as taking place across three stages. So, in the first stage, our eye breaks down the visual field into a set of features which are things like colors, and different shades, and different line angles, and slopes and so forth. Then we compose those features into patterns that are things like shapes or groups of shapes that are connected in different ways. Finally, we interpret those pattern as objects that we recognized like dogs or ice cream cones. So, starting with the feature detection, we know that there are a set of primitive features that our eyes detect very very rapidly when we look at some visual stimuli. For example, we see things like color instantly, we break the visual field up into regions of different colors and also different values or different shades. So, ranging from light to dark. We also are very attuned to noticing different edges and lines and how those lines are related to each other. So, we immediately break the visual field up into intersections of lines and the angles that they make, we also notice different lines the slopes or orientations of those lines, the lengths of those lines, and things like that. We also noticed regions that have different textures, and we're also very attuned to noticing motion. So, anything that is moving in our visual field, we pick that up and we notice it very very rapidly. So, let's look at an example of how this works and how some of these different visual features work in terms of processing information. So, we're going do a little experiment here. I want you to find the orange triangle in the next screen that I show. You ready? Go. That was pretty easy, wasn't it? The orange triangle differs from all of the other stimuli in the visual field in only one dimension, and it's very easy to tell the difference between the blue triangles and the orange triangle. Let's try it again. This time I want you to find the orange square in the next screen that I show. Ready? Go. Okay. That was probably not quite as fast but still pretty easy. The reason is because it differs in shape from the other stimuli but not in color or in any other features. In particular, in terms of the visual features that we just talked about, the slope and the angles of the lines are different and our eye is immediately drawn to that difference given the other shapes that are available in the visual field. Okay. Now we're going to try a third experiment and let's see how this one goes. I want you to find the pink triangle that is pointing towards your right. Ready? Go. Okay. That one was probably a little bit tougher. Why was it tougher? Well, because the target that you were looking for varies in color and orientation from the various distractors that are available, and there are some triangles that are pointing in the same way but that are different colors, and there are some triangles that are different colors but are pointing in different directions. So, what we don't have access to here is we don't have the pop out that occurs when there's a simple differentiation in the visual feature space of an object compared to the rest of the visual field. We have to resort to what's called visual search, where essentially, we have to scan all of the objects in the field in order to detect the one that we're looking for. Now, if we add some other features like motion, we start to see the pop out come back and it's very easy to detect something like the triangle when it's moving. So, visual feature detection happens very fast and very primitively. It's believed to be hard wired into the apparatus of our eye and our neural processing system that interprets visual images. So, it's very fast and it allows certain features of the visual space to pop out, that is to draw our attention immediately without any conscious effort. This baseline feature detection is what supports subsequent stages like the recognition of patterns and the recognition of objects. So, the first thing that happens when we look at this bowl of fruit is we break it up into its basic features. So, we see the regions of different colors, we see different textures like the difference between the orange texture and the plum texture, and we see the edges between different objects like the edge between these two apples that's shown here. So, the next thing that happens is we take those visual features and the decomposition of the space into those features and our eye automatically seeks patterns to make sense of the arrangement of those features. A set of psychologists in the early 20th century known as the Gestalt School of Psychologists studied the way that this pattern recognition works. They identified a set of principles that define the way that our eye breaks up the visual field. So, for example, we use proximity to determine what parts of the visual field ought to be associated with each other and which are likely to be part of a different pattern. So, here up in the upper left we see this example of the two rectangles that are close together are much more likely to be associated as being part of the same group or part of the same pattern as this one over here that's by itself. We use closure and continuation to complete objects that might be occluded by other objects. So, when we look at this circle right here, we don't notice the dash lines as being separate objects, we notice them as being part of a circle and we see it as a circle even though there's this part missing right here. Because our eye automatically closes the circle for us. We use symmetry to organize the visual field into patterns. So, when we look at this image of what looks like a sun here, we see it as a single object, a sign with rays coming out of it largely because of the symmetry of the object. By comparison, when we look at this object right here, we're much more likely to see that as a set of different objects or different patterns that are overlaid on top of each other in large part because of the lack of symmetry. It's harder to see this as a single object or a single pattern and easier to see it as a set of intersecting patterns. We use similarity to group things into patterns and identify patterns that go together. So, we're much more likely to see these three circles as being related to each other and part of the same pattern and perhaps these trapezoids as being part of the same pattern and see this heart right here as being something that is separate because it doesn't share similarity with anything else that's in the field. When we see things that are grouped into a common area that share a common boundary, we're more likely to see those as part of the same pattern as opposed to something else that might be seen as part of a different pattern. We also use movement to group aspects of the visual field into patterns. So, for example if we look at these four circles or ovals down here we immediately see them as a single pattern of four things but as soon as we start to see some of them move separately we start to see them as two different patterns and likely two different groupings or two different sets of objects. So, we use these Gestalt principles to break up the visual features that we detect in the first stage into different patterns that we can then use to recognize objects. So, we use things like proximity to show that these two regions here, this lighter region and this dark region, are likely to go together into the same object, because they're close together. We use continuation right here, to recognize that this green shape, which will turn out to be an apple, continues even though it's occluded partially by the apple that's in front of it. We use symmetry to recognize that the different textures and gradations of this orange go together and are part of the same object. We use containment to detect that all of these fruit are contained in the same bowl and are grouped together, and we use similarity to identify different regions as being of the same type, and of the same pattern together. The third stage builds on top of this pattern recognition, and uses our prior learning to be able to identify the particular objects that we have now broken the visual field into, and so we can recognize things like oranges, apples, bananas, and plums, and the bowl that contains them. So, how can we use these principles of the visual system and visual perception when we're designing interfaces that people will be using? Well, here are a couple of things that we can draw from what we've just been talking about. One is, that we can use pop out or these primitive features, like color, shade, line, orientation, angle, and motion, to attract attention to things that we want to make sure that users notice. We also can use Gestalt principles to associate like items. Similarly, we can use Gestalt principles to organize the page to make it easier for people to skip around and find only the information that they're interested in, and ignore the things that they're not interested in. Now, we'll look at a couple of examples of how these principles play out in different user interface designs. So, if we look here at the Amazon home page, you can see several examples of using pop out or these primitive visual features like color, and line, and contrast, to draw the user's attention to different parts of the page. So, for example, if we look here at these icons indicating electronics toys of these different categories, they're using bright colors and strong contrast to draw the users attention to those areas. You'll also notice, that this area up here is using motion to attract the user's attention by cycling through these different advertisements. It draws the user's eye to that area and asks them to pay attention to it. Finally, we can see pop out being used here with this button, which is a call to action to ask the user to sign in, where it's using color and contrast to draw the user's eye to the button and asking them to perform this action. Notably, these areas up here, the navigation areas, are explicitly not using strong visual differentiation or pop out to draw the user's attention. Skilled users or knowledgeable users will look there to find the things that they need, but they don't need their attention drawn to it. So, pop out is being used to draw attention to the areas that the user might not notice, or might not be looking for on their own. What happens when we use pop out in these primitive visual features ineffectively? Look at this page. There's a lot going on here, and it's very hard for the eye to pick a place to look on this page because everything is asking for attention. There's a lot of bright colors, there's a lot of contrast, and there's a lot of motion going on. There's all these animals crawling around. There's fingers pointing. There's stuff flashing, and it's very difficult, because all of these different visual features, like motion, and color, and line, are being used at the same time and they're all demanding the user's attention. So, this is obviously an extreme case, but if we're not careful, and we're not selective about how we use these visual features, we could make it very difficult for users to be able to interact with something that we design. Turning our attention to Gestalt principles, we can look at this page from Zappos as an example of an effective use of Gestalt principles to help organize the visual field and make it easier for users to navigate the page. So, what you see here is you see the use of similarity in the presentation of the different items, in this case, boots that are being offered for sale. The images are the same size. In fact, all of the boots are photographed at the same orientation to make it very easy to compare across them, and you can very rapidly tell that for each of these different entries, you're going to get the same information, because the structure is similar across each of them. So, you can see the image of the product. Then, you can see the brand. You can see the model. You can see the price, and you can see the ratings, and you're going to see that repeated across each of these. At the same time, the structure, which is using similarity and also proximity, by the way, allows the user to skip around and ignore things that they're not necessarily interested in. So, if I know that I am looking for a particular boot that I want to purchase, I can focus my attention on this part of the page, because I can see that it is very clearly distinguished from this part over here, which is essentially going to give me filtering and search options, or these parts up here, that are going to give me navigation options for the rest of the page. You can tell by clearly differentiating those, and breaking the similarity between these different parts of the page, it enhances the skip ability of the page. Meaning that I can skip around as the user to the parts that I'm interested in, and I can ignore the parts that I'm not interested in, for the task that I'm trying to accomplish. So, these principles can be used to design more effective visual presentations when presenting options, and information to users. So, if we use pop out or primitive features to attract attention, and avoid using pop or differences in primitive features when we don't want to attract attention to particular parts of a visual presentation, we can make it easier for users to direct their attention. If we use Gestalt principles to associate like items and disassociate items that are different, to allow users to skip items that they're not as likely to find interesting, or that they're not relevant to their current task.
