Tag Archives: visual hierarchy

Spring’15 Class notes: Days 12 &13: Design principles based in human perception and cognition

24 Feb

On Days 12, 13, and 14 we learned about human perception and cognition so we can design interfaces that work well with the human mind.

Day 12 – The Gestalt principles of visual perception are fundamental. They explain how we organize visual signals into groups and patterns. These are the inherent biases of the human mind. We can use them to create structure, organization, or fun visual effects.

Below are the slides with examples we used in class.

Day 13 – was all about creating visual structure. You can use visual hierarchy and grids to create layouts that guide the eye meaningfully and communicate what is most important, and where people should look. Try to remember some of the techniques for creating visual hierarchy:

  • create contrast through size, color, shape, alignment, saturation
  • create patterns through chunking and the use of negative space
  • capitalize on the human eye’s tendency to start reading from top left by using the Z pattern or the inverted F pattern.

Below are some slides on visual hierarchy:

Day 14 – we talked about attention, information scent, and memory.

Remember that human attention has 2 main mechanisms:

  • top-down, which the person controls with their will
  • bottom-up, which is “grabbed” by external stimuli in the environment

Understanding how attention works can help you design in ways that not only GET ATTENTION, but also you learn to support the person’s top-down attention. People use top-down attention when they search for relevant information that can help them accomplish their goals. So, if you know what people’s goals are, through user research, you can facilitate that process. One way in which you can facilitate it is through information scent. If you provide links and icons with strong information scent, people have to think less, guess less, and accomplish their goals faster.

Information scent is an estimate, or a probability. When users look at a link, they try to predict what is on the other side – what will they find if they click it? If they are unable to predict, or are uncertain or wrong about their prediction, this means the link has poor/weak information scent. For example, what do you predict you will find if you click on the words “information scent” at the beginning of this paragraph? How confident are you in your prediction? Click the link. Were you right? If you were able to predict confidently and correctly, the link has strong information scent. How about this, though? What do you predict is at the link from the word “this”? How confident are you? Were you right? If you can’t predict confidently and correctly, the link has weak information scent.

Memory is a weakness for most people. It is hard to remember things. It is hard to recall without any prompt or help. However, it is relatively easy to recognize items and remember that way. This is why multiple-choice exams are easier than essay exams: Because you recognize the concepts from class, and this helps you remember, as opposed to starting with a blank page and having to recall everything. Also, imagine I ask you to name the textbook you used in your junior high school English class. You probably can’t recall. But, if I show you 5 different books, you will probably be able to recognize and thus remember the one you used back then.

Below are the slides I used in class.

Class summary: Visual hierarchy & structure; Grids

25 Feb

The learning objectives for this class were:

  1. Identify the principles used to create visual hierarchy in existing designs

  2. Use visual salience to create visual hierarchy

  3. Identify grid systems on existing designs

  4. Use the 960 grid system to create different Web layouts

You first look at some examples and identified how they create visual hierarchy:

Then, we talked a bit about techniques for creating visual hierarchy using these slides:

You then did an exercise where you redesigned the way flight ticket information would be presented in an iPhone travel app.

Then, we moved on to grid layouts. We started by counting columns in the following examples:

We then discussed the difference between columns and grid units (they might be much smaller than columns). I showed some slides from this deck:

You then sketched 3-4 different website layouts on thumbnail print-outs of browser windows with the 960 grid system.