Create User Centric UI-Animations

WEBTECHCON, 23 - 27 OCTOBER 2016, MUNICH

CREATE USER-CENTRIC UI-ANIMATIONS

PETER ROZEK

SENIOR UX MANAGER

KPS digital GmbH, ein Unternehmen der KPS AG

KPS DIGITAL GMBHKPS AG


WEBINTERFACE



ANIMATION IS POWERFUL, BECAUSE IT CAN CREATE THE ILLUSION OF LIFE.


YOU HAVE TO CREATE SOMETHING THAT FEELS HUMAN AND ACCOMPLISHES A TASK.

@Jeeyun Oh, assistant professor of communications at Robert Morris University

“Interactivity persuades people by making users think more deeply

about the message.“

http://trentwalton.com/2012/02/02/redefined/

http://trentwalton.com/2012/02/02/redefined/

http://www.dokimos.org/ajff/

CLAP YOUR HANDS, NOW !!!

http://www.dokimos.org/ajff/

THE FUTURE OF ANIMATION DESIGN IS OPTIMIZED FOR MOBILE

Scource: IBM, Three New Ways to Understand and Improve Your Customers’ Experience, 2016


EXAMPLE


GALLERIES AND SLIDESHOWS

https://www.vanmoof.com/de_de/

https://www.vanmoof.com/de_de/


FORM FIELDS OR CALLS TO ACTION

http://mds.is/float-label-pattern/

FLOAT LABEL PATTERN: FROM MATT D. SMITH

http://mds.is/float-label-pattern/


NAVIGATION AND MENUS

http://www.porsche.com/germany/

http://www.porsche.com/germany/


PAGE MOTION

http://waaark.com/

http://waaark.com/


LOADING

Techniques:HTML = SVGCSS = animation, @keyframes, transform

https://codepen.io/woodwork/pen/YWjWzo

https://codepen.io/woodwork/pen/YWjWzo

http://projects.lukehaas.me/css-loaders/


<div class="loader">Loading...</div>


.loader,

.loader:before,

.loader:after { background: #ffffff; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .loader:before, .loader:after { position: absolute; top: 0; content: ''; } .loader:before { left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loader { color: #ffffff; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .loader:after { left: 1.5em; }

@-webkit-keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } } @keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } }


SKIP INTRO - CSS3 IS THE NEW FLASH


SCROLL ANIMATION

http://www.evanshalshaw.com/more/bondcars/

http://www.evanshalshaw.com/more/bondcars/


HOVER AND VISUAL FEEDBACK


ANIMATED PHOTOGRAPHY


ESSENTIAL FUNCTIONS OF MICROINTERACTIONS


Communicate feedback or the result of an action.

Accomplish an individual task.

Enhance the sense of direct manipulation.

Help users visualize the results of their actions and prevent errors.

Show System Status


ANIMATION BRINGS USER INTERFACE TO LIFEAnimations make the experience feel crafted


PROCESS

http://playful-interaction-concepts.de/methode-gamification-design-modell/

Gamification Design Modell

http://playful-interaction-concepts.de/methode-gamification-design-modell/

WALT DISNAY: THE TWELVE BASIS PRINCIPLES OF ANIMATION

http://the12principles.tumblr.com/

http://the12principles.tumblr.com/

Squash and Stretch Anticipation Staging Straight Ahead Action and Pose to Pose Follow Through and Overlapping Action Slow In and Slow Out Arc Secondary Action Timing Exaggeration Solid drawing Appeal


FIVE PRINCIPLES WILL ALWAYS DETERMINE HOW INTERACTION DESIGN


1. Goal-driven design (Personas and Experience Map)

2. Usability 3. Affordance and signifiers 4. Learnability 5. Feedback and response time


STORY-DRIVEN DESIGNDevelop concepts from the user's point of view and his context.


START BY DESIGNING INDIVIDUAL COMPONENTS AND THINKING ABOUT HOW THEY CHANGE AND MOVE IN DIFFERENT CONTEXTS.


DO AND DON'T What makes a good transition?


MOTION IS QUICK!

Do: Animate quickly so that the user never has to wait for the animation to finish.

Don’t: Staggering and slowing the movement of many elements can lengthen the duration.


MOTION IS CLEAR!

Do: Maintain a clear path into the next view, even while elements are choreographed as a group.

Don’t: Transitions can get confusing when multiple items need to move in different directions or cross paths.


MOTION IS COHESIVE!Motion experience should be consistent throughout the product.


SKETCH BEFORE YOU SKETCH

Image: http://blog.invisionapp.com/10-tips-on-prototyping-uis-with-sketch/


PROTOTYPING UI ANIMATION


PATTERN & FRAMEWORKS CAN HELP


CSS @KEYFRAMES

@keyframes meine-animation { from { /* Properties at the beginning of the animation */ }

to { /* Properties at the end of the animation */ } }

.mein-selektor { animation-name: meine-animation; animation-duration: 2s; animation-iteration-count: infinite; /* More animation Properties */ }

@keyframes meine-animation { 0% { /* Properties at the beginning of the animation */ }

50% { /* Properties after half of the animation */ } 100% { /* Properties at the end of the animation */ } }

@keyframes meine-animation { 0% { /* Properties at the beginning of the animation */ }

25%, 75% { /* Properties from 1/4 to 3/4 of the animation */ } 100% { /* Properties at the end of the animation */ } }


TESTING


CONCLUSION


DESIGN THE TRANSACTION NOT THE INTERFACE.


FOLLOWING THE SEMANTIC STRUCTURE OF THE CONTENT


BENEFITS OF ANIMATION


1. Reduces cognitive load 2. Provide clear feedback in response to

user’s actions 3. Provide system status to the user 4. Guide and teach the user how to interact

with the interface

THANKS FOR YOUR TIME!

[email protected]?

FOR ELLENKPS digital GmbH, ein Unternehmen der KPS AG

mailto:[email protected]?subject=