10 ways animation can improve your website

Paul Boag

This week on the Boagworld Show we highlight the growing role of animation in web design and ask “can it actually improve the user experience?’

Paul Boag:
This week on the Boagworld Show, we highlight the growing role of animation in wed design and ask can it actually improve the user experience?

Add your own suggestions or view the links mentioned in this weeks show.

Hello and welcome to Boagworld.com, the podcast for those involve in designing, developing, and running websites on a daily basis. My name is Paul Boag and joining me, as always, is Marcus. Good morning, Marcus.

Marcus Lillington:
Good morning, Paul.

Paul Boag:
I haven’t spoken to you for absolutely ages.

Marcus Lillington:
It seems that way, doesn’t it? Yes, because I have been away.

Paul Boag:
Where have you been?

Marcus Lillington:
I have been to Cornwall.

Paul Boag:
Cornwall?

Marcus Lillington:
And it’s been like the middle of summer down there, it’s been fantastic.

Paul Boag:
That’s very nice. Because I have been to Hull and it wasn’t.

Marcus Lillington:
But, you said, you’ve also been to Shrewsbury as well. Which you said you did like.

Paul Boag:
I did like Shrewsbury, it’s a lovely place Shrewsbury and there was a lovely –we have lovely conference there, lovely conference called Revolution.

Marcus Lillington:
You sound a bit poorly, Paul.

Paul Boag:
I’m bloody poorly. Do you want to know the truth, Marcus? I am frigging burnt out. I have had enough. I want to curl up in a ball and do nothing. And then to add insult to injury, I walked downstairs because I had been sitting in bed until right up to this podcast, right?

Marcus Lillington:
Yeah.

Paul Boag:
Walked downstairs, post for me and I’ve got done for speeding driving back from Shrewsbury. So I’m pissed with the world. So this is going to be the grumpiest podcast known to man.

Marcus Lillington:
Which constabulary was that then?

Paul Boag:
Shropshire.

Marcus Lillington:
Oh right.

Paul Boag:
Oh, no. No, that’s not right. See I am going to be incoherent. Stratfordshire.

Marcus Lillington:
Okay.

Paul Boag:
There you go.

Marcus Lillington:
Wiltshire are renowned, I have been done by Wiltshire. But at the moment, I have zero points.

Paul Boag:
Yeah, I’ve got zero points. I haven’t been done since I was about 20 something.

Marcus Lillington:
Yeah, right. Long time ago then, Paul.

Paul Boag:
Very long time ago. Depressingly so.

Marcus Lillington:
Although I am feeling very old.

Paul Boag:
Are you? Why are you feeling old?

Marcus Lillington:
Because I have been away because it was my wife and my silver wedding anniversary on Tuesday.

Paul Boag:
Oh, yeah.

Marcus Lillington:
So…

Paul Boag:
That is old.

Marcus Lillington:
Yeah. So like approaching 50, no problem. Silver wedding, blimey that’s like old people.

Paul Boag:
It is.

Marcus Lillington:
So…

Paul Boag:
But that’s because you got married so young.

Marcus Lillington:
Yeah, we did get married young.

Paul Boag:
So tell yourself that and you’ll feel better.

Marcus Lillington:
But it was a very nice couple of days away. Thank…

Paul Boag:
Good. Good.

Marcus Lillington:
…thank you very much.

Paul Boag:
Good, I am glad you enjoyed it. So – and you’ve come back to just misery and pain and me grumping.

Marcus Lillington:
You don’t sound too bad, Paul. You have got to go away again though haven’t you?

Paul Boag:
Yeah, I have.

Marcus Lillington:
Although you’re probably going to one of my most favorite places in the whole world.

Paul Boag:
At the moment, it just seems an insurmountable thing to deal with.

Marcus Lillington:
Okay.

Paul Boag:
And the only reason I don’t sound worse is because I put it on for the show. That is the honest to God truth, it’s like if it wasn’t – if we weren’t on air right now, I would be grizzling like a small child. I’ll tell you. I am very envious of Adapted Path right now.

Marcus Lillington:
Oh, yeah, that’s weird.

Paul Boag:
They have just sold up haven’t they to Capital One and, although they’ve still got work haven’t they? I want to sell up and do nothing.

Marcus Lillington:
Yeah. Sell up and curl up in a little ball…

Paul Boag:
Yeah, absolutely.

Marcus Lillington:
…and go to sleep.

Paul Boag:
It’s interesting. We were discussing this, I’ve been doing some other podcasts recently. So did I talk about I was on Andy Budd – not Andy Budd, he will kill me for that. Andy Clarke’s podcast, Unfinished Business. Did I talk about that last week?

Marcus Lillington:
I don’t think – I think you said you’re going to be on it.

Paul Boag:
Right.

Marcus Lillington:
I mean you may have mentioned it but I have been away having a nice time since, so…

Paul Boag:
Well, I wouldn’t have mentioned it because I don’t do podcasts except for with you unless they’re guest podcasts. So I wouldn’t have talked about it on the podcast.

Marcus Lillington:
No.

Paul Boag:
Because you weren’t here to do a podcast with me.

Marcus Lillington:
Correct.

Paul Boag:
You hadn’t thought that through, had you?

Marcus Lillington:
No, I am not with it at all this morning.

Paul Boag:
You don’t sound 100% either. You sound a bit nasally.

Marcus Lillington:
Okay. Maybe there’s something in the air.

Paul Boag:
Or perhaps it’s just wishful thinking on my part that everyone else suffers because I have been suffering.

Marcus Lillington:
I don’t feel too bad, Paul. Tell me about the podcast.

Paul Boag:
Yeah. So me and Andy, it turned out to be a much franker podcast than perhaps we’d intended. Basically, we just turned into a couple of grumpy old men saying how despondent we are with life. We’re both having breakdowns, we’ve decided.

Marcus Lillington:
Oh, dear.

Paul Boag:
Do I have to do this today?

Marcus Lillington:
Yeah. We’ll make it the shortest podcast in the world, how about that?

Paul Boag:
Yeah, we can speed podcast. Hey, so I’ll put a link in the show notes to the Unfinished Business show because it is quite good actually. We did talk about things like burnout and changes in the industry and all of these kinds of things that are going on at the moment.

Marcus Lillington:
Yeah.

Paul Boag:
So it’s a good show. I did another one as well, which was for A Web Apart, which – and that depressed me too. Lovely, lovely, lovely lady, lovely host, Jen Simmons. It’s a really good show, really good show. And that’s the problem that she’s got like a gazillion listeners and we have four. And we have been doing this so much longer and it’s unfair. So the whole world can just F off.

Marcus Lillington:
You need to just chill, Paul, chill.

Paul Boag:
I’m going to put a link in the show notes to Jen’s podcast as well because we talk about digital adaptation stuff and it went down very well, so it was really good.

Marcus Lillington:
Excellent.

Paul Boag:
The only thing that’s making life bearable at the moment is my iPhone 6 Plus.

Marcus Lillington:
Oh right.

Paul Boag:
It is a thing of beauty.

Marcus Lillington:
And you haven’t bent it yet?

Paul Boag:
No, it’s not bendable, what a load of BS that was. I am abbreviating on my swear words today because I can’t be bothered to say them in their entirety.

Marcus Lillington:
So why is it a thing of beauty in comparison to your previous iPhone?

Paul Boag:
I just like the size.

Marcus Lillington:
Yeah.

Paul Boag:
I’ve got to say, you’d love it because…

Marcus Lillington:
Yeah, I would.

Paul Boag:
…you can make the text big. No, I don’t mean that in a rude way.

Marcus Lillington:
Well, that’s fine. No it’s fine.

Paul Boag:
But it’s – seriously it is really, really lovely. And it hits that sweet spot for me where it’s like even the iPad Minis a bit too big to carry around with you all the time but you want a…

Marcus Lillington:
Yeah.

Paul Boag:
…nice big screen. And this, a lot of people laugh at it and say, you cannot hold it up to your ear and stuff. But as somebody that grew up with Nokia bricks back in the day…

Marcus Lillington:
Exactly.

Paul Boag:
…yeah, I’d quite happily hold this up to my ear. So there you go. So that’s the only thing that’s making me happy. And I think that’s a sad reflection on my life that it takes a gadget to make me happy.

Marcus Lillington:
Well, that’s always been the case, Paul, come on, nothing new there.

Paul Boag:
No, that’s true. Shall I stop moaning and get on with this frigging show.

Marcus Lillington:
Well, I’m just saying you need to have – what you need, Paul, is a nice holiday.

Paul Boag:
Yeah, not going to get that, am I?

Marcus Lillington:
Nice holidays coming up?

Paul Boag:
No, nothing.

Marcus Lillington:
Book one then.

Paul Boag:
I have got no holiday left.

Marcus Lillington:
Well, for January then. January will be here before we know it.

Paul Boag:
Christmas, I have got two – two and a bit weeks off over Christmas. So that will do me a world of good just sitting playing video games.

Marcus Lillington:
And don’t book so many away days, away things next year.

Paul Boag:
No, I am definitely not doing that.

Marcus Lillington:
Dr. Marcus’ advice.

Paul Boag:
But then Dr. Marcus is a bloody hypocrite because he is going to quite happily send me to work with clients on site for months on end.

Marcus Lillington:
That’s not Dr. Marcus.

Paul Boag:
That’s the evil sales Marcus.

Marcus Lillington:
Evil salesman Marcus.

Paul Boag:
And that’s a different Marcus.

Marcus Lillington:
Yeah, yeah, today, I am Dr. Marcus.

Paul Boag:
Okay. I like Dr. Marcus. Dr. Marcus is my friend.

Alright, shall we push on with today’s show then?

Marcus Lillington:
Yeah.

Paul Boag:
So I’ve just had a thought, Marcus.

Marcus Lillington:
What’s that?

Paul Boag:
I’m just wondering whether people don’t tune in to listen me moan and whinge. So that maybe that’s not the primary purpose of this podcast and maybe we ought to talk about like web stuff.

Marcus Lillington:
Okay. Well, I think quite a few people do tune in to…

Paul Boag:
To hear me moan and whinge.

Marcus Lillington:
To hear you moan and whinge.

Paul Boag:
Actually, it’s surprising with the Andy Clarke podcast that I did. The number of people that just emailed or tweeted or whatever afterwards and said, thank goodness for that that I am not the only one. And do you know, what, the one phrase that I said I think that resonated most with people is that I was fed up with all this bullshit about web design having to be your passion, right? And that actually it’s okay if it’s just your job.

And the number of people that kind of tweeted to me saying, yeah, oh, I thought I was the only one, etcetera, etcetera, and I love – I enjoy my job. Don’t get me wrong, I love it most of the time. But it’s not my passion all the time. I have got family, they are my passion. You know what I mean? Music is your passion, it’s okay. You can enjoy something, you can enjoy your job but it – not be an obsession.

Marcus Lillington:
Well, I have always thought that the real kind of measure of that is if you didn’t have to do it, would you do it?

Paul Boag:
Yeah.

Marcus Lillington:
And I know I wouldn’t do the job I am doing.

Paul Boag:
No, neither would I.

Marcus Lillington:
And I know you wouldn’t do the job you’re doing either so that’s kind of you wouldn’t choose to go and do projects with people all the way around the world and things like that because you’re away from your family and all that kind of stuff.

Paul Boag:
Yeah. I mean I might – I would probably do elements of what I do.

Marcus Lillington:
Absolutely.

Paul Boag:
Because I do actually really like – I’d probably help out charities, I could imagine me going in and doing that kind of stuff but I wouldn’t do it to the degree that I do it now. No, I think there’s a lot of BS in the community.

Marcus Lillington:
Well, I hate – I mean I loathe the word passionate anyway. You’re…

Paul Boag:
I thought you were about to say I loathe the word community because Andy was ranting about that. We’re not a bloody community, we’re an industry.

Marcus Lillington:
Well, true.

Paul Boag:
Yeah.

Marcus Lillington:
And – but it’s just yeah, the word passionate. ‘We’re passionate about insurance’ that you see on billboards, really?

Paul Boag:
Yeah, you’re right.

Marcus Lillington:
Really?

Paul Boag:
Yeah. Anyway, right, so…

Marcus Lillington:
Yes.

Paul Boag:
We are talking this – we’re going to talk a bit – I don’t feel like I have talked about design and development-y stuff for a long time, right?

Marcus Lillington:
Okay.

Paul Boag:
And so I thought we’ll talk a bit about design because the reason is that I’ve become – I’m just increasingly impressed by our designers and increasingly despondent about how out of touch I am. And I see the stuff that Ed and Chris and Leigh do and I just think, wow, just things have come on leaps and bounds. And I am just – the little touches that they add into their websites just blow me away on a regular basis. So I wanted to talk about some of them.

One of the things that I want to talk about or the thing that I want to focus on this week is animation, because I think animation has become this kind of key component in user experience design, in enhancing the user experience. And I want to look at 10 ways that animation can make a real difference. So I am not talking about animation in the kind of the good old flash days sense of animation where things whirled round – to make it look pretty. I am talking about tangible real benefits to the user experience. So that’s what we’re going to be talking about today.

And, yeah, so we’ll kick off with number one.

Marcus Lillington:
Okay.

Highlighting Errors

Paul Boag:
Right. Number one is highlighting errors. Have you ever logged in to the WordPress admin system and got your password wrong? You ever done that?

Marcus Lillington:
No, no, I haven’t but I have into – into my computer – into my Mac.

Paul Boag:
Yeah. What’s it do?

Marcus Lillington:
It shakes its head at you.

Paul Boag:
Yeah.

Marcus Lillington:
…which is brilliant.

Paul Boag:
And that’s exactly what WordPress does as well.

Marcus Lillington:
Not that it has a head obviously. That would be a bit strange…

Paul Boag:
Yeah, just a little shake.

Marcus Lillington:
Yeah, no.

Paul Boag:
Yeah. No, sorry you got that wrong. Try again. Do you know it’s such a simple little thing, isn’t it? But it’s so really useful – it’s just that extra little bit of visual feedback because the number of times, especially now where we live in the days of super fast broadband and all this kind of stuff. You could enter your username and password into a form and you hit return and if you blink at the wrong time, you don’t see it refresh the page and you don’t know that it’s failed. It’s just feels like it’s sitting there. Or, yeah, I know you can put a little message saying your username is invalid or whatever else. And yeah, that’s great but just that little bit of animation adds something to it as well and just kind of drives the point home in a really subtle way that I think is brilliant.

Marcus Lillington:
Well, I think in the Apple cases, it actually kind of affirms your feelings about their brand as well. It’s kind of like it’s friendly and it kind of makes you think that they didn’t need to do that. But they did and it’s great. So it’s not only a useful thing, it’s also a kind of a delighter, I suppose, to a certain extent.

Paul Boag:
You hear this deadly silence?

Marcus Lillington:
Yes, what?

Paul Boag:
Look at point number 6 please, Marcus.

Marcus Lillington:
Oh dear. Okay. Well, let’s talk about that later, shall we?

Paul Boag:
If you just read the frigging show notes, it wouldn’t be a problem.

Marcus Lillington:
I’m never going to do that, as you well know.

Paul Boag:
Right. Let’s move on to number two then.

Okay. So number two is not design delight as you have to wait until number six for that and we’re not going to talk about it beforehand.

Marcus Lillington:
Okay.

Drawing attention to screen elements

Paul Boag:
Number two is drawing attention to things. So this kind of builds, I guess, on the previous one of highlighting errors where the box wiggles, it’s drawing your attention but there are other examples of that as well. So for example, a call to action button that pulses gently to draw your attention to it which is just a terrible idea. I did it on the last Boagworld site and I really regret it.

Marcus Lillington:
Or spinning with fire.

Paul Boag:
Yeah. The trouble with things like something that pulses gently is it catches your eye, great; but it actually can get quite annoying quite quickly. But then another alternative might be for the page loads and then your call to action slides in and reaches a point and stops, right? So that then draws your eye to the call to action but it’s not a continual animation that’s ticking over. So – but that idea of using animation just to draw your attention to certain key things I think is a really good one.

Marcus Lillington:
Yeah. I think the other point here that this point has made is that you have to do this carefully.

Paul Boag:
Yes, yes. It’s very easy to screw up animation and do something absolutely awful with it. I think the key, I think, it’s quite simple that either the animation has to just run once, right? Or has to be – no I think that actually that’s a solid rule, it’s not an or, it’s an and here. So only run your animations once. So don’t have something that’s on a loop continually because that will, I mean, especially it causes accessibility problems for people with cognitive disabilities like dyslexia because it’s hugely distracting for them. But I think it’s pretty distracting for everybody else as well.

But the second point here is the best animations, I think, are those that are a response to a user input, right?

Marcus Lillington:
Yeah.

Paul Boag:
So the user has done something and it animates in response to that rather than it just kind of animating randomly, if that makes sense. Now that doesn’t – that second point doesn’t marry with to draw attention because if somebody has done something already, then in a lot of cases they have already done the call to action you want them to do. So the animation is too late. But you can use the draw attention technique to draw attention to certain things that have changed on the page or whatever else.

But, yeah, you just – like you say, Marcus, you need to – I said what you just said but in a lot more words. I will just get my coat. I often read the transcripts of these shows thinking I cannot complete a sentence. Have you ever noticed this is about me?

Marcus Lillington:
Yes, you can.

Paul Boag:
No. Honestly, I start something and then I go off on a tangent halfway through the sentence.

Marcus Lillington:
Well, I am far worse than you at that. I am desperately trying to complete my sentences.

Paul Boag:
I know, I am really – I have become really self-conscious now. Let’s just move onto point number three.

Confirming success

So we talked about highlighting errors but you can also show successes as well. So when you fill in a field and you get a little – a tick that pops up that says yes, you have done that right. I think that those kinds of things are really good. Or when you send an email on your computer, you see a little animation of it sending and hear a little swoosh sound. Oh don’t get me on, this is going to get me onto audio.

I am still the only person in the world that believes the web should have little audio cues like software applications have, but that’s another story.

Marcus Lillington:
We have had this conversation, haven’t we? It’s the same applies but it’s kind of like you’ve got to be even more careful.

Paul Boag:
Yes.

Marcus Lillington:
So – I mean a tick can appear without any animation and that’s good a thing, I guess. If it appears and it draws your attention to the fact that it’s appeared, that’s potentially even better.

Paul Boag:
Yeah. No, I kind of – whether it just appears or whether it animates and appears, I still count that as animation. That’s, yeah, probably stretching the point a little bit.

Marcus Lillington:
But, yes, I agree with this particular one.

Paul Boag:
The idea that you can use animation to reinforce you have done something successfully.

Marcus Lillington:
Is a good thing.

Paul Boag:
Is a good point.

Marcus Lillington:
Yes.

Paul Boag:
Let’s move on to number four because I feel like I’ve stretched that point a little bit.

Demonstrating products

Now, this is a good one. To demonstrate products…

Marcus Lillington:
Okay.

Paul Boag:
Right I’m going to show you a page – I’ll need to put a link in the show notes to this page and I should have prepared this beforehand but I haven’t. I’m going to show you a page of a cool product that I like. I put this actually in Slack a couple of days ago. I don’t know whether you saw it.

Marcus Lillington:
No, because I was on holiday, Paul.

Paul Boag:
It was that virtual headset that’s coming out. Did you see that?

Marcus Lillington:
No.

Paul Boag:
So it looks like a pair of headphones but it kind of – the bit that goes over the top of your heads can fold down in front of your eyes and it’s actually got video in it. So it’s like – becomes like a virtual headset which is very, very cool. And their website which I will put link in the show notes has a gorgeous little animation as you scroll down the page where it shows the folding action of the headset…

Marcus Lillington:
Oh yeah.

Paul Boag:
You see? And it folds down and then you can see how it’s actually got a video mode as well as an audio mode. And I think that is a brilliant use of animation. So it’s not like a whole video because video is a kind of separate thing. It’s just a very simple animation as you scroll down the page that kind of rotates the headphones round. And it’s very, very slick. You need to go and check it out because I think it perfectly demonstrates how that product works.

Marcus Lillington:
I’d very conscious wearing those in public.

Paul Boag:
Well yeah, I don’t think you would, would you?

Marcus Lillington:
No, you’d look like a robot.

Paul Boag:
Yeah.

Marcus Lillington:
No what was the one – you’d look like the guy in Star Trek.

Paul Boag:
Oh, Geordi La Forge.

Marcus Lillington:
There you go.

Paul Boag:
Yes. The fact that I even knew his surname was quite sad. Yes, they are a bit like that. No, I don’t think you would wear them necessarily in public but see again this is a tangent. This isn’t what we’re supposed to be talking about. These are good for things like if you have kids that always hog the TV at home and you want a big screen. They are also good for sitting in the garden.

Marcus Lillington:
Sitting in the garden. Surely, sitting in the garden, you should be looking at the lovely plants.

Paul Boag:
Yeah but one presumes – I meant working in the garden.

Marcus Lillington:
Oh right.

Paul Boag:
Don’t be pedantic. I think there are – like, I’ll tell another situation, if I wanted to watch videos off of my iPad while I was in a hotel room, because faffing around and connecting up with the TV is never particularly easy. I may possibly, if I was never going to see the people again, wear it on a train.

Marcus Lillington:
That’s the thing, isn’t it? That’s when it would actually be potentially the most useful but I would feel so self-conscious.

Paul Boag:
I know. But none of this is about what we’re supposed to be talking about.

Marcus Lillington:
No, it isn’t.

Paul Boag:
We’re talking about the fact that it’s got a really nice animation and you would agree the animation works well.

Marcus Lillington:
Yes, it’s very nice indeed.

Paul Boag:
So it’s a really clear way of demonstrating a product. So that could be – it could be, of course, a product but it could also be, if you’ve got a piece of software, you could show how that works through animation and – loads of potential for that kind of stuff and I love it. I think it’s sexy and I am seeing it more and more on sites and it helps the user and creates a great experience as well so that’s really good. Let’s go on to number five.

Reinforcing functionality

So this is my favorite way of using animation to reinforce functionality. So we did this on the Wiltshire Farm Foods website, link in the show notes, right, let’s make sure they haven’t changed site because we’re not actually working with them anymore. wiltshirefarmfoods.com.

Marcus Lillington:
I’m looking.

Paul Boag:
Is it still the same site?

Marcus Lillington:
Yeah.

Paul Boag:
Good. Okay. So you can go and try this for yourself, right? Go to their site – it’s looking a bit dated now isn’t it, oh well, that’s their problem. And add one of the items to the shopping basket, right? It doesn’t matter which item. Oh it’s going to make you put in a postcode first I forgot this. Yes, so you add an item to your basket and you’ll see a whole series of like little animations that go on, right? So for a start the product flies to the basket, the basket expands down. The button changes that’s from being add to basket to add another and goes yellow. It puts a border around the item that you’ve just added with the one in basket added to it. So it’s all of these kind of little visual animated queues that say this has successfully been added to the basket. Now, you might go to Wiltshire Farm Foods and go, wow, that’s a little over the top. But that’s because their average user is about 80 years old. So they need a lot of reassurance that they are doing it right which goes back to the showing success thing. But, yeah, just actually it kind of reinforces the functionality that you are doing. Yes, the item has physically been moved to the shopping basket. You can see it whiz across the screen and go there.

Marcus Lillington:
Nice.

Paul Boag:
Which I think is really good. And you get that a lot on applications these days where even something like a drag and drop is physically reinforcing that an item is moving and doing what you want to do.

Marcus Lillington:
I’d forgotten that, the Wiltshire Farm Foods shopping basket, it’s really nice.

Paul Boag:
They’ve done a really good job. I would like to take credit for that, but I don’t think I can, I don’t remember being involved in that decision-making process. I think that was Ed but I’ll take credit anyway.

Marcus Lillington:
Yeah. Yeah, you did brilliant work, Paul.

Paul Boag:
Well I hired Ed so surely that counts. It does in my mind anyway.

Marcus Lillington:
Yeah, absolutely.

Paul Boag:
Shall we move onto number five then?

Marcus Lillington:
Six.

Paul Boag:
Oh, number six, that’ll do. Let’s do number six.

Alright. Number six. Marcus, tell us about number six, why don’t you?

Making your site memorable

Marcus Lillington:
What’s number six? Increase memorability. Oh, design delighters. Yeah. Things like – the thing that I mentioned, I can’t remember what it was. Oh, I know, it was the Apple saying you got the login wrong by shaking its head sort of metaphorically. It’s a delighter. You go – oh, that’s nice…

Paul Boag:
Yeah.

Marcus Lillington:
…which obviously it kind of reinforces what Apple want you to think about them.

Paul Boag:
It’s a brand building thing, isn’t it, really?

Marcus Lillington:
Exactly, yes.

Paul Boag:
So – yeah, there’s lots of lots of lovely little examples of this; I’m trying to think of a few now. There used to be a thing, one app I used, I can’t remember what the app was where you pulled it to refresh like you normally do.

Marcus Lillington:
Yeah.

Paul Boag:
But as you pulled it down, there was a little happy smiley person that did little dance, right?

Marcus Lillington:
Yeah.

Paul Boag:
So it was – or another great example is on MailChimp, isn’t it where as you resize the email window to see what your email will look like at different sizes, you’ve got the – Freddie, their little character, at the top of it and a ruler and he is pointing along the ruler and as you pull the window out, his arm gets longer and longer until it pops off.

Marcus Lillington:
Yeah.

Paul Boag:
So those are little design delighters and animation is a great way of just making people smile and just reinforcing the kind of feeling that you want to put across. Now it that can be as comic-y as MailChimp but that might not be your brand. But you could do something sophisticated like Apple do on their website. They have a lot of really nice little animated touches that don’t make you laugh but kind of go – have that kind of slick professional feel to them that creates – that helps you remember their site and makes their site standout. So, yes.

Marcus Lillington:
I remember Paul Annett doing a talk on this years ago.

Paul Boag:
Yes. At South by Southwest.

Marcus Lillington:
Yes. And he started off by looking at logos which obviously isn’t animation but it’s – the same thing applies and he looked at the Toblerone logo which has got a bear in it…

Paul Boag:
Yeah.

Marcus Lillington:
…which you would never have noticed and it’s just like, oh, there is a bear. Isn’t that interesting? It’s that kind of oh I feel delighted by it. But the best one of all is the FedEx logo, which I suspect the majority of people who listen to this have seen it but if you haven’t, look for the arrow in the FedEx logo because it’s just so affirming in so many ways.

Paul Boag:
Well, I think the other one that I really like talking about arrows actually is Amazon. Have you ever noticed the Amazon logo? It’s absolutely brilliant because it’s from A to Z. The arrow goes from A to Z but also makes a smiley face.

Marcus Lillington:
I have seen the smiley face, I’ve seen the arrow but I have never connected the A to Z.

Paul Boag:
Yeah, they have everything from A to Z. Just brilliant. I love that kind of stuff.

Marcus Lillington:
Yeah.

Paul Boag:
But you can obviously do that with static graphics but you can also do those kinds of design delighters for animation as well. I will…

Marcus Lillington:
Yeah.

Paul Boag:
…you make a very good point about Paul Annett talk on this and I will see if I can dig it out and I’ll put a link in the show notes to that. Right, number seven.

Explaining complex concepts

Okay. Number seven is you can use animation to explain complex concepts. So it can be really challenging sometimes when you’ve got a complex product or a service or there is something you’re trying to explain to people. And a little animated sequence can often be a great way of achieving this. So sometimes complex concepts are explained using infographics but actually it is – I have actually seen infographics that are animated as well that are even kind of better and kind of explode things and things move around and stuff like that. Talking of exploding things I’ve also seen products which, as you interact with them kind of expand out so you can see inside of them and how they work inside. I think that’s really effective. And then obviously, there is little screencasts of different animated functionality within an application that you need to show off. So you can really get across quite complex ideas using animation.

If they say that one image is worth a thousand words, then an animation at 30 frames a second is even better.

Marcus Lillington:
Yes.

Paul Boag:
That sounds feasible, doesn’t it?

Marcus Lillington:
I think even just simply zooming in and out of things, which is an animation…

Paul Boag:
Yeah.

Marcus Lillington:
…can really help understand whatever it is you’re looking at.

Paul Boag:
That’s a really good point. Yeah, yeah. So these animations, they don’t need to be really complicated things, they can actually be incredibly simple just well considered little bits of animation can make a huge different to the user experience. Let’s do number eight.

Softening jarring transitions

This one I particularly like, it’s softening those jarring transitions, I love it when websites do this. So for example, I just happened to be earlier looking at the Apple Watch, not the iWatch, the Apple Watch on the app store. And if you go into some of the pages on that, you’ve got some beautiful – you’ve got a carousel obviously going through these beautiful images, right? Of these gorgeous watch…although I am not convinced it is that gorgeous, but anyway the way that they make it appear on the website convinces you of that.

But as you move through that carousel which is a very kind of standard thing, it doesn’t just flip from graphic to graphic, it fades from graphic to graphic.

Marcus Lillington:
It does.

Paul Boag:
And that just – it just softens that kind of jarring experience of jumping. The other one is – of that is where you click on an in-page link and instead of it jumping down the page, it just scrolls down the page nicely or page transitions or web page elements fade in and fade out. All of that kind of stuff just kind of creates this more professional feel and this – this more of a quality feel that I think is absolutely invaluable.

Marcus Lillington:
I can’t decide about the Apple Watch.

Paul Boag:
No, I can’t either.

Marcus Lillington:
What’s it going to do? Tell the time?

Paul Boag:
Well, I know exactly what it’s going to do. I just can’t – I can’t decide whether I actually think it’s attractive or big and thick and ugly.

Marcus Lillington:
Yeah, it’s one of those that you’ve got to try it on.

Paul Boag:
Yeah, you are right. It’s just too personal a thing to be able to tell. I do like the – see again they’re cunning buggers aren’t they? I swear they know, right that…

Marcus Lillington:
Excuse me.

Paul Boag:
…I was fine about – it has a notification facility on it, the Apple Watch, right? So the idea that it will tell you that you’ve received a tweet and what the tweet is or whatever else. I was thinking well what’s the point of that I can just pull my phone out of my pocket. But now, I have got the iPhone 6 Plus. It’s just that little bit bigger, and a little bit more – I swear they’ve made it more awkward to get out of your pocket in order to get you to buy the Apple Watch.

Marcus Lillington:
See I still – I would much prefer it if it worked without the phone on your person.

Paul Boag:
I think some of it does.

Marcus Lillington:
Right.

Paul Boag:
But we don’t know how much. And that’s the annoying thing about it. So, yeah, I am unsure. I do like the kind of the health monitoring stuff maybe, but it doesn’t monitor sleep and I like to know how little sleep I’ve managed to get.

Marcus Lillington:
So you can worry about it and get less sleep again.

Paul Boag:
Yeah, exactly, yeah. The battery life puts me off for a little bit. So I don’t know. Mixed feelings about it. Don’t know whether I’m going to buy it. Are you going to buy it?

Marcus Lillington:
I don’t know. I’ll try…

Paul Boag:
No, you won’t buy it.

Marcus Lillington:
Got to try it on first.

Paul Boag:
You’ve got to try it on.

Marcus Lillington:
If I try it on and think it looks nice then I might.

Paul Boag:
Okay. Alright. Well, let’s move on to number nine.

Showing progress

Okay. So number nine is to show progress. I’ve really got very little to say on this because it’s probably the most obvious form of animation is the progress bar.

Marcus Lillington:
Yes.

Paul Boag:
So…

Marcus Lillington:
But I do prefer a progress bar to a spinner. And spinners seem to be the thing these days.

Paul Boag:
Spinner is we bloody don’t have a clue how long this will take.

Marcus Lillington:
Yeah.

Paul Boag:
And also you know damn well they’ve put an animated GIF in there. So the page could’ve absolutely hung and the animation will still spin.

Marcus Lillington:
It’s still spinning, yeah.

Paul Boag:
So in my mind, that is not a progress bar, that is just a useless pointless graphic. I am talking here about either a progress bar that does some attempt to estimate how long the action is going to take or alternatively something that is just going to indicate it is really still working, the page has not hung, it has not died, it has not broken.

But I think if you use animation in that way, it can be really useful. You still there?

Marcus Lillington:
Yep. Sorry, looking up jokes.

Paul Boag:
See, every time I catch you…

Marcus Lillington:
Oh, no. I thought I’d got away with that one.

Paul Boag:
No. We’ll move on to number ten.

Okay, Marcus, so what’s number ten?

Providing familiarity

Marcus Lillington:
Number ten is provide familiarity.

Paul Boag:
Very good. You managed to flip away from your jokes back to that very quickly.

Marcus Lillington:
I have two screens up.

Paul Boag:
You cheat. Yes, so number ten is provide familiarity. So this is the fact that animation can help make something feel intuitive because you’ve seen that animation or experienced that animation in other environments. So the most kind of obvious version of this is the page turn. And that doesn’t need to be a literal curling of the page, but if you, for example, use flip book, the iOS app, then when you first load it, it shows you that you can flip pages by just kind of just tilting the edge of the page a little bit just to kind of give an indication of some functionality. And I think things like that work really well.

So another example of that is when a page loads, maybe the navigation is expanded, but then immediately contracts once the page has loaded, just so you can see oh look there’s navigation hidden there so – especially for highlighting hidden or less prominent elements of the page, things like this can work really well. See really that’s all I wanted to say about animation. As you can see, it’s become a kind of integral part of the design process but here’s the interesting thing.

Is this where it becomes problematic when you talk about paying for an agency to do design work for you. You cannot just judge a design – how much somebody is charging you for design for the same project, right, because animation is a great example of this. One person might be including these kinds of beautiful animated details and allowing time to do this kind of stuff and another person might not.

So it’s very, very difficult to compare quotes over design because you don’t know how much attention to detail someone is going to put into the design process based purely on a number, a monetary number, you need to know the number of man hours that they’re setting aside to work on a design.

Marcus Lillington:
Yeah. My job is…

Paul Boag:
Because it is so crucial.

Marcus Lillington:
It is. But, yeah, you’re just underlining how hard it is for me, Paul.

Paul Boag:
I know, it must be – your job is so terrible, Marcus. I have got so much sympathy for you.

Marcus Lillington:
You don’t sound like you have.

Paul Boag:
Do I not?

Marcus Lillington:
No.

Paul Boag:
I wonder why. So there we go. That’s our 10 ways animation can help make your site better. Hopefully, you’ve kind of – we’ve seen there how – yeah, how the details of design make all the world of difference. Marcus, do you have a joke for us?

Marcus Lillington:
I do, it’s really bad. But it made me giggle.

Paul Boag:
Go on then.

Marcus Lillington:
Why shouldn’t you eat clowns?

Paul Boag:
The premise – I reject the premise of the question, what do you mean why shouldn’t you eat clowns? Oh go on. Why shouldn’t you eat clowns?

Marcus Lillington:
Why shouldn’t you eat clowns?

Paul Boag:
Why not?

Marcus Lillington:
Because they taste funny.

Paul Boag:
That’s not a joke. That is just an embarrassment. Where did you get that one?

Marcus Lillington:
I found – I can’t remember, one of my friends on Facebook, I think.

Paul Boag:
Right. So it wasn’t a listener to this show.

Marcus Lillington:
No, it wasn’t.

Paul Boag:
Because if it was, I would go out of my way to try and block them from ever listening to this show ever, ever again. That is disgraceful. Dear listener, I wish to apologize for the previous joke. Management in no way associate themselves with this. Honestly.

Alright, then, Marcus, so that wraps up this week’s show.

Marcus Lillington:
Yes.

Paul Boag:
Shall we do again next week?

Marcus Lillington:
Yes, let’s do that.

Paul Boag:
Alright then, talk to you then. Bye.

Marcus Lillington:
Cheers. Bye.

Boagworks

Boagworld