RWDevCon Inspiration Talk – Cognition by Cesare Rocchi

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.

Attribution: en.wikipedia.org/wiki/Scaffolding

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.

Attribution: flickr.com

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?

Attribution: flickr.com

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.

Attribution: flickr.com

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.

Attribution: flickr.com

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.