Methods & Tools Software Development Magazine

Software Development Magazine - Project Management, Programming, Software Testing

 

The Psychology of UX - Part 2

Vanessa Carey, Caplin Systems, http://www.caplin.com/

Welcome back to The Psychology of UX series! This article continues to discuss the "10 Things to About Human Psychology That Should Inform UX Design" proposed by Susan Weinschenk. The first part of this article was published in the Fall 2011 issue of Methods & Tools.

6. People are Easily Distracted

How do you get someone’s attention? What do people notice? What distracts people? These are some of the questions we’ll be exploring. Let’s get started.

People pay attention to anything new and different, particularly movement.

If you think back to our Palaeolithic days, we needed to be survivalists. Any movements around us could be potential threats and we had to be alert and aware in order to exist. Similarly, our "old brain" (the first part of our brain to evolve) uncontrollably notices danger, food and sex. It may seem quite brute by today’s standards, but once again it’s all about survival. We need to eat, we need to procreate, and we need to protect ourselves so that we can continue to do those things.

But what does this mean in regards to design? *When appropriate*, placement of images of food, attractive people or potential danger/violence will focus our attention quickly on that area of the page. If this is suitable to your design aims, then by all means quickly grab the attention of the old brain. However this has been abused in recent times with companies trying to get easy looks with cheap usage of these types of imagery. My favourite example of this is a company called ‘Nila Foods’, who without any restraint apply gratuitous imagery to their trucks. But hey, it worked or I wouldn’t remember their name!

We notice faces

The second most common thing that people pay attention to is faces. We can’t help but look at faces. Be it because we wanted to see another person’s emotions to develop relationships or to look for potential threats, faces capture and keep our attention; so much so that our focus will remain on the same part of the page even after the face has disappeared. When humans look at faces, we tend to look at the eyes first, so showing an image of a person looking directly into the camera is most powerful. Similarly, if we see the person in the photo looking in the direction of something, we’ll look in the same direction. Usability specialist, James Breeze’s screenshot of an eye-tracking experiment demonstrates this perfectly:

Use the senses to grab our attention

As we are limited to the visual and auditory senses with computers, we should attract those two senses using colour, size, relationship/position, noise and animation. If an entire site is designed in gentle shades of blues and then you place a bright red button in the middle, it’s going to get attention. Similarly if you reading an article on a website, your eyes will most likely scan large headings, quotes and bold text more than the body of the text. We notice anything different. Why do you think I bold specific words in my blog posts so often?

However since people are easily distracted, DON’T use lots of sensory imagery and advertisements all over your website if you want a person to focus on one thing at a time.

But that doesn’t mean they always notice…

People are prone to something called "change blindness". Depending on what we focus on, we can be completely oblivious to changes around us. Interesting how we only really notice what we are focused on at the time. Taking this into consideration for web design, don’t assume that because you’ve made a small change to a webpage (for instance after a click to a new page) that people will notice. Make things obviously different and bold so the user will easily recognise the difference.

7. People Crave Information

You can’t deny we live in an age where the average person obsessively checks their email and Facebook all day long. Endless Google queries. Combing through the surplus of tweets on Twitter. Random Wikipedia search sessions. Be it in front of their desktop, or staring intently into their mobile if they are on the go, we all exhibit these behaviours. We’ve come to think of it as normal. And in a sense… it is. The web taps into this natural inclination of ours: the desire to constantly seek out new information.

But what is the reason for this? Why are we so driven to learn new things?

It’s simple, kids. It is called dopamine. Dopamine is a chemical released in the brain that makes us seek out things, such as love, food, sex, or even information. The simple act of aspiring to do something and the anticipation of doing it unleashes dopamine in our minds and creates a pleasurable mental state.

From an evolutionary perspective, we can see that the more you are actively seeking out these things, the more likely you are to survive. Without an appetite for food, you won’t eat. Without a desire for the other sex, you won’t procreate. Without a fervor for new information, you won’t learn things (things that could potentially better or save your life). That’s why learning is dopaminergic (meaning it causes dopamine to be made). Seeking out new information helps us survive.

Interestingly, people will often crave more information than they could realistically process at any given time because it makes them feel they have more options and thus more control over their lives, which all goes back to survival. Ever searched for an answer on Google, found it, but you continue to look for more answers to validate your question? This is another reason that most people are in some sense addicted to the web; it offers absolutely endless information on any subject you can imagine, if you know where to find it. Some of the most popular websites on the internet are ones extremely rich in content: namely Facebook, Google and Twitter.

So what does this mean in regards to web design?

Because dopamine is released during the stages of SEARCHING for information, NOT during receiving information, it isn’t quite so simple as to say that if you give your user all the information they could possibly want and more, they’ll be pleased. It’s the activity of allowing the user to find information, revealing that information or surprising them with information that gives them enjoyment. In fact too much information on a screen can distract from other key information, thus frustrating the user. For this reason we need to make the information clear, clean and easy to navigate.

Choice = Power

The user will still want to feel that they have many choices or access to information. For this reason, the essential information needed to help them complete their task should be at their fingertips, as well as the ability to seek out more, with more details views, click-throughs, or tooltips with extra information.

"Ask and ye shall receive."

How can we give our users satisfaction in the journey of seeking out new information without making it unobvious or tedious? One way we can do this is by providing information to the user when the user asks for it. This also gives them a sense of control, which will heighten their experience. This could be in the form of expandable items, rollovers, contextual hovers, or click-throughs.

Feedback

Because humans like to be aware and knowledgeable, it is equally important to keep them informed of what is going on. Give them feedback as to what is happening behind the scenes. And importantly to do so in a human language. The computer doesn’t need to inform the user that it is requesting file 1458xj via the server. The computer needs to tell the user that their file will be there and when. Progress bars, status updates, live help are just a few ways to do this.

8. Most Mental Processing is Unconscious

Most mental processing occurs unconsciously

The brain often acts without our conscious knowledge. The reason for this is that we have three brains. The old brain, the mid brain (emotional), and the new brain.

The old brain makes most of our decisions

…based on food, sex and danger. These things grab our attention because they determine our possibilities for survival. The old brain was the first to be developed in the evolutionary history of animals and humans. It is the part of the brain that constantly, unconsciously, assesses your environment, deciding what is safe and what isn’t. It controls automatic unconscious processes like breathing and digestion.

As the old brains is concerned with survival above all, nothing is more important that ‘YOU’ to your old brain.

As soon as something relates to you, or the word ‘you’ is used, your old brain switches its focus to that thing. Susan Weinschenk gives this example in her book ‘Neuro Web Design’ where she demonstrates the power of using the word ‘you’ to sway people towards a product.

"First product description: "This software has many built-in features that allow for photos to be uploaded, organised and stored. Photos can be searched for with only a few steps."

Now read this paragraph for the same product: "You can upload your photos quickly, organise them any way you want to and then store them so that they are easy to share with your friends. You can find any photo with only a few steps." Which product would you buy? You’d likely buy the one that says "you" and "your". This is not a conscious decision. Your non-conscious brain will tell you that the second product is better for you."

In addition, the old brain is always looking for potential threats, food or opportunities for sex and therefore is very skilled at noticing change. As mentioned above, it is constantly scanning its environment observing changes. And there are a LOT of changes in your environment. The estimate is 11 million piece of information every second. Of that, only 40 are conscious. The unconscious mind lets us process all incoming data and evaluate what is good or bad.

"The mind operates most efficiently by relegating a good deal of high-level, sophisticated thinking to the unconscious, just as a modern jet liner is able to fly on automatic pilot with little or no input from the human, ‘conscious’ pilot. The adaptive unconscious does an excellent job of sizing up the world, warning people of danger, setting goals, and initiating action in a sophisticated and efficient manner. "-Timothy D. Wilson

It is a hugely efficient tool that shows us what to pay attention to consciously while skimming through the rest. As you might remember from my previous section, multitasking is impossible - we can only focus on one thing at a time - so we need to make sure it’s worth our conscious attention. That’s why it’s such a successful system.

"The only way that human beings could ever have survived as a species for as long as we have is that we’ve developed another kind of decision-making apparatus that’s capable of making very quick judgements based on very little information." - Malcolm Gladwell

The emotional brain is impulsive.

The emotional brain is (obviously) where all emotions are processed, and it is the root of impulses. Because of this it makes a big impact on our decision-making. The old brain and the emotional brain are very connected in the sense that if the old brain is highly aroused (by fear, or desire) the emotional brain deeply processes this information and etches it in our memory.

Because we are natural visual processors, we respond to pictures and imagery the most. Changes in visuals are easily picked up. Similarly when we think of stories or read, we break the ideas into images in our minds. These images arouse emotions in us. Imagine a news story of a plane crash with a front-page cover of burning, twisted metal shrapnel. That’s going to affect your emotional brain quite a bit. Similarly photos of a sexual nature, food or potentially dangerous scenarios will grab our attention with the old brain and sway our emotions with the midbrain.

Our behaviour is affected by things we aren’t consciously aware of.

"Unconscious processing can give rise to feelings, thoughts, perceptions, skills, habits, automatic reactions, complexes, hidden phobias and concealed desires." - Wikipedia

One way that scientists have observed this is in the instance of ‘framing’. In ‘framing’, your old brain and new brain receive these unconscious messages and you act upon them. In one study, they saw that using the words "retired", "Florida" and "tired" actually made people walk slower. Amazingly, a great portion of people’s behavior is driven by factors that they aren’t even aware of.

Both brains act without our knowledge. Rational reasoning is normally not the deciding factor.

Both the old brain and the emotional brain act without our conscious knowledge. People will always assume they made a rational and conscious decision, but in reality our decisions always start from our old- and mid-brains, and sometimes finish there too. Some decisions may come from your new brain (rational), but most are based on the subliminal messages our other brains give us based on things we react to in our environment.

How does this affect web design?

When a website addresses all three brains, then we click and engage with the site.

If a site is visually arousing, we’ll pay attention. If it seems to address ‘our’ needs and relates to ‘you’, we’ll pay attention. If there are a lot of changes, such as movement, carousels, videos, banner ads… it will grab our attention (even if we don’t like it).

By tending to our old and mid-brain triggers (food, sex, danger, movement, change, visuals/imagery, and focus on ‘you’) with appropriate web design decisions, users won’t stand a chance at resisting clicking around a bit.

9. People Create Mental Models

We are going to be talking about mental models. You might have a thought about what a mental model is already, but let me show you what it actually is. Oh wait, I just did. A mental model is simply a representation in the mind of a real or imaginary thing. It is the way you imagine something to be.

For example, when I say CAKE… this is what I think of in my mind:

Maybe not quite so tall, but this sort of airy, fresh, feminine vibe. But you might envision a cake looking different. That’s because our mental models are different. If I were to bake you a cake, I might make one similar to my mental model because it would please me and satisfy my idea of how that thing should be. However you might be slightly disappointed if I gave you the pink fluffy yellow cake when your mental model of a cake was a rich dark chocolate cake smothered in ganache. As the cake baker (sub: designer), I would not satisfy you, the eater (sub: user) because I wasn’t aware of your mental model before I baked the cake (sub: designed it). You dig?

The term "mental model" has existed for around 25 years or so and first came about from K. J. W. Craik, a philosopher and psychologist, in his book The Nature of Explanation, where he proposed that the mind forms models of reality and uses them to predict similar future events. Since then the subject of mental models has been explored extensively by psychologists, and this definition, featured in a cognitive science article, sums mental models up nicely:

"A mental model represents a person’s thought process for how something works. Mental models are based on incomplete facts, past experiences, and even intuitive perceptions. They help shape actions and behaviour, influence what people pay attention to in complicated situations, and define how people approach and solve problems."- Susan Carey, Cognitive Science and Science Education, 1986.

How are mental models formed?

It would be impossible for any person to know and imagine the entire world in their head. There are far too many things and too many variations on things for a person to be able to do that. So the human mind makes representations (images) of the world around them that they store in their mind. These numbered concepts exist in their mind and they can create relationships between the concepts to make sense of them and to represent the world around them. Some of the places from which mental models form are:

  • Prior experience with similar sites or products
  • Direct experience with the product
  • Assumptions users have
  • Intuitive perceptions
  • Things users have heard from other people

And let’s take into consideration that mental models are subject to change once the user has more experience or other assumptions arise about the thing.

How do mental models affect design?

First let’s look at a different type of model, conceptual models, to better understand. A conceptual model is the actual model given to a user interface of the product by the designer. It is the concrete screens, buttons and interactions of the interface that the people who created it intended it to have. So a conceptual model is the actual look and behaviour of the thing, and a mental model is the idea the user has of that thing prior to or during interaction.

When a user’s mental model and the conceptual model don’t match up, you get a "bad" user experience. Bad in the sense that the user won’t know how to use the thing, it will be hard to learn or they may not accept the thing altogether.

If they don't match, the system will be confusing to the user

Let’s look at the example of an elderly person is used to reading paper books because that was commonplace for the majority of their lifetime. Hand them a Kindle, tell them it’s a book, and the experience may be too jarring as it is completely different from their established mental model.

In addition, a mismatched mental model may lead to user errors or require too much of the user for them to figure out how to use it.

"Many systems place too many demands on the humans that use them. Users are often required to adjust the way they work to accommodate the computer. Sometimes the result is a minor frustration or inconvenience, such as changes not being saved to a file. Inaccurate mental models of more complex systems, such as an airplane or nuclear reactor, can lead to disastrous accidents." Reason, 1990

Mismatched models are a common occurrence because they can arise from so many reasons. For example:

  • If the designers thought they knew who the users would be (and their level of expertise), based the design on these assumptions, and then later found out the assumptions were wrong.
  • If there are several user types for the interface and the designers only designed for one mental model. The other users’ mental models would not match the design.
  • Or maybe the designers don’t design for ANY mental models of the users. The conceptual model thus represents the designer’s mental model.
  • Similarly, if the system isn’t designed at all and is just a reflection of the underlying technology/hardware, the mental model matches that of developers (who use or made the technology/hardware)

But how do we match our conceptual models (designs) with the users’ mental models?

"Typically, the burden is on the user to learn how a software application works. The burden should be increasingly on the system designers to analyze and capture the user’s expectations and build that into the system design." Donald Norman, 1988

We can understand the users’ mental models and design for that.

In order to understand the users’ mental models we have to do research. We can do this through interviews, observation, or competitor analysis (pre-existing mental models the user might have). It’s really quite simple; just talk to the user and understand where they are coming from, what their perspective is and how they expect to interact with the thing you are designing. Then incorporate these insights into the design, rather than designing from the designer’s or developer’s mental models of how the thing should be. 

One good example is if you buy a new DVD Player. The player comes with a 50-page manual on how to connect the hardware, how to install it and how to get started. In order to fully use all the features on your new player, you will have to read the entire manual to understand how to use it. But if the company that designed the player would’ve put the focus on the user and their mental model of how a DVD player should work, they would’ve re-designed and re-engineered the product so that the user could instantly hook it up and play a DVD without any hassle of installing and setting up functions. Then the instruction manual could be reduced to a one page illustration, rather than 50-page bible of instructions.

OR we can teach the users a new mental model and prepare them for the conceptual model.

If you are creating an entirely new product or you are creating a product that revolutionises the way we think about an old product (like the Kindle did for the book), then it is okay to create a new conceptual model that changes people’s mental models. But as we saw before, people’s mental models affect the way they do or don’t accept new conceptual models. Because of this, you need to prepare the user for the new conceptual model and in the process change their mental model before they have direct experience with the product.

You can do this through training and exposure, such as creating videos featuring the new product, advertisements, examples of usage or how-to’s, and by generally putting your name and product out there in the public eye so that people can get used to it. Think: Steve Jobs unveiling every new Apple product before it reaches the public’s hands. It worked!

One great example of an introduction video to a new conceptual model is ‘Mint’ who show you how their product works and how easy it is to use, while slowly convincing you to change your mental model about how a person should bank online. Yet if you notice, they also maintain certain mental models to help you get comfortable with the idea of Mint, like the visuals of spreadsheets, charts and graphs in the beginning of the video which lead you towards the new interface. By refreshing your memory on what your mental models of banking are, they show you they get it and then introduce you to their new conceptual model. The new interface is dotted with icons of typical financial symbols as well as more graphs and pie charts to monitor your money which not only hint, but shout of ideas of banking.

It’s also helpful if you can compare the new conceptual model to an older one, or use metaphors, so that people can more quickly become comfortable with the idea of it. For instance, "Typing on a keyboard is just like typing on a typewriter, only you can undo your mistakes!"

When it comes to web design, as the web is a fairly new concept in regards to the length of human history, it’s very important to link virtual concepts with real world examples through the use of metaphors. We can do this by using icons, buttons and visual affordances, like drop shadows to suggest depth of field, light or weight, similar to objects in real life. A really great article on metaphors on the web can be found here.

10. People Understand Visual Systems

One of the most famous theories on how humans visually perceive of things is the Gestalt principle. The Gestalt principle was first introduced as a psychology concept in Germany in the late 1800′s. The term "gestalt" literally means "form", and this represents the idea that the brain first sees the overall form of something and then begins to pick out the details. Let’s look at an example:

It's Albert Einstein... or some guys with a lance.

At first you might see an old man with white crazy hair. But if you look closer at the details you’ll pick out the horse, the lances, the two men in their armour and the windmill (that looks aflame).

Here’s another example:

The face of death!

First we see the skull, but then we notice the couple drinking (a lot) of alcohol and….warming their hands over it?… Hey, I didn’t say the details needed to make SENSE.. but they are there if we look.

The point is: we notice the bigger picture first, then we hone in on the details. This idea has been expressed in the well-known phrase, "The whole is greater than the sum of the parts." Gestalt psychologists believe that there are inherent mental laws which dictate how we perceive of objects. Here are some of those laws explained:

The Laws of the Gestalt Principle

The Law of Closure

Our mind tries to close shapes and create objects even if only a bit of the shape is implied. We do this by ignoring gaps and completing contour lines. This was forms and shapes that can be imagined in the mind, even if not drawn out, from the negative space of other shapes.

One great example of ‘The Law of Closure’ is the Kanisza Triangle, seen below. This illusion was first explored in the 1950′s by an Italian psychologist who showed that two overlapping triangles are seen by the human eye, even though no complete triangles exist in the image.

The Kanizsa Triangle

The IBM logo makes use of the ‘Law of Closure’ by suggesting letters with unconnected lines and gaps, but the human mind never for a second doesn’t understand that it reads ‘IBM’.

It's just a bunch of lines

The Law of Similarity

Our minds group similar objects together to create collective entities. The similarity of the objects is determined by their shape, size, and colour. In this example below, the human mind connects the lime green shapes together because they have a similar colour and form, even though they aren’t on the same plane or in the same area spatially.

The Law of Proximity

The spatial positioning of objects causes our minds to perceive of collective entities, or in layman’s’ terms: things that are close together are believed to go together. In the example below, the header navigational links are all close together (and in similar colours), the sidebar items are all close to each other, and the search results are all in alignment as well. These clear groupings and the distances between the groupings helps us establish similarity and relationships.

The Law of Symmetry

Symmetrical objects are perceived to be collective entities, regardless of their distance apart. Really I think we can translate this to mean that any objects which are identical, or symmetrical, are understood to be related to each other. In the example below, a common remote control design shows how symmetrical buttons relate to each other and humans innately perceive of these similarities.

Opposites but equals

The Law of Continuity

The Law of Continuity focuses on how our minds see visual flow and patterns, rather than broken up shapes or angles. Our minds naturally continue these patterns, like in the example below where we see two lines crossing each other, not two angles meeting.

The Law of Common Fate

This states that objects with the same direction of movement are perceived to be a collective entity. Let’s look at this example of a graph below. All the bar shapes are of different heights, but because they move in the same direction (upward), we relate them to each other and collectively they tell us something.

Two other important principles

The following two principles aren’t from the Gestalt theory of visual perception, but they also apply to how the visual system in humans work.

Canonical Perspective

The canonical perspective states that most people imagine objects from a similar perspective and that is: from slightly above as if they were looking down at the object, and to the right or left just a bit. Researchers who asked people to draw pictures of common objects and animals found that most people drew these objects from this subtle 3D perspective. Look at this example of coffee cup drawings:

Here you can see that most of the coffee cups were drawn nearly identical and all from the ‘canonical perspective’. But why would that be? Surely we don’t see every object from the same perspective. Take a house for instance- you normally see a house from below as it is taller than you, yet people would still draw a house from a canonical perspective or straight-on. The reason for this is that a) we imagine objects in the canonical perspective in our minds and b) this perspective gives maximum information about the visual depth of an object. Interesting. So this view helps us understand the size and depth of an object.

Affordance

James J. Gibson, a Gestalt psychologist, coined the term visual ‘affordance’ after he studied the affects of gradients and textures on the human retina and found out that they allow us to have better depth perception. When we can see the gradients, shadows and textures on an object, can understand its size, weight, depth and overall form.

How does all of this affect web design?

Simply, humans first see the whole form and then notice the details and small changes. If your site has an "unpleasing" form, the design will never be taken to. This means that as designers we shouldn’t start designing the navigation, or the sidebar, or how our buttons will look– but first design the overall shape and then fill in the contents as we go. When creating webpages within a site, if you want to maintain a feeling of continuity and relationship, then the overall form of each page design should remain virtually the same, otherwise the website as a whole will feel disjointed.

The visual Gestalt principles we can take away for web design are:

  • People observe the entire design/form first, and then dive into the details. Think about the flow of the overall look of the site, rather than obsessing over minute details.
  • Similar colours help suggest relationships. Maintain colour schemes throughout similar items and functions.
  • Similar shapes help suggest relationships. Make items that do similar things look the same in form.
  • Grouping of objects helps us identify relationships. Organising items with adequate proximity and negative space around them helps us clearly see the connection of those items.
  • Patterns are easily noticed by and continued in our minds. Creating similar steps in a workflow or visual affordances with interaction will allow users to notice the pattern and remember it for future interaction.

I’m sure most of those principles seem pretty obvious to the average designer, or just an average person, and that’s because these principles are so innate to our human perception of the world, that not doing these things would seem unnatural or somehow chaotic.

In regards to web design and the canonical perspective, create icons and shapes from the canonical view as people will be familiar with that representation of the thing, and they will be able to read as much information as possible about it from the angle. Do this especially if it is a new brand or product where people aren’t familiar with your logo.

In this icon above, we can tell that it is a book because of the canonical perspective. We can also see the subtle A-Z engraving and the bookmark falling down thanks to the angle, which suggests that this is either an address- or phone-book application.

Visual affordance is crucial to "good" web design because it helps people relate to the web. By bringing the 3D aspect of the real world that humans are familiar with to the 2D realm of the web, it feels more familiar and we more intuitively know how to interact with it.

Sliders are a concept we are familiar with in the real world since the 20th century. We understand holding something and dragging it. The gradients on the progress section of the bar hint at real-world lighting and suggest position of lighting (from above casting downward shadows). The deep shadow at the top of the bar suggests this is cut into the grey area and tells us about the object’s depth.

These buttons have dark shadows to suggest they are quite chunky and to really urge you to want to press them. Similarly the dial knob has a long shadow which hints at its height. The glossy metallic texture is familiar to the real world and how light hits metal. The engravings of the icons also hint at industrial processes for carving shapes in materials. Finally the subtle texture on the background mixed with the central gradient shows us where the light is focused.

And finally in this example it brings to mind textures we are very familiar with throughout human history: paper and wood. The subtle gradient on the paper suggests it is a non-shiny, flat object. The sharp lines separating the mailboxes suggest scoring. The shadow behind the paper shows the tab is lurking there under. The stitching in the journal makes this have a very real-life feel to it (as if you needed stitching to keep together a virtual notebook). Finally, the search box looks as if it’s been shallowly etched into the wood. Overall it’s something we can relate to.

Conclusion

I hope you enjoyed this second part, but more so I hope you enjoyed this article as a whole (see, I went all "gestalt" on you). I hope that throughout these ten points you've learned some fundamental truths about how the human mind works and picked up a few ideas on how we can pay heed to this when designing for the web. I've certainly enjoyed writing this article, and this won't be the last of me when it comes to writing about UX and the human mind, so check back soon my blog http://vcareyux.wordpress.com/ for more! Thanks for reading.

Sources


Related UX and software development articles

Lean UX in Public Sector? - Part 1: Deciding Our Way of Working

Lean UX in Public Sector? - Part 2: Getting our Facts Straight Before Implementation

The UX Runway - Integrating UX, Lean and Scrum Cohesively


Click here to view the complete list of archived articles

This article was originally published in the Winter 2011 issue of Methods & Tools

Software Testing
Magazine


The Scrum Expert