Posts Tagged ‘ visual attention ’

Class notes F’14: Week 3 – Fundamental principles part 1 of 3

The first series of design principles were derived from what we know about visual perception and visual attention. They pertained to the Gestalt principles of visual perception, Visual structure & hierarchy, and a bit of Writing for the screen. The slides I used are on Canvas.

I’d also like you to know about:

In class, I mentioned resources such as:

Please look them up.

Not required, but for fun – look at some visual illusions. They really point out the role of the mind in visual perception. Here’s a freaky one I like.

Do remember that online participation on Facebook and here are required parts of the course. Please comment, Like, or somehow interact with this post to let me know you saw it. In the comments, you could let me know if such class notes are useful or not, or how I could make them more useful to you. Of course, questions about the material that I did not get a chance to answer in class should also go in the comments below.


Visual perception, attention, and cognition – very, very basics

Please find below the slides I showed in class today.

But before you do that, please remember to add Deok Gun’s blog to your RSS feed reader. I forgot to add it to my blogroll until now and he complained that he’s very lonely 🙂 Please follow his blog and leave comments for him as well!

Here are the main slides that provided the structure for the class:

Here are the slides about attention. Ignore the first few, they were meant as jokes/examples for a different group.

As examples, if you look at slides 8 and 9 from the attention deck, can you guess what principles I tried to apply there? How do the slides communicate that one set of details is about top-down and the other one is about bottom-up attention (hint: what Gestalt principles are applied there)? How do these two slides attempt to reduce load on working memory?

Blog challenge: Gestalt principles of perception

In case you need some ideas for your blog, and even if you do not, try looking for how Gestalt principles of visual perception are applied in interfaces. Post a good/bad example about them sometime this week.

As a rule, when you post the good/bad examples, try to relate them to the principles of design and usability you’ve learned up to that point in the class.

You already know quite a few from the readings from week 2 (mapping, visibility, feedback, politeness, etc.), to which you can add the implications for design of what you know about visual perception and visual attention.

From a visual attention perspective, every time you look at an interface, close your eyes, then open them and notice what grabs your attention first, second, then third. Then, examine what principles of bottom up visual attention are at work there. How did the designers achieve saliency in order to grab your attention and direct it in a 1, 2, 3 sequence?

Both Gestalt principles and visual attention principles are used in the design of the San Diego Zoo homepage. Can you tell how?

Class notes and resources: Week 3 – Visual Perception

This class focused on 1) Visual Perception and 2) Visual attention.

Here are some resources for you:

A few articles that provide evidence that cultural differences (and even religion) influence visual perception:

The video below demonstrates selective perception and change blindness:

More brief but entertaining and informative videos from Daniel Simons available on his site, Invisible Gorilla.

Below are the slides about Visual Attention, but please scroll all the way down for the To Do list for next week.

To Do for next week:

  • Readings (see syllabus)
  • Remember to attend to your blog!
  • Look at contents of Cooper chapters for Sept 21 and 28 & be prepared to choose a topic for your presentation. Look for a blog post about the presentations on Sept 21 and 28.
  • Read the book Don’t Make Me Think by Sept 21