making a difference with animation
DESCRIPTION
The impact of animation on the user's experience is often an afterthought. Steven is going to show you how animation can help make any interface more usable by explaining and demonstrating the animation's techniques he used on Canvas, an online email builder tool created by Campaign Monitor.TRANSCRIPT
ANIMATIONMAKING A DIFFERENCE WITH
@stevenfabre
twitter.com
twitter.com
ANIMATIONIMPROVES USABILITY
FEELS NATURAL AND SUBTLE
IS A FEEDBACK
INVISIBLEANIMATION
iOS
Path
Stripe
canvas.cm
ACCORDION (BEFORE)
ACCORDION (AFTER)
<h2>Header</h2>!<div>!! <form>!! </form>!</div>!
HTML CSSdiv {!! display: none;!}!div.active {!! display: block;!}!
<h2>Header</h2>!<div>!! <form>!! </form>!</div>!
HTML CSSdiv {!! max-height: 0;!! transition: 0.3s max-height ease-out;!}!div.active {!! max-height: 300px;!}!
<h2>Header</h2>!<div>!! <form>!! </form>!</div>!
HTML CSSdiv {!! max-height: 0;!! transition: 0.3s max-height ease-out;!}!div form {!! opacity: 0;!! transform: scale(0.9);!! transition: 0.3s transform ease-out,!! ! ! ! ! 0.5s opacity ease;!}!div.active {!! max-height: 300px;!}!div.active form {!! opacity: 1;!! transform: scale(1);!}!
ADD LAYOUT (BEFORE)
ADD LAYOUT (AFTER)
<button>!! Add layout!</button>!<div>!</div>!
HTML CSSdiv {!! display: none;!}!div.active {!! display: block;!}!
<button>!! Add layout!</button>!<div>!</div>!
HTML CSSdiv {!! opacity: 0;!! transition: 0.2s opacity ease;!}!div.active {!! opacity: 1;!}!
<button>!! Add layout!</button>!<div>!</div>!
HTML CSSdiv {!! opacity: 0;!! transform: scale(0.2), translateY(-37%);!! transition: 0.2s opacity ease,! 0.2s transform ease-out;!}!div.active {!! opacity: 1;!! transform: scale(1), translateY(0);!}!
COMPLEX TECHNIQUE ≠ GOOD ANIMATION
STATIC USER INTERFACES SUCK
GOOD ANIMATION SHOULD FEEL INVISIBLE
RESOURCESDisney's 12 Principles Of Animation
https://www.youtube.com/watch?v=bHfDEsNLg34 !
Transitional Interfaces - Pasquale D’Silva https://medium.com/@pasql/transitional-interfaces-926eb80d64e3
!
Designing with animation - Pasquale D’Silva https://www.youtube.com/watch?v=TMe0WnkF1Lc
!
Google principles for Material https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight
!
Animation Principles in UI Design: Understanding Easing - Suresh V. Selvaraj https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3
RESOURCESAnimate.css - Daniel T. Eden
http://daneden.github.io/animate.css/ !
Smart Transitions In User Experience - Adrian Zumbrunnen http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/
!
Improve the payment experience with animations - Michaël Villar https://medium.com/@michaelvillar/improve-the-payment-experience-with-animations-3d1b0a9b810e
