Episode 09

Headshot of Val Head

with Val Head

Why are Apple’s product pages so heavy? When is the right time to choose aesthetic wins over performance wins? We explore these questions in today’s preshow.

We’re also joined this week by web animation expert Val Head. We’re taking a deep dive into web animations; how Val got started with animation, the benefits of animations in UI, why you should focus on the problem to be solved and not the tools, how to effectively communicate your animation ideas with your co-workers, and so much more.

Direct Download

Transcript:

Katie Kovalcin:

Welcome to Episode 9 of The Path to Performance, a podcast for everyone dedicated to make the web faster. I am your host, Katie Kovalcin.

Tim Kadlec:

And I’m your other host, Tim Kadlec.

Katie:

So it’s been a while, Tim!

Tim:

It’s…you know, it’s been…yes, it’s been a while, yes.

Katie:

A minute…but we’re back now. It’s fall, people’s summer plans have kind of come to a close, the leaves are changing and we’re recording podcasts again.

Tim:

Are the leaves changing where you are already?

Katie:

Um…I’m looking out the window right now…er, a little bit, because I noticed the other day, I was like, those trees look a little dead, and then I was like oh wait; it’s Fall.

Tim:

Nice! OK, yeah, we’ve had a few of that too, we have a lot of trees so that means I gotta rake soon, which stinks.

Katie:

But then you can make fun piles and jump in them.

Tim:

That’s true, that’s fun, that is a good time.

Katie:

Yeah, so…we’re back, it’s back to podcasting season.

Tim:

Yay!

Katie:

And we have a pretty awesome episode with Val Head, talking about animations and perceived performance and how animation can help that, so we’re really excited to have Val on here.

Tim:

Yeah, I’m excited that the animation stuff and perceived performance, I think we’ve kind of danced around the topic and brought it up a few times but it’s a really interesting topic, I think, for both of us, so really looking forward to that discussion. But before we do that, I wanted to talk to you, Katie, about Apple. Not necessarily specifically Apple but like, OK, so Apple had their new product release, right? Which always has some people super-excited and other people being like, well they copied Android and a lot of people were making fun of both sets of camps because it’s…

Katie:

There’s always the people who make fun of Apple, then there’s the defenders of Apple and then there’s people who get really meta who like make fun of the people defending the people making fun of Apple making fun of other people and…it gets pretty deep!

Tim:

Yeah, it’s pretty inception-ish there, yeah. That’s not a word, but whatever, we’re going to roll with it.

Katie:

Yeah!

Tim:

Yeah! So they did it and you know, of course, when Apple comes out with the new product and they do the product page, right? And the product pages for Apple are kind of notoriously heavy; every time Apple does this, somebody points out how big and obnoxious the product pictures are, so this time I think it’s like 500 plus requests in like 29 megs or something absurd like that, some huge number. But then, you know, people started talking trying to figure out why that is: is Apple about paying attention to performance? Does Apple waste too much energy on other parts of the design and not enough on that? And so the instant thing right away is always to be like, this is horrible, they’ve got to pay attention to that, and to be fair, I’m never going to condone 29 megs but what I wanted to talk to you about, is there ever, when are there times where you might want to make trade-offs? When is it maybe acceptable to add a little bit of weight to the page instead of, whereas you’re going to lose a little bit of performance but you get a little bit more of an immersive design or something like that? Basically, is Apple horrible here?

Katie:

Well…that’s a loaded question!

Tim:

It is! I’m trying to set any Apple fan-boy listeners sort of right after us.

Katie:

I think that there are definitely times where the design should kind of be front and center and there are times when performance should be front and center. I think that Apple definitely tends to lean more on the design side of things whereas historically we’ve seen Google sort of lean to the performance side of things and less about the design and I kind of think they’re both trying to move more towards the middle but Apple still has a very strong grip on their very pristine and paying attention to detailed design that they have so somebody in our Performance Slack channel dropped a video that showed the very detailed reflections in this video of the new iPhone that was really tiny detail that maybe most people, most average users that are going to order their iPhone on the website are maybe not noticing that super-tiny detail and that’s something that maybe if I were the designer and the developer showed me, we could shave off a ton of weight if we didn’t include these really highly detailed polished videos with all of these really tiny, miniscule details, I might go, OK, yeah, I think the performance win here outweighs the detailed design win, but that being said, if that’s Apple’s MO, that’s their brand that we pay attention to the details, then I’m sure that there were many conversations to be had where maybe they did have a conversation about performance and maybe to them, that aesthetic win was more important to them than the performance win and we can have discussions about that, about whether we think that that was the right choice or not.

But I think it totally always depends on the per case basis when the company whose site we are designing wants, what their brand is, what their users want and I’m sure if Apple talk to many of their users, which I’m sure that they do, they would care a lot about performance, especially on iPhone release night when it’s 3am and everybody’s trying to refresh to get their iPhone the fastest and first, performance is a huge deal there, so I don’t know if I have strong opinions one way or the other on whether they did the “right thing” but I’m sure that there were many conversations between design and development that led them to where they were.

Tim:

Yeah, I mean I guess any time you’re designing or building a site, every decision you’re making is a trade-off in some way; you use the custom font, that’s a trade-off for certain ways and you try to minimize the impact of some of these things but you’re still trading a little bit of performance for that or if you start to use a heavily JavaScript reliance, you’re starting to trade off a little bit maybe in terms of support or things like that. Everything, it’s like a bit fat gray line, there’s no black and white like this is right and as soon as you start doing this, you’re completely over the line and it’s off; it’s a case by case basis.

Katie:

Totally, and that’s what’s been really hard for me as a designer to talk about performance is I don’t necessarily know any hard and fast rules to be like, you should one hundred per cent adhere to these performance guidelines in your designs because pretty much every performance decision that I make in my designs is directly influenced through back and forth dialog with the developer.

I’ve been working on this CodePen redesign and through working with them last week, we just sat down and went through page by page and kind of cleaned up the design and browser, me saying, oh let’s bump these pixels around and all that stuff, and there were many things that me as a designer I wanted to completely change or overhaul or move or whatever and then hearing from their legacy code and the whole product itself, well, there’s a lot of baggage that comes with that design change listing out all of what that baggage would be, what the implications would be, the impact that that design change would have on the performance specifically was a big one: OK, well when you put it that way, maybe that design change that I on a whim thought would look better isn’t really worth all of those negative impacts so it’s hard for me to say, this is absolutely what designers should do because so much of that is totally dependent on the design change itself in the context of the site that you’re designing.

Tim:

Yeah, I think the context, like you were saying context, I guess that’s the key thing; no design decision or really any development decision happens in a vacuum and the web is so huge you have to take it in the context of your audience, of your team, of your needs of the users, of what browsers and devices you’re actively optimizing for and all those things come into play when you’re making those decisions.

Katie:

Yeah, totally and so I guess before we as the almighty web community start totally criticizing and tearing down everybody’s decisions, there’s usually a lot of decisions that led to where, I don’t think that that gigantic performance hit was an oversight and Apple was completely oblivious to it; I’m sure that it was very deliberate that they chose design to be the star and not performance and maybe that wasn’t the right decision, but it’s the one they made.

Tim:

Sure. You know, what I’d love to see, which I know we’ll never do because they tend to be a little bit more secretive over there, but it’d be really cool to see, and maybe they’re doing this behind the scenes already, but it’d be really cool to see some sort of an A/B thing from an Apple product page that’s extremely immersive with the beautiful imagery and everything else that they’ve got going on and one that might be a little bit more tamed down but is also not 28 megabytes, and seeing what the impact would be. You have to imagine a company that big is looking at this and already making these determinations but it’d be really cool to see the data on that: how much do they gain and lose by making these sorts of heavy design decisions.

Katie:

Yeah, I feel like Apple’s a really interesting one because performance has to be so, so, so important to them as well; they reach such a wide audience that it could be on any kind of connection; there’s all different kinds of people that use iPhones and most “average users” don’t necessarily know what performance is or any of that but they know how fast a site takes them to order the iPhone; they know how slow it is, they can say: the site’s broken, I’m clicking everything a million times and the spinner’s just going and nothing’s working and I just have a blank page and they might just get frustrated and I don’t know, maybe Apple just knows that well, they’re going to order the iPhone regardless so it doesn’t really matter how bloated our site is or how bad the experience is. Maybe they just have firmly put that stake on the design side and know that their audience won’t necessarily leave them for Android over a slow site: I don’t know!

Tim:

Well, to be fair, that’s probably very true! I think people who are lining up to buy the next iPhone as soon as it comes out or the next i-whatever are probably very unlikely to leave the brand very easily; that’s going to be a very slow process. It’s going to take a lot of burns!

Katie:

If they’re camping out overnight, I don’t think a six second page-load is going to stop them!

Tim:

That’s a level of dedication; it’s a whole new level, it’s impressive.

Katie:

Yeah, but it does raise a very interesting point: when does design take the forefront. When does performance take the forefront and I wish we had a better answer for that!

Tim:

But I think the answer you gave is the right one; there is no one answer. You just have to look at it in the context of your site which means that you’re having those discussions with your team members, you’re talking to your users and also that you’re backing it up with some sort of monitoring so that you can see what the impact of change is, like we talked to Lara about Etsy having that experimental sort of environment where they can just throw things out there and I think we might have heard that too from the Filament Group but that idea of being able to test different changes, adding an extra image or whatever it happens to be and then finding out, is it more valuable for us to have this high resolution photo of our iPhone success or is it more valuable for us to leave that off and get the performance gains?

Katie:

And I think just, like you said, being aware of the performance so that maybe you launch the really super-awesome design-y page and then you look at the performance and then you look at the analytics and then you’re like, whoa, we had a much higher bounce rate; maybe we should look at shaving some of that down, especially for a company like Apple that has an internal team handling this and it’s not like a client agency relationship where maybe it launched and that’s the end of the engagement and we don’t really know what happened to it but for a company like Apple, that’s definitely something that should be monitored and maybe iterated on once it’s live?

Tim:

Absolutely. And if anybody from Apple is listening to this: feel free to chime in and be like, hey you know what? I should come on that podcast and that’d be cool!

Katie:

Yeah, tell us what it’s like to design at Apple with performance in mind.

Tim:

That would be awesome. Yeah; that’s good, so anyway, I think your conclusion, it sounded like was, this is…

Katie:

It depends! The universal web answer! It depends.

Tim:

It’s just everything!

Katie:

It’s funny though, we all have so many opinions about so many things and they all generally boil down to, it depends!

Tim:

It’s true. But that’s no fun!

Katie:

I know.

Tim:

That’s why nobody ever says it because nobody wants to hear, it depends.

Katie:

I literally think that I have a slide in almost every talk and probably online in almost every article that says, “it depends”!

Tim:

I think I wrote a post one time that was similar to that, just so that I would have one thing to just throw out every time somebody came up with something I’d be like, read the post, that’s my response to the thing. Yeah. It’s fun. But that’s also why this is so exciting, right?

Katie:

Yeah!

Tim:

Because if there were stock rules for everything that you followed…

Katie:

Then you might as well just use Squarespace.

Tim:

Yes. Exactly. Well said!

Katie:

OK, well now that we have fully told everybody to just quit their jobs and use Squarespace…

Tim:

A good inspirational pep-talk here!

Katie:

Yeah! Maybe we want to get to…

Tim:

…get to our talk with Val! The significance of the Squarespace thing is hitting you now, right? Because you’re going to have to leave to go do banana farming or something!

Katie:

My dream! For the record, I’m not against things like Squarespace. Whenever family friends are like, I need a website I’m like, you should really check out Squarespace.

Tim:

Oh absolutely. I think that there’s a reason why they have some success, because there’s certain types of sites or different people that that’s going to work perfectly for. Because I have never really felt too overly threatened about those sorts of solutions because I think that everybody has different needs, every company has something that’s going to work for them slightly different and so that’s going to work very well for a specific market and for another market you’re always going to need that bespoke sort of stuff.

Katie:

Mm-hm, well said.

Tim:

So yeah, so shall we talk to Val?

Katie:

We should talk to Val. Val has so much more energy than you and I could ever muster; she is super-fun to talk to, super-great lady, super-smart.

Tim:

Oh yeah, she’s awesome.

Katie:

I’m excited to talk to Val.

Tim:

All right, so we’ll be right back in just a minute.

Tim:

And we’re back with Val Head. And I’m super-excited to have Val on the podcast to talk to us a little bit about some motion and animation stuff which really gets into some of the…we’ve kind of danced around that topic in the past, so Val, very excited to have you on the podcast.

Val Head: Thanks, I’m really excited to be here; I’m glad you guys invited me on.

Tim:

Could you tell us a little bit about you for our listeners who are unaware of the awesomeness that is Val Head?

Val:

(laughs) Yeah, so I am an independent designer; I’m based out here in Pittsburgh in the area of Pittsburgh I like to call the web design district; I’m trying to start a thing! It may not happen, but I’m trying! And I do a lot of work with web animation; I teach workshops on it; I do some consulting to help people figure out how to get their brand in motion, how to document it, all that good stuff. And my job right now is to get people excited about animation on the web and figure out how to use it well, the second coming of web animation where we’re not doing Skip Intro; we’re doing really good, useful things instead. And that’s really exciting. I do that and I’m also, just announced recently, I’m writing a book on all this stuff for Rosenfeld Media, so that’s going to be pretty fun.

Tim:

Oh, fantastic, I missed that; that’s’ excellent news.

Katie:

Awesome! I can’t wait to read it.

Val:

Tim, you can tell me what it’s like to write a book because it’s my first full-length book so right now I’m in the happy, “I don’t even know how hard this is going to be yet” phase so…

Tim:

Oh good; enjoy that phase, enjoy that phase!

Val:

If you want to crush my happiness later, feel free.

Tim:

No, no, I think…I don’t remember who it was, but somebody once compared it to being pregnant basically, and I think that that’s fairly accurate, I would guess; I don’t have first-hand experience on that but you’re super-excited and then…

Val:

It’s also really hard and weird and uncomfortable…

Tim:

Yeah and it’s really hard and then you get to the point, exactly, where it’s very uncomfortable and a painful process and by the end of it you’re like, I just want to be done with this thing, but then when it’s there, it’s pretty cool again.

Val:

I think I could live with that!

Tim:

Enjoy the initial phase here, it’s good.

Katie:

You should have a book shower!

Val:

Oh I love that idea! What would people get me for my book? Some pens or a new keyboard or something?

Tim:

This is awesome; that needs to become a thing. Book showers.

Katie:

Yeah, I think we’re starting something there.

Tim:

So, this is really cool. How did you get into…what attracted you to the animation stuff? What got you into that?

Val:

Well, the way I started is a little bit uncool, at least right now, especially this week actually because it was with Flash, that’s how I got started in all this stuff. I took an animation class and then I got to this point where I was like, I really want it to do this only sometimes and maybe go backward so I have to draw every frame and the instructor was like, no, there’s this thing called Action Script: you can write code stuff that looks like math and it’ll make things move around on a screen, and that just changed my entire life, I was just…why didn’t anyone tell me this before? This is the best thing ever! And then I started doing a lot of web design, a lot of Flash stuff and I was one of those weird people who was like, no, I really like Flash and I really like Web Standards; why can’t we all get along? So that’s always been the balance there: I did a lot of Flash work is where I learned most of my animation and I’m super-excited that we can do this actually with proper web things and not have to deal with this crazy black box third party stuff any more. That just changes everything; it’s great. So I kept doing it!

Tim:

I don’t think that’s anything to be ashamed of. The Flash thing, especially those of us who don’t have the Flash background I think give the Flash community a little bit of grief, but honestly there’s a lot of really valuable lessons that were learned doing that stuff that we can apply now but that we risk losing too, if we’re not a little bit more vocal about that and if we don’t have that sort of background so that’s why I’m always excited to see somebody, like yourself, who has that Flash motion background now applying it to the web stuff for the rest of us who have been living in static HTML this whole time.

Val:

Yeah, like you said, there’s a lot that can be learned that can come across, but it’s also a whole new thing too, right? We’re doing this with different technology and things like performance, like you guys were talking about and accessibility and everything are things that generally got ignored for Flash, just tucked under the rug, they were like yeah, sure, that’s a thing, you can kind of make it happen; look over there! So now we have that history but there’s also new and different things we need to figure out too, so it’s not like it’s all figured out already; you’re just doing it again. It’s really, I don’t know, some sort of metamorphosis or something. There’s got to be a good metaphor for that!

Tim:

I will work on it and by the end of the podcast we’ll have something.

Katie:

So what are some of those better practices that you’ve learned along the way coming from Flash and then trying the new technologies? You do so much animation and so much awesome stuff that I’m sure you’ve tried lots of things: what have you found works best and all the stuff that goes into that?

Val:

I think the biggest thing is just having that time to mess stuff up and make mistakes; it’s never going to be perfect the first time and you have to make a lot of mistakes to end up making something right and a lot of what I learned I think just comes down to remembering that especially when we’re animating things that are interfaces, it needs to be a conversation in the end, right? Someone is giving you some sort of input; you are responding to it in some way. They need to know that you did; they need to feel like it’s connected and the content you’re working with or the response, or the action you’re responding to, those have to feel like they fit together. If you click one little button and the whole site explodes you’re like, what the heck just happened? So it has to be a balance there, it has to feel like there’s a conversation and teamwork getting everyone through things; it’s not just like this user and this static site; there’s some back and forth, which is a lot easier said than done I think. But that’s a good way to summarize it.

Tim:

Yeah, it’s also a really good way to look at just building for the web in general because that is what…because websites aren’t static things, they have so many different dynamic pieces so it’s a constant back and forth, like you said, conversation, I kind of love that, a constant conversation that the user is having with the website and you’re thinking about all those interaction and how those take place.

Val:

Yeah, it’s really it comes to a balance of it has to look really good; it also has to feel really good, it has to feel right; it has to have style and purpose and if you’re missing one of those, even if your animation is beautiful, if it takes too long or if it’s really slow to respond or if it’s just completely out of place in the user-flow, it’s not any good any more and it’s tough to do both of those things right but that’s the balance you need and kind of what you’re always aiming for, whether you hit it or not; the more you do it, the better you get at it, right?

Katie:

Do you think that animation is kind of like, in the sense of performance where you don’t notice it? It’s kind of this invisible thing but you know when it’s bad, is animation like…I mean, you can obviously see when stuff animates but to the general user, they might not even notice…spoiler alert: I’ve seen Val present before; she’s amazing, she has tons of energy but your example with your cat coffee shop where something bounces and that feels bad versus something animating in a different way that has more energy and feels right; we’re it’s sort of this you don’t even necessarily notice that it was an animation or shat it did but it just felt right. Is that kind of similar?

Val:

Yeah, exactly, it’s like…and calling it invisible totally makes sense, I mean, that’s what we go for with design, right? You’re all like, really good design is invisible and that’s true to a point; it’s never going to be completely invisible because if it really entirely wasn’t there, I don’t know, that’s some metaphysical thing! But you want it to just feel so right you don’t notice it; that’s kind of your goal. I actually wrote a really short post about that kind of summarizing that point from my talk just that if it fits really well with the mood, with the feeling of the task you’re trying to accomplish and you do a really good job of making it fit, giving it purpose and also making it look good, when people are using your app or your site, they might not even notice they were looking at animation until they go back and look for it; if it’s just doing what they need it to do and just communicating on that higher level of having this personality and this style, giving that personality of your brand or your app while you’re going through it, but nothing’s happening that you’re like, oh man, that’s going too slow; I sure hate this app. When you go through really smoothly like that and have these really great fitting interactions that also happen to be animated, it’s kind of like that perfect combination.

Tim:

And actually the two work together very well; I know Val you and I have talked about this, the different animations and transitions that can actually work sort of like hiding some of the performance things behind the curtain, like providing a transition from point A to point B and in the meantime it lets the site do something, maybe give it a little head start or whatever it is so it’s just not such a jerky wait and then something magically happens, sort of a thing.

Val:

Yeah, because by their nature, by their definition, animations take time; you can’t have an animation that doesn’t take time so if something you’re already doing already takes time, you can use animation to make that seem almost like it’s happening faster or there’s less time happening, that kind of perceived performance thing which I know, I’m sure you guys talk about that a lot and I’ve seen you talk about that in talks too, Tim. That’s a really great use for it of just having that, making it seem like things are happening, even if they’re maybe not, or make it feel like they’re happening faster; there’s a lot of value there.

Tim:

So, let’s back up just a second: what are…because animation on the web, using it inside of our designs is a pretty relatively new thing, so what are the primary benefits or the primary use cases of animation? What are the primary things that…why should people be looking at animations and transitions as part of their interface?

Val:

Well, there’s a few things; I think that the highest level of stuff is being able to transition smoothly between things, like what you were talking about, instead of having these hard cuts between states; you can animate smoothly between them, you can give it that sense of flow of continuity that we just didn’t have the option to before; it was like click, load new page, OK, that’s just how it goes. And outside of that we can also use animation to help orient people to what’s going on, that kind of spatial orientation; that’s a really big one too, especially now that we’re using this whole…not super-3D interfaces but we’re stacking things behind other things and hiding stuff off the screen or off to the side and we have all these different spatial metaphors we’re using, especially when we’re trying to fit complex interfaces into itty-bitty screens and make them responsive. Having some sort of motion to show where something came from if it was hidden before and where it goes back to, that can be a huge help and just reduces, to be all fancy-sounding about it, but it basically reduces your cognitive load to have to follow where these things are. You do less thinking because you just saw it move to where it was going instead of having this hard cut where you’re like, oh crap, where did that menu go? What did I do? Where is it? How do I get it back? You can skip all of that thought just by having things transition. It’s also really great for feedback, just showing that something happened. Also really great for guiding people through tasks, showing them…I always think of list re-ordering and drag and drop as an example for this of just ways to show people where they can put things, what’s an acceptable action, even before they’ve finished doing it, you can give some sort of feedback, some sort of guidance there of here’s where you can drop this, here’s where you can’t, all that sort of stuff. So, a lot of feedback, a lot of spatial orientation and…I forget which other one I said! But yeah, those three things, oh yeah, the spatial orientation, the feedback and guiding people through things are huge and those are some of the very practical ones. But the one that always gets sort of left out is the idea of delight, because we’ve all heard this five hundred million times, we’re so sick of hearing about surprise and delight, but you can use motion to help tell your story and tell the personality of your brand and that’s really, really huge because you can use it in a way, the same way you used type and color to do it, you can also use motion for it and then you’re just reinforcing that, reinforcing your brand and creating this slightly unique experience for you and the thing you’re making, which is, in this day and age, that’s pretty huge. Who doesn’t want to try to stand out?

Katie:

Yeah, absolutely. So, I’m curious how you make cases for making the space for animation, similar to what we hear about people struggling to get performance; it’s, oh, we don’t have the time budgeted for it, whatever, and animation is I think another one of those things that people think, that’d be nice to have; we’ll save it for the end. How do you make the case for it being this cohesive part of the system that should absolutely be baked into what we do?

Val:

Yeah, that’s a tough one because it seems to happen so much, especially for designers where it’s kind of like gets assumed that what we do is just decoration or just extra fluff stuff, like, ah, we’ll just tack that on the end, no big deal; don’t worry little designer, it’s OK, you’ll be fine, you can have your fun later. You’re like, I feel like we often get ourselves…maybe we don’t get ourselves with that kind of, that seems to happen a lot in projects and you kind of deal with it the same way with the performance budgets and everything of just having it, talking about it from the beginning and make sure you’re always talking about it or always having it in there. Not that every single project needs to have all the animation ever but in the beginning of things when you’re talking about how things are going to work, how it will go, what the goals are; you can start talking about it then, well, here’s the main goals, our main user flows, here’s how animation could help with this, is this what we want to do and kind of always bringing it back to the main goals of the project or the main design concepts too and I just like to try and keep it going throughout the whole process. If you’re doing element collages, do some little story-boards on there based on the stuff you were discussing even before you got that far; you can even have little story-boarded stuff and wireframes and everything. The biggest thing is to get everyone on board with it and just be having those conversations everywhere along the way instead of right at the end where it’s like, hey, maybe this should move and by that point it’s like, you’re already done. I know you guys, I saw on your notes from last time around you were talking about the podcast I started with Cennydd and we were just discussing, talking about this for an episode the other day, the idea of we’ve both made the mistake more than once where we’ve not injected that conversation throughout the project and then at the end people are like, yeah, I know you totally mocked up all that motion stuff but there’s no hours left so it’s just not happening and it just never gets done and then you’re sad and frustrated and like, darn, I should’ve done a better job!

Katie:

Yeah, absolutely. Does that ever come back, where people think that that’s the antithesis of performance and you’re like, no, but perceived performance, this could make it way better but then they’re like, but that adds more bloat, or whatever?

Val:

I think it does; I mean, there’s always going to be…maybe there’s not always going to be someone with the opposite opinion but it happens, and I think just talking to your team about it and bringing out these little cases of hey, look at…I always use Stripe checkout because they’re my favorite; I swear I’ll get another example soon! But hey, look how Stripe checkout does this and this really works well for them: look at this article they wrote about it or just pointing these things out almost a little more organically too, as opposed to just being the person I’m meeting, like, we’re going to need to add animation now and here’s why! Because that never works either. You have to be sneaky about it! That’s what it comes down to. You sneakily get everyone to agree that this might be a useful thing. That’s probably the first part; get them to agree that it’s useful for other sites and other products, or whatever, and then slowly be like, hey, so that thing that worked really well for those guys…what? We did it for this client. That’s like a thumbs up weird happy face! So it takes time. I know in workshops and stuff I talk to a lot of folks who are like, I think this is great; I see a lot value in this. I’m really happy I learned how to do it but how do I convince my boss that this is something we should be looking at and it’s a tough question and I feel like it’s a long game too. There’s no instant way.

Tim:

How do you…you were talking about bringing it up early. So, from a performance perspective when we talk about that, that means bring it up inside of meetings, it means getting it inside of initial requirements like establishing the budget and saying, these are the goals we’re going after; it means getting into browsers fairly quick so you can be checking against these things and monitoring all the way through. But how do you do that with something like the animation that’s a little bit more abstract than maybe something like performance if we were in certain cases you can boil it down to a budget. How do you document it? How do you enforce it throughout that project?

(35:15)

Val:

Yeah. Well, it’s similar but I guess with fewer hard numbers when it comes down to it. Every project has goals in the beginning so you can bring it back to those, whether maybe a goal is something like this particular interaction or this particular part of the whole user flow is really, really important; it has to feel very seamless and be whatever, you can pull it back to that, it’d be like, well, if we add animation to this interaction here, here and here, this makes that whole process smoother and it makes it stand out from competitor X or competitor Y and that’s going to make ours feel better and seem more sophisticated, assuming better and sophisticated are goals that you have for the project which is probably a goal for every project, right?

Tim:

We’d like our site to be worse!

Val:

Yeah, we want it to suck a lot. OK! But just kind of bringing it back to those project goals and on the more, I guess, abstract side too, there’s usually design goals; there’s a certain mood or a certain concept you’re going for. A good example actually is IBM just published their design guidelines and they have a whole section on motion and it’s about how they want to be like the machines, like machine motion and they have examples of all typewriters , just reel to reel and the type of motion that uses and their reasoning is, this is where our brand came from: we want our motion to show the history of our company and what we’ve done; here’s these real life objects that we feel embody that and then here’s how we’re going to do that on screen, taking those influences and that goal and just kind of breaking it down step by step. I’m like, every brand should do that; everyone should be able…you know, you should have some knowledge of how you would express your brand in motion because, like you guys said, it’s kind of a thing…it’s happening and I don’t want to tall it a trend but it is kind of a trend; it’s a thing that we’re using in interface design more than we ever have, so you should probably get on board and figure that stuff out! Now is the time to start working that out and decide how you want to express yourself in motion because chances are, you’re probably going to have to at some point.

Tim:

It’s kind of like…I kind of liken it to it’s like an awakening; the technology’s finally got to a certain point and now we’re where it’s do-able so that’s contributed to it but it’s also waking up to the idea that we are working on a dynamic, interactive medium, platform, whatever you want to call it, so we have the ability to extend it and start to include motion and think about that in our process so I think the awakening sort of…

Val:

Yeah, and it’s also…you’re never going to get it perfect the first time; you’re going to have to work this into your process, it’s not like instantly your next project you’re going to be like, yay, motion was everywhere; it’s going to be a slow change, I think, because we’re just all so set in the ways with how we work and I feel like little changes a little bit at a time and you get really far faster than trying to force a whole new way of doing things.

Katie:

So this is my non-technical brain but have you found that doing things more in CSS or in JavaScript are better? Is one better for performance, is one better for expressing a certain thing like, the answer’s probably going to be, “it depends”, but I’m just curious what you like to use.

Val:

No, it’s a good question because I feel like maybe a little less so lately, but I feel like maybe all of last year there was all these articles of JavaScript is better than CSS! No, CSS is better than JavaScript! And it’s just like this silly argument. You’re like, really? We’re going to pit a programming language against a mark-up language and pretend…what are we doing? Why? We have two really awesome tools that we can use; why are we pretending we should only pick one? This is dumb! So for me I feel like CSS is best at, I mean the way I segment it out is CSS is really great at the sort of smaller interactions. It’s really good at a lot of things like hovers and clicks and stuff; a lot of the UI interaction and animation that we want to do anyway is, CSS is really great at that. It’s usually already there, we’re probably not making websites without CSS. Well, that’s a whole other debate. But probably not making without CSS and it’s probably already there and you can just add this little bit of motion here or there and add it in small pieces. When you start getting things that are more complex logic-wise or longer in length, CSS kind of gets a little tougher to work with. If you want to, you can chain a bunch of delays or animations together, essentially, using delays and being clever about that. Once you get through three or four of those and you want to make changes, things can get pretty hairy so at that point, you probably want some sort of JavaScript, where it’s Library or something you wrote yourself that could handle the logic of essentially a timeline for you, so there’s a certain complexity point where I think JavaScript becomes the better option because it just…it’s a programming language; it can logic all this stuff, it knows a lot more about interaction than CSS does. And then there’s nothing wrong with using them together. You can get JavaScript to switch classes that trigger CSS animation and have the best of both worlds. But I think that’s also why we like to pit them against each other because there is no right answer; there’s a huge gray area of what you can accomplish both with CSS or JavaScript and it kind of almost comes down to personal preference.

I guess maybe there can be some cases that CSS is more performant than JavaScript depending on what you’re using and CSS is more in the core of the browser and JavaScript’s always going to be this kind of layer on top but JavaScript is really fast and if you make a good choice of what library you’re using, like you’re not using JQuery Animate, you’re probably in really good shape and if you write not crazy, bloated code, you’re probably going to get really similar results as far as performance goes. And you could also write some really crazy, bloated CSS and stuff; it happens! So there’s a lot…I feel like it’s just not like there’s always one that’s the perfect answer; there’s a lot of overlap and a lot of cases where there probably is no right answer: either one you picked you’d be right for what you need.

Katie:

Totally. That’s really awesome to hear because I never knew which was better. In my head when I try to think of animations I’m always like, oh I just thought was CSS was lighter but I don’t really know, so that’s good to hear from a pro.

Val:

Yeah, I think it probably in a super-pure sense is, but then JavaScript is just getting so fast and you can make good decisions on stuff so I feel like it’s really using what makes the most sense for your situation should be the first call, not which one all these articles on the internet say is faster, because if it makes sense for you in what you’re trying to accomplish and you can pull it off well, why not? It’s totally right in my book. I think that’s why those articles bother me; I feel like it’s asking the wrong question first. You shouldn’t be looking at what tools should I use? You should know what problem you’re trying to solve first then go from there.

Katie:

Absolutely. That’s kind of like the mantra for web design in general.

Val:

I know.

Katie:

People are like Sketch versus Photoshop. I’m like, it really doesn’t matter!

Val:

If you can get done what you need to get done and you’re efficiently solving the problem, or at least mostly efficiently; we’re not perfectly efficient, no matter what we do, it’s like you’re in good shape. If it made sense to you, go for it.

Tim:

Amen!

Katie:

Now we can go write angry articles about which technology’s always better, no matter what! How do you communicate animation with team-mates? I’ve struggled with this in the past from, oh it’d be really cool if it did this thing and kind of the only solution that I found is, find a similar example on CodePen that has the motion and be like, something like this but…not… So, when you say story-boarding, what does that look like?

Val:

Yeah, yeah. Storyboarding I think is kind of a misleading term sometimes because when you see story-boards for things like films or animated films you’re like, these are beautiful and they’re lovely and perfectly composed and drawn and that’s not what my story-boards look like at all. They’re basically crazy chicken-scratch that usually I’m the only one that can understand; maybe I’ll make them a little prettier if I’m working with… If I’m working with a developer I work with a lot and I feel like I can show them my horrible sketches, I will. But usually I make those just for me enough to get it out of my head and figure out what I want to make. And then I try to mock it up into some kind of motion example, like a motion prototype kind of thing. And a lot of times I might do that.

I’ve been doing that in After Effects a lot because I’m kinda lazy and I know how to use it. I’ve actually recently been trying to do it in Keynote because I’ve seen some really great things of people using Keynote for prototyping animation and it actually seems to work really well so I want to see if I can get it to work like that too. It’s like this challenge; I’m like, Keynote can do that? Wow! But finding other examples of it work too, like here’s how they did it; what if we did it?

Similarly, the biggest thing is getting something that you can all look at because when you’re talking about it, unless you’ve worked together for ages and ages I feel like we all have different interpretations of the words that we use to describe motion and for a lot of us, we don’t really have a deep vocabulary for it. We didn’t go to motion design school; some people might know what you’re talking about if you talk about follow-through. Some people might not, so if you can put something together to show them that and be like, this is what I’m talking about, then you can have better conversations about it. Then as you move forward through your process, you can get to the point where you even make a prototype you can actually interact with to see how that interaction feels so you’re not just looking at it and determining it, judging it based only on its looks since that’s kind of only half the battle with UI animations, so a lot of prototyping: having something to look at helps a ton and then depending on what question you’re trying to answer, you might make a higher fidelity prototype or a lower one.

Tim:

You mentioned not having that motion school background. But how important is it to…to step back a little bit from the technical conversation that often happens when we’re talking about animations and transitions like, this is how you do it in CSS, this is how you do it in JavaScript, but how important is it to step back and actually look at more traditional motion design or animation and get a better feel for those sorts of principles and understanding those things? How applicable are those things and is that an important part of this?

Val:

Yeah, I think it’s a really important part. Because of the history of it, of course, because we didn’t invent animation: crazy, I know! But it’s been happening for years and years and years and those super-old guys at Disney who came up with all these things out of The Illusion of Life and the 12 Classic Principles, they kind of knew what they were talking about; the made some really good stuff. Of course, they were talking about how to hand-draw cell animation that got photographed and the way they did it was crazy; amazingly crazy and we’re doing it with computers so the tools are different.

So in that sense it doesn’t apply perfectly; you can’t really take it word for word and be like, this is how it’s done, because some of their principles just don’t matter to us any more. Things like post to post stuff and drawing all that; the computer does that for us now, sorry. But we also have different things we need to look at, right? In the same sense, we’re creating animation that needs to be interacted with and that’s kind of the most important thing we’re doing, we’re creating these interactions; some of them have animation and there’s nothing in those classic principles on that, so in those cases, we sort of have to make up our own rules and we are, as we’re going, but I think it’s really important to have an understanding of that history, if for nothing else, because it’s really awesome to read about and they did crazy stuff. If you look at the way they charted out motion, or the crazy camera set-ups they had: it was amazing.

But they were onto something there; there’s things we can learn from them and if nothing else, we can get a vocabulary of what to call these things; you’re just like, the bouncy bit. What does that mean? Which bouncy bit? If you can say, the anticipation or the follow-through or the secondary action; if nothing else, you just get labels for this stuff; that’s good. But I think we can get a little bit more than just labels from them, it’s just not one to one…not everything they say applies but so much of it does; it’s a really good basis and foundation to start from.

Tim:

I agree about it being super-fun, by the way, to dig into…I got sucked into that by one book and then ever since then it’s just been anything related to animation cartoon, animation, it’s fascinating and there’s so many…it’s not just the principles; I think there’s so many things in the process that are either applicable to what we’re doing or at least it’s sort of a mirror inside of a slightly different world, like similar steps, similar things in an entirely different medium and it’s pretty cool to see the parallels.

Val:

Yeah, my favorite is the…I forget his name…of course, I forget everyone’s name, I’m terrible with that, but it’s the Animator Survival Guide.

Tim:

Oh, Richard Williams.

Val:

Yeah, he did Roger Rabbit stuff.

Tim:

Yeah.

Val:

And I think it’s also in part just the way they printed that book; there’s one page, it’s a huge motion chart, and some of his drawings showing how he thinks through motion and how they did stuff and drew these things, I’m just like, this is amazing; I could never do this!

Tim:

I have that book. Actually, the only reason I’ve remembered his name is because I have that book on my shelf across the office! Otherwise, no way! But you’re right…

Val:

I have to start doing that!

Tim:

It’s great the way they printed it, it’s full of sketches and everything. It’s just a really fun book to look through, actually.

Val:

Yeah, you almost feel like you’re in it and I like it a lot, so it’s a good one to check out.

Tim:

So, one thing that I wanted to ask a little bit about with the animation stuff, kind of regards to performance is, you see the big push from everybody about trying to get silky-smooth animations; sixty frame per second is thrown out all the time. But that’s not always an easy thing to do on some of the lower-powered device, you know, less capable sort of browsers, things like that. Do you ever find yourself doing something like a mustard cut for animations or transitions, deciding that we’re only going to use…we’re not going to use these sorts of intense animations on lower power devices and doing some sort of a check for this: how do you view that, I guess, so that you can avoid…how important is it avoiding jink on slightly less capable devices?

Val:

I think it’s important. But it also depends on the project and your audience. If there’s…maybe it’s totally uncool to say it, but if there’s very, very little chance anyone is going to be using those devices, maybe you don’t want to dedicate a ton of time to it; maybe you’re OK if you’re like, hey, it’s going to be kind of crappy for you but 95% of my audience is here and it’s not going to be crappy for them. Maybe that’s cool. I think it depends on what it is and what you’re doing. If you’re selling stuff, maybe not so much. But it’s definitely something that’s important to think about and to consider doing, if you know you have this really wide range of devices that you want to make sure you can accommodate, you might make some different choices up front as to how you segment out your animation and that might be a really good reason to do it mostly in JavaScript so it’s easier to be like, hey browser, can you do this? No? OK, sure, then take this if you can. Because it gets a little trickier with CSS, right because browsers, oh God, especially old Android browsers are like, yeah, we can totally do that CSS. Oh wait; what? Sorry! If read the can I use thing for…crap, is it the CSS Animation one? I think it is. And they’re basically like, yeah, these older Android browsers say they can do it. They can’t. Microsoft’s…the Windows Phone and Fonts where it says it can download them, but it really can’t, so I feel like there’s maybe less lying when you go with the JavaScript situation but maybe I just haven’t run into those yet!

Tim:

There will be…the good news is I think, I don’t know if you’ve seen the CSS4 Media Queries stuff which, who knows whenever that’s going to come out, any of those things, or if they will; I think they’ve changed their minds on those a million times. But, Scott Jehl did point me in the direction of one called update-frequency which apparently is going to be all about the output device’s ability to, how quickly can it change things when it’s rendered specifically for things like animations and transitions, so from the CSS side of things, there is hope.

Val:

That is really interesting, because even the stuff I’m talking about, if you test to see if it’s capable, you still don’t know how capable it is. And you can maybe make some guesses based on the device but there’s no good way for us to find that out, is there, we’re just kind of like, we think that maybe if you say you’re this you might be bad at this so we’ll take it away. Or the opposite of like, we think you might be good at it because you say that you’re this kind of browser so we’ll give you this and hopefully you can play it back good! That blind kind of hope, I guess.

Tim:

True, but it’s kind of…the blind kind of hope is kind of what it’s like to build for the web in general. You do your best to accommodate different situations and then just let the rest go.

Val:

Yeah, yeah, and we have a lot more flexibility with that, I think, inasmuch as that’s kind of like, I don’t know if anyone has a super-good answer for all that, and it is a bit challenge, how do we do these fancy new things when we also have all these devices that might be new but are not fancy or are old or whatever, they’re this huge range of capabilities, but we have some ability to be a little more fine-grained about who gets what and who sees what or whatever else; it’s not like, if you think about it, back in the Flash days, it was basically you either have the Flash Player or you don’t; that was it, and it’s like we have so much more control now that even though it’s not perfect, we can do a lot with it.

Tim:

So, is there anything that has you super-excited, kind of along the lines of the out-there technology that may or may not be coming? Is there anything that has you super-excited that’s on the horizon for better animation and transition inside of browser?

Val:

Yeah, there’s a bunch of stuff. There’s so much cool stuff happening. Why are we not all so excited about this? I’m excited about it! The two ones that I’m super-excited about for so many reasons but the web animation API I’m very excited about to see where this goes because it’s basically, for anyone not familiar with it, it basically does what the name says and it’s trying to create this umbrella under which we would do all web animation essentially. It’s essentially a JavaScript thing, kind of lower level on the browser side that would allow us to control things like CSS animations and SVG and JavaScript and everything kind of all under one umbrella. That’s the overall goal of it to have this kind of unified way of doing animation.

And we’ve already seen some great results because of this thing. It’s not really super-well implemented; it’s here and there in versions of Chrome and a little bit like Firefox Developer but it’s not widely supported. There is a polyfill but I wouldn’t say it’s something you could use in production of a client site at this point, but we have gotten some really cool things out of it already; things like in Chrome dev tools where you can pause and play and slow down the speeds of animation; that’s all because of the web animation API, that’s what’s running it and that’s why it can only do CSS and/or web animation API animations; it can’t slow down your JQuery. But that’s a huge, crazy, powerful tool that has saved me a ridiculous amount of time designing and debugging animations and that’s thanks to the web animation API. So I’m very excited to see where that’s going, especially as it becomes more forward facing and not just these tools for us.

I’m also very excited about a change that I’ve heard might be coming to the way CSS transforms work where right now, I know we didn’t talk about any code stuff yet, but I’m going to talk about code stuff: too bad. Right now, all of the transforms are hooked into this single property, so we know that some of the most performed properties in CSS that we can change are things like opacity and scale and translate and rotation. But scale, translate and rotation are all under transform which means they’re all under the same property and even though they’re super-efficient, that gets you into some weird logic situations, because you’re like, wait: what if I want to change this to scale but I want everything else to stay the same, but that’s all under my transform. My brain hurts. You can get yourself into some really weird, tricky places with that because those aren’t three separate properties.

And apparently I think it’s Tab Atkins is hopefully pushing a change through or promoting a change to go through that would actually separate those out and I think that’ll make a huge change for dealing with CSS, especially when it comes to the keyframe animations because if you could separate out those properties, you could write keyframes in a way that just makes more sense logically to our human brains and that would just make it so much easier and avoid all those really weird issues where you’re like, why can’t I do this? I should be able to do this, aargh…keyboard smash! I’m very excited about it but sometimes it also gets me really angry!

Tim:

Well, it’s a good thing to avoid the keyboard smashes because that gets expensive over time!

Val:

Yeah, but if I throw the book shower like we were talking about before I could get new keyboards! Sorry! I needed to bring that back somehow!

Katie:

It was on the wish list.

Tim:

Oh that’s great.

Val:

I think one of the biggest things to remember about all this stuff, when it comes to web animation is, we’re so very much at the beginning of things; it feels like we’ve been doing this for a long time. Really it’s only been a few years and new things are coming up all the time like the two things I mentioned, things like motion along a path, all this stuff is coming and in the works and there’s a lot of really smart people working to improve the way browsers interpret this and the tools that we have to do this, so it’s only going to get better and more interesting.

Katie:

Awesome. That’s a really inspiring sentiment, I think, to end on!

Val:

But it’s totally true, too. That’s my animation pep talk. It’s like, don’t worry, whatever problems you’re having, things are getting better and they’re so amazing! Yeah, that’s kind of the story of every one of my talks!

Tim:

And that’s why everybody enjoys them so much and comes away so fired up.

Katie:

I can vouch anybody who has the chance to see Val present, absolutely should, because you do these really great dances to mimic the animations and it’s really awesome.

Val:

Yeah, those are always kind of embarrassing, but also, I don’t know how else to do it and I totally do that in client meetings too or team meetings when I’m trying to describe stuff and don’t have a good prototype made. Maybe that’s why I like prototypes so much; I save myself the embarrassment of acting it out!

Tim:

Don’t be embarrassed; it’s fantastic!

Val:

Whatever works, right? People pay attention, they’re like, oh she’s dancing again: crap!

Tim:

So outside of just following you around and going to every conference that you speak at, how do people keep tabs on the cool things that you’re doing?

Val:

Well, Twitter, I probably talk about everything on Twitter. And a lot of things, so I’m vlh on Twitter. My site is valhead.com and I’m trying to put a lot of stuff on there; I’m hoping to post a lot more of the whole book writing process to maybe demystify it a little bit and motivate me to keep doing it.

Tim:

Nice. I like that idea.

Katie:

That’s awesome. I can’t wait for your book to come out.

Tim:

What’s the title of the book, by the way?

Val:

The title of the book is Designing Interface Animations: Improving the User Experience Through Animation. Well that’s I guess the title and sub-title, full title.

Tim:

I was going to say, it’s a long title; it’s going to be a small book!

Katie:

It’s a big title!

Val:

The official…the title-title is Designing Interface Animations and it’s coming out on Rosenfeld.

Katie:

Awesome.

Tim:

Awesome. And of course the Motion & Meaning podcast that you do with Cennydd that we mentioned earlier is excellent.

Val:

Yeah! That one too, and we talk about a lot of this stuff in great detail and I think it’s kind of a funny podcast to listen to because Cennydd is very considered and very…he just does really smart stuff and I’m like, I talk around and eventually get to a point: he just says amazing smart things so it’s a good contrast!

Katie:

That’s how I feel with Tim!

Tim:

Well, I just talk around, but I don’t ever make a good point.

Katie:

No, I’m saying that I’m the one that talks around and you say stuff that I’m like, oh yeah, that’s what I was trying to say!

Val:

Podcasts are more fun with other people; I don’t know how anyone does a solo one.

Katie:

Yeah, I would just have an awkward pause with myself and then be like…errr….do you have a question for yourself?

Tim:

That could be mildly entertaining, actually, we should consider that for a future episode. Katie interviews Katie! Well, thank you Val, we appreciate it.

Katie:

Yeah, thank you so much.

Val:

Thanks for having me, this was super-fun, guys; I’m glad I could come talk about animation with you two.

Katie:

Yeah. Have fun in Canada!

Val:

Thanks.

Tim:

Thank you for listening to this episode of the Path to Performance podcast. You can subscribe to the podcast through iTunes or on our site, pathtoperf.com. You can also follow along on Twitter @pathtoperf. We’d love to hear what you thought, so feel free to drop us a note on Twitter or leave a raving and overly-kind review on iTunes. We like to read those. And if you’d like to talk about being a guest or sponsoring a future episode, feel free to email us at hello@pathtoperf.com.