Create User Centric UI-Animations

WEBTECHCON, 23 - 27 OCTOBER 2016, MUNICH
CREATE USER-CENTRIC  
UI-ANIMATIONS

SENIOR UX MANAGER
KPS digital GmbH, ein Unternehmen der KPS AG

KPS DIGITAL GMBH
KPS 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/redeﬁned/

http://www.dokimos.org/ajﬀ/
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/ﬂoat-label-pattern/
FLOAT LABEL
PATTERN:
FROM MATT D.
SMITH

NAVIGATION AND MENUS

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

PAGE MOTION

LOADING

Techniques: 
HTML = SVG 
CSS = 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.

ANIMATION BRINGS USER
INTERFACE TO LIFE
Animations make the experience feel crafted

PROCESS

http://playful-interaction-concepts.de/methode-gamiﬁcation-design-modell/
Gamiﬁcation 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. Aﬀordance and signiﬁers
4. Learnability
5. Feedback and response time

STORY-DRIVEN DESIGN
Develop 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 ﬁnish.

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
diﬀerent 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 */
}

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

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

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

PETER.ROZEK@KPS.DE
QUESTION?
FOR ELLEN

Create User Centric UI-Animations

Weitere ähnliche Inhalte

Mehr von Peter Rozek

Create User Centric UI-Animations