Episode 1: Look out motion, your time has come!
In this first ever episode Cennydd and Val set the stage for this series and discuss why motion is an important tool that designers need to pay attention to.
Welcome to the first episode of Motion and Meaning; a little podcast about motion for digital designers. I’m Val Head and I’m an independent designer here in Pittsburgh. I run my own little shop doing a lot of web design things. I also teach some interface animation for the web workshops and talk a lot about web animation. With me here is Cennydd.
Hi; and I'm Cennydd Bowles. I’m a digital product designer based in London. Until fairly recently I was Design Manager at Twitter and among many projects that I did at Twitter was helping some of Twitter's motion experts with cross-platform motion design standards so I thought this would hopefully be an opportunity for me to learn a bit more and to share some of the things that I learned at Twitter as well. It kind of really put the hook in me, I suppose, as a topic. So, what we're trying to do with this podcast is: first, we want to keep it kind of short and punchy. I think we want to be a podcast that doesn't overstay our welcome. I think we’re aiming maybe about ten episodes, something like that.
Something like that.
Yeah, and hopefully each episode itself will be relatively short, maybe under half an hour each, so you have a chance to listen to it on your commute or whatever it might be. Today, we're going to talk about why motion design really is becoming a key skill; why its time has come, if you like, to invest in it properly and later in the series we're going to talk about some broader angles; for instance, Disney's famous or potentially infamous Twelve Principles of Animation and which ones are more or less relevant to our work today. We're also going to talk about some common mistakes you can make: how to avoid them when you're beginning out with motion design. We're going to look at prototyping tools because as we know, there's a wide variety of those have hit the market recently; how you can accommodate those into your workflow and then maybe a bit of a look into some of the science around motion as well: the psychology and the physics or the mechanics and maybe kind of a deeper dive into something like easing, timing and spacing and speed, really getting into kind of the details so you can be sure to try and make motion the best it can be in the work you do. And I think we'll also have a look at accessibility as part of this as well, because it's an important part of that design approach.
So, hopefully what we’ll find is that we’ll cover a range of topics and I think we'll also do them from a couple of different perspectives too.
Yeah, definitely. As you can tell from our intros, we’re kind of coming from two different places; I mean, there's a lot of overlap but my perspective is more coming from the idea of web design and web animation and I'm kind of on a not-so-secret mission to get web designers to think of motion as a design tool again. Animation on the web has kind of a sketchy history thanks to Skip Intro, banner ads and all that really crappy, horrible stuff and I would like to see us kind of re-define what that is, especially now that we have these better tools, we can do motion in CSS, we can actually use SVG now, browsers are faster at all of the things that make motion happen: it's a perfect time to really start using this as a design tool and kind of bring it back in a better way than it ever was before.
Right, absolutely. And I guess my perspective then is maybe I take more of a kind of design theory angle; I'm very keen on design theory and understanding why something is useful, why it can help users. I probably will take maybe a slightly broader perspective as well in that I’m very interested in native mobile product as well, so certainly web stuff, but also how will that work on Android, iOS and so on. And then particularly for me, having a bit of experience in large companies, how can you try and get these things moving within your own company? What are some of the pitfalls; how can you try and convince others that this is something you need to pay attention to? So, hopefully, those two different perspectives will shed some interesting light on the topic.
Yeah, and I think workflow is a big thing for web folks too.
Just how you get that stuff into your process and discuss it in a way that's going to be useful for the end product. It’s a tough question; we're all kind of set in the ways that we work already, right? Like, how do you… it's one extra thing to think about, but it doesn't have to be.
Absolutely. So, I guess our intention behind this is really to try and drive the conversation forward; to help people feel more confident to experiment with motion in their own products and then also to act as kind of a catalyst for people to discuss and explore ideas of their own.
Yeah, definitely, if we can get people talking about this more or just thinking about some of the stuff we're thinking about or even think of things that we should be thinking about, which is maybe the more exciting part! What have we not thought of? And we definitely want to get you involved, everyone listening as well: we are @motionmeaning on Twitter and we hope you will tweet us about questions or comments and things like that and I guess we should mention before we get too far that all of our show notes and any links that we mention will be at motionandmeaning.io. We will save all the stuff since it's kind of impossible to write it down as we say it!
And that's one of the things I think about talking about motion is sometimes you need to see the thing, so we recommend certainly if you're interested in some of the things we're talking about, do visit that site, motionandmeaning.io and you'll be able to play with some of the examples or read some of the articles or papers or demos and so on that we link to there as well; I think that's a really important part of that aspect.
So, I guess let’s move on and talk about the meat of this episode which is this principle of why now? Why is it the right time for motion and then, I guess, how can you get started as well? Do you have any thoughts?
Yeah, definitely. I kind of hinted at it when we were talking about perspective but I feel like motion has kind of gotten off to a bad start; in the early days we had all sorts of people like, I think, even Jacob Nielsen was one of the people, well of course he was, who was like: oh, it's a terrible idea, don’t do it, it's horrible for UX, it’s just like…you know, just talking about all the terrible things that motion did and Flash kind of embodied all of the terrible stuff and got blamed for all the bad decisions and Skip Intros and all these really bad ideas that kind of got blamed on the tool and we've just decided, oh, animation for the web is a horrible thing: don't even bother. And of course, things have changed a lot since then. People interact with the things that we make both on the web and as apps in a totally different way now and even Jakob Nielsen himself has come around; I think it was last year, he wrote an article, or not him, I’m sure it wasn't just him, but his company published an article that actually suggested animation was good for usability, so if even the Nielsen Group is coming around, maybe the rest of us should start thinking about this too.
Right. You're absolutely right: it did have a bad start and I remember some of those articles saying it's 99% bad and I think a lot of our experiences of animation with motion on the web particularly was pretty much like banner ads or something, just distracting from content. In that instance, yeah, absolutely right: motion’s not going to help you. But I think as we're moving into a different era, we're moving away from this kind of, it's not just a document page to page model any more a lot of the time, web and native mobile even; it's more about transitions between states; it’s communicating what happens, what goes where and you've clicked this and what's the effect? What's the feedback that it's caused within your system? And it’s very hard to communicate that without motion, to be honest, in some instances. So it means that kind of maturity is there.
It is, it is. And we're doing more complicated things; it’s not just like link from this big text document to this big text document and I think apps have had a big, mobile apps and everything have a had a big influence on that, because those you’re usually trying to interact with actual data or do something more than just read and the web is that way too but I feel like we kind of identify that on our phones and in apps more so than on the web, whether that's fair or not, I don’t know.
I wonder if that's anything to do with the advent of touch as well? I think that maybe that helps significantly because you’ve got this mental model that you’re setting up, that you're directly manipulating content; you’re moving things. There's that tactility; you actually touch the thing. And of course, it then has to be able to respond; if it's this static thing, then that really isn't convincing, it doesn't have those wonderful fluid properties that you’re trying to get across, so I think it’s only natural that systems respond in that kind of tactile way as well, so that probably pushes us forward too.
Oh, definitely. If your iPhone, the only thing it could do was act like you were pressing a button constantly and nothing else…
Right, then you might as well just have bought a Blackberry or something!
It would not have taken off. Or taken off about as well as Blackberry! Oh, so bad!
But we are in a good spot for this. It’s like we have the tools that we can do this with, even for apps on iOS and Android; there's tools on there for creating motion. Apple, I know, specifically has done a lot for providing that. I'm not too familiar with Android but I assume with material design, if they don't have it, they are getting to it.
I hope so!
So the tools are there to do this and we have an audience I think for the most part that is, like you said, looking to have better interactions with all of these touch-screens in our pockets, so we’re at a really good point to actually start using this, because all the pieces are there; we just need to put it together.
And the tools as well, it’s not just the engineering tools, it's not just the development tools: it’s also the prototyping tools and there's just been such a huge uprising in the number of tools available and we'll certainly I think, probably dedicate an episode to this at some point further on, right?
Possibly more than one, there's so many!
It could take forever! But that means that you not only have the capability to actually execute on these things; you can deliver these designs through code but you can also spend more time understanding what's going to work and what isn’t, even if you’re not hugely code-literate as a designer: the tools are out there to help you play around with this kind of stuff and then start that conversation at least with your engineers.
Yeah, there’s not that big wall or barrier to entry that you’re like, you have to learn how to code this all from scratch yourself or you can’t even explore it, which is a huge help because if that's what you had to do to even try this out, no one would do it!
Right. I know I wouldn’t. I know a bit of code but probably not to that kind of level; I’m glad there are tools and so on to help; it makes it a bit more accessible, doesn’t it?
Yeah, definitely. So, since we just told everyone they should be getting started on this, how do we recommend they get started? What’s the first step people should take?
I’m obviously going to come at this from a design point of view, so I’m saying: designers, how are you going to get involved? So I’m going to say, prototyping. I was at a prototyping meet-up a couple of weeks ago in Berlin actually.
Oh wow, there's such thing? I had no idea: that’s awesome!
Yeah, and one of the slides, the one that stuck home in my head said, essentially “What we consider prototyping today, we’ll just consider design tomorrow.” Which was kind of an interesting way of looking at it and saying that really, prototyping is significantly on the rise, to the extent that its becoming pretty much an expected skill among product designers working in this kind of sphere. But it doesn't need to be wildly difficult: you don’t need to invest time in learning difficult tools and so on. Previously, it was maybe more that way; you had to be a bit of an after-effect expect or something like that, but now, even something like Keynote, people are starting to really realise how versatile it can be; the opportunity to get stuff in and do magic moves and transitions and so on. And I think even just doing that, getting out of some of your static tools, which can be useful for some things, but getting into something even as simple as Keynote helps you play around and I think you've got to start playing around with this stuff, haven't you? You can’t do it all from theory and reading, and even listening to podcasts! You’ve got to actually get your hands and start moving things around a screen as well, right?
But you should still totally listen to the podcast! It’s true; you can talk about this stuff and talk through it either with just yourself or with your team but really quickly, you get to the point where you need to make something to talk about or those conversations just aren’t going to be meaningful any more; it’s going to become too theoretical; everyone's got their own idea, no one knows if they’re thinking about the same thing. It could become very messy really fast.
Yes. GDS in the UK, the Government Digital Service, they have a number of internal design principles; I don’t know if these are their public ones as well, but I know they’re very fond of saying, “show the thing”, which I quite like; it’s an incentive to get in that kind of sphere and to say well yeah, sure, here’s the thing, here's how it moves, here’s how it responds: what's the interaction principles it’s using? I quite like that; that's a good principle I think to bring to motion.
I like it too. That is a good one. We should all steal that one from them!
Show the thing, yeah!
I spent a bit of time, a couple of months, trying to learn a bit more about the CSS angle for this because again, I was interested in it from a design perspective and a prototyping perspective and I thought, well, I need to know how it's going to be made in code as well. I was surprised how accessible it was. I was expecting more stress and I remember the days when this was a bit more in its infancy and you had all these vendor prefixed properties and all this sort of stuff and I was thinking, oh, right, I’ve got to dive into those, but no, it’s cleaned up a lot now; it’s a lot more standardised.
Yeah, a lot of the prefixes have gone away and are going away. Yay! And then also with tools like Codepen, you can just go online and play with it, check, they have, I think, prefix free on by default, so you can even just forget about them and it'll do it for you, which is super-nice. And to do a total self-promotional plug, if you want to learn some basics of CSS animation, I wrote a CSS animation pocket-guide that is super-short and will tell you all the stuff you need to know if you're into that kind of thing. And I guess my favourite way of getting people to try to, what do you make with the CSS when you try to get into it? I like to encourage people to find an interaction or a transition they really like, screen record it and watch it back really slow and pick up the little pieces and see if you can create those individual pieces, because some of these interactions, I love it when they seem very complex and then you look at them closely and you realise it's a very simple bit of motion behind them and some of them, you don't realise how much is moving. You think only one thing is moving, but there’s all this supporting action around it and I think that stuff is really fun to kind of pick through visually and see what designers have chosen to do and how they made that work.
Yeah, totally. I think slowing something down really is the best way to understand the nuance that’s gone into it a transition or whatever it is, because it’s blink and you’ll miss it otherwise, so it’s the only way really to go about it.
It’s like your brain sees all this stuff and you don't even know!
Right, certainly. Something that’s interesting for me as well is recognising that we’re not the first people to come to animation; there are masters of this art.
We didn’t invent this?
No, I think the tech industry sometimes would like to think it invents everything but we're on pre-trodden ground here, so I’m really interested in reading about the topic as well and seeing what people who’ve been researching it and playing with it for decades, what they’ve come up with, so I'm sure like me, you read a fair bit about this well, so is there anything that you’ve read recently you think might be valuable to our listeners?
I’ve been reading some possibly boring-sounding stuff recently, I've been doing a lot of research for some articles I’m writing and I've been reading some academic White Papers on animation research, because there are people in PhDs and Masters programmes who study this stuff in labs and it’s really interesting what they end up writing about it, even though it’s incredibly academic! Getting through it’s rough sometimes, but the findings are interesting. The one I’ve been reading about recently is does animation in user interfaces actually improve decision-making? And I’ve been reading another one where the question they're looking to answer is, does animation help people build mental models of spatial information, so it’s very specific questions…
What was the answer to those questions?
Mostly the answer is yes, but a bunch of: yes, but these following list of things must be there as well, or it helps under certain circumstances and not others. For one of these studies, they actually had people looking at a point cloud and were testing what sort of easing made it easier for people to follow certain points in that point cloud. They get so specific, but it’s really interesting, so I’ll link up those two papers, I thought they were particularly interesting. And there's an endless rabbit-hole of papers you can get into, because they all cite other papers and it’s just endless!
Right, yeah: academics, they work in different ways, don't they?
Another one that’s a little bit of an easier read, perhaps, Ryan Brownhill recently posted an article on Medium, I think it was, Crafting Easing Curves for UI which I really liked; gets a little bit into the mechanics of how easing curves for CSS work, like how you make cubic beziers, the math behind it, mostly focusing on what the heck would you use this for as a designer? And I think he puts a really great overview of that.
Yeah, I read that one as well, it's a good article; I definitely recommend it too.
We'll link up a second article on cubic beziers that is all the hardcore information; every detail, if you wanted to know everything about cubic beziers to pass some kind of quiz show or pub quiz night, this Cooper article is the one that's got it all for you. There can’t be a thing about bezier curves that is not in this, of cubic beziers, I mean.
That’s got to be the world's most boring pub quiz!
I don’t know, maybe I go to some boring pubs!
I’d probably still go to it. I’d actually be kind of interested in that in a kind of nerdy way. That Ryan Brownhill one; yeah, you’re right. I read that one as well. It’s definitely an interesting piece. It’s detailed but detailed enough; it doesn't go way too far. There’s another one that it reminds me of which is another Medium piece by Mike Rundle who's an iOS developer and designer and I think he called it something like Your Spring Animations are Bad and it’s probably Apple’s Fault.
I like that title!
And this one is, yeah, it’s a great title, isn’t it? This one is quite a detailed dive into essentially it's more of a code piece, but talking about why Apple’s out of the box animations are not that great. We see all these bad springs, these under-damped springs all over the place; they're pretty much mandatory in 2015 and he's suggesting a more intelligent way to approach spring animations and different libraries and so on, but it goes into quite a bit of the maths of damped harmonic oscillators and all these exciting things that maybe we’ll talk about later in the series.
I hope so: they sound fun!
Yeah, I’m looking forward to nerding out about that. But also then it suggests some practical stuff for how you can improve it from a code perspective as well and not just rely on these fairly mediocre ones out the box. And then for me, something I've been trying to do is again, recognising that we are part of this wider history of animation and motion is to read some of the classic literature and there are two books that I think come up a ton here. One is Disney's Illusion of Life book which you've seen mentioned, no doubt, in various blogposts and so on, if you're interested in the topic. I think we’ll talk about those twelve principles a bit later on, but I want to talk about The Animator's Survival Kit today as well, which is a book by Richard Williams and he was the lead animator on Who Framed Roger Rabbit? And it’s a classic animation book and it’s for a certain era where really it wasn't heavily computerised and so it was much more about timing sheets and keyframes…
Which look amazing, by the way, if you ever have seen them.
Right, absolutely, and looking in to the detail and just the superb kind of fidelity of these designs and these drawings and so on, and it’s astonishing. But then it also generalises and talk about how do you convey emotion through, say, a character's walk? How does a bouncing ball collide and stretch and so on, when it hits the ground, and these are really important things, I think, to understand and I feel my understanding of animation emotion has grown significantly, just from reading that material, even if I’m not doing any self-shaded characters for a major motion picture; I understand some of the theory and some of the principles so much more than I did.
Definitely. The things that they point out when you're reading that book; The Animator's Survival Kit are amazing. But you're just reading about the things that he points out you're like, oh, yeah! Suddenly you start realising those are the more important points of motion, but if you’re not going to be drawing walk cycles, which I doubt any of us would be doing. You never know!
That looks a bit too much like hard work! I’ll animate some circles and buttons and page wipes and stuff.
Yes, but there’s a lot of parallels there, even when what we are technically animating is very basic shapes compared to the crazy things these guys have been drawing.
Right. I guess we should spend a bit of time just talking about who else is coming up with interesting stuff in this field as well, because we are two people, part of a far larger movement, I think.
So, who would you recommend that listeners check out to find out a bit more about this?
Yeah, I guess we’ll go with Twitter itself, because that’s where everyone listens to other people, it’s Twitter, right? That’s the only thing there is!
Yeah, I’m happy with that!
So, a couple of people that I find really interesting to follow, Pasquale d'Silva who’s name I'm probably terribly mis-pronouncing, but sorry! He talks a lot about general motion; I think he’s actually trained as a traditional animator and he does a lot of iOS related animation work; there’s a specific app he works on, so he points out some really interesting points in articles, and I like seeing what he's talking about. If you’re into SVG animation topics of any kind, Sara Souieden has so many articles about what on earth is going on in that SVG because, holy crap, is it a strange other world of things in there. But so much power and just really impressive support for SVG these days; it’s something if you do web animation, you should be looking at, and Sara has all the stuff you need to sound like you know what you're doing!
That’s good; that’s what we’re all looking for! Pasquale was someone I’ve been following for a while and it was actually him who helped me realise that I needed to improve my general skills, rather than just diving straight into the tools, he started talking about yeah, you can do that, but read some of the classic literature; try and understand the medium, which was really good advice, so I thank him for putting me on that track as well. IÆm going to mention a couple of other people: Mike Rundle I already mentioned, who wrote that Spring piece; he’s an iOS designer who codes, I think you’d call him: he’s kind of a bit of a hybrid, he does both, but he’s very knowledgeable, particularly about iOS, as you’d imagine, but animation patterns and so on, it just seems to be a sort of focus for him and he’s @flyosity on Twitter. Again, we’ll include links to these folks in the show notes as well.
Yeah, you don’t have to try to spell them from our….
Right, exactly! And the other person I want to mention is Rachel Nabors, who’s very knowledgeable about web animation, some of the deeper code angles and so on, but she's also, I believe, a trained cartoonist and she has a bit of history in that as well, so she runs a practical cartooning course and writes a ton about this stuff, so I think Rachel has a really good amount to offer as well, so I recommend following her. She’s @rachelnabors on Twitter.
Definitely, yeah. So, I guess that kind of brings to the end of the first show. Yeah, that basically wraps up Episode 1. So, join us for Episode 2 which is the next episode, where we’ll be talking about Disney's classic Twelve Principles of Animation and looking at which ones are or are not relevant to us as people working in the digital area. So, we’ll see you then. Thanks for listening!
(You’ve been listening to Episode 1 of Motion and Meaning, with Val Head and Cennydd Bowles. You can find out more about the show at motionandmeaning.io and we’d love to hear your feedback on Twitter as well. We’re @motionmeaning there. See you again soon.)
Transcribed by Alison