Interaction

Visual Thinking for Design (Morgan Kaufmann Series in Interactive Technologies)

I was one of the lucky winners of this book from Morgan Kaufmann after I donated some money to the IxDA fundraising initiative. After turning in my MSc Project dissertation, I finally had some time to catch a breath. You’d think that reading a book on Visual Thinking would be the last thing on my mind after losing weeks of sleep to writing… I’m surprised myself.

Anyway, at a glance, this book is about understanding how we as humans interpret and interact with objects and environments visually. It’s written mostly from a psychologist’s perspective, and provides useful references to the theory and science of visual perception, cognition, attention, etc.

Colin starts off talking about how the eye and brain processes and perceives visual stimuli, and each chapter concludes with a set of design recommendations. He gradually works upwards the abstraction layer, dealing with topics like color and shapes, the relationship between visual and verbal processing, the process of “seeing” or “thinking” by sketching, leading up towards how we perceive meaning in a visual world.

I felt that I understood the subject matter a little better because I learned about cognitive science during the HCI course, so readers who are new to psychology may initially find it slightly alienating. I also feel that designers who are looking for design ideas may not find this book as an inspirational resource. I see this as reference material – something you pull out to make sure you’re doing things right, like getting more substantial evidence to support design ideas in problem solving.

It’s also a fairly easy book to read. Despite references to psychology terms like V1, V2 and top-down/bottom-up, the author succeeds in explaining things in simple language, and provides good examples of how the science of visual perception is linked to visual design.

The best parts of the book lie towards the end, and I think that the early chapters act as building blocks that support the overall perspective summarized in the last few chapters. The gist of it is that our mind, eye and body works together to look for patterns in the world, and that understanding how this takes place can aid designers in helping users to make sense of things more clearly and easily.

The implications on p. 172 are a key takeaway:

1. to support the pattern-finding capability of the brain; that is, to turn information structures into patterns
2. to optimize the cognitive process as a nested set of activities
3. to take the economics of cognition into account, considering the cost of learning new tools and ways of seeing
4. to think about attention at many levels and design for the cognitive thread.

(The word ‘cognition’ refers to the “process of thought”, i.e. thinking.)

In summary, this book is worth an investment. It’s one of those resources I will occasionally refer to for clear, evidence-based recommendations for visual design.

boon :: Sep.04.2009 :: books, cognition, design :: No Comments »

The duration of the flickers (not flickrs) that are used to demonstrate Change Blindness in the video posted in the link below only last a few miliseconds, but it’s a powerful visual tool to demonstrate just how easily it is to lose a reader or viewer’s attention.

This means that visual clutter can have a major effect on interface design, if not used in a purposeful way. More so  because of the interactivity of sites – how is the site designed for the user’s goals? And issues like whether distraction is appropriate, and even branding and immersion can affect the overall experience for users.

link

Okay, so maybe pages aren’t designed with milisecond lapses of flashing gray blobs, but what if a sidebar that presents new information keeps getting missed? What about ad placements? A good place to start might be theory, so some Gestalt psychology might help:

Closure

Proximity

Continuity

Similarity

Pragnanz

Basically, these funny shapes just mean that people tend to group things together to form some kind of meaningful unit (the closure pattern looks like a circle, the proximity pattern makes the four blocks look like one unit, the continuity pattern makes the user want to fill in the blanks, and there’s some kind of vertical order in similarity vs. a vertical one). There are more laws, but the basic gist is – things need to make sense, and here we have visual representations that are more likely to be in one order than another.

In summary of these laws, the law of Pragnanz is sort of an overriding principle – one to rule them all.

Couple this with Change Blindness, and you might wonder how these patterns may help to either diffuse or illuminate particular elements. Visual clutter can be easily achieved by dumping a random collection of these patterns into one thick slush.

Add to that the tendency for users to leave your site within seconds of not finding what they want.

Caveat emptor. Design isn’t just a pretty thing.

boon :: Mar.02.2009 :: cognition, design, user experience :: No Comments »