Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 GMBH
KPS AG
KPS digital GmbH, ein Unternehmen der KPS AG
WEBINTERFACE
KPS digital GmbH, ein Unternehmen der KPS AG
KPS digital GmbH, ein Unternehmen der KPS AG
ANIMATION IS POWERFUL,
BECAUSE IT CAN CREATE
THE ILLUSION OF LIFE.
KPS digital GmbH, ein Unternehmen der KPS AG
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 us...
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
KPS digital GmbH, ein Unternehmen der KPS AG
EXAMPLE
KPS digital GmbH, ein Unternehmen der KPS AG
GALLERIES AND
SLIDESHOWS
https://www.vanmoof.com/de_de/
KPS digital GmbH, ein Unternehmen der KPS AG
FORM FIELDS 

OR CALLS TO ACTION
http://mds.is/float-label-pattern/
FLOAT LABEL
PATTERN:
FROM MATT D.
SMITH
KPS digital GmbH, ein Unternehmen der KPS AG
NAVIGATION AND MENUS
http://www.porsche.com/germany/
KPS digital GmbH, ein Unternehmen der KPS AG
PAGE MOTION
http://waaark.com/
KPS digital GmbH, ein Unternehmen der KPS AG
LOADING
Techniques:

HTML = SVG

CSS = animation, @keyframes, transform
https://codepen.io/woodwork/pen/YWjWzo
http://projects.lukehaas.me/css-loaders/
KPS digital GmbH, ein Unternehmen der KPS AG
<div class="loader">Loading...</div>
KPS digital GmbH, ein Unternehmen der KPS AG
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animati...
KPS digital GmbH, ein Unternehmen der KPS AG
SKIP INTRO - CSS3 IS THE
NEW FLASH
KPS digital GmbH, ein Unternehmen der KPS AG
SCROLL ANIMATION
http://www.evanshalshaw.com/more/bondcars/
KPS digital GmbH, ein Unternehmen der KPS AG
HOVER AND VISUAL
FEEDBACK
KPS digital GmbH, ein Unternehmen der KPS AG
ANIMATED PHOTOGRAPHY
KPS digital GmbH, ein Unternehmen der KPS AG
ESSENTIAL FUNCTIONS OF
MICROINTERACTIONS
KPS digital GmbH, ein Unternehmen der KPS AG
Communicate feedback or the result of an
action.
Accomplish an individual tas...
Show System
Status
KPS digital GmbH, ein Unternehmen der KPS AG
ANIMATION BRINGS USER
INTERFACE TO LIFE
Animations make the experience feel c...
KPS digital GmbH, ein Unternehmen der KPS AG
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 ...
KPS digital GmbH, ein Unternehmen der KPS AG
FIVE PRINCIPLES WILL
ALWAYS DETERMINE HOW
INTERACTION DESIGN
KPS digital GmbH, ein Unternehmen der KPS AG
1. Goal-driven design (Personas and
Experience Map)
2. Usability
3. Affordance...
KPS digital GmbH, ein Unternehmen der KPS AG
STORY-DRIVEN DESIGN
Develop concepts from the user's point of view
and his co...
KPS digital GmbH, ein Unternehmen der KPS AG
START BY DESIGNING
INDIVIDUAL COMPONENTS
AND THINKING ABOUT HOW
THEY CHANGE A...
KPS digital GmbH, ein Unternehmen der KPS AG
DO AND DON'T
What makes a good transition?
KPS digital GmbH, ein Unternehmen der KPS AG
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.
KPS digital GmbH, ein Unternehmen der KPS AG
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.
KPS digital GmbH, ein Unternehmen der KPS AG
MOTION IS COHESIVE!
Motion experience should be consistent
throughout the pro...
KPS digital GmbH, ein Unternehmen der KPS AG
SKETCH BEFORE YOU SKETCH
Image: http://blog.invisionapp.com/10-tips-on-protot...
KPS digital GmbH, ein Unternehmen der KPS AG
PROTOTYPING UI
ANIMATION
KPS digital GmbH, ein Unternehmen der KPS AG
PATTERN & FRAMEWORKS 

CAN HELP
KPS digital GmbH, ein Unternehmen der KPS AG
CSS @KEYFRAMES
@keyframes meine-animation {
from {
/* Properties at the beginning of the animation */
}
to {
/* Properties at the end of ...
@keyframes meine-animation {
0% {
/* Properties at the beginning of the animation */
}
50% {
/* Properties after half of t...
@keyframes meine-animation {
0% {
/* Properties at the beginning of the animation */
}
25%, 75% {
/* Properties from 1/4 t...
KPS digital GmbH, ein Unternehmen der KPS AG
TESTING
KPS digital GmbH, ein Unternehmen der KPS AG
CONCLUSION
KPS digital GmbH, ein Unternehmen der KPS AG
DESIGN THE TRANSACTION
NOT THE INTERFACE.
KPS digital GmbH, ein Unternehmen der KPS AG
FOLLOWING THE SEMANTIC
STRUCTURE OF THE
CONTENT
KPS digital GmbH, ein Unternehmen der KPS AG
BENEFITS OF ANIMATION
KPS digital GmbH, ein Unternehmen der KPS AG
1. Reduces cognitive load
2. Provide clear feedback in response to
user’s act...
THANKS FOR YOUR TIME!
PETER.ROZEK@KPS.DE
QUESTION?
FOR ELLEN
KPS digital GmbH, ein Unternehmen der KPS AG
Create User Centric UI-Animations
Create User Centric UI-Animations
Create User Centric UI-Animations
Create User Centric UI-Animations
Create User Centric UI-Animations
Create User Centric UI-Animations
Upcoming SlideShare
Loading in …5
×

Create User Centric UI-Animations

312 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Create User Centric UI-Animations

  1. 1. WEBTECHCON, 23 - 27 OCTOBER 2016, MUNICH CREATE USER-CENTRIC 
 UI-ANIMATIONS
  2. 2. PETER ROZEK
  3. 3. SENIOR UX MANAGER KPS digital GmbH, ein Unternehmen der KPS AG
  4. 4. KPS DIGITAL GMBH KPS AG KPS digital GmbH, ein Unternehmen der KPS AG
  5. 5. WEBINTERFACE KPS digital GmbH, ein Unternehmen der KPS AG
  6. 6. KPS digital GmbH, ein Unternehmen der KPS AG ANIMATION IS POWERFUL, BECAUSE IT CAN CREATE THE ILLUSION OF LIFE.
  7. 7. KPS digital GmbH, ein Unternehmen der KPS AG YOU HAVE TO CREATE SOMETHING THAT FEELS HUMAN AND ACCOMPLISHES A TASK.
  8. 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/
  9. 9. http://www.dokimos.org/ajff/ CLAP YOUR HANDS, NOW !!!
  10. 10. THE FUTURE OF ANIMATION DESIGN IS OPTIMIZED FOR MOBILE
  11. 11. Scource: IBM, Three New Ways to Understand and Improve Your Customers’ Experience, 2016
  12. 12. KPS digital GmbH, ein Unternehmen der KPS AG EXAMPLE
  13. 13. KPS digital GmbH, ein Unternehmen der KPS AG GALLERIES AND SLIDESHOWS
  14. 14. https://www.vanmoof.com/de_de/
  15. 15. KPS digital GmbH, ein Unternehmen der KPS AG FORM FIELDS 
 OR CALLS TO ACTION
  16. 16. http://mds.is/float-label-pattern/ FLOAT LABEL PATTERN: FROM MATT D. SMITH
  17. 17. KPS digital GmbH, ein Unternehmen der KPS AG NAVIGATION AND MENUS
  18. 18. http://www.porsche.com/germany/
  19. 19. KPS digital GmbH, ein Unternehmen der KPS AG PAGE MOTION
  20. 20. http://waaark.com/
  21. 21. KPS digital GmbH, ein Unternehmen der KPS AG LOADING
  22. 22. Techniques:
 HTML = SVG
 CSS = animation, @keyframes, transform https://codepen.io/woodwork/pen/YWjWzo
  23. 23. http://projects.lukehaas.me/css-loaders/
  24. 24. KPS digital GmbH, ein Unternehmen der KPS AG <div class="loader">Loading...</div>
  25. 25. KPS digital GmbH, ein Unternehmen der KPS AG .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; } }
  26. 26. KPS digital GmbH, ein Unternehmen der KPS AG SKIP INTRO - CSS3 IS THE NEW FLASH
  27. 27. KPS digital GmbH, ein Unternehmen der KPS AG SCROLL ANIMATION
  28. 28. http://www.evanshalshaw.com/more/bondcars/
  29. 29. KPS digital GmbH, ein Unternehmen der KPS AG HOVER AND VISUAL FEEDBACK
  30. 30. KPS digital GmbH, ein Unternehmen der KPS AG ANIMATED PHOTOGRAPHY
  31. 31. KPS digital GmbH, ein Unternehmen der KPS AG ESSENTIAL FUNCTIONS OF MICROINTERACTIONS
  32. 32. 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.
  33. 33. Show System Status
  34. 34. KPS digital GmbH, ein Unternehmen der KPS AG ANIMATION BRINGS USER INTERFACE TO LIFE Animations make the experience feel crafted
  35. 35. KPS digital GmbH, ein Unternehmen der KPS AG PROCESS
  36. 36. http://playful-interaction-concepts.de/methode-gamification-design-modell/ Gamification Design Modell
  37. 37. WALT DISNAY: THE TWELVE BASIS 
 PRINCIPLES OF ANIMATION http://the12principles.tumblr.com/
  38. 38. 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
  39. 39. KPS digital GmbH, ein Unternehmen der KPS AG FIVE PRINCIPLES WILL ALWAYS DETERMINE HOW INTERACTION DESIGN
  40. 40. 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
  41. 41. KPS digital GmbH, ein Unternehmen der KPS AG STORY-DRIVEN DESIGN Develop concepts from the user's point of view and his context.
  42. 42. KPS digital GmbH, ein Unternehmen der KPS AG START BY DESIGNING INDIVIDUAL COMPONENTS AND THINKING ABOUT HOW THEY CHANGE AND MOVE IN DIFFERENT CONTEXTS.
  43. 43. KPS digital GmbH, ein Unternehmen der KPS AG DO AND DON'T What makes a good transition?
  44. 44. KPS digital GmbH, ein Unternehmen der KPS AG MOTION IS QUICK!
  45. 45. Do: Animate quickly so that the user never has to wait for the animation to finish.
  46. 46. Don’t: Staggering and slowing the movement of many elements can lengthen the duration.
  47. 47. KPS digital GmbH, ein Unternehmen der KPS AG MOTION IS CLEAR!
  48. 48. Do: Maintain a clear path into the next view, even while elements are choreographed as a group.
  49. 49. Don’t: Transitions can get confusing when multiple items need to move in different directions or cross paths.
  50. 50. KPS digital GmbH, ein Unternehmen der KPS AG MOTION IS COHESIVE! Motion experience should be consistent throughout the product.
  51. 51. KPS digital GmbH, ein Unternehmen der KPS AG SKETCH BEFORE YOU SKETCH Image: http://blog.invisionapp.com/10-tips-on-prototyping-uis-with-sketch/
  52. 52. KPS digital GmbH, ein Unternehmen der KPS AG PROTOTYPING UI ANIMATION
  53. 53. KPS digital GmbH, ein Unternehmen der KPS AG PATTERN & FRAMEWORKS 
 CAN HELP
  54. 54. KPS digital GmbH, ein Unternehmen der KPS AG CSS @KEYFRAMES
  55. 55. @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 */ }
  56. 56. @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 */ } }
  57. 57. @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 */ } }
  58. 58. KPS digital GmbH, ein Unternehmen der KPS AG TESTING
  59. 59. KPS digital GmbH, ein Unternehmen der KPS AG CONCLUSION
  60. 60. KPS digital GmbH, ein Unternehmen der KPS AG DESIGN THE TRANSACTION NOT THE INTERFACE.
  61. 61. KPS digital GmbH, ein Unternehmen der KPS AG FOLLOWING THE SEMANTIC STRUCTURE OF THE CONTENT
  62. 62. KPS digital GmbH, ein Unternehmen der KPS AG BENEFITS OF ANIMATION
  63. 63. 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
  64. 64. THANKS FOR YOUR TIME!
  65. 65. PETER.ROZEK@KPS.DE QUESTION? FOR ELLEN KPS digital GmbH, ein Unternehmen der KPS AG

×