I was messing around on my phone the other day and realized how simple the Instagram story 3D transitions are to create in After Effects.

I put together this quick tutorial to show you how it’s done.

Most people don’t realize how insanely easy it is to create something visually quite stunning in After Effects.

And here’s the version I made using photos of my Norwegian Forest Cat, in about 5 minutes in After Effects using true 3D with a parallel light, nulls, and parenting.

Here’s the Instagram reference:

While 3D cube transitions aren’t totally common, they are cool, and once you get the feel of how simple 3D works in After Effects, you’ll be stoked.

You can download the source files and follow along here:

https://www.uxinmotion.com/blog/how-to-create-a-3d-instagram-cube-transition-in-after-effects

Here are the steps covered in the tutorial

1. Import the design file
2. Turn the layers 3D
3. Move and rotate the right side of the ‘cube’
4. Create a null
5. Move the null position in 3D space to the volumetric center of the ‘cube’
6. Parent the two layers to your null
7. Drop a couple y axis keyframes on that sucka
8. Ease those curves with the graph editor
9. Drop a parallax light on, and enjoy!

How to Create a 3D Instagram Cube Transition in After Effects was originally published in UX in Motion on Medium, where people are continuing the conversation by highlighting and responding to this story.

Over the last 18 months, I’ve been teaching motion and usability workshops to design teams at companies including Dropbox, Slack, Oracle, Salesforce, and Kayak.

Hundreds of other designers and engineers from other top brands including Apple, Twitter, Shopify, Cisco, Volkswagen, Bank of America, have also attended my public workshops.

During the workshop, we use no software or prototyping tools, aside from paper prototyping, which we use to ideate, and communicate ideas.

Participants (primarily UX, UI & Product Designers, as well as engineers) learn how to integrate motion into the CX and UX workflow, ideation and iteration, how to use motion to solve UX challenges, how to design and implement motion standards, and how to use an ROI framework to communicate the value of motion to team members and stakeholders.

With paper prototyping of motion, the emphasis is neither on aesthetics or drawing skills, but on ideation granularity: this exercise becomes a blueprint that the designer uses in their prototyping tool of choice, dramatically increasing efficiency and implementation speed. Additionally, participants learn a rapid ideation system that builds on user mental models and interface behaviors rather than tedious frame by frame storyboarding.

After the workshop, designers are immediately able to apply what they learned in their prototyping tool of their choice, whether it be Figma, After Effects, Framer, Principle, ProtoPie, Adobe XD, or any other tool that gets results for their team.

Designers learn how to use motion strategically to make better products and partner with engineers to deliver high quality results.

This workshop doesn’t turn good designers into animators. The workshop turns great designers into even better designers.

Workshop outcomes

The workshop has 5 outcomes, or skills, which are required to successfully design, implement, present, test, and ship motion at a team level.

1. Expand CX solution space
2. Acquire new design vocabulary for ideation and presentation of motion
3. Synergize collaboration between stakeholders, designers, and engineers
4. Effectively communicate the value of motion
5. Accelerate timelines and conserve budget with paper prototyping

If you want to learn more about the Creating Usability with Motion workshop, you can learn more at my workshop page.

Motion and usability

The demand for these team workshops spiked after my framework on motion and usability went viral and quickly ratcheted up over half a million views.

Read Creating Usability with Motion: The UX in Motion Manifesto.

With no further ado, here’s what I’ve learned, working personally with hundreds of UX/UI & Product Designers, as well as Engineers and PMs.

Lesson #1: Use an ROI framework to communicate motion

Probably the single greatest team challenge lies in the ability to communicate the value of motion.

This is also the largest opportunity.

While there is a general intuitive sense that motion has the potential to add value, the range of communicating this value falls all over the board. Very few teams approach the topic of motion from an ROI or metric standpoint.

When you fail to do this, it becomes nearly impossible to present motion opportunities to Product Managers, and make a compelling case for motion.

From a PM standpoint, motion can be perceived as having value, but could negatively impact the road map, may be risky to attempt, and not deliver results. At the same time, it has high perceived value.

As a designer, you want to speak the language that PM’s understand: results.

If you have project data, find it. If you have a testable hypothesis, test it. If you’re not sure of the impact on the road map, learn it. If you aren’t sure about platform capabilities, find out. Do all this before you meet with stakeholders, and I promise you that when you speak to these things, it will be a game changer.

I created a free PDF script for designers to use to sell motion to stakeholders. I crowd sourced this from colleagues, PMs and my own personal experience.

👉🏽 Click here to download the ‘how to sell motion to stakeholders’ PDF script

Lesson #2: Designers need to talk to engineers

When I talk to designers about the capabilities of their engineering team and platform, I am always surprised at how little they know.

I’m not saying that designers need to learn how to code.

What they do need to learn how to do is have simple conversations about platform limitations, low hanging fruit, understand the resources required from engineers (research, implementation, testing, and QC), as well as motion asset handoff.

All of these answers can be obtained over lunch, yet I find that rarely do designers initiate this level of partnership.

At the end of the day, engineers are the ones implementing motion.

And the platform, to a large degree, will influence what’s possible. I taught a workshop recently at a Fortune 500 design team, where due to platform legacy, there was actually very little their engineers could execute on with regards to motion. Everyone from the leadership on down wanted motion, and understood the value. But there was no way to deliver.

In the workshop, we worked on enhancing partnership and reducing ideation friction. The designers had to downscale what they wanted, and focus on delivering value in areas that were possible. This was a huge win because they were able to move projects forward and get projects implemented.

Having these conversations — early on — allows designers to spend their time wisely designing motion that can get made.

Granted, there are instances where ‘pie in the sky’ has value, but for essential transitions and components, it pays dividends for designers to understand capabilities and limitations.

In the workshop, we have personal conversations about creating this partnership with engineering.

Click here to learn more about the UX in Motion: Motion and Usability team workshop

Lesson #3: Motion is easier than you think

When it comes to motion and product design, UX/UI & Product Designers often feel overwhelmed. They have little understanding of timing, industry motion standards, or thinking through the entirety of a transition involving multiple objects and properties.

At the same time, motion has high premium value, and the team members who can both design UX and deliver motion prototypes are unicorns.

There is also the myth that it takes months to learn how to animate. And this is true if you want to learn how to become a classic style animator. However, designing transitions, micro-interactions, and dashboard animations are much easier than most designers realize.

In my follow up workshop participant interviews, I find that designers were quickly able to take what they learned during the 1 day or 1/2 day workshop and begin implementing motion in their projects, regardless of prototyping tool.

In addition, my UI Animation Motion Standards online course helps you take all the guesswork out of learning motion standards. You’ll quickly learn how to use industry standard durations and easings in your projects, how to create your own standards, and how to communicate these values to your engineers.

Look, here’s the truth: when it comes to product design, there are two completely different kinds of motion.

‘Integrative’ motion uses existing elements of the design, and relies on mental models and partnership with the UX. This kind of motion is very easy to learn, and is consists largely of transitions, micro-interactions, dashboard animations, and gesture. This is why all my UI Animation courses are only a few hours long.

Once you learn the industry standard plug and play timing numbers, everything becomes easy.

What I call ‘additive’ motion, on the other hand, is more like classic cartoon style motion and does take months to learn. This is motion that ‘goes on top’ of the design, is more passive for users, and typically involves complex behaviors, is highly technical, and involves non-standard timing.

As a designer, most of the motion you will be working on is integrative. This kind of motion delivers the most value in products, is easy to learn, and is what the majority of the motion and usability workshop focuses on.

To summarize

If you want to transform the process of how your team delivers motion, focusing on these 3 areas will help tremendously: focusing on an ROI framework, streamline communication between engineers and designers, and focusing on integrative motion first.

3 things I learned teaching Motion and Usability workshops was originally published in UX in Motion on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Question

Issara — Thank you so much for this content. I’m a total newb — and I mean newwwb. I have zero experience in motion design but I’m determined to find myself elated in a UX motion career in the nearest possible future. Your content is the best I have found when it comes to motion design, specifically for UX.

I purchased your courses and loving them so far. My approach is to keep going and not get discouraged by a lack of experience.

Any tips for imposter syndrome? I feel like I’m up against people who have been deep in this work for years.

Thanks again, keep this stuff coming!
Alexis

My answer

Hey Alexis, thanks for reaching out and I hope this finds you well.

I really appreciate the kind words.

It’s funny you mention imposter syndrome. I deal with this every day. Every single day I feel like an imposter. For years.

What I’ve learned is that it’s an emotional state that has no reflection in reality. I acknowledge it and get back to work.

The thing to keep in mind is that every single person you look up to, started off somewhere. They probably sucked for a while. But they kept at it. They probably felt like imposters as well.

The way I hack through this emotion is to come from a place of adding value. If that’s all I focus on, if that’s all I do is add a little more value to my project, my client, or my team, than I call that a win, regardless of how I felt about myself doing it.

That’s the gold standard I hold myself to. It’s what allows me to get up and write another article or create another tutorial.

Without this, I would feel like a fraud if I was calling myself an expert. I’ve never felt like an expert. Put another way, I’ve never had the experience of myself being an expert.

Instead, I focus on sharing what I learned, helping folks, being a good person (respectful, appreciative of my journey and the journey of others), and try to deliver value however I can.

The other piece of advice I can give (because I live this as well), is that when you find those folks who are so good they blow you away, you make friends with them. They can become your mentors. If they give you feedback and you follow it, they become invested in your success. It’s a natural process.

I know it can feel intimidating, but people who are extremely good are usually also extremely humble and enjoy providing feedback (providing that it gets followed). If they tell you to read a book, read it, then let them know you did, and ask them what you should read next. Be hungry. Offer to buy them lunch to pick their brain about how they approach projects. More than anything else, these relationships can last you your entire career.

Thirdly (because I also practice this as well), I would encourage you to start sharing what you’ve already learned with people who have less skill than you in this area. Teaching others is how you get better. Sharing what you learned expands your community. It doesn’t have to be a major class, you could just share a simple technique with someone.

I always look for opportunities to share, even when I’m not completely confident in my own ability to master a technique or problem. Through this sharing process, you become much more connected to the steps involved, the tools, and more efficient ways of working.

I hope this helps, and causes a shift in your ability see yourself not as an imposter or a competitor, but as someone who is in the perfect place in your learning/skill acquisition journey, and that everyone around you is an opportunity to learn and develop yourself to be a talented human being who can enrich the world around them.

Best,
Issara

What to do when you feel like an imposter was originally published in UX in Motion on Medium, where people are continuing the conversation by highlighting and responding to this story.

A few weeks ago I received a really good question: how do you transition from a motion background into UX and product design?

The motion designer who wants to transition into UX and product design

Many of the folks who reach out to me about this question fall into this group.

They have had a career in motion design, are already strong in After Effects, and want to make the transition over to UX and product design. Makes sense. The money is good and competition is fairly light.

They are very strong in motion but tend to be weak on ideation, collaboration, UX team dynamics, and understanding the fundamentals of UX. Additionally, they typically lack a point of view on the value of motion in product design, other than ‘it’s cool.’

Their main strength however, is that they are able to visualize how static screens can be connected with motion. This is a valuable skill that UX designers typically lack. So, motion designers transitioning into UX often have an advantage — if the team views them as UX contributors, and not just pixel pushers.

The UX workflow is different than for motion graphics

The first thing to understand is that UX design and workflow is fundamentally different than motion design. In motion design, unless you’re working on extremely complex projects involving multiple team members, it can be a rational choice to build your projects in a sloppy way, meaning that it takes time to develop clean workflows that are scalable and rapidly iterable based on emerging feedback and data.

From a cost/benefit standpoint, developing clean workflows can have little ROI in classic motion graphics projects. You can use tons of keyframes and essentially pay no price.

Not true for UX. You need to focus on extremely adaptable projects that you can deliver multiple versions on. I do this through a lot of parenting and strategizing the simplest way of building projects so that I can update them easily. This means I use as few keyframes as possible.

You need to embrace design systems

The second thing to realize is that UX works in a context of design systems, something that motion designers are trained NOT to do. The reason they’re trained to not use motion systems is that the emphasis is on making the motion look great, not fitting keyframes and easing to a standard set of parameters.

By contrast, you need to understand that delivering motion is not the end goal. The end goal is getting the motion into the product. You will not be doing this. Engineers/developers will be doing this. All motion must be scalable and fit into an ecosystem of other motion. Focusing on one-off’s is bad.

You need to learn the basics of UX

Fortunately (and UX designers will hate me for saying this), in my opinion, the basics of UX are easier to learn than the basics of motion. So here’s my recommend:

1. Read 3 of the top 10 UX books out there (buy from your local bookstore please, not Amazon). It really doesn’t matter which ones. Just read them. You’ll learn something. I know they’re boring. But do it anyway.
2. Take 1 online or live intro UX class. Don’t spend thousands of dollars doing this. Just find a well reviewed class that you can afford. Again, you need to learn the basics, not buy a freaking Porsche. Don’t take like 5 classes, like half my friends do. It’s just not worth it unless you want to become a UX designer.

From this minimal knowledge base, you can start to speak the language around UX, understand the way that UX and product designers talk about problems, and you’ll start to understand the basics concepts and workflows at a level where you can add value and contribute.

Keep in mind, many product managers are looking for motion people who can interface with UX teams.

The important thing is to not get all insecure and go crazy reading like 30 books and taking like 10 classes. Unless you’re looking to become a UX designer, you should be focusing on investing the minimum to understand and contribute to UX projects. Your end goal is that you want to position yourself as a strong motion person who integrates seamlessly with the UX team, can get your work to engineers, and can make compelling cases for when and how to use motion to improve experiences and make better products.

Learn another prototyping tool in addition to After Effects

Since you already probably use After Effects, I highly recommend you expand your versatility by learning an actual prototyping tool. You’ll want something high end.

If you can code, I’d have you learn Framer. If not, I’d have you learn something like Principle, Figma, or Protopie, or if you know someone on the team you’re applying to work on, ask them what they use — and then learn that tool. Don’t go out and learn some weird edgy tool that nobody has ever heard of. Seriously, don’t.

The good news is that these tools are insanely easy to learn, compared to After Effects.

The advantage of AE is that it can do anything. The disadvantage is that it’s not interactive. The other prototyping tools will all seem primitive in comparison, but they do deliver interactive prototypes, which you will need to deliver on occasion.

Do not learn Adobe XD unless you HAVE to. The animation skills are lacking (in my opinion).

Also, educate yourself about Lottie. It’s easy to learn, and will blow people’s minds and add a ton of value.

Learn Sketch

As much as I hate to tell you to learn something else, you really should learn Sketch. The tool is so easy you can pick up the basics in half a day.

Most (but not all) designers use Sketch, so the assets you will be working with will likely (but not always) be coming to you from Sketch. You’ll want to watch my tutorial video on how to get Sketch files into After Effects.

Strategically design your portfolio for the kind of work you want

Read my article here on this topic. The idea is that project managers are looking for 4 kinds of (potentially overlapping) skills, and you want to fit your work to one of these 4 areas, and demonstrate you have the skills they are looking for. The 4 things they’re looking for are:

1. Demonstrate that you can build UI animation
2. Demonstrate that you can think through UI animation in the context of UX
3. Demonstrate that you are an animator and can deliver high quality motion for digital products
4. Demonstrate that you have a technical knowledge of implementing motion and can work with engineers

To develop a strong portfolio, you MUST collaborate

This is the big one. Chances are you have a strong motion portfolio but your design skills are… lacking, to put it politely.

The bad news: unless you are working with extremely high-end visual assets, your portfolio is going to look… bad. As a motion person, your UI design skills are probably far short of being impressive.

You just have to accept this and not try to impress people with your mediocre design skills. It will not go well for you. You’re going up against incredible, passionate designers who live for designing UI, and you will be mercilessly crushed. Nobody wants that.

People tend to not really understand this: if you work with poorly designed static source files, your animation will look bad, no matter how much love you put in.

The good news: there is no need to go to design school. Unless you are looking to transition your career and become a designer, just do the following –

1. Create an account on a site like Dribbble or Behance (hopefully both)
2. Find 10 phenomenal UX/UI/Product designers who have no motion in their portfolio. Do you see the bolded word above? Phenomenal. You’re looking for HOT designers. Not average, not decent, but HOTTT.
3. Reach out to them and invite them to collaborate: they provide you with their kick ass design source files to animate, and you provide them with insanely polished UI animations to use on their site. You may choose to give each other credit. Just be cool and work out the details. Even if you only find one person to collaborate with, do that. It’s a win/win with zero downside for either party.

Here’s how I would approach this in an email. Feel free to use this. I’d write something like:

Subject: Design collaboration

Hey Laura, I hope this finds you well. I came across your portfolio on Dribbble and I’m completely blown away by your design skills. My background is in motion design and I’m looking to create a strong portfolio of UI motion work. I was wondering if you would be open to a collaboration where I animate your source files and post to my UI animation portfolio, and give you credit in the description. In exchange, you can use my UI animations in your portfolio to showcase the potential of your gorgeous designs put to motion. Let me know what you think! I’m looking forward to hearing back.

Sincerely,
Issara

They may not write you back. Be cool. Be persistent. Until you get a ‘no’ just assume they’re busy. Feel free to reach out in multiple ways. Just keep ‘pinging,’ ‘checking in,’ and ‘resurfacing’ your inquiry. Be cool, have fun, and just try to find at least one awesome designer to work with.

When the person says yes: do not ask them to prepare their design files for you. Seriously. Take this as a personal challenge to learn how to work with files no matter how you get them. And also as a personal challenge to make this as friction free for this other person who is essentially doing you one huge ass solid.

Plus, you get to make a new friend, which is always great.

Alternatively, if you simply cannot find someone who will collab with you, and you are desperate, there are a TON of extremely high end UI mockup templates out there that you can buy for dirt cheap. The screens learn great, they’re all made in Sketch, and you can jam on those to your heart’s content. Last resort for sure, but no shame in doing it.

Again, you need visually strong assets or your portfolio will look bad.

If you are unable to tell what visually looks good or not, then find someone who you know who has taste and ask them. Don’t second guess. Don’t try to justify your belief in why your terribly designed thing is somehow better. Just don’t. It’s not worth the calories.

Post & share

The last step is to actually post these projects to your site. The common format is an animated GIF. You can use GifGun to do this.

Dribbble now supports videos so that’s great. Don’t go building some custom HTML website or I will literally transmogrify myself into pure data and smack you through your computer screen.

You can simply use a site like Dribbble or Behance or if you want to take it up a notch, use Cargo Collective. Do. Not. Use. Anything. Else. Do not use Wix. Or Squarespace. Do not create a custom HTML site. I can’t believe I even have to say this in 2019.

Then apply for jobs, share your links, post, and in all ways try to get your work in front of eyeballs. Be persistent, be patient, and when folks don’t get back to you, assume that they are busy, and follow up in a week or so.

🎓 If you want to learn UI animation from me, you can check out the UI animation courses on my site: UX in Motion

🚗 I have a popular and FREE UI Animation with After Effects Fast Start course. You can view it here

👨🏼‍🎤 If you want your team to learn motion and usability from me, you can go here: https://www.uxinmotion.com/onsite-workshops or schedule a call to learn more.

How to transition from a motion background into UX was originally published in UX in Motion on Medium, where people are continuing the conversation by highlighting and responding to this story.

Over the years of teaching UI animation and helping designers and animators integrate motion into their online portfolios, I’ve noticed a major trend: designers do not integrate motion well into their online portfolios, and miss out on this red hot opportunity to distinguish their work and get that high paying tech job.

Click here if you want to learn more about my UI Animation Certification Course

When it comes to the strategic design of your portfolio, it’s important to think not just in terms of the kinds of content you want to feature, but how to best position your portfolio (and process) pieces for the different roles that managers and clients look for when making hiring decisions.

Depending on your skill set and what kind of position or clients you are going after, I recommend you focus either exclusively on one of the below strategies, or a mix that works best for your skills and goals.

🍿Strategy 1: Demonstrate that you can build UI animation

In this strategy, you want to include high quality examples of UI motion.

These could be GIFs or videos or both. You want the motion to be smooth, polished, and professional. It should be eye catching and the visual UI assets should be strong (if you don’t have strong design projects, or asset deliverables, check back on my blog because my next article is on how to create these).

It does not need to contain ‘Disney style’ motion. You are essentially demonstrating that you can take UI/UX/Product design elements and move them around, and do it with skill.

The value on this approach is that you are communicating to hiring managers and clients that you can take their files and return awesome renders.

Example: Aurélien Salomon

In this example, Aurélien demonstrates that he can take product elements and turn them into something polished and desirable. Notice the fit and finish. And that the motion is somewhat component in nature.

If you are an animator and not a designer, and looking to develop a body of work like this, I HIGHLY suggest you find some amazing static designers online and collaborate with them to build out your portfolio.

For this skill level, hiring managers care about the quality of work you can deliver, not your experience, nor whether these projects are ‘real,’ in the sense of them being actual paid client work.

🤔 Strategy 2: Demonstrate that you can think through UI animation in the context of UX

This approach differs from Approach 1 in that you are going deeper into the nature of the UX. You are communicating (via images, renders, and text, and possibly even a video of you on camera) that you either designed the UX and/or UI, and/or you worked with another group of people who did these things.

You need to communicate that you can understand UX and product challenges, and that you used motion to solve these challenges.

This may mean that if you are a motion designer with no UX/product design experience, you have to read a book on UX and take a basic UX class either online or in the real world. It will be worth your time. Don’t go crazy and read like 100 books or take the most expensive class.

A simple affordable class will do.

If you want to go crazy with this and read all the books and take all the classes, I won’t discourage you, except to say that you want to focus on learning the minimum required to get a job, if your main skill is delivering motion.

So your page might contain sketches of your process, maybe data on user testing, or at least a problem/solution framework where you possibly ideate different motion solutions to the stated problem. For this approach, the value is going to be less on the total craftsmanship of your motion, and more how you integrate with the team and deliver results.

Of course, if your motion also happens to be hot, than you’re stoked. As in the case of Strategy 1, you wouldn’t necessarily have ‘Disney style’ motion here. You’d be proving that you can take design assets, create motion wireframes as well as high fidelity mockups using design assets.

You may also want to include how you factor in scalability of your motion, as well as your understanding of motion standards and anything else of relevance that a hiring manager would be looking for.

If you want to learn how to design motion timing for products and build a red hot portfolio, you can check out my new UI Animation Certification Course.

👩🏽‍🎨 Strategy 3: Demonstrate that you are a professional animator and can deliver high quality animation for digital products

This a wholly different category of motion design than in Strategy 1 or Strategy 2. In this approach, you are demonstrating that you are a highly skilled animator who can deliver high quality, insanely hot motion and do it for products.

Your portfolio should include examples of things like icon animations, product avatars, dynamic onboarding screens, logo’s, sticker, and product relevant characters or avatars.

The goal here is not necessarily to communicate your process, or that you even have a deep understanding of UX. You want your portfolio to communicate that you have the chops, AND (most importantly) you’re not just another motion graphics person. Your portfolio must communicate your understanding that motion design for digital products (apps and websites) is more specific, and involves working with assets designed in Figma, Sketch, and Adobe XD, and that you know how to hand-off to engineers.

So, the strategy here is twofold: to prove your ability to deliver beautiful motion AND to include portfolio pieces that relate to digital products. Not motion graphics screens for video. Or you will be relegated to doing only that on the team, and be ignored most of the time.

The things to (quickly) learn are how import assets made in Figma, Sketch, and Adobe XD, as well as how to export projects using Lottie.

Example: Markus Magnusson from Dropbox Paper

(Check out Markus’s patreon page if you’re interested in his animation process and picking up some tips & tricks.)

If you don’t have this skill and wish to acquire it, I recommend School of Motion. They will teach you how to become a skilled animator. Joey Korenman, the founder and CEO, is awesome, and passionate about delivering results.

🛠 Strategy 4: Demonstrate that you have a technical knowledge of implementing motion and can interface seamlessly between UX Designers and Engineers

This last strategy should be considered an ‘add on’ to strategy 1, 2, or 3. In this case, you want to demonstrate (via images, text, and/or possibly you on camera) a deeper understanding of how to interface seamlessly between UX Designers and Engineers.

You do not need to demonstrate that you can code. If you do know how to code, by all means, feature this in a relevant way that expands on the narrative that you can deliver high quality motion — and see it all the way through to handoff.

While most hiring managers won’t be asking for this, by surfacing this in your portfolio, it will be answering questions they didn’t even know they had, and demonstrate strategic thinking.

What to do if you don’t have this? Spend several days brushing up on Lottie, as well as other prototyping tools that create ‘shippable’ motion.

This could include tools like ProtoPie and Framer. Basically, anything that speaks to your understanding that designing motion is not the end goal. Implementation is.

The end goal is to have motion implemented. You must communicate your basic understanding of this. The key thing here is that every project is different. You’re not expected to know the exact asset handoff protocols for every project or combination of tools.

But you can communicate that you understand how to have these conversations with engineers, and do your own homework, and proactively perform basic research on the platform, prototyping tools, and asset prep. If you can communicate this in your portfolio, hiring managers will be thrilled.

To summarize

When you integrate motion into your portfolio, consider the above 4 strategic frameworks to better help you communicate the value of what you want to focus on in terms of attracting hiring managers and clients. Doing so will communicate to them that you understand the larger context of the project, and differentiate yourself and your work from typical motion designers who have not read this article :)

To join my private FB group, click here, to subscribe to my UI animation tutorials on YouTube, click here. To check out my UI animation courses click here

How to integrate UI animation strategically into your portfolio was originally published in UX in Motion on Medium, where people are continuing the conversation by highlighting and responding to this story.

Here is my list of 12 After Effects UI Animation feature requests.

The backstory: I’ve been teaching UI animation for the last 5 years. You can check out my courses here on my site UX in Motion.

Several weeks ago, after giving a talk on UI Animation at Adobe in SF, some folks at Adobe reached out to me and wanted to learn more about my UI animation workflow and pain points.

I think the larger context is that Adobe is really trying to figure out UX prototyping and they’re starting to realize that XD doesn’t cut it for animation, and that while using AE is a premium skill, it still doesn’t do interactive.

I realized that I had a pretty strong POV on some improvements that would go a LONG way in saving time, and encouraging more folks to use AE in their projects.

Let me know what you think and if you have any others to add. I’ll forward it on to the Adobe folks.

1. Buy GifGun

Nearly everyone doing UI animation in AE is exporting in a combination of ways. GIFs are key to that. The fact that you can’t export a GIF natively is mind blowing. Not sure if this is possible.

2. Buy Flow

Design systems are key. For folks doing UI Animation in AE there is currently no way to import or export easing curves without using a 3rd party plugin. Everyone seems to use Flow. Not sure if this is possible.

3. Buy Bodymovin

The Lottie framework created by Airbnb was a game changer. It lets designers use their AE projects directly in products via a simple export option. Let us use it without going through a 3rd party.

4. Feature request: custom easing defaults

The fact that we block with linear keyframes THEN ease them THEN apply custom easing is patently ridiculous in 2019. For the dinosaurs who love the linear keyframes, let them select them from a dropdown. For the rest of us, let us choose an industry standard curve that our keyframes default to and then customize from there.

5. Feature request: Enable spring (somehow)

Tons of digital products use springs in their transitions. Tons. The fact that you basically have to call Keanu to come over and hack the Matrix to make this happen is absurd. All the prototyping tools have one click spring easing. Should be able to make this happen.

6. Feature request: Pixel mode

Screen designers ONLY work in pixels. Not sub pixels. There must be a way to make this happen.

7. Feature request: Mobile presets

When you’re building a new project, have the option to choose something that makes sense like Dribbble, or Mobile sizes.

8. Feature request: Gesture Animation presets

This would be amazing. Essentially the idea is you could select a preset like swipe, trap, tap & drag, or pinch to zoom and drag/drop it onto your comp/layer.

9. Feature request: preview on device

Just a simple window that previews your work into a device of your choice.

10. Feature request: built in export of asset basic properties in a way that engineers can work with

• Scale
• Position
• Rotation
• Opacity

11. Feature request: simple/basic interactivity!

A basic framework that allows us to export our project and load it on devices and interact. Could start with tap & swipe for now and build on that. No idea how this would work but could figure it out from a UX standpoint. Would possibly involve an ‘AE-Connect’ app where you could select your project, select your project, select comp, load it up and interact. Would be a game changer. Big time.

12. Feature request: publish

We’re in 2019. Let’s do this. Publish to the standard YouTube/Vimeo/Dribbble/Behance/Slack (maybe), and other productivity tools. Seems crazy we can’t do this. Instead, we have to render at basically uncompressed, than re-render to get the file format that works. Then we delete the unused file. Just let us publish directly.

Anyway, that’s my 12. Let me know yours! If you want to learn UI animation with After Effects, you can do so here on my site UX in Motion.

My top 12 After Effects feature requests for UI animation was originally published in UX in Motion on Medium, where people are continuing the conversation by highlighting and responding to this story.

When it comes to motion innovation in digital products, you have two options: building or iterating. The following is how I iterate an interaction, using the Twitter iOS app.

Building

Building is what you do when you have no motion to work with. You have your screens and flows (or perhaps even a single screen), and you need to begin the process of wiring these screens together temporally. As I’ve written in a previous article, motion that supports usability does so by serving in an explanatory capacity to the user, providing brief narratives between conceptually distant states.

Iterating

Iterating is what you do to dial in motion. Because motion in user experiences is so incredibly multi-variant, it is difficult to formulate strong design principles, which is why I advocate an iteration heavy approach. Simply changing the velocity curves can have a huge impact on the design and unless you build out multiple versions, you’ll never know the difference.

To keep myself fresh in between projects and teaching, I look for opportunities to improve existing products. I was not hired by Twitter to improve their product, I just felt like doing it and sharing my process and the results.

This interaction immediately caught my eye as a great example of two conceptually distant yet related states that had clear mental model implications for the user. The path forward seemed clear. However, the product design seemed to be unaware of the role motion could play to support this interaction.

I hurried to capture the interaction with my phone. As someone who teaches motion innovation in user experiences, I’ve learned that app updates can permantly remove great references.

It became apparent to me that if I was going to design a solution that was better for the user than the default iOS component transition, I had to factor in user intent, mental models, and what I call cognitive chunking of elements.

In a previous article, I write about four key elements of a successful motion:

1. Continunity
2. Narrative
3. Relationship
4. Expectation

Motion doesn’t need to have all four to succeed, but as a heuristic, if you are challenged to identify any of these, I would consider that a red flag.

I started off by cataloging all the differences between the two states, something I encourage my students to do. I spotted 9 differences. Two of those differences were text reflows, something that is difficult to solve with motion.

Text reflowing is challenging because there is no way to build it in a way that doesn’t call attention to itself. Each increment of reflow causes the text to ‘pop’. This has the effect of hijacking user attention and pulling the eye toward insignificant areas. Text reflowing is cognitively expensive for users, and should be avoided.

This is one of the reasons why I advocate using motion to push back on design (when appropriate) through the use of motion studies. Motion studies communicates the temporal nature of the interaction to the design team, in ways that they may not have been aware of.

If you have to build text reflow motion, it is best to cross dissolve between the states, and do it as quickly and cleanly as possible. When you capture app interactions and analyze them in slow-motion, you’ll find that a lot of world class digital products employ this ‘cross fading’ technique.

While I don’t like this technique (I feel that it is using motion to solve problems in the design, why not go back and just fix the design?) it can get the job done.

After analyzing the differences, I started thinking about user intent, mental models, and cognitive chunking.

User intent

In this case, the user is simply wanting to tweet a reply. Cognitively I would interpret this as wanting to isolate the object and perhaps zoom in a little, while I type my reply. This is what is reflected in the design of the screens, but the motion undermines this.

Mental models

The ‘dolly and zoom’ principle that I write about here, serves as a way of fulfilling on user intent. We simply push in. While there is no signifier, the interaction begins to feel a little like an affordance – our expectation of the interaction is such that we expect the tweet to isolate, perhaps by coming closer.

Cognitive chunking

When multiple elements are transitioning, it helps to prioritize them for the user by chunking them. This allows us to not have everything animate differently, and disrupt the coherence of the narrative.

My process

I simply grabbed screenshots of the two screens, brought them into Photoshop, sliced the differences, and imported the PSD into After Effects. After about 20 minutes, I was able to create what I feel is an improvement over the interaction as it stood. Click here to download the After Effects project file.

Results

In my example on the right, I maintained continuity by making the hero object persist from screen to screen. There is also a strong sense of the relationship between the two states. I’ve simplified the narrative and added coherence, as well as preserved expectation.

If you want to play with my After Effects source file and see what solution you come up with, click here.

This was partly accomplished by cognitively chunking the iOS keyboard with the Twitter writing component, and adding cross fades to solve the text reflow challenge. Regarding the top elements, I worked with existing user mental models for ‘back’, as well as spatial models for the title.

Conclusion

As you can see, same designs, different motion solution. The complexity of motion process requires high levels of iteration as part of the design process, with an emphasis on hypothesis generation and testing of ideas.

I’m putting together a course that teaches the frameworks I am using. If you want me to email you when the online course becomes available, click here.

If you’re interested in chatting with me about an onsite motion innovation training for your team, click here.

Fixing Twitter was originally published in UX in Motion on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this article, I spell out the value of motion in digital products. I explain and dispute four myths held by designers, engineers, and stakeholders. Then I examine six challenges when it comes to delivering motion. I list the three ways that motion supports mental models in the minds of users. I conclude by listing sixteen metrics worth examining.

To learn more about scheduling a private onsite motion innovation workshop for your design team, you can visit my workshops page,. Recent workshops have been at Dropbox, Slack, and Salesforce. If you want to get notified when my ‘Motion Design in Digital Products’ online course becomes available, you can go here.

When it comes to innovating motion in digital products, designers, stakeholders, and engineers hold four old-world beliefs. These antiquated beliefs can make motion innovation an uphill battle for designers and motion advocates looking for opportunities and leverage, both with users and product metrics.

Belief 1: “Motion is not a core aspect of the user experience”

According to this belief, the core of the digital product is the research, UX, and engineering work that goes into executing the UX designs and screens. What follows from this belief is that motion is separate, something which does not play a major role in usability. This belief neglects examples like the Pinterest App where motion is used to simply and effectively transition users from a list view to a detail view with minimal impact during major context switching.

Belief 2: “Motion is just an add-on”

The second belief is that motion can be ‘added-on’ ‘at the end’. The idea here is that once the ‘real work’ has been done (designing static screens and making them interactive through code), the design and engineering team can begin thinking of ways to ‘add delight’ to the user experience. This belief neglects clear examples of interaction concepts that could not exist without motion (for example, the iOS app switcher is an entirely motion dependent interaction).

Belief 3: “Motion is animation”

The third belief is that motion is animation. In this view, the term ‘animation’ includes things that move, and draws from a distinctly non-UX domain: that of classic animation. This builds on the first belief, that motion is not a core part of the user experience. In this view, motion is viewed as giving ‘personality’ to a product, though this term is poorly (if ever) defined, and when it is, often included with edge-case and rarely relevant examples. This belief neglects the fact that the principles of animation (from Disney) have no relevance to user interfaces, as I write about in a previous article here. These principles exist to solve a fundamentally different problem — character appeal and representing organic bodies in physical space, as well as maintaining quality control of a corporate product.

Belief 4: “Motion is context specific”

The fourth belief is that certain types of motion work best for certain contexts. In this belief, it may even be accepted that motion plays some (undefined) role in the user experience. However, in this belief, the role is murky and not well understood. According to this belief, certain classes of motion are best applicable to certain designs or scenarios in the interface, for example, the display of a menu. This belief is analogous to using a specific shade of blue that has been verified through rigorous testing to perform the best as a button. This belief neglects the fundamental complexity and variance of motion, nor does it consider motion itself to be a fundamental property of user experiences. This belief treats motion akin to a debugging tool for UX designers. It has the effect of silo-ing motion to specific use cases, rather than serving as a powerful partnership with the UX.

Six challenges to succeeding with motion

Linguistic

Part of the underlying challenge of this topic is linguistic: our vocabulary lacks a word or concept for ‘motion interactivity’ or ‘motion that occurs in the context of users interacting with a digital product’ — and excluding the passive motion that one would see in an animated film. The only two words we have to express this idea are ‘motion,’ and (unfortunately, in my view) ‘animation.’

Temporal

A further challenge comes from the modality that designers are most comfortable designing in — static screens. Motion challenges us to think in terms of behavior over time, mental models, and alignments and partnerships with the UX. Designers, engineers, and stakeholders are for the most part unfamiliar with this modality of design. This unfamiliarity results in friction and chaos in an already complex process.

Complexity

A third challenge comes from the inherent complexity of motion itself. Due to the fundamentally variant nature of motion, small changes in the motion design can have large impacts on the user. This makes design challenging and difficult to validate due to the relentless versioning motion requires. For example, merely changing velocity curves can completely transform how users perceive an interaction.

Data

A fourth challenge comes from the lack of hard data supporting the value of motion. This lack of credible information makes a powerful case against motion: if we can’t assert a positive ROI in advance, why invest in a resource expensive project?

Tools

A fifth challenge comes from reliance on prototyping tools as a way to learn and ideate. The common idea designers have is to select a prototyping tool, watch tutorials, and learn how to ‘do motion.’ Due to the nature of content creation and keyword searching, these tutorials rarely condition designers to actually ideate, and instead focus on solving small contextualized problems.

Resources

A sixth challenge comes from a lack of resources that clearly and succinctly speak to the value of motion. Most books and articles on the topic of motion in digital products tend to focus on trend mapping, rather than a solid mental model based foundation for designers to work with, or a metric based language for designers to use in conversations with stakeholders.

The value of motion

Now that we’ve covered myths and challenges, I’d like to address what I see as the core value that motion brings to digital products.

Primo

Simply put, motion serves as an explanation to the user of how one gets to-and-from various places in the interface. This explanation can be thought of in terms of coherence: the degree to which the explanation aligns with the UX, content, and mental models.

In the iOS app switcher, the motion tells the user the following story:

“Once upon a time, dear user, you were happily in the world of your app. Now you have ‘zoomed out’ and are in a new world comprised of other worlds, where each world is another app.”

This narrative would not have been possible without motion. To imagine this without motion, play the interaction with a simple cut. What you are left with is that the beginning and end states of the interaction are conceptually distant. Motion connects these two conceptually distant ideas (Idea 1: the world of the app, Idea 2: the world of worlds) and offers a coherent explanation.

In this view, motion is a fundamental part of the user experience, both from a design methodology and from what the user experiences. Motion is not something added on at the end, but something that requires consideration during the design of any two screens.

This has the effect of removing motion from the category of animation and treating it as something distinct in its own right. Lastly, because it is fundamental, it is not something that is only best used in certain scenarios but throughout the design process.

A design heuristic

As a general heuristic, the further the conceptual distance between two states, the greater the case for motion. For example, conceptually, a simple switch has two states: on and off. These states are conceptually close to each other, which is why motion is not required to make the interaction effective.

Secundo (mental models)

Mental models exist in the minds of users and have been well documented in various UX design literature and in The Design of Everyday Things by Don Norman. To recap this idea, the working context is best represented by the 3 variable visual representation between the designer’s mental models, the design of the system itself, and the user’s mental model.

In my workshops, I make the case that what we call ‘motion’ plays a large role in mental models, and specifically in how users perceive what objects in the interface are and what they do. Motion accomplishes this either by partnering with existing mental models or by creating new mental models using a combination of the following 3 methods.

1. Skeuomorphic behavior

Users have existing mental models for navigating and interacting with their physical environment. By identifying and capitalizing on these mental models, designers can interface directly with user perception and reasoning. I have documented a list of 12 useful mental models and their direct translation into user interfaces, through motion, in a previous article. In this example from IGTV, the user navigates a feed by the spatially intuitive gesture akin to rotating a cube. ‘Previous’ and ‘next’ are now rendered spatially in the mind of the user, leveraging innate perceptive and reasoning abilities.

2. Rules

Humans are wired to learn rules. While much has been written to the effect of avoiding having users learn new systems and rules, it nevertheless remains an opportunity. This is best demonstrated by the ‘permanent state of change’ that we find in user experiences throughout the past, and, one can surmise, well into the future. Said differently, there is always going to be an edge or gap between the next thing and the current thing. This gap places the demand to learn on users, and as we have already seen, users have proved themselves capable of learning new interaction paradigms and metaphors. Motion plays a significant role in defining and reinforcing new rules.

3. Affordances and signifiers

Visual signifiers in the static design of screens imply cause and effect behaviors (i.e. motion) in the interface. These signifiers are the stand-ins for what the motion affords. The subsequent motion either aligns or conflicts with these signifiers, thus providing a powerful opportunity for designers to get it right.

Impact and metrics

Sixteen possible metrics for motion include, and are not limited to the following. In making a case for motion in your projects, I recommend working strategically by identifying metrics and developing assertions and hypothesis prior to committing resources.

1. Ease of use
2. Task success rate
3. Keeping users oriented during context switching
4. Helping users stay focused in the task domain rather than interface domain
5. Flow state
6. Trust rating
7. Minimizing confusion and frustration
8. Speed of use
9. Ways to combine interaction and perception
10. Confusion moments
11. Form completion
12. List to detail transitions
13. Feedback
14. Expectation
15. Recollection of key interface elements
16. Task prioritization.

In conclusion, motion in digital products can be a powerful tool, both for designers looking to connect with users, and for product managers looking for metric driven approaches to solving problems. Motion, due to it’s complexity can be challenging to deliver, but when done well, it has the potential to connect with user mental models, and drive product results.

If you wish to schedule a private motion innovation workshop with your design team, please view my site for more info. If you want to get notified when my ‘Motion Design in Digital Products’ online course becomes available, you can go here.

Motion design in digital products: a white paper was originally published in UX in Motion on Medium, where people are continuing the conversation by highlighting and responding to this story.

This short usability and motion crit focuses on the 5 UX in Motion Principles that occur in the iOS App Switcher.

YouTube: https://www.youtube.com/c/UXinMotionNet
Facebook: https://www.facebook.com/uxinmotion
Twitter: https://twitter.com/ux_in_motion
Dribbble: https://dribbble.com/issara
Pinterest: https://www.pinterest.com/uxinmotion/

UX in Motion usability principles at work in iOS app switcher

(View 12 Principles of UX in Motion article on Medium.com (225k views!): https://goo.gl/nq9ZKh)

1. Dimensionality: notice how the objects separate dimensionally and create a cognitive spatial framework. This is effective.
2. Obscuration: notice how as objects ‘recede’ spatially, they sort of recede cognitively and cease competing visually with foreground objects. This is effective (my caveat here is they are too obscured yet still fundamentally interactive, which impacts usability).
3. Parallax: notice how the rate of movement of the layers communicates to the user the hierarchy of importance. Also effective.
4. Parenting: notice how at the extreme ends, the text description fades from the icon. I think this could have been handled better. Not totally effective.
5. Easing: notice how the easing feels clean and crisp. Not too mushy and not too abrupt. Effective.

Critique

Here we are in the app switcher in iOS and you can see there’s a lot of things done right here, using the UX In Motion usability principles.

One of the first thing you notice is this the dimensionality that creates the spatial cognitive narrative.

Also notice the obscuration when the layers are kind of like falling off and it kind of pulls your attention back to the foreground. This also works well.

The third Principle you’ll notice is the parallax effect that’s happening. It’s really clean, and again reinforces the visual by calling your attention and your cognitive awareness towards the object that’s moving the quickest, which in this case is also the foreground.

There’s a lot of effective things going on from usability and motion standpoint. Apple is using motion to convey meaning and to solve problems which is great.

Now the thing I want to call out that wasn’t really working for me that felt like a pretty easy opportunity, is when the text description sort of fades in and out and there’s really no purpose or method.

It’s not solving a problem, it’s not really conveying meaning, it’s sort of an added a motion that’s happening in real-time that feels unnecessary and it’s sort of sort of breaking the narrative of the text being associated with the icon.

My recommendation would be to not have it fade.

I personally feel like it’s creating sort of unnecessary cognitive load for users and it really doesn’t add much to the whole experience.

If you wanted to fade, I might fade it with the icon itself when the whole thing goes out but I would have these to be attached. I find that designers, when they dis-attach the text and the icon, it sort of breaks the fundamental narrative and starts to feel a little weird.

You start to question what you’re seeing, and the motion just adds to the whole cognitive load in the experience when you want to be focusing on simplifying to keep it really clean and and simple.

So anyway I love love to know what you think in the comments, if you agree or what sort of recommendations how you would have for how to solve this problem with motion.

Motion and usability crit: iOS App Switcher was originally published in UX in Motion on Medium, where people are continuing the conversation by highlighting and responding to this story.

Or, “What I learned after taking a week off and watching thousands of micro-interaction animations until my eyeballs fell out.”

First of all, let’s get synced up. What is a micro-interaction anyway?

In doing my due diligence for this post, I came across this handy definition by Carrie Cousins, who seems like a cool person. She says –

“A micro-interaction is any single task-based engagement with a device.”

Well ok then. I don’t know about you but I found that invigorating. Enjoy with relish.

Before we get into the ‘5 mistakes,’ I want to mention that the following UI animations I am about to rip into are all from extremely talented designers. I have huge respect for them and their work. They are kind enough to offer their portfolios and ‘work in progress’ pieces publically for us to enjoy and learn from. I’ve known quite a few designers to be elitist assholes when critiquing work. That has never been my style. If I come across as mean, just know that I find design seriousness highly entertaining. I am not attacking anyone. I am amusing myself, and hopefully you, dear reader.

You strapped in? Let’s do this thing.

1. For the love of god, restrain yourself

As a designer, your ego is a delicate flower in need of frequent watering and praise. Designing high quality micro-interactions means sending your ego out for a mani-pedi while you get the real work done.

Here, Sergey Valiukh (who is is a genius with type, layout, color, and animation), hoses some micro interactions. Animation is the perfect place to kick the tires on an idea and see if it works. That’s what he did and it doesn’t.

Let’s break down the play by play –

1. The most obvious thing you may notice is the ‘3d flip’ on the photos. Completely unnecessary and possibly even illegal (just kidding, I wanted to make sure you were still paying attention). In the case of micro-interactions, anything that if removed would make a cleaner narrative is almost certainly a good idea.
2. Secondly, you might notice that the feed view of the photo is cropping the image, which un-crops the photo in edit view. This is clearly unworkable.
3. Thirdly, you will notice the top navigation icons take an insanely long time to transition on. They look great the first time but after that it’s like watching paint dry. Micro interactions need to be swift, lasting at most 300–400 milliseconds, with clean, eased velocity curves.
4. After you peel your eyes off that, you’ll wander down to the bottom, where the two icons land at different times, implying a false narrative (unnecessary emphasis), and adding to cognitive load.

Conclusion: there is a ton of value in producing animations like this. You get to see what works, what doesn’t work, where to trim the fat, and where to get your ego out of the way, and create clean, usable experiences. This is not to say you can’t have fun and add delightful details, just be aware that your delightful detail may in fact be fat in disguise.

Design action step – look for fat to trim. Are these animation details keeping the micro-interaction clean, or are they hosing the user experience, muddying the waters and adding to cognitive load?

Key concept — Restraint

2. Don’t sacrifice your narrative on the altar of catharsis

In user experiences, narrative is important for a variety of reasons. Partly this has to do with expectation, continuity and how these things impact cognitive load. Partly it has to do with how our minds organize and make sense of information. It also has to do with how we build mental models of things so we can use them. Basically, narrative is important.

In this example, Srikant Shetty (who is a very strong animator and designer) does a terrific job of mangling narrative. Follow me below for the play by play.

The first thing you might notice is how bizarre this narrative is. We expect the text to appear inline. Instead, the line isn’t really a line. It’s actually some sort of hidden bigger shape with just its head poking out. By tapping on its head, we’ve enraged it and now it has come out of hiding, presumably to defend its territory (at which point our input appears and we can type away). Like I said, bizarre.

The narrative we would expect as we input form data is interrupted. Our expectation is broken. Rather than continuing our task and flow, we are now forced to stop and deal with the unexpected, updating our mental model, and taking us away from our intended result.

This is what can happen when designers ‘get creative.’ Rather than focusing on preserving the core narrative of the interaction, they go big, sacrificing the narrative for a cool effect or technique. In effect, they make the interaction ‘mushy’ to borrow a term from Pasquale.

Great micro-interactions emply clean narrative and flow. Contrast the above with either of the following —

In both of these instances, the narrative flow is clean and tight. While the example on the left has an element of play in the line bounce, it functions as a delightful detail, rather than a fundamental of the interaction model itself.

Design action step — Keep the narrative tight and clean.

Key concept — Narrative

3. If you can’t do it in a single movement, don’t do it at all

Surprisingly, this is something that really caught my eye. Almost every single successful micro interaction I came across consisted of a single movement or unified motion. The unsuccessful ones stood out by the complexity of their movement.

In this example, Romain Passelande (who has an insanely cool Dribbble portfolio) does a thorough job of harshing my mellow. Let’s check it out.

Now if you aren’t used to animation, you may not see what I see. I see two separate movements that can be combined into a single movement, but aren’t. There are two distinct actions going on —

1. The lines transforming
2. The icon rotating

Rather than having these separate actions happen together, Romain had them happen separately (the lines transform and then the icon rotates — not cool). If you’re still not seeing it, maybe some side by side examples will help —

Here, the animations on the left and right violate this ‘single movement’ principle. The animation in the middle contains a single unified movement, and makes me happy. It should also make you happy. The movement in the middle animation is clean, definitive and efficient.

Design action step — make sure your micro-interactions occur as a single unified movement. If your micro-interaction contains several actions occurring at different places in time, stop doing that.

Key concept — Single Movement

4. The problem isn’t the animation, the problem is the design

As someone who studies the finer nuances of UI animation, one issue that keeps coming up is that designers have a difficult time separating the motion from the static design. This is understandable and partly a function of the seamless nature of a good micro-interaction: it’s hard to spot in realtime. A bad micro-interaction sticks out like a sore thumb.

In the following chart, I’ve boiled down the finer details of my theories on design and animation. Feel free to print it out and hang it by your desk for reference.

In general, you want to be aiming for the area with the dot and the arrow next to it. I made the dot pink so you could find it quickly if you happen to be in the middle of a project and short on time.

Let’s take this out of the world of theory and into the real world. In the following example, you’re going to practice separating the design from the animation

Here, Sam Thibault, a very talented designer at Handsome (Sam has crazy good design and animation chops) got super excited one day and decided to create an awesome animation on top of some not so cool design.

Now, you may be thinking to yourself, “Stop picking on Sam, this looks fresh.” And it does. Like I said, Sam is a talented guy. What makes this such a great reference is the treatment of the ‘add to cart’ button.

In this example, there is no animation solution that would save this design from itself. The fault lies in the design, not in the execution of the design over time, which essentially is what a micro-interaction is — design over time.

Here, the ‘add to cart’ button incomprehensibly transforms, changes shape and fills the image gutter. Not only is this unnecessary, but due to the scale of this critical UI element, now the user is burdened with additional cognitive load.

In film production, it has been said that problems on set are problems that originated in the script. A bad script equals a bad shoot. A bad design equals a bad micro-interaction.

Design action step — I hate to even say it, but make sure your design makes sense before you try to pimp it with animation.

Key concept — Animation will not save you

5. You miss 100% of the shots you don’t take

Wayne Gretzky said that. Apparently, he was pretty good at whacking a plastic disc into a small net while dancing around on ice skates while avoiding punches being thrown by grown men, also dancing around on ice skates. Which if you think about it, is a fairly apt description of what it’s like being a UX designer trying to design micro interactions: you’ve got a lot on your plate.

Because designers largely aren’t used to designing 300–400 millisecond animations, it’s easy to lose control of the details and stop seeing them as what they are — opportunities. It all amounts to a complicated juggling act and it’s easy to start dropping balls, to further mix our metaphor.

In this example from Ivan Bjelajac, I spot 5 missed ‘detail’ opportunities.

Let’s check it out.

1. There is an opportunity to create a clean and elegant icon transformation in the menu/back button. Having the menu icon slide in from the top feels disjointed and inconsistent.
2. The right arrow with yellow box — unnecessary rotation and scale effect. Having it persist feels strange. It should transition with the content.
3. The paragraph content text fades on and off unnecessarily during the transition. It should persist.
4. The title wipe from left to right — would be cleaner and more elegant by playing it off the content wipe rather than having it fade on and sliding.
5. Hero image crop — when in the banner view, it would be nice to see the image reframe in a way that supports context, not just randomly landing in the least interesting way (nitpicking here).

Contrast that with these examples of ruthless attention to detail. One cannot imagine these micro-interactions being any cleaner in narrative and execution, no stone unturned, no opportunity missed. Wayne Gretzky would be proud. If he cared at all about user experiences, which I highly doubt.

Design action step — Be ruthless in your attention to detail. Leave no stone unturned. Don’t drop balls. Take the shot.

Key concept — Details are opportunities

In conclusion

I am here to tell you that even with no animation experience it is possible to design and build beautiful, clean micro-interactions. Focusing on following key concepts –

1. Restraint
2. Narrative
3. Single movement
4. Animation will not save you
5. Details are opportunities

Avoiding the five mistakes is no guarantee you will end up with something awesome, but it’s a step in the right direction.

To view more examples of micro-interactions, complete with my annotations and critiques, you can view my super awesome ‘Micro-interactions’ Pinterest board.

Special thanks

Big thank you to Sergey, Srikant, Romain, Sam, and Ivan. You guys rock. I appreciate your work and the opportunity to learn from you.

Extra big thank you to Alex Chang for poignant feedback, Lindsey Gjording for reviewing early drafts, and Valentina Phearson for being a rockstar and helping me source and catalogue like a million UI Animation micro-interaction gifs. And of course to Kateryna Sitner, for being my muse and generously providing feedback every step of the way.

If you want to receive my articles and UI Animation tutorial videos straight to your email, click here to get added to my list.

5 Mistakes to Avoid When Designing Micro-interactions was originally published in UX in Motion on Medium, where people are continuing the conversation by highlighting and responding to this story.