Episode 4: Playing Director with choreography
No UI animation acts alone. All the bits of motion across your product or site add up to create a bigger picture. Keeping that in mind means thinking about choreography and how everything works together. In this episode we discuss what choreography means in our digital realm while using a lot of words that start with C: choreography, consistency, and cohesiveness.
Episode Links
Transcript
Welcome to Episode 4 of Motion & Meaning; a little podcast about motion for digital designers. I'm Cennydd Bowles: I'm a digital product designer based in London.
And I'm Val Head: I'm an independent designer based in Pittsburgh. In our last episode, we were talking about animation principles that are important for us as digital designers, and today we're going to get a little bit more specific and talk about the idea of choreography in UI animation. So, the best way to start with this is probably to ask the question, what does choreography mean when it comes to animation in digital design? What are we actually talking about?
mm. For me, I'm thinking of multiple elements here: I think by definition, choreography, I don't know if you can apply it to a single element; it really is the context multiple elements: how they move compared to each other, what's the context of motion against other elements and how do you perceive them as a larger whole? I always come back to the original definition of choreography in the dance sense: I'm certainly not an expert in it but I don't know if you can choreograph a single dancer. You can certainly a chorus-line or multiple actors in a scene so I think I see a very similar metaphor being used here.
Yeah, I like to think of it the same way, almost like you're being the Director: someone having that big picture idea of what's happening and how things should move so they feel like they're cohesive and working together in some way, not just random dancers on the stage listening to iPods or something. I'm not sure if that works! I'm imaging a dance like that, it's going to be bad!
So, is it the case then that this is really about seeing motion as a holistic design approach? Seeing it as not just the tactics of yeah, this thing eases in and out; it's more about the strategy, it's more about why are we doing this? What are we trying to imply? What are we trying to communicate when it comes to motion and then trying to bring all those things together on a higher and more strategic level.
I think that's it very much. I think of it also as bringing in the Art Direction part to motion of someone or whoever, if you're working on your own, need to be thinking of that bigger picture while you're also looking at how will this particular piece ease in or ease out, you also have to think of how it fits in with all the other things that are moving, so it's really a lot of that big picture direction.
Uh-huh, sure, yeah. I remember the Material Design Guidelines, Google's Material Design Guidelines for Android, talk about choreography quite a lot, don't they?
They do.
They talk about things moving in a recognisable manner, not just higgledy-piggledy all over the place; I suppose that's the kind of thing that I recognise when I talk about choreography, I think they really made some good steps in those Guidelines.
Yeah, it was nice to see that called out specifically in the Material Design Guidelines and they even have a really great example, which we will absolutely link to, of these little dots coming in as thumbnails and showing them two different ways of coming in, in a systematic, related way where they use similar motion which proves or reinforces they're related and then this other way where they come in from all the directions and it's like chaos and nonsense you're like, OK, that's perfect: I get it! It was a really great two-second demonstration of it.
think that's one of the really nice things about the Material Design Guidelines when it comes to animation is they give counter-examples: they give examples of what not to do, so if anyone is listening and hasn't spent some time diving into those, do, because it very quickly explains what they mean. And I've seen those poor examples in the flesh; I've seen them in practice.it's nice to see them held up and say, well maybe this isn't actually a good way to practice.
You see that example of what not to do and you're like, you know what? I've seen that a million times. I've actually honestly probably done it too, so I've learned better since then, but it's nice to see both the good and the bad because sometimes it's easier to tell what they're talking about when they show what they're not talking about.
Right, exactly. It's the kind of thing I see in content strategy, content guidelines: we are this; we are not this. The counter-example really helps to sharpen and clarify.
It's good to have both sides.
Absolutely, you're absolutely right. So, I'm thinking about choreography as a topic and if it is this holistic, slightly more abstract thing than just looking at individual elements moving around, it strikes me that's going to be more work. You're going to have to be thoughtful and considering the entirety of your product experience, not just elements moving in on screen at once but also elements moving how motion happens across the entirety of your app, so that seems like more work, so what do you think people get out of it? What's the benefit? Why bother with this kind of approach?
Well, I think the consistency you get over the whole experience; when someone's using your app or your site or whatever you're making and the motion has a consistent feel to it or a consistent concept to it, you get that as the user; it feels more consistent, it feels more like you're in a certain experience and there's not these weird outlying things where you're like, wait: what just happened? Am I in the same app? Am I on the same site? It helps avoid those questions and just feel more like you're in one place. It could also, if you do it really well and if you're kinda lucky, make your app feel different than competing apps or competing sites; that might be the big goal to try to hit is to make yours feel a very specific way and very different from others.
Right, and I think that then hits on what we were talking about in the previous Episode 3 about this idea of a signature interaction, a signature feel that could only be your app, only be your brand and so on. When we talk about consistency, I wonder if we could say bluntly, it's even just an extension of Steve Krug's idea of "Don't make me think". If you have a ton of transitions that all happen in a particular way and then you have a couple of others that buck that trend that don't behave in a similar way then it almost raises this red flag: you notice it too much; why is that different? What's happened there? What have I done to cause that?
Did I break it?
Yeah….
No. Just, well I was going to say just bad design decision, but that's not really true: sometimes you want that thing to stand out, but if you've done it intentionally that's very different than just having forgotten what you transitioned in with every other time, you're like, oh this one, I'll make it come from the bottom, when everything else came from the left: whatever. If you're like, this is an error message, you actually did something wrong: pay attention, that's kind of a good excuse to break from it or a good reason to break from it.
Yeah, you're right; that act of having motion happen in a different way or transition in a different direction and so on that actually breaks the flow, that should attract your attention in some circumstances. One other thing that comes to mind here is, if it is an extension of this idea of consistency across an app, I want to just interject an angle that I have here which is that I tend not to really like it when we talk about consistency, or consistence or whatever you might call it, within an app. I prefer the idea of coherence. Now, that may sound like I'm just jumping around and being really antsy about particular terminology but I think there's a subtle difference, because consistency for me can be a little bit too constraining.
Yeah, like you're not meaning copy and paste the exact same motion numbers on everything. Consistency kind of suggests that, I guess.
Because doesn't work. I think so; this is why I'm not too keen on the framing of consistency in it, so I always try and avoid it when I'm talking with colleagues and engineers and so on; I prefer the idea of coherence, so, do these set of, be they visual designs, be they motion designs, sound or whatever they are, do they come together to form a larger whole? Do they feel like they're from the same family rather than simple repeating of templates? So I think maybe that approach feels more comfortable for me, the idea of coherence in our motion design, in our choreography, rather than just pure consistency.
Yeah, I like that term better because it is really, you're not trying to be exactly the same, because that would be boring; that would be really boring, but you want everything to feel like it's related, like if you think if you have siblings you probably move in very similar ways, but you are two different people most of the time, so you get a lot of differences but also a lot of similarities and if they can feel like all your different motions are kind of related, literally in a family sense, that would be, I think that's the goal.
I think you're right. And I think if you do that well, you can actually introduce that little bit more complexity; maybe not complexity, but more sophistication in some of the motion that you have in your app. If you have, say, ten things you need to animate at once; that's a lot of things, but it could happen…
It's also not a lot of things…
…that need to move, you need some over-arching principle there; you need to understand, take the decision, which ones should be perceived as similar? Which ones should be grouped together and therefore have similar motion patterns? Which ones should move differently because they need to attract attention or because we've got a different spatial metaphor they'll be using and so on. So, I think it allows you to handle more motion in a more intelligent way. If you just try and do each individual thing: well, that one should move like this and this one should move like this, you're going to fail; it's going to be a heck of a lot of work. You almost have, not a template, but an over-arching set of patterns if you like that you can say, well, this should behave with motion pattern A and these are similar entities so let's try and get them all moving in the same way.
You've got something to start from and to work with instead of every single view you're designing you're like, well, starting from scratch and then just re-doing the same work over and over. So it's more work but also saves you work.
Yes, I think it is. Is there a case then that people should be building up like style guides of this stuff? Pattern libraries of animation and saying, OK, here's what a fade transition should look like for this type of element; here's what a bounce should look like for this type of element and so on.
I think so. I definitely think motion should be in style guides and it should be something…your style guides are meant as a way to define some of your design rules and your design language and motion should definitely be a part of that. We're definitely seeing that more and more in some of these public documentation in style guides; IBM just put out one recently for Watson that I know has motion in it and I like seeing those in there, I think it's important to include it.
I haven't seen that many examples to be honest, in the wild; I've seen more companies releasing visual style guides which is great; I've seen less on the motion side. I'm hopefully not breaking any huge confidentiality issues here by saying that we were looking at things like that at Twitter and there was a project I was involved in to try and spur that one. But since I'm no longer there, I don't know how far the company's got with that.
Like, now he's gone, ditch that idea!
Well, I was just helping to steer the ship; there were more talented motion designers than myself who were actually doing all the hard work there, so I hope they've managed to make some good progress there. But I'd love to see some more examples; maybe if our listeners have seen that kind of thing in the wild, could you let us know? Tag as on Twitter @MotionMeaning and we'd love to take a look and maybe refer to them in future episodes, I think.
Definitely, definitely. I think maybe an entire episode on how to document this stuff would be awesome. I have lots of thoughts on how it should go but I don't want to get into it now! Side-track: not a good idea! But, speaking of work and actually making this stuff, how should designers incorporate choreography into their work? What kind of things should we be looking to do, in a more practical sense of how do we actually create this, get this choreography going and this cohesiveness in our work?
For me, I think a lot of it is really about identifying the function of individual elements, saying OK, is this something that has to be directly noticeable? Is it primary content, if you like, a primary functionality? Or is it purely supporting action, is it purely a supporting or even a decorative element and so on. And then it's about prioritising and grouping those things and saying, OK, these things really are navigation aids rather than primary functionality, therefore we should treat them in a certain way with motion: we should have animations that don't detract too much from the primary focus on the screen and so on and I think once you do some of that grouping and that prioritisation, maybe that becomes a bit easier because you end up with certain classes of object and you learn that those should all be treated similarly if they have similar function, they should have similar motion as well, even if they're different shapes, even if they're different sizes and so on. I also think you have to spend some time looking at your spatial metaphors…
Oh yeah, you want to be consistent with those or they get really bad!
Yeah, absolutely. And that, you do want to be consistent rather than coherent I think because you can't say, it's left-ish; it needs to be left.
It comes from sort of behind-ish! Don't do that!
Right. And I see this more and more on small screen devices actually. I've owned a few smart-watches and particularly the Samsung Gear S has a ton of spatial metaphor in it; because the screen's so small, you can't provide navigational user interface; you really have to say, notifications stack up mentally above the screen, your contacts stack to the left of the screen, or whatever it was on that. And you have to think: what am I trying to communicate? What do I want the user to understand in terms of spatial metaphor and what is where, and then you need to make sure that things are coming in from the right place. I think I liken it to actors on the stage: I did a bit of acting at school and so on and I know some basics that if you go off stage left, you should probably come back on from that direction, otherwise how the hell did you get round to the other side? Unless the scene's moved and so on.
Yeah, right and I guess a lot of other times in physical acting space it's pretty difficult to get from stage left to stage right without actually getting back on stage, but it is really similar when you start thinking of these things; I know I have a terrible habit of giving personalities and names to all of the things that I'm dealing with in design but even if you don't have that terrible habit, thinking of these things as almost independent beings or creatures and having personalities and taking up physical space even though it's not really physical space because it's on a screen; a lot of those rules just become easier. Oh well, it left over to the left so it's going to have to come back on from there because that must be where it still is. And it's interesting to see the watches and smaller and smaller screens like that because, like you said, it just becomes so important; there is no other option except for that spatial layering and I think we should take some of that into bigger screens as well, because I think it's very helpful for creating just the spatial relationship and mental model for people to find where things were or are, even if they can't see them.
Right, absolutely. There's something else actually that really comes to mind here, which is I want to caveat what I said about identifying when things have a similar functionality, they should have similar motion: I think there's a pitfall there. I've done this myself, which is that you think timing is the thing that should be unified and that actually doesn't work, because if you have a very small element, like a drop-down menu or something like that, that collapses and you say, well it should be roughly 200 milliseconds' duration and there may be an ease in or out or both, but 200 milliseconds feels about right. If you then have an entire page close motion, it's very tempting to say well, we know that closes should take 200 milliseconds; fantastic, there you go. But the problem is, that feels so much faster because, well, it feels faster but it also feels slower…I almost contradict myself. But it feels like there's a heck of a lot of motion going on because the element is very large and so the number of pixels that it's moving by every split second, every hundred milliseconds is a significantly higher number. So, it feels fast but it still feels like there's a whole ton of thing moving. And that's what I mean…
Yeah, it almost feels broken in a way.
Yeah, that's right, that's what I mean when I say it feels slow and fast at the same time, if you like, it's got a huge amount more momentum in the physical sense than just this drop-down. So, what I've always tried to do is to at least get some comparable velocity there; the rate of change, the number of pixels per millisecond or whatever that you're moving, that's what I try and pair up, not the actual duration of that transition.
Yeah, because you have to pay attention to how far you're going and that just makes a huge difference with that little drop-down versus the big whole page thing; that's going to look…as much as it feels like you should use the same duration, like you said, you're like, oh yeah, just put two, good to go and you're like no, nope, nope; you see it and it feels totally wrong. I feel like that sounds, I don't know if you have a better system for doing this, but for me I just kind of do that by eye; it's like the art part of this, it's like, that feels like it's moving a lot faster than this other thing and they're related so what should I fudge here and there until they feel like they're moving at similar velocities or taking the same speed or whatever. Do you have a better way of doing that? Do you get all math-y with it?
You know, I never have yet; I've always done it by eye. Maybe there needs to be this grand theory for it; maybe I need to throw some equations at this because it could be done: if you say, this is meant to feel like double the weight, if you try and equalise the momentums then the velocities are going to be different and so on. But maybe that's taking it too far; maybe just by eye is a good way to do it. I think it's one of those cases where it's almost better to trust your eye than the numbers, I think that happens a lot in design.
Yeah, and I think that's what some people really hate about design; maybe not hate, but are uncomfortable with design and I feel like motion design has even more of that: there's just this kind of gut sense of you know it when you see it, kind of thing: there's rules you can follow but just following those rules won't actually get you to something good; you have to put some of yourself into it and use your eye and your gut. I like that part, but I know some people are like, oh that's terrible; I hate it. I'm like…sorry!
Intuition's a really big part of design. I'm becoming more and more comfortable with saying that and being honest about that with people I work with and so on. I think we've tried to avoid being honest about that because it makes us look a bit arbitrary, a little bit subjective. But that's fine; I think that's all part of having taste and having taste is a large part of what it takes to be a good designer.
Design is subjective, whether we like it or not!
Right, and motion likewise. Although we did promise or threaten later in the series to do a bit more about the physics of motion, so there are some guiding principles that you shouldn't screw with.
That's where you can break out all the equations and pages and pages of crazy symbols and deltas and whatever else physics has; I don't even remember! I'm going to be very useful for that episode! Anyway, should we talk about some examples of good UI animation choreography that we've seen, to get even a little bit more specific for people that are maybe trying to wrap their heads around this.
Yeah, sure. I'm going to say Swarm. Now, Swarm gets…everyone has an opinion on Swarm, right? I actually like Foursquare, I like Swarm; I'm a defender of that company quite a bit.
Now, I think Swarm uses too much animation; I think they over-animate. I put them in my talks because they look vivid on screen, you can see the motion happening, it's like right, OK, yeah, stuff definitely happening there; they're going for that kind of delightful thing rather than maybe a slightly more streamlined, slightly more sophisticated motion approach. I will say, it's relatively coherently over-animated, if you see what I mean! So, although I think they could maybe tone it down a little bit, I do like the fact that most of the transitions, most of the animation that happens within Swarm still feels like the same product, it feels like the same app; if I'm doing a GifGrabber in a recording of something that's happening; by the way, GifGrabber is terrific if you want to record everything on the screen…
Oh, I've never heard of that one.
Just plug in your iPhone to QuickTime, you can then get it playing and just use GifGrabber; it's wonderful and it's shareware or a free product. It's great.
Oh, nice. I've been using Reflector for that, but that sounds like it could even be easier.
I love it for that kind of thing. But when I'm doing that, if I'm capturing things from Swarm, they generally all feel like part of the same thing, so I think they do a good job with choreography across the entirety of the app.
When you mentioned it, I could just immediately see in my head the crazy, over-don falling of those notifications where they do, almost like a leaf, they go back and forth and just imagining all the time I check into the airport and then I'm like, oh yeah, Brad's been here fifty billion more times than me, OK! And then…me and Brad basically own the airport and that's essentially where I do Swarm, so it's like I can identify it immediately which, as overdone as it is, that's probably pretty good for them; I could see it in my head, the second you mentioned it. Good job, Swarm!
Yeah, they stick to their guns. And like I say, I'll defend that company; they get a lot of stick but I think it's a fun app, yeah.
I kind of like Dots for the same reason, that game that I know no-one plays any more, but I use it as examples a lot too, where they are ridiculously consistent with their probably overly-bouncy animation both in the game when the dots move and it's like this really hard, this hitting really hard surfaces with really stiff things bounce to it. But they use it everywhere across their settings and across the game and it's like you never are at a point where you're like, am I still in Dots? You always know, you feel like you're even playing still while you're doing your settings. They might veer on the side of consistency, like you were talking about earlier, because I feel like the motion is exactly the same, so they're more on the consistency side than the coherence side, if we want to go with that. But I kinda like it still; I don't mind they're all exactly the same, it kinda works.
I'm not against it if it makes sense. I'm perhaps against it when it doesn't make sense, for sure.
There also are games that can get away with a lot more leeway in what makes sense for them, right? If they were, I don't know, some other purpose, it might be annoying and ridiculous.
Sure, yeah.
One really simple example I like is Stripe Checkout because it's everywhere on the web and there are modal entrance and exit when you actually go to pay for something, it comes in from the bottom, it does a little bit of a follow-through thing where it overshoots and then stops; you do your thing and you close it and it goes back out, it goes down and it's very nice in that it doesn't do the exact same motion on the way out; it's not symmetrical, but it still makes sense: modal came from the bottom, went back down to the top or…came from the bottom, went back down to the bottom…I'm good with words! And it's just a very simple thing but just that amount of, that consistency to the motion in the way that it goes in and out and makes sense; you can tell a lot of that was done purposefully, it wasn't just like, oh you added some stuff, so it makes it feel very solid and consistent: I like it.
Yeah, nice. There's one website that I don't know if we've mentioned yet that people may want to take a look at, which is CapptivateCo
I don't think we have.
Are you familiar with that one? It's essentially a kind of a gallery of motion and it's curated by an old colleague of mine at Twitter, Alli Dryer and so she's been essentially ScreenCapping and GifGrabbing or whatever it is these animations, mostly on iOS, mostly on mobile and although they're individual snippets, an app is featured multiple times if they have interesting things going on and I think that's going to be a really good resources for people to have a poke around with if they're not familiar with, and you can try and match some of the patterns and see how are people trying to use choreography across their own apps or even where there are similar approaches between different apps as well.
That's one of my favourite things about that gallery; I didn't know who ran it, but just the idea that she pulls in multiple things from the same app, so you can see what's similar about those motions. A lot of other galleries just pop in one off from each app and having those multiples really lets you compare and dig a little deeper, so I like that one.
I'll caveat that with saying I'm not sure if that's the case, if she has done that, but I seem to recall having seen multiple things from one app, so don't hold me to that if I've got it wrong.
No, I remember seeing that too…
Maybe if Alli's listening, that's something she could do as well if she doesn't already.
She's definitely done it in the past: we've both seen it so if she's stopped, obviously she's going to have to start doing it again because we just told everyone she does! Sorry Alli!
Alli's great; hopefully she'll forgive me if I've done her a dis-service!
Hopefully not; I think she'll be happy about it. So I guess we are going to start wrapping up a little bit, but we should talk about what we are reading first.
Yes, because that's become a little feature for us, so let's talk about that.
Also, it makes me read things!
That too! I'm going to cheat a bit; I watched a video because I've been travelling a bit, so I haven't been reading quite so much.
Unacceptable!
I read, just a simple, nice little video, it's like a TEDx video on animation basics and it was talking about timing and spacing particularly, which you'll recall we mentioned in Episode 2 particularly, something that came up long ago in animation history, the twelve principles and so on, the illusion of life that we covered previously, and it's just a really nice video talking about and explaining and then showing the effect of timing and spacing on animation and I just thought, I haven't seen a better version of someone trying to explain that, so we'll put a link to that in the show notes; like I said, that will pass as reading for me for this week, but I found it really interesting, it was a really solid intro to it, so our listeners may find that useful too.
Yeah, definitely. I also watched some videos so I guess I totally cheated the reading thing too, but one article I wanted to mention before I talk about videos and they are related, was the…I can't remember her last name but her first name was Rebecca [Ussai] , put an article upon Medium called The Principles of UX Choreography which ties into a lot of what we were talking about today which is part of the reason why I read it recently before this episode. There's some really interesting points there. I especially like how she talks about some very concrete UX goals and how animation ties into that, but also mentions things like appeal and brand voice are equally as important as a reason or a justification for using animation and design and I really liked that. She actually did a SXSW talk and had Glen Keane who is an actual Disney animator guy on stage with her and there's some really great video clips, just a couple of minutes at a time, of him talking about things like the plausible-impossible…that's hard to say…I figured you would like that because you talked about that sort of magical impossible sense, just the idea of how you can get away with so much when you have motion, as long as the audience is with you still, and I thought that was really great. Plus he draws beautifully, just sketches; he's like, oh this is terrible drawing; you're like no, it's amazing drawing, you're a cartoonist, oh my God!
One of those people! Oh yeah!
He's like, oh this circle isn't perfect and I'm like, that is such a perfect circle. So there's two videos I want to link up there and I watched that one, I thought it was great, and also I thought his explanation of appeal which also really fits with choreography; I love his explanation of it being kind of very much more of an art thing that you can try for it, you know it exists, but once you have it, you know it, but getting there is often a little bit ambiguous. He said, it's like musical harmony in design and I was like, oh, this guy is smart, so they're just a couple two minute clips but I really liked the way he explained this stuff and how he talked about his approach to it. Totally worth checking out. Lots of videos for everyone to watch this time around.
Sounds good; I'll check those out.
Yeah.
OK, so that wraps it up for Episode 4. Join us next time: we're going to be talking about some common mistakes, some pitfalls when you're starting out with motion design because, believe me, between the two of us I think we've made pretty much all of them.
Definitely made them all!
So we want to try and pre-warn you of the layout of that minefield, if you like! So, join us then and see you soon.
You've been listening to Episode 4 of Motion & 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, @MotionMeaning. See you again soon.
Transcribed by Alison