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://www.dokimos.org/ajff/

CLAP YOUR HANDS, NOW !!!

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/

FORM FIELDS OR CALLS TO ACTION

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

FLOAT LABEL PATTERN: FROM MATT D. SMITH

NAVIGATION AND MENUS

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

PAGE MOTION

http://waaark.com/

LOADING

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

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/

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

WALT DISNAY: THE TWELVE BASIS PRINCIPLES OF ANIMATION

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!

PETER.ROZEK@KPS.DEQUESTION?

FOR ELLENKPS digital GmbH, ein Unternehmen der KPS AG

Create User Centric UI-Animations

Design

15 Outstanding Mobile UI Animations in GIFs

Css3 animations

Emily’s Animations!

Simple Animations

Advanced UI styling and animations for iOS

WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Brochure animations

WEB DEVELOPMENT UI AND UX DESIGNING IT CONSULTANCY … · WEB DEVELOPMENT UI AND UX DESIGNING IT CONSULTANCY MOBILE APPS MARKETING & ANALYTICS SOFTWARE CENTRIC SOLUTIONS ... INTUITIVE

Clean Architecture - Matthewrenze · Venus Sun Saturn Jupiter Mars. Classic 3-layer Database-centric Architecture Database Database Data Access Business Logic UI. Database- vs. Domain-centric

Chapter 4 Creating Animations. Chapter 4 Lessons 1.Create motion tween animations 2.Create classic tween animations 3.Create frame-by-frame animations

Storyboard Suite Data Sheet - Embedded Tools · Storyboard Engine • Create, edit, and preview animations directly in Storyboard Designer • Receive immediate feedback on UI designs

Enhancing UI/UX using Java animations

Creating Animations – Lesson 71 Creating Animations Lesson 7

3 animations

Catalogue Animations

RangeView animations

Web Animations

Test - animations

Flash Animations

Waterfall Animations