RWDevCon Inspiration Talk – Cognition by Cesare Rocchi

Note from Ray: At our recent RWDevCon tutorial conference, in addition to hands-on tutorials, we also had a number of “inspiration talks” – non-technical talks with the goal of giving you a new idea, some battle-won advice, and leaving you excited and energized.

We recorded these talks so that you can enjoy them, even if you didn’t get to attend the conference. Here’s our next talk – Cognition, by Cesare Rocchi – I hope you enjoy!

Transcript

Everything starts like this:

A blank canvas, a scary blank canvas.

In front of this, you can:

• Follow your inspiration, or your gut feelings
• Look at other applications to follow their design
• Follow Apple’s guidelines
• Follow the latest trends

Or instead, you could start asking yourself, “What is the customer trying to accomplish and how can I improve his or her journey towards their goal?”

You put the user in the middle and adopt a user-centric approach. You have to ask, “How does my customer think?”

Meet Giotto

Meet Giotto, the most famous painter and architect in the middle ages.

In spite of that, the Pope got in touch saying something along the lines of, “Hey dude.” (The Pope was living in California at that time.) “Hey dude, I might have a gig for you, but you should show me your drawing skills.”

Giotto took a blank canvas and drew a perfect red circle and sent that as a sample and he got the gig. He could have taken three months off and painted a master piece, but he instead drew just the circle.

Cognitive science was not around at that time, it was not formalized, but he exploited many of the tricks that are in cognitive science.

What Is Cognitive Science?

Cognitive science is a whole field devoted to human beings, to the study of the way we perceive. There’s lots going on, perceptual representation, language processing. Many of our senses are involved in the many different situations of our daily lives, even in passive situations like watching a TV.

Edward Tufte is an information visualization guru and said:

He’s right. Without an understanding of the tasks that our customers are trying to accomplish, it’s pretty hard to come up with a good UI.

I’m going to touch on three aspects of cognitive science:

1. Human Computer Interaction
2. Perception
3. Schemas

Let’s start with the first.

Human Computer Interaction

Human Computer Interaction (HCI) is the applied branch of cognitive science. It’s the guys that try to prove all the fancy theories that cognitive scientists come up with. It’s like theoretical physics and applied physics if you like.

HCI investigates the dialog between human and machines and models the dialog as two ongoing computations.

This is exactly what happens during conversation:

• I say something, that’s an input to you.
• You elaborate that.
• Then you say something and that’s an input to me.
• And I elaborate that.

The same happens with machines:

• I type something in a form and that’s an input to the machine.
• The machine shows a spinner and that’s a feedback to me saying, “Let’s wait a bit.”
• Then after a while, I get my results.

There’s turn taking even when we interact with machines, much like when we interact with human beings.

Perception

One key aspect of this very complicated process is perception. The way we mentally organize our experiences.

You just did the laundry. You’re in front of a pile of messy clothes.

You pick up a T-shirt, you fold it, you put in a pile, and then you pick up undies and you fold them and you put in a second pile. You have two piles because you do not want to mix them up, and you want to put them in two different drawers.

This is perception. The T-shirt is the input, the piles are the working memory, and the drawer is the long term memory.

Gestalt

It’s impossible to not mention Gestalt whenever you talk about cognitive science. Gestalt is a school born in Germany at a beginning of the last century, and they focused a lot on modeling perception, trying to investigate the way we think, especially visual perception.

They came up with this linear model.

Visual perception starts with a something that hits my retina and ends up in my brain.

Going back to the laundry example, for example the light hits the T-shirt and that triggers something on my retina and that triggers something in my brain.

This is a pretty simplistic model though, which does not allow to model highly interactive situations.

Neisser’s Perceptual Cycle

In fact somebody elaborated and came up with a different model, claiming that perception does not begin or if you like, begins the very first second you’re born and goes on as a loop. This is called Neisser’s Perceptual Cycle.

This loop model has three nodes:

• The environment modifies my knowledge.
• My knowledge directs my exploration of the world.
• Exploration samples my environment.

Perception is a constant loop. Now, we’re talking! Now, we can model highly interactive situations. for instance how we can foresee where a rolling ball is going to end up. Even in very complicated situation, this model helps a lot.

Perception is Selective

Another feature of perception is that it is highly selective.

This happens for example at conferences, and that’s great. During breaks, people form groups and start talking.

When you’re part of a conversation, you are totally able and often unconsciously able to ignore any other conversation going on nearby.

You wouldn’t have the power to process all the conversation in the hall.

This exemplifies how perception is very, very, very selective. It is selective when we use applications as you will see.

Schemas

Going back to the loop model, it is clear that we are the knowledge node. What do we put in this node? Schemas.

Unfortunately, the literature is very, very complicated, so I’m going to use the term schemas, but you will probably stumble upon terms like mental models, frames, glance.

What are schemas? They are recipes that we use to extract information from the world. They drive our eye movement, hand movement, and so on and so forth.

I like to think of schemas as scaffolding on which we hang up our knowledge.

This metaphor allows me also to simply explain what’s difference between a beginner and an expert. A beginner simply has a smaller scaffolding.

Working Vs. Long Term Memory

A key aspect of perception is working memory. When working memory is overwhelmed you will experience cognitive load, which is not nice at all.

Cognitive load happens because:

• our working memory can hold four to five bits of information (that’s not a lot)
• this lasts ten seconds (that’s not a lot).

I can’t think of a better metaphor than Sax Parsing, in which you process a document line by line, and you forget about everything that you did before.

If you didn’t experience cognitive overload recently, try to go back to the first time you started driving a car.

It’s a new situation and there’s lots going on all at once.

• How much pressure should I put on the gas pedal?
• How much on the clutch?
• Is the light red or green?
• Is somebody crossing at a pedestrian cross?

You are overwhelmed. You don’t understand anything. Where am I? What should I do?

Nowadays, you’re an experienced driver. You have better engrained schemas to help you complete the task of driving. Now it’s not as overwhelming and while you drive:

• You can talk to the phone.
• You talk to passengers.
• You sing out loud.
• You send text messages.

You drive by default. You’re not using your working memory anymore. You’re using your long term memory, and so that allows you to use very low computational power in your brain.

How Does All This Apply to Apps?

I’ve touched several topics: human computer interaction, perception, and schemas, which I think are three relevant aspects of the way we perceive.

Now, let’s see how we can apply all this to the design of user interfaces. I’m going to touch on five tips and tricks:

• chunking
• white space
• color
• shape
• first impressions

Let’s start with the first.

Chunking

I’m going to show you a number and I’m going to give you five seconds to memorize it. Ready? Do you have your timer set for five seconds?

Do you have it? Probably not since it’s pretty hard.

There’s a key behind the number, and this is chunking. Once you know the key, you do not even need to remember the number. You have

• 60 seconds/minute
• 60 minutes/hour
• 24 hours/day
• 30days/month
• 365days/year

Now it’s much easier to remember the number. This is the power of chunking.

Ever wondered why credit card numbers are four chunks or four digits?

This is because it’s easier to move a four by four number to a form or line on paper. It’s way, way more complicated to copy a 16 digit number.

White Space

This goes hand in hand with the concept of white space. White space is like pauses for music. There’s no song that makes sense without pauses. There’s no UI that makes sense without white space.

You may say “I’m a developer. I have no idea what’s white space. I have no idea how to use it.” But you use it every single day, every time you format your code.

required init(coder aDecoder: NSCoder) {
  super.init(coder: aDecoder)
}

override func viewDidLoad() {
  super.viewDidLoad()
}

override func didReceiveMemoryWarning() {
  super.didReceiveMemoryWarning()
}

This is good usage of white space, because you want to make your code more readable.

Now, let’s look at the mail app. I went on and deleted the separators in the cell, and the app is still perfectly usable, just to show you a good usage of white space:

White space can also be used as a marketing tool. If you look at this screenshot of iPhone OS 201, so the first time that the app store was released, there are two empty slots down there.

Our mind is great at gap filling. How do you fill those slots? You’ll have to buy some applications. White space can be used as a means to trick people or as a marketing tool.

Let’s look at some real world examples. If you look at the showcase, it’s perfectly clear what you should expect if you step in the shop.

I’m sure they’re going to sell more and different items than those, but I have a crystal clear idea of what you should expect.

Take instead the showcase of a funky bazaar.

What are they selling? I don’t know. This is pretty similar to the first time I started driving, right? I have no idea what’s going on.

To give you a digital example, this is an app that is meant to rename files.

One simple task and yet things don’t look so simple here.

Color

Let’s move to color. Color is a visually selective variable, which means it’s fundamental for symbolication of an object, and I’ll show you how.

This is a little game. I’m going to show you a bunch of letters, and I’m going to ask you to count a specific type of letter. Once you think you got the right count, shout it out loud. There’s also give away. There’s a prize, a free license for PaintCode, so pay attention.

This is the image. How many red letters?

If you said eight, you were correct. It took the group at my talk around three seconds to arrive at the right answer.

Let’s play another round of the same game. We’ll use the same image. How many Ws?

If you counted eight, then you were correct! But did you notice that it took you longer this time?

Exactly the same image, exactly the same numbers, eight and eight, but it took the group at my talk around seven to eight seconds to get the answer.

It takes way longer to go by shape, and it’s way easier to go by color. That’s why color is a visually selective variable.

Whenever you need to group objects, use color instead of shape.

You see this principle here, whenever you use a navigation tab bar. The non-selected items are grey and the selected shows up in blue. We might argue that the difference between the selected and the non-selected is not clear immediately, but still the principle is in place in this example.

Shape

Let’s move to shape, which you can couple with color. Look at this wonderful recycle bin.

I have no idea where I should put paper for example. Sure, it’s a great industrial design. I could put labels for paper, glass, and so on and so forth.

But this is way better:

They’re better because here you see affordance. Say I’m walking on a sidewalk with a newspaper that I’ve read. It’s immediately clear to me that it goes in the blue bin because the shape of the hole affords a piece of paper, much like a handle affords twisting or a cup handle affords grabbing.

This is a great example of coupling color and shape.

First Impression

Last example is first impression. A few years ago Blink was a massive success.

It’s a book that claims that when we meet a person or buy a new object or live a new experience, our mind starts thing slicing very fast, because the mind needs a way to classify something new quickly, and not using the whole thing but just slices of that.

Unfortunately, that happens also with applications or digital products in general. How many times have we been dumped on the first screen of an application with no idea of the actions that we can make?

What can I tap? What happens if I tap this or that? I wander around and see how it goes.

Even if you’re building the simplest application that allows to perform very well know tasks like checking email or to-do list apps, it’s always a good idea to provide a good onboarding.

Tell the user which are the key actions that can be performed on every screen.

Cognitive Science and You

Going back to the initial quote, let’s restate it:

Another quote by a famous guy (Me, right now!):

To keep users engaged the fewer surprises such as breaking expectations, and the lower interaction overload going on, the higher the chance that users are going to go back to our app and open it again.

Going back to the blank canvas, it’s not blank anymore.

It’s not scary anymore, because now we have tips and tricks like:

• chunking
• white space
• color
• shape
• the superpower of a first impression

These are all of the things that Giotto exploited, and now you can too.