Keep Users Engaged with Aesthetics

[00:00:00]
>> So this is where things become complicated to say the least because this is where all that subjectivity comes in, okay? So we all have different mental models, we all have different ways of seeing the world and that very much affects how we respond to a design. So interestingly, in one of the breaks, we were chatting about the stripe homepage that I showed earlier.

[00:00:29]
And one of the guys here said, it reminds me of one of those domain holding pages. And so as a result, he didn't really like the design very much. And that's the kind of thing you're dealing with when you're trying to get the aesthetics, the visuals right on a website.

[00:00:47]
That in his particular situation, it reminded him of something else and so he disliked it as a result. But that may have been unique to him, it may or may not be so very confusing. Like I said, it's not like the simple and the cleanness and the binariness of coding where it either works or it doesn't.

[00:01:12]
When it comes to design, it gets complicated. So let's look at why aesthetics are important, how we can deal with them in a way that doesn't lead to endless debates and iterations? There is a line of thinking, that says in actual fact, aesthetics don't matter that much when it comes to conversion.

[00:01:36]
And people hold up sites like Craigslist which looks hideous or even Amazon which looks pretty bad, right? As examples that a site can be highly successful without good aesthetics. And to some degree, this is true. Aesthetics supplement rather than replace other forms of design, the information or design, the usability and the structure and that kind of stuff.

[00:02:05]
So if you aren't somebody who's a full time designer, then that should be quite encouraging to you. That it doesn't need to look beautiful to convert well, right? It just needs to be easy to use. That said, I think that aesthetics have more value than we may be first appreciate but you have to dive into psychology a little bit to understand why.

[00:02:32]
I don't know whether you're familiar with this idea of the halo effect. And Steve Jobs famously kinda represented this. I'm sure you've heard of the Steve Jobs' reality distortion field. That when Steve Jobs was around talking about an idea, it suddenly is all seemed to make sense and it all seemed to be a great idea.

[00:02:56]
And when he left the room, suddenly, you realized it wasn't such a great idea and actually it's gonna be really difficult to do. That is an example of the halo effect, and the halo effect is effectively when we as human beings associate to unrelated factors with one another.

[00:03:18]
So the typical example was the charisma of Steve Jobs carried you along and convinced you that the idea was good, right? A more extreme example of it is that in tests, it's found that attractive people are considered a much more trustworthy. So you're more likely to trust an attractive person than a non attractive person.

[00:03:44]
Which is why you trust every word from my mouth now. But that's ridiculous if you think about it, because there should be no correlation between those two whatsoever. You can be incredibly attractive and a mass murder, yet, there is something in our psychology that means we do associate these kinds of things.

[00:04:03]
And, of course, the result of that is we associate, for example, the attractiveness of a website with the quality of the product behind it. If the website looks unprofessional, if it looks dated or whatever else, then we might conclude that the product isn't very loved or cared for.

[00:04:23]
So the halo effect is an important effect and does have a knock on value. And you can see this in a very tangible and very real way, the power of aesthetics to actually influence our buying decisions and our actions. And you can see it in slot machines, right?

[00:04:41]
If you go somewhere like Vegas or something like that, you see all these slot machines. Let's look at it from a developer point of view. What is a slot machine? Well, essentially, a slot machine is a random number generator, isn't it? That basically is churning out a load of random numbers that ascertain whether you win or lose, right?

[00:05:03]
So if you had a user experience designer or a UI designer who just cared about communicating clearly in the simplest way possible. Basically, you'd press a button and it would either say you've won or you've lost and that'd be it, right? In fact, it could be even more seamless an experience and that you could walk up to it.

[00:05:25]
And there could be a sensor on it that detects you walking up and just says, you lose or you win on it. But that wouldn't make a great experience with it. And the whole reason that slot machines are so addictive and so enjoyable for some people is because of the aesthetics, is because of the experience has been created.

[00:05:50]
But the sense of control and engagement and all of those kinds of factors, so esthetics do matter. So then, if we know they matter, how do we ensure that the aesthetics are right in order to encourage conversion? Well, I have a very particular process, I adopt to get this right.

[00:06:12]
I don't think I'm a natural creative designer in may be the way that some people are. And so I've kind of reduced it down to a process that I can kind of follow. And the first part of my process is I sit down with my stakeholders and sometimes with the users as well and we brainstorm.

[00:06:36]
Well, what are the words that we need people to feel in order to encourage them to act, right? Do they need to feel that you're trustworthy? Do they need to feel friendly towards you? Do they need to feel positive? What do they need to feel, or what do you want them to think about your brand is another way to put it.

[00:06:58]
And we ascertain a few words that we all agree on, that are words that we think or our users think will resonate most with the audience, in order to encourage them to take action. And then I start designing around those words exploring different colors, and typography, and imagery that I feel represent those words.

[00:07:22]
And you could do some really cool stuff with just a little bit of thought, really. So let's take this example. This is an example from the smashing magazine, a membership site. I don't know whether you're aware of it or not. But everything in this is designed to put you in a good mood, to make you feel positive.

[00:07:44]
From the vibrant colors being used to the smiling cat illustrations, the fact that all the shapes on the illustration, curved and gentle. That the whole feel of it even down to the text and the way that the text is worded, and then the little delight or animations where you roll over them, right?

[00:08:06]
Everything in that design is to make you feel positive and why do we care? Because the more positive we feel, the lower our cognitive load is, the more trusting we are, the more positive we're gonna view the website because of the halo effect, et cetera. So that's a great little bit of using styling and shapes and animation and imagery and copy and all those things together to create a great impression.

[00:08:37]
And one of the things that I like in particular about this is the little animations or rollover, right? So they're really subtle but they make you go and actually, those kinds of own moments so that's nice. I'll call design delighted and they're a really good way of putting people in a positive mindset about your brand or direction.

[00:09:02]
And these do take a little bit of thought and a little bit of fun but they're all worth exploring. So humor is quite a good way of making a connection from one person to another, building trust and putting people in a positive state of mind. So for example, MailChimp used to be a master at this.

[00:09:23]
Unfortunately, they've taken it all the way and gone for something a bit more soulless, which is a shame. But when you want to send an email, when you are gonna send an email to all your subscribers, you would have this hand hanging over a button. And if you didn't press the send button after a while, the hand would start sweating.

[00:09:44]
And if you still didn't press the button, it will start shaking a little bit and seeming quite nervous about it, right? And that was a great little bit of delight us. And it worked so well because not only was it a kind of moment, it was a hidden little feature that you kind of stumbled across me and made you go, that's nice.

[00:10:08]
But also it showed a degree of empathy with the audience that, yes, sending an email out to a big mailing list is a little bit scary, right? So build a great relationship there, which is good. And then the other example they did is when you sent it, it went to give you a high five, right?

[00:10:26]
And if you repeatedly clicked on the hand with your cursor, the hand will get redder and redder, like you've constantly high fived it. Nobody's gonna find that out or it will take people a long time to find that out but then that kinda thing gets shared. And those kinds of things become design delight as they're called.

[00:10:47]
Things like the Toblerone logo, go and have a look at the Toblerone logo. And if you look very carefully, if you look on Google images, they highlight it for you. You'll find a hidden bear in that or the FedEx logo that's got a hidden arrow in it. Or there are loads of examples and these little things that kind of give a positive attitude and reduce people's cognitive load makes them more receptive.

[00:11:16]
Now you might be thinking, yeah, but I work at a boring company and they won't do humor and it's not appropriate in our situation. And my response to that is if the CIA can use humor, you guys can. The first ever tweet from the CIA was we can neither confirm nor deny that this is our first tweet and I think that's just brilliant, that's brilliant.

[00:11:43]
Because they brought some humanity to a faceless government bureaucracy and whatever you think of the CIA is irrelevant. That idea that anybody can introduce some humor and seem humanity to their brand, their visuals, their copy, whatever it be makes such a difference. That said, it's not always appropriate.

[00:12:05]
There are times and places where you shouldn't be using it. Here's one example, I don't know whether you're aware of MOO. There's a website called moo.com which basically does your printed business cards and stickers and stuff like that. And I received a sticker, I ordered a sticker book from MOO and I received this email.

[00:12:31]
Now I should say that they use personality and humor quite a lot on their communications. So for example, they have big Moo which is their printing press, that's kind of the given a character. And then they have their software which is called little MOO and little MOO looks off to you and is your kind of interaction with them.

[00:12:50]
So you kind of interact with these characters which is kind of cute and differentiate some a little bit from your average print company which is really boring. But I received this email from little MOO. So hi, I'm little MOO, we've spoken before. I'm a piece of software that manages your order with MOO.

[00:13:07]
I've done a very bad thing. Don't worry, your sticker book is fine but I might have lost the information that tells the real life people at MOO what color cover you ordered for your sticker book. I might only be a piece of software but I'm embarrassed and I do feel like a bit of an idiot.

[00:13:23]
If you get the wrong cover for your book, please accept my apologies and know that someone has fiddled with my insights to fix them and it won't happen again. In the meantime, I hope you love your stickers. The stickers you have ordered, very best wishes and sorry again, little MOO.

[00:13:40]
Now, that's a bad example of when to use humor. When things go wrong, that is not the best moment to use humor because people are frustrated. It was made a lot worse by the fact that they didn't follow my advice from earlier, which was keep the user informed, and deal with their questions.

[00:13:58]
This doesn't tell me, if I get the wrong sticker book, can I get a refund? How can I tell you what the right sticker book cover was, et cetera. So it very much failed and I think oftentimes, I see people using humor at the wrong time. The classic example and I blame designers and developers for this is, is error pages, right?

[00:14:19]
Why everybody feels the need to make star wars puns on error pages is quite beyond me. Because that is the very moment that people are frustrated that they can't find the page they're looking for and you're making jokes. So you need to use some sensitivity when it comes to this stuff but remember I said about getting a list of keywords, right?

[00:14:42]
So we're gonna take that list of keywords and we're gonna do some design work around it. And we're gonna work out our colors and our typography and apply that to our designs. How do you avoid those endless iterations? How do that the the design you've come up with actually does communicate those keywords?

[00:15:02]
Well, it's very simple, you ask users. You do a very basic survey with a very fancy name. It's called the semantic differential survey. And you can use any survey tool you want that can display an image and ask a question, and you can use any people that you want.

[00:15:20]
Typically, I use existing customers of the company or I post out on their social media channel, places like that. And I show them the design and I asked them a question, very simple question on a scale of one to five. How strongly do you agree with the statement this design is dot, dot dot?

[00:15:41]
Whether that be trustworthy, friendly, positive, whatever words you come up with and then see how it ranks. And if it ranks well, then really your client or stakeholder, the fact that they think it looks like a domain holding page or they don't like the blue or they want the font moved or whatever all becomes irrelevant.

[00:16:02]
Because you prove that the design works. You've proved that it creates the response that you're wanting from users. And you can run a survey like that in half an hour, 40 minutes, doesn't take very long to get a load of people to look at it and vote. Another option you can have is which I sometimes use is compare your design mock up alongside the competitors.

[00:16:25]
And ask people to select the one that they find most friendly or most approachable or most trustworthy or whatever keywords you've got. And see whether they pick your design over the competitors. If they do, then you know you're in a good place. So actually, you can test for aesthetics, you can test for design in order to ascertain whether or not it's working properly.

[00:16:49]
And there are loads of other ways of testing a design. For example, there's something called a first click test, which will help ascertain whether your navigation is right. So you ask people, where would you click to go to find x piece of information, and they click on the graphic and that where they clicked is recorded.

[00:17:09]
If people get that first click right, there is an enormously high chance that they will then go on to complete the task correctly. Another test that you might want to find out a little bit more about is called a five second test where you show somebody a design for a few seconds.

[00:17:27]
You take the design away and ask them to recall what they saw. Did they spot the critical calls to action? Did they see the main content? Did they understand what the website is about? That can all help to ascertain whether the design is right or not. Now you can run all three of those tests to survey the first click test and the second test using a tool like usability hub.com.

[00:17:50]
And they've got free account so you can you do the occasional test like that very easily with them. And it proves to stakeholders that you're in the right direction. I've shown a lot of eye simulation over there, some of eye tracking tests to show where people look. You can do that as well.

[00:18:09]
There are tools out there that no run a full blown eye tracking study, which obviously takes a lot of special equipment and all the rest of it. But actually takes thousands of hours of existing eye tracking, and actually simulates that in a piece of software that will predict where people would look in a real eye tracking study.

[00:18:29]
With about an 80 to 95% accuracy so it's not perfect but it's better than nothing. And again, you can run your design through it and see are people looking at the right place on the page? So attention insights is one that I use quite a lot for that, and again, they've got a free account you can try out.

[00:18:48]
So design doesn't need to be this kind of creative mystery. In fact, design is very understandable. It's about following a set of rules and testing so that you've got real data so stakeholders get off your back and stop hassling you about the fact that they don't like the pink.

[00:19:07]
So there's a little bit about design. Let's recap very quickly the key takeaways before we take final break and go into the final session for today. Those key takeaways is simplify mercilessly. If every element on a page needs to justify its place on that page, it needs to help improve conversion in some way.

[00:19:26]
If it doesn't, then it's out of there. Secondly, use imagery and shapes to lead attention, to show where people should be looking, to focus them on the right things. Pay particular attention to calls to action to make sure they're working hard. And the people spot them and consider that post click experience.

[00:19:48]
Cuz if you don't get that post click experience right, you're gonna be in some serious trouble.