Notes on Andy Fitzgerald’s Language Arts for the Lizard Brain

(From a virtual seminar on uie.com’s All You Can Learn library)

First Andy stresses the importance of the gestalt principles of visual understanding

• The UserTesting blog has a good explanation of this

Cognitive Systems

2 cognitive systems for making meaning (from Daniel Kahneman’s Thinking, Fast and Slow. All the quotes in this recap are from the book)

• System 1 – Operates automatically and quickly with little/no effort or voluntary control
• System 2 – Allocates attention and effort and is associated with agency, choice and concentration

Example: 17×24

• S1 – it’s a math problem, the answer probably isn’t 100 nor 16,593
• S2 – When Andy presents this presentation live and asks if anyone has done the math, nobody ever has: the cognitive effort is too high for folks to be bothered to do the math for no concrete reason (answer: 408)

If S1 is involved, the conclusion comes first and the arguments come later. So with a website:

• Visitors don’t automatically read, they scan
• Key words are automatically parsed
• The first and easiest sensible solution wins

Activation Patterns

Users will first scan navigation, parse keyword and start to form an opinion about what this site does—before they have really consciously started reading the information

So keep your user’s reason for visiting front and center in your landing page. Too much information can turn them away—especially is it’s not the information they are looking for

• The average user will give your homepage 10 seconds before they decide whether or not to leave

So in grouping information and presenting it to users (in the nav etc), make sure the most visible activation pattern is the one the users are looking for

• Back this up with actual user research as much as possible. It can be hard for org folks to see past their org needs so we need user validation to help us focus on the correct information

But landing page visual design is secondary to the text displayed

• Many website have virtually the same design (i.e. navigation presented horizontally across the top, large hero image)
• So users look to the text shown to figure out what they can do on this site
• This distinction will become increasing important as voice interfaces become more common

When thinking about activation patterns, remember:

• Words don’t “mean” on this own—we assign them meaning on the fly
• Vocabularies develop meaning based on the activation patterns in which they’re presented
• Visual design and layout can influence activation patterns but rarely create new meaning alone

Cognitive Frames

“Mental spaces are small, conceptual packets constructed as we think and talk, for purposes of local understanding and action”

First impressions really do count! S1 scans the homepage and assembles a rough frame of understanding what this site is about

• Remember, S2 requires much more work, so S1’s frame evaluation often leads people to abandon the site without further consideration
• Even if a user stays longer on the page, they will be very reluctant to change that initial frame–too much work!

Frames help people create:

• Global insights based on all our past experiences
• Human-scale understanding – how we take large data sets and turn them into smaller, more relatable units
• New meaning – how multiples frames together create new insights

Andy’s uses  Starbucks’ marketing site as an example of Human scale understanding

• Users land on the page. If they click on the Shop navigation link, they are actually taken to a different, locked shopping cart experience. The nav and layout look the same but they are two different spaces offering two different sets of options and information
• Users will consider these as being the same space and find the inconsistency confusing
• A better shopping cart pattern is to make the experiences look and feel different so it’s clear to users that they are separate experiences
  • Remember though that visual design differentiators aren’t the primary cognitive tip-off for users: words are
  • The main visual differentiators can be thought of as the “seams” of the experience. Remove all images, logos, icons and such so all you have is the visual framework. Make sure THIS is where the visual strategy is obviously different
  • Here is a sample of REI’s main site and bargain site frameworks:
  • So even though the sites have similar content (though different navigation labels) the visual “seams” help users determine that these are separate places at the human scale

Use cognitive frames to create the meaning we intend in digital spaces we create by keeping in mind a few things:

• Frames are how we understand where we are and what we can do there
• Successful frames create human-scale understanding
• Leveraging human-scale experience helps users see and create new meaning:

Putting it all together

Keep in mind a few key points:

• Select language for the easy construction of intended meaning
  • Bring sense-making language to the forefront of the experience
• Create intentional activation patterns
  • Use card sorting, user/stakeholder interviews, content audits and such to validate your design against these first two points
  • Create models and then use test-iterate loops to validate!
• Build to the human scale
  • A “seamless” experience is often not what we actually want. Users use “seams” to frame their understanding during S1

About Andy (from andybywire.com): I am an independent user experience designer with applied expertise in design research, information architecture, interaction design, and usability testing. Previously at Übermind, Deloitte Digital, and frog design.