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.
