UI animations are a hotspot for the design of interactive and modern web interfaces. For a positive user experience, context-based UI animations can offer real added value. This can concern individual elements or even entire applications. The talk answers which concept and design decisions are to be made for an interactive interface. How can simple and, above all, complex animations be implemented in the frontend? The process for designing a context-sensitive and interactive interface differs from conventional and classical workings. If you are designing complex animations, you go into the field of motion design. In addition to an inspiring UI animation journey, the process is displayed step by step.
6. KPS digital GmbH, ein Unternehmen der KPS AG
ANIMATION IS POWERFUL,
BECAUSE IT CAN CREATE
THE ILLUSION OF LIFE.
7. KPS digital GmbH, ein Unternehmen der KPS AG
YOU HAVE TO CREATE
SOMETHING THAT FEELS
HUMAN AND
ACCOMPLISHES A TASK.
8. @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/
35. KPS digital GmbH, ein Unternehmen der KPS AG
ESSENTIAL FUNCTIONS OF
MICROINTERACTIONS
36. KPS digital GmbH, ein Unternehmen der KPS AG
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.
41. WALT DISNAY: THE TWELVE BASIS
PRINCIPLES OF ANIMATION
http://the12principles.tumblr.com/
42. 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
43. KPS digital GmbH, ein Unternehmen der KPS AG
FIVE PRINCIPLES WILL
ALWAYS DETERMINE HOW
INTERACTION DESIGN
44. KPS digital GmbH, ein Unternehmen der KPS AG
1. Goal-driven design (Personas and
Experience Map)
2. Usability
3. Affordance and signifiers
4. Learnability
5. Feedback and response time
45. KPS digital GmbH, ein Unternehmen der KPS AG
STORY-DRIVEN DESIGN
Develop concepts from the user's point of view
and his context.
46.
47.
48. KPS digital GmbH, ein Unternehmen der KPS AG
START BY DESIGNING
INDIVIDUAL COMPONENTS
AND THINKING ABOUT HOW
THEY CHANGE AND MOVE
IN DIFFERENT CONTEXTS.
49. KPS digital GmbH, ein Unternehmen der KPS AG
DO AND DON'T
What makes a good transition?
61. @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 */
}
62. @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 */
}
}
63. @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 */
}
}
69. KPS digital GmbH, ein Unternehmen der KPS AG
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