Prototyping Motion and Material Design – Designer vs. Developer #23


NICK BUTCHER: I’d
love to get to a space where more people can
prototype in stuff that isn’t going to be thrown
away, be that code or whatever it might be. MUSTAFA KURTULDU: Itself,
or the feeling of it. You just, I’m doing
this transition. Does this transition
look smooth? Rather than, what is the intent? I think that’s the thing
that’s oftentimes lost. [MUSIC PLAYING] One of the challenges
I find with, like, prototyping tools
is you spend all this time working on something, and
then you just throw it away. But I know the way you’ve
worked on, say, Plaid, is you’ve actually
worked in the code and prototyped in the code,
which, again, kind of like [INAUDIBLE], blows my mind. What is your preference of that? I mean, what are your feelings
about prototyping tools? Are they a bit– do they hold back
the design process? I’m asking you lots of
questions all in one go. NICK BUTCHER: No,
it’s cool, man. You’re asking me
lots of questions about my favorite
subject, so that’s good. I love prototyping tools,
because they enable people to prototype, and I think more
people should be prototyping. I agree that I hate writing–
spending time building something and making something
that you might end up throwing away, which
is why, for me, I find I don’t spend a lot of
time in prototyping tools. Because I kind of get
to an idea as quickly as I can, and then move into
code as quickly as I can, because I can code. But, you know, if that’s
in your skill set, then moving into code might
be a good option for you. Maybe using something
like Framer or something like that, where you might be
able to use some of the code later on. But if you can’t
code, if you don’t have the skill set
in your arsenal, then maybe a
prototyping tool allows you to get into that space. So I feel like more people
should be prototyping, but I’d love to get to a space
where more people can prototype in stuff that isn’t going to
be thrown away, be that code or whatever it might be. MUSTAFA KURTULDU:
Yeah, I suppose– I guess it really does come
down to a point of what the intent of the prototype is. I mean, I know there’s
that Goldilocks principle, where it’s like you
spend so much time and it gets so tedious. That seems wasted, while
the prototyping tools I like, especially recently– I’ve been doing paper
prototyping, where you’ve literally got screened
paper, and you film someone, and you press it, and you change
the paper in front of them. That seems more
valuable, because you’re learning the flow rather
than thinking, really, trying to prototype the transition,
which seems like, now, you should really be getting a
developer, at the very least, doing something. I mean, what do you think about? NICK BUTCHER: Yeah. I mean, doing prototyping
at all is the first step, because I don’t think many
people are doing that enough. There’s kind of lots of
static and screen design. And then things fall
through the cracks. So I think anyone starting to
do prototyping is always good. But then, I agree– there is
totally a diminishing returns to– if you spend so
much time absolutely polishing every fine
detail, then that’s kind of past the
point of prototyping. For me, it’s about getting
to learning really quickly. It’s getting to that
point where you work out– is this going to work? Is this something
we should pursue, or should we throw it away? And if you spent loads
of time polishing your amazing prototype,
then you suddenly become very reticent
to throw it away. You’re kind of,
like, it’s your baby. You’ve polished this too much. And so that’s dangerous,
because then you’re not using prototyping for
prototyping’s real purpose, which is to learn. So yeah, I agree totally. I think that low fidelity
stuff like paper is awesome. Normally, most of my
transitions, animations, and stuff like that, I normally
have post-it notes on my desk. You’ve probably seen my desk
covered in post-it notes. MUSTAFA KURTULDU: Me, too. NICK BUTCHER: And I’m going like
this, does this move like this? Does this surface make sense
to move like this, or something like that? Because it’s so quick, and I
can throw away that idea really, really cheaply. If I’d spent an hour or two
hours in a tool, building that, I might not want
to throw it away, because I feel attached to it. MUSTAFA KURTULDU:
How have you gone about the process
of designing those– really, the icons
transitioning, and all that? Especially in Plaids
where the heart breaks when you unfavorite it? These things are
really beautiful. How do you actually
design those? It’s great to draw if
I want to be great, but it’s like that final step. Like, I know designers
use After Effects. And I’ve never quite
understood After Effects as a prototyping tool, because
it’s just an animation. I mean– NICK BUTCHER: I just don’t
understand After Effects. [LAUGHTER] MUSTAFA KURTULDU: So
I mean, how do you go about the
process of designing those delightful details? NICK BUTCHER: Well, part of
it is I just find it so fun. So I think there’s a
lot of joy to be had in some of these animations. And I want to bring back into
some kind of a uninspiring UI sometimes. So I find those kind
of delightful details, as you call them, really can
bring an app and an experience to life. And so I value that. And I think that’s very
important to a product. So part of that is what
motivates me to do it and how I do it. I think to me, because I have
overlapping skills in design and development, I think I take
inspiration from both of them. So for example, like in
those icon animations you’re talking about, I
kind of went really deep into understanding what the
capabilities of the software, the technology were so I
knew what the parameters I had to play with were. I knew, you know, the
basics of you can translate, you can rotate, you
can trim like this. You can do this and that. And I think that gave
me inspiration into– all right, so given these
are the building blocks I can build with, what can I make? And then just went
from there, really. So it’s, like, OK, so I know
what I can build with it and what might make sense for
this transition or this state change. Or moving into here, do I
want to direct attention, or do I want to make
this super subtle? So I think, yeah, the
combination of the intent piece you’re talking about
with understanding the platform and then bringing your
creativity to that basis is how I went about it. So for me, learning
the capabilities were a super important
part of the process. MUSTAFA KURTULDU: In terms
of designing the motion before you’ve actually made it,
I mean, do you look at the UI and you’re almost
searching for what can I do to make this thing really cool? I mean, what is that step? Is that you drawing on paper? How are you visualizing
that in your head? NICK BUTCHER: For me, animation,
especially state change stuff, is all about lessening
the cognitive load. It’s hard to say. And for me, it’s about
if something changes, how do I make it explain
that change, like, the user knows what’s going on? That’s always where
I’m coming from. I don’t really start
from what can I do? How can I make this
showbizzy or, like, bling? And so coming from
that, you normally have a start state
and an end state. And I wanted to make the
transition between those two as smooth as possible. So I think that’s
where I start from. And then, it’s thinking of
creative and delightful ways that you can ease that. So I think the example you
picked of the heart breaking, I knew I wanted
to go from a state where you had a filled
heart to a state where you have an empty heart. And it’s, like, what could be
a way that you could do this? And that’s where you
bring the imagination, and you play with it, and you
understand the capabilities. And [INAUDIBLE] heartbreaking
and it redraws, why not? MUSTAFA KURTULDU:
And motion seems to be the fashionable
thing at the moment. But my fear is motion
is the jazziness that you were speaking about. People doing it because we now
have the capability to do it, like, you have the frameworks
and the libraries and whatever, which makes these transition
states quite simple. The fear from my
point of view is, are people just doing it
for the sake of doing it? Like, it becomes a visual
distraction, as opposed to what you were saying earlier. Like, you’re supposed to be
guiding a user’s eye to, like– NICK BUTCHER: That’s
definitely a fear. I mean, there’s always
a pendulum swing, right, where something becomes
easy and people overuse it. And then it kind of goes out
of fashion, and it swings back, and it probably readjusts
somewhere in the middle. I agree that maybe
we are in that state. Maybe with the explosion of
prototyping tools, suddenly, motion has become more
accessible to a bunch of designers, and maybe they’re
kind of going into that space and learning the boundaries. And maybe there’ll be a
readjustment back to it. But I think you nailed
it, because good motion shouldn’t be noticeable. In many ways, it should be that
thing that kind of explains or supports what’s changed. But it shouldn’t
be eye catching. And sometimes it should be. Sometimes you need
to draw attention. But a lot of the time,
it should actually make a transition simpler,
and you don’t notice it. It should be the case where,
if you turn animations off, and it suddenly
feels very staccato and it just feels
kind of broken, really, because you
understand that motion is playing a supporting role. It’s not the star. It’s kind of helping
to unfold the scene. MUSTAFA KURTULDU: Do you
think that sometimes we leave motion design
and interaction design as an afterthought? NICK BUTCHER: Absolutely. MUSTAFA KURTULDU:
There seems to be– and maybe that’s where
the problems lie. Because it’s an afterthought,
it’s, like, well, how can I make the
explosions, rather than I’ve got to two view states. I want to go from
one space to another. What can I do that actually
enhances the experience, not, like, [INAUDIBLE]. NICK BUTCHER: There’s a couple
of things going on, I think, in the industry as a whole. I think the increasing
tooling, like making it more accessible to
some people is one thing. But also, a lot of people
have a lot of fear. Because they say, hey,
I’m not a motion designer. I’m an interaction designer. I don’t know what I’m
kind of doing here. So I think they kind
of are intentional, in that some people are
getting into it headstrong and some people are
too scared to do it. So I think we’re an
interesting place in the industry now where motion
is becoming more apparent. My favorite things
about material design is that it elevated motion
as a first class citizen. It explicitly said,
you know, we don’t think that motion
should be sprinkled on at the end as little kind
of moments of joy or whatever. It said that it should be
part of the experience. It kind of put it on the
level with layout and content and hierarchy and
had motion as one of the main pillars behind
it when it first launched. And I kind of really appreciate
that, because I agree. I think good motion makes
an app more understandable. It’s more akin to
interaction design to me than it is to a
visual, polish level. MUSTAFA KURTULDU:
What do you think is the next step
for a designer who– OK, they’ve seen the theory. They’ve got some ideas. What should they be doing next? Because material
design is great, but if it doesn’t fit your app,
or if you have other ideas, how can you improve on your
own transitional motion? NICK BUTCHER: Well,
what I’d love to see is people taking that
to the next level. And I think motion can be a real
pillar in your brand strategy almost. Like, the personality of
your application or program, whatever it is. You wouldn’t want
every single app to use the same
typeface or same color. Yet, a lot of applications are
using the same color, like, motion curves, or the same
kind of motion strategy. And so I feel as people
kind of mature along the curve of understanding
when to use motion and when not to
use motion, I think we’re going to go into more of
a– kind of go deeper with it. And what is my brand’s motion? How do I have this feeling? Should I use some
spring motion to kind of communicate something,
or like a slower or more sophisticated thing? Or do I use stagger in this way? So I think we’re going
to see people go deeper to express personality through
a different kind of motion, rather than just a vanilla– OK, we’ll go to transition. That’s better than not
having a transition. But what should that
transition say or not say? MUSTAFA KURTULDU: In terms
of the actual tool sets, Lottie seems to be a
quite popular tool. I mean, how are you
using that to design some of the icon transitions? NICK BUTCHER: So Lottie
is pretty awesome. I think it’s really
made motion more accessible to a lot of
designers out there, especially the ease with which
you can hand off between design and engineering– I think they’ve done an
actually fantastic job of that. If anyone has not used
it, it’s basically an After Effects plugin which
means you can export from that straight into a JSON format. And then you drop that straight
into the web or Android or iOS. It will have players for it,
which will then just play it. So in terms of workflow, I
think it’s been phenomenal. There’s definitely some
ups and downsides to that. So it’s very tied
to After Effects. So if you want to work in
After Effects, then it’s great. So that can be also be extremely
daunting for some people. So say you just want to do
a simple icon animation. So you want to do
the [INAUDIBLE] to a back button or
something like that, if you’re not already skilled
up in After Effects, then it’s kind of not going to
help you there, really. MUSTAFA KURTULDU: Just going
back to some of the other stuff, like, specifically
material design, I think one of the challenges
we’ve always had is, because of the way the material
design guidelines are written, it’s like dos and don’ts. And I think That’s really
helpful for people who are really introduced into design. But likewise, it’s
come across as– these are complete rules. And the thing that we’ve
always pushed as is guidance. And I know you’re speaking about
the material design layer cake. NICK BUTCHER: The layer cake. MUSTAFA KURTULDU: –if
you can remember– what do you think about
this idea of guides versus rules or vice versa? NICK BUTCHER: Yeah,
totally, I completely agree. I think the way that the
guidelines were written, they’re really good. They’re aiming to be succinct
in that they kind of have these clear examples–
do this, don’t do that. But they can seem very
prescriptive because of that. And we don’t always
communicate when something is kind of nearer to a
rule and when something is nearer to a guideline. And there is a variety
of those things. And we were talking a while ago
about this layer cake metaphor, where there’s kind
of three layers, or three different types of
guideline in the material guidelines, and as such,
how close to a rule they are kind of varies. The way we kind of,
then, think about it is at the bottom layer, you have
this layer of foundational type things, which is based on
stuff which is kind of observed literally, based on how people
interact with computers, like, how big
people’s fingers are. Like, certain things
are just kind of– MUSTAFA KURTULDU: The
ergonomics, the physical– NICK BUTCHER: Right. So when we say don’t
use touch targets smaller than 48 DPs, that’s
not going to change, right? So that’s nearer
to a rule, right? And so you shouldn’t
really violate that. And the next layer
is something called– like, we think of conventions. So that’s saying there may
be a dozen different ways you could solve a design challenge. But if every application
approached it as a novel thing, then you users couldn’t
learn it in one place and apply it elsewhere. And as such, it’s going to
feel harder to use your app. Or it’s just going
to feel like a mess. The platform isn’t going
to feel like it has any rules of the road, right? And so, in those cases,
it’s kind of not a rule, not a guideline,
somewhere in between, trying to start from
the patterns defined on the platform, and then, vary
if it isn’t working for you, but only do it
for a good reason. Deviate with purpose, I guess,
is the phrase we’ve been using. And then the top layer of this
cake, I guess, is one of– I think it was personality. So that’s things like the
colors that you choose, the type that you set,
the motion, perhaps, like the curves that
you use in this. You know, we have to
express it somehow when we give the guidelines. And so we kind of use some
fonts and some colors. But those are in no way
prescriptive, right? Just because
material says here’s a bunch of different reds you
might want to use, kind of we want to help people out if they
don’t know where to start from, it doesn’t mean these are
the only shades of red right? If you’re Ferrari or
the BBC or whatever, you have your own brand
palette, and you’re probably going to pick from that, or
you have to pick from that. You’re not going to stick
to the material guidelines. So I hope that
kind of illustrates that while they might
seem like rules sometimes, it varies based on the
kind of level of the cake, I guess, you’re at. And you need to
understand that as well, so you know when
to vary it, and you know when to stick
closer to the platform. SPEAKER: When you’ve
made it yourself, you’ve filled it out 100 times. You’ve tested it yourself. You don’t think about
the fact that a user’s going to be coming to it in a
different state of mind, right? They’re tired. They are trying to fill
it out as fast as they can on the phone, right? So I think developers
just aren’t really thinking about the fact
that they need to take these extra small steps.

5 Comments

Add a Comment

Your email address will not be published. Required fields are marked *