|
12345 |
- title: Invisible animation
- url: https://medium.com/@stevenfabre/invisible-animation-ffa27d0b77e5
- hash_url: 59a994ab62f1f3223266d6e8aa44fb5e
-
- <p name="6922" id="6922" class="graf--p">There’s no doubt that animating user interfaces is a rising trend. Risen enough that the emphasis is often put on the animation itself, rather than on improving the user experience through <em class="markup--em markup--p-em">subtle and functional</em> animation. Pasquale D’Silva gave some good advice in <a target="_blank" href="https://www.youtube.com/watch?v=TMe0WnkF1Lc&feature=c4-overview&list=UURx1y52pfeMwbuer9Vh2u-A" data-href="https://www.youtube.com/watch?v=TMe0WnkF1Lc&feature=c4-overview&list=UURx1y52pfeMwbuer9Vh2u-A" class="markup--anchor markup--p-anchor" rel="nofollow">his talk at Web Direction South in 2013</a>, including:</p><blockquote name="25f1" id="25f1" class="graf--pullquote pullquote">Good animation is invisible.<br/>You shouldn’t notice that you’re looking at animation.</blockquote><p name="b30c" id="b30c" class="graf--p">It’s great advice that we — the team behind <a target="_blank" href="http://campaignmonitor.com/email-templates" data-href="http://campaignmonitor.com/email-templates" class="markup--anchor markup--p-anchor" rel="nofollow">Campaign Monitor’s email builder</a> — have been trying to apply with a few principles in mind: animation must improve the usability, feel natural and subtle, and give feedback to the user.</p><p name="8060" id="8060" class="graf--p">Having spent the last year working on the email builder, I’ve learned that animation on the web — as opposed to native apps — comes with many challenges that go beyond finding the right <a target="_blank" href="https://www.youtube.com/watch?v=2M5ybVOgyPA" data-href="https://www.youtube.com/watch?v=2M5ybVOgyPA" class="markup--anchor markup--p-anchor" rel="nofollow"><em class="markup--em markup--p-em">timing, spacing, poses or easing</em></a>. Animations just don’t render the same on all devices and browsers, and that rendering inconsistency has led us to compromise things to create a good user experience. In fact, some beautiful and useful interactions on our powerful 27" iMacs didn’t make it to the final product, because they felt jerky and slow on a device some of our users were more likely to use.</p><p name="7667" id="7667" class="graf--p">Of all the animation and interactive prototypes we put together in the concept and design stages, only the most useful and performant made it into the final product. For us, it was about hand-picking the most useful animations, and spending the time to get it <em class="markup--em markup--p-em">just</em> right — all in the interest of improving the user experience. Here are a selection of animations that made the cut:</p><h4 name="9e73" id="9e73" class="graf--h4">Add layout drop-down</h4><figure name="b111" id="b111" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*x3ddPNzmit3IhcM8nlNuJQ.gif" data-width="700" data-height="394" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*x3ddPNzmit3IhcM8nlNuJQ.gif"/></div></figure><p name="3ddf" id="3ddf" class="graf--p">When users press the “Add layout” button, the layout drop-down fades in and comes from the button itself. This highlights that what just appeared is linked to the button.</p><h4 name="9a3b" id="9a3b" class="graf--h4">Sidebar accordion</h4><figure name="65c1" id="65c1" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*BzQ5lPmP0dtMCh-dtbxyPA.gif" data-width="700" data-height="500" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*BzQ5lPmP0dtMCh-dtbxyPA.gif"/></div></figure><p name="36c2" id="36c2" class="graf--p">By sliding the other headings down, it’s easy to correlate the content and heading. Also, fading the types of logo from the content area after a little delay makes it more obvious that the user is in the “Image” type settings.</p><h4 name="7bc1" id="7bc1" class="graf--h4">Button states</h4><figure name="25e1" id="25e1" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*6555ttn0BAPvPrT9FCM5Og.gif" data-width="700" data-height="483" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*6555ttn0BAPvPrT9FCM5Og.gif"/></div></figure><p name="7629" id="7629" class="graf--p">When you’re waiting for something, time tends to slow down. When users are waiting to receive their files by email, we’re just showing them what’s happening behind the scene. This animation makes the process feel much snappier, even though the actual time to receive the email stays the same.</p><h4 name="581a" id="581a" class="graf--h4">Add or duplicate a layout</h4><figure name="a2f0" id="a2f0" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*vfXi5TfaLJKHsTHPM3B20g.gif" data-width="700" data-height="407" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*vfXi5TfaLJKHsTHPM3B20g.gif"/></div></figure><p name="bd4b" id="bd4b" class="graf--p">When users add or duplicate a layout, a space is created over a short period of time and the new layout fades in from the middle. It becomes clearer that something new has been added.</p><h4 name="6ce4" id="6ce4" class="graf--h4">Delete a layout</h4><figure name="2be3" id="2be3" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*eFOjKeJcMVw1gzQfKazPFw.gif" data-width="700" data-height="361" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*eFOjKeJcMVw1gzQfKazPFw.gif"/></div></figure><p name="e02b" id="e02b" class="graf--p">When your email contains a lot of similar or almost identical layouts, this animation becomes really useful. It shows what layout has been deleted by sliding up the content of the email.</p><h4 name="e1b3" id="e1b3" class="graf--h4">Layout controllers</h4><p name="917b" id="917b" class="graf--p graf--empty"><br/></p><figure name="597e" id="597e" class="graf--figure postField--insetLeftImage"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*cYFYwdkIHfM5TjKBYYaDwQ.gif" data-width="325" data-height="396" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*cYFYwdkIHfM5TjKBYYaDwQ.gif"/></div></figure><p name="3605" id="3605" class="graf--p">When users are hovering a layout, we show them some controllers. Those come from the layout they control, so it’s clear that the action they are about to take will affect the layout they are hovering.</p><p name="4c98" id="4c98" class="graf--p graf--empty"><br/></p><p name="1940" id="1940" data-align="center" class="graf--p graf--empty"><br/></p><p name="e85d" id="e85d" class="graf--p graf--empty"><br/></p><p name="c844" id="c844" class="graf--p graf--empty"><br/></p><p name="93db" id="93db" class="graf--p">I’m sure the best motion designers out there would easily point out how those animations could be improved. It’s sad to say that performance issues on certain devices forced us to cut off some of the highly polished details of an animation. But this is a conscious decision we’ve made to provide the best user experience across devices.</p><p name="b809" id="b809" class="graf--p">Seeing more and more people talking, writing, designing interfaces with animation doesn’t mean that you should animate everything. If we’ve done our job right, you shouldn’t notice the animations shown previously while using the email builder.</p><p name="1cab" id="1cab" class="graf--p graf--last"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Invisible</em></strong>, that’s how animation should be.</p>
|
