In the third podcast in our series exploring User Experience, we look at human-centred design. We explore some of the psychology behind these design decisions and how they shape our interactions with digital products.

Join our experts as they discuss all this and share why psychology is so important for us a designers.

Find out more about CGI in User Experience and how we are creating unique experience through insight and supporting our clients on their user experience journeys. 

 

Transcript

Alex Lowe: Hi, and welcome to another episode in our CGI podcast series, looking at human-centered design and user experience. I'm Alex Lowe, a lead UX strategist here at CGI, and I'm joined today by senior UI designer Jake Fernandes. Hi, Jake.

Jake Fernandes: Hello, everyone, and thanks very much for joining us today.

Alex: When we're at our laptops or scrolling through our phones, we rarely consider why a website or app is laid out in a certain way or why we're drawn to one piece of content over another, but every element we interact with has been carefully designed to guide us seamlessly from one area to another. It's all organized to create a smooth, intuitive experience. In fact, we often only notice user experience when it's poorly implemented and we have a negative experience.

Let's explore some of the psychology behind these design decisions and how they shape our interactions with digital products. Jake, why is psychology so important for us as human-centered designers?

Jake: To start with, I have a couple of findings from studies within the field of design psychology. The first was a paper taken from academics at Northumbria University, which is also where I studied my bachelor's. They put together a study a few years ago that investigated trust and mistrust of online health websites. When they asked participants why they didn't trust a website, 94% of people cited the design as the reason, as opposed to just 6% who said the content.

Another study from the Institute for Color Research noted that colors influence about 90% of snap judgments made about products. It's very clear that the initial impression made by a site is where the users will form an opinion on it. You can lose almost all of your audience immediately if you don't convey the right message.

Alex: What seems apparent there is that we need to get users' attention on a subliminal level first.

Jake: Yes, absolutely. Once you nail that first impression, you then need to make sure that the rest of your service stays true to it. Recently, there's been a lot of talk within the industry about light and dark design patterns. These patterns are used to guide the user to the designer's desired outcome, whether that be filling out a form, completing a game, or buying a product. The difference between light and dark is that light patterns aim to create a seamless, user-friendly experience, whereas dark patterns try to confuse or mislead users.

I think the reason light patterns aren't typically labeled as such is because they're essentially best-practice UX. As champions of user-centered design, it's important for us to design products with users' interests at the forefront. Making processes clean and understandable is how we achieve success within our roles. If we look at a product like Duolingo, they gamify the language learning experience through progress bars, virtual currency, and leaderboards, all accompanied with positive reinforcement through encouraging messages like, "You're doing great," and, "Keep it up, you're on a streak." These help to build a strong rapport with the user and increase retention rates in a positive way.

Alex: Yes, I'm not doing too bad on my own current streak at the moment, actually.

Jake: Yes, I recently picked up Spanish again. I've just hit my 100-day streak yesterday, but I know some of my friends have been doing it for ages and their streaks are close to 1,000, so it's definitely motivating me to keep going. On the other hand, though, dark patterns usually have the company's values at the center rather than the users. Most of these revolve around leading the user to spend more money than they intend to through purchasing add-ons or selecting more expensive options.

For example, an airline might hide the skip option when selecting a seat or adding extra baggage, so the user feels obliged to pay extra for those services when in reality they're completely optional.

Alex: One example that always comes to mind for me is when you try and cancel like a subscription or a service or something like that, that cancel button, it's always hidden away somewhere, it's in the footer, and then you get bombarded with alternative offers to make you try and stay a bit longer, and it just obfuscates that whole cancellation journey.

Jake: Yes, 100%. Some of our listeners may have seen the social dilemma on Netflix a couple of years ago, in which some of the most innovative people within tech have discussed how powerful features have been used to maximize profit. Social media platforms rely on audience retention rates and they have algorithms that learn what content keeps users engaged. The fascinating thing with these algorithms is how in-depth they are.

Not only will they know what content is best to show you, but they'll know what time of day to show it to you, the events in your life that may cause you to feel engaged with it. What happens? You might demonstrate to lead to a certain state of mind. Alongside this, the documentary shows the impact social media has had on political opinion, mental health, friendships, and family. I'd really recommend our listeners to go and give it a watch if they haven't already.

Alex: Okay then, we've seen some examples of how important psychology can be in user experience, but as human-centered designers, there are various psychological practices and principles we can employ to help users engage with our products. There are a lot of these and we're just going to look at a few today, but we're going to start with Miller's Law.

This is a classic concept dating back to 1956 when cognitive psychologist George Miller formulated it.

The basic idea is that our working memory can only hold about seven items at once, give or take a couple. In new x design, this means we need to be careful about how much information we present at one time. If we overload users with too many choices or pieces of information, they can get confused or overwhelmed, and that's where grouping or chunking can come in handy. By organizing related items together, we can reduce that cognitive load on the user and make it easier for them to focus on their goals.

Jake: Is this the theory that explains how we format things like phone numbers?

Alex: Yes, that's a good example. If I say a long string like 0756-277-2945 that's really hard to mentally process and remember, but if I chunk it up into something more like 0756-277-2945, it's much easier to remember. This concept applies to more complex situations too. Like if you imagine browsing shopping websites where the products are grouped into categories, and that helps the user find what they're looking for much more easily.

Miller's law is not just about the number of items, but also the type of information. For instance, chunking could be around letters, numbers, words, or even more complex concepts and sort of combinations of that. The way we chunk information can vary based on a user's familiarity with the content. For example, if you imagine a chess master, they see the board as familiar patterns, while a novice might see it just as individual pieces.

Jake: Yes, I think that mention of familiarity is quite important as we tend to work better with things that we feel comfortable with.

Alex: Exactly. We can see that demonstrated in our next law, which is Jakob's Law or Jakob's Law, named after Jakob Nielsen of the Nielsen Norman group, which you may have heard of. This principle is all about user expectations. It states that users prefer websites and apps to work similarly to ones they already know because we build mental models based on our previous experiences. When designers follow familiar patterns, users don't have to learn new interactions and new styles of interaction each time.

If you think about web browsers, for example, most of them have similar layouts and functionalities, and that makes switching between them easier. Consistency in design helps users feel more comfortable and confident when navigating new sites or apps. An interesting point about Jakob's law is that it's not just about making things easier for users, it's also about efficiency. When users know what to expect, they can complete tasks more quickly and with less effort. This law can be seen in action across interfaces, like in e-commerce sites. You often have a similar checkout process as well, which reduces friction and helps users feel secure during those transactions.

Jake: This comes back to building that trust with users and first impressions that we were talking about at the beginning.

Alex: Yes, exactly. By adhering to established conventions, designers can focus on improving other aspects of the user experience, rather than reinventing the wheel for basic functionality. I suppose while innovation is important, it's still crucial to balance it with familiarity to avoid alienating users.

Jake: This really supports the idea of design systems. If you think about government products, they're all based around essential design systems. That's GDS in the UK, and you can see that across every government service. I think these relate a bit to the Gestalt principles as well.

Alex: Yes, nicely done. I mean, this is a big one for us as UX designers. Gestalt is a German word meaning configuration or structure and is a school of thought that focuses on understanding how the human brain perceives experiences. It proposes that structures that are perceived as a whole have specific properties that are different from the sum of their parts. These concepts have been around since the 1920s, that they're often applied in UX design.

There are quite a few of these principles, and we've only got time to talk about a couple of them. Some of them overlap with what we've already been discussing, but to kick things off, we've got the principle of similarity. In this case, items that are similar in appearance are perceived as being part of the same group. For example, it might be around color, shape, or size. You'll often see buttons in the user interface have the same color if they have a similar function.

Then we've got continuity. As users, we tend to be drawn along paths and lines and curves, preferring a more continuous flow rather than abrupt changes. When designing content, we can use this principle to lead the user naturally from one section of a website to another. Then we've got closure. Our minds tend to fill in missing information to create a complete whole object. This principle is often used in the logo design, and when creating icons that suggest more than is explicitly shown.

A well-known example of this is the FedEx logo, which has an arrow between the E and the X in the negative space, but we can use it in the UX design as well, such as indicating that part of an image may offer a page so that you can use it, can then imagine the rest of it, and scroll in that direction to see more content and then we have common fate. This principle is around elements that move in the same direction and they're perceived to be more related than elements that are stationary or move in different directions.

Visuals need not actually be moving to convey motion. For example, if you think of an FAQ section on a website, they often have many questions with the answers hidden behind an accordion element with a down arrow. We interpret the questions as part of that group all moving in the same direction. Then the arrow also indicates where we should expect to see the answer to appear. Then lastly, we come to uniform correctness. Elements that are visually connected are perceived as more related than elements that are not connected. For example, this might be through color again or some sort of connecting line or some sort of frame or maybe around similar shapes.

Here's a fundamental exercise to try with a pen and paper. Draw six circles like the six dots on the side of a dye, so i.e. two at the top, two in the middle, and then two at the bottom. Now if you draw a line from the top left circle to the one to the right of it, and then again from the top left circle to the one below it so that you have a right angle in the top left corner. Now take a line from the bottom right circle to the one above it and then the bottom right circle again to the one to the left of it. You have another right angle. If you look away and then back again, you'll notice that you'll perceive there being two groups of three linked dots.

Jake: It's fascinating how our brains work like that. You also mentioned color as a way of connecting elements on a page. We were discussing before how colors are critical when forming first impressions. What can we use to help explain that?

Alex: We're talking about color theory here, which is a huge topic and we could spend a whole podcast on it but for now, let's focus on how we can use color to evoke specific emotions and users and make their experience more engaging and memorable. If we can do that, we can improve our product sales and our conversions and all that good stuff. The colors we choose and their intensity can have a powerful effect on users.

For example, if we look at red, red can invoke feelings of excitement, of energy, or strength or maybe it might signal a warning or danger. Whereas if we have green, on the other hand, that might imply something that's natural or fresh or healthy. It can also indicate a positive action like go or confirm, but the intensity of these colors plays a big role too. Imagine the bright red button compared to a pastel pink one. What do you think the bright red button would suggest compared to a pastel pink one?

Jake: I think to me the pink seems less urgent, feels a bit more passive.

Alex: Yes, so choosing the wrong tone there could send the wrong message about the business or the action we want the user to complete. For instance, you probably wouldn't want to use really bold bright primary colors throughout a calming and relaxation app. You might be better off using the more passive calm tones. Then we can use brand colors in our designs as well and that's really important. We can build a really strong psychological connection with an app or product by using the brand colors of a company in a meaningful way. If a brand's primary color is red, designing a website in blue might confuse users and break that sense of brand loyalty.

However, in the right circumstances, you could subvert expectations and play with that a little bit. You contrast in colors to draw attention or emphasize certain elements but in general, color theory is a vast and vital part of UX design, and it helps us create experiences that are not only visually appealing but also emotionally resonant and defective. There we've covered the importance of psychology. We've looked at a few of the principles in design, but how does this apply to specific roles in human-centered design? For example, at CGI, we have UX strategists, we have researchers, UI designers, and developers. How could each of these roles incorporate psychological insights into their work?

Jake: For user research tasks, we can start by adapting our existing methodologies to account for psychological factors or traits. If we take user personas for example, we can create empathy maps to support these. Personas are fictional characters based on real user data that represent different user types, whereas empathy maps go a step further by capturing what the users think, feel, say, and do. Similarly, when we're interviewing people either for primary research or user testing, we could ask a bit more about their background to help contextualize their responses.

Going back to the idea of trust in healthcare websites, it might be helpful to find that a user distrusts the website because of the design, but what we might not know is that the users had a negative experience with healthcare companies in the past and that they have a subconscious distrust around them. It may be helpful to understand secondary factors that influence their opinions, but we need to ensure that we ask those questions in a considered manner and users often won't understand their own subconscious biases. As researchers, it's our job to uncover them.

Then going one step further, we can analyze psychological practices to see if we can adapt our methodologies. Following on from what I just spoke about, the Implicit Association Test, or IAT measures the strength of associations between concepts and evaluations or stereotypes. This might help us uncover those subconscious biases. If we're designing an e-commerce site, we will want to portray the brand identity within our designs. Is it a luxury brand, is it affordable, is it for kids, is it for elderly people? Performance, something like an IAT might help us to uncover the key to their subconscious so that we can factor these things into our designs.

Alex: I think we could add cultural differences into this too, and I can talk around that a little bit later in a moment, but we can also use methodologies such as behavioral analytics in our UX strategy and UI designs. By studying how users navigate through a website or app, we can identify patterns and potential pain points. For instance, if we see a higher drop-off rate on a particular page, it might be indicative of a cognitive overload by the user or a fear of making a mistake. These insights are crucial because they tell us where users are getting stuck and why they might be abandoning their tasks. Another valuable tool in our toolkit is Cognitive Task Analysis or CTA.

This method helps us break down the steps users take to complete tasks, pinpointing cognitive bottlenecks that can slow them down or lead to errors. It's like getting a behind-the-scenes look at the user's thought process. By understanding these mental hurdles, we can design more intuitive interfaces that align with how people naturally think and process information. Then by referring back to some of the principles we discussed earlier, we can see whether we can better implement them to achieve better results. By leveraging all these principles, we can create designs that feel more natural and user-friendly, reducing that cognitive load and making the overall experience smoother and more enjoyable.

Jake: You mentioned cultural differences, Alex, a little earlier. Could you provide our listeners with some examples as to why this is an important topic to consider?

Alex: Yes. We all have our own cognitive biases, which we mentioned earlier. We need to remember that and as designers, we have them too. Our users may not have the same views and attitudes as us and a good example of this is around cultural biases. When UX designers bring psychology into their work, they need to consider these cultural differences to create truly inclusive designs. Cultural context shapes how users perceive and interact with digital products, which affects both usability and acceptance. Again, we're talking about that trust. For instance, while we were talking about colors earlier, so red in Western culture might signal danger or a warning.

In China, that might represent luck, for example, or similarly, white often symbolizes purity in the West, but in East Asia, it might be associated with mourning. Designers need to choose culturally relevant colors for their target audience and symbols and icons can also vary in meaning. A thumbs up might be positive in many Western cultures but might be offensive in parts of the Middle East. I always remember an example of a set of icons we wanted to use for a food app, which had an icon for noodles that showed a noodle bowl with two chopsticks pointing straight up out of the bowl.

Then the Korean trend pointed out to me that this can also be seen as rude or bad luck as it could represent the death of a family member in Korea, Japan, and China. We ended up not going with that idea in the end. Don't forget about language and text beyond translation, the tone and style must match cultural norms and layouts should fit different reading patterns like left to right for Western cultures, but we might want right to left for Arabic say, and by understanding these cultural preferences, designers can create more engaging and respectful experiences for users.

Jake: I think we could mention how we need to consider accessibility as well.

Alex: Absolutely. If a product isn't designed with accessibility needs in mind, it becomes much more difficult for some users to navigate and use effectively. This can lead to frustration and a negative perception of the product, discouraging people from returning and continuing to use it. Whereas if we put the effort in to take their needs on board, we'll build in that user trust that's so important.

Accessibility is a massive subject in its own right. We'll be dedicating one of our upcoming podcasts to it where we can really explore the subject in the detail it deserves. For example, there are some caveats around the color theory we were discussing earlier that we can really explore then.

Jake: I think it's really important in helping to build a sense of trust with the users as well, so creating products that are as inclusive as possible is something that we should all be doing, not only because of the legal requirements, but as we've mentioned throughout, great user experiences build strong relationships. I think a great example is a lot of video games now have detailed accessibility menus that allow us to customize visual and functional aspects to meet our own needs.

As you said, we'll be talking a lot about accessibility in a future podcast. If we're looking maybe at different personalities, we start to see how understanding how people work can be a huge factor for success. It's easy to think about the ideal user type who's eager, tech-savvy, highly skilled, and think of how our products are going to meet their needs. We also need to think about those who may be apprehensive around change or those who have different expectations to the general user base. How do we get them on board, and how can we make sure that they feel heard and design a product that engages with them as well?

Alex: Well, that's all we have time for today. Thanks again, Jake, for joining me in this discussion on psychology and human-centered design.

Jake: Thanks very much, Alex. Some really interesting ideas today.

Alex: We've only just scratched the surface there. There's a whole wealth of useful material out there if you want to explore the topic further, but that's all for now. Thank you, all, for listening.

[00:21:29] [END OF AUDIO]