Animation in Designsystemen (deutsch) #MuC2020

Animation ist ein Schlüsselelement guter User Experience und Markenerscheinung, da diese – wenn gekonnt verwendet – Produkte (UUX) und die Markenpersönlichkeit unterstützt.

Aufgrund ihres flüchtigen Wesens erhält Animation zu oft nur wenige oder gar keine Beachtung in Design(systemen), trotz ihrer mindestens hilfreichen, zumeist aber fundamentalen Rolle.

Dieser sehr greifbare Vortrag zeigt Art und Anwendung guter Animation für Benutzeroberflächen sowie deren erfolgreiche Implementierung in Designsysteme.

(animierte Version der Folien hier: https://www.youtube.com/watch?v=t7k2alfyOEM )

#DesignSysteme #DesignSystem #Animation #Motion #InteractionDesign #MotionDesign #Branding #UIAnimation #MeaningfulMotion #UITransitions #InteractionStates #UX #UserExperience #Usablitity #UserFlow #Choreographie #DSXFRA

Transcript

1.   Animation 
     IN DESIGNSYSTEMEN 
   7. SEPTEMBER 2020
   @BENNOLOEWENBERG
   

   View Slide

2.   WI� K��NG …  
   Quelle: Google
   

   View Slide

3. Quelle: Google – Animation als Video: https://youtu.be/t7k2alfyOEM (00:19)
   

   View Slide

4. Quelle: Slack – Animation als Video: https://youtu.be/t7k2alfyOEM (00:44)
   

   View Slide

5. @BennoLoewenberg
   deswegen oft nicht Teil eines Designsystems
     … W�G WE� VORB�I  
   

   View Slide

6. Alps, Alta, Anatomy,
   Archipelago, Argon, Apex, Aurora, Axiom,
   Backpack, Base, Binary, Bits, Bloom, Bluemix, Blueprint,
   Boundless, Build, Bouy, Bolt, Canvas, Carbon, Cedar, Chameleon,
   Chrome, Cirrus, Clarity, Clay, Comet, Connect, Constellation,
   Cosmos, DressCode, Duet, Eos, Epoxy, Evergreen, Fabric, Feather,
   Feelix, Fiori, Fish Tank, Fleet, Float, Fluent, Foundation, Forma,
   Frontier, Fuse, Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity,
   Grommet, Group, Harmony, Hedwig, Helix, Honeycomb, Horizon,
   Indigo, Janus, Keirin, Kotti, Latitude, Lexicon, Lightning, Liquid,
   Luci, Luna, Material, Mayflower, Miui, Mind, Mineral, Minutiae,
   Mixtape, Momentum, Mosaic, Muesli, Nachos, Nicollet, Northstar,
   Nova, One, Oneui, Opattern, Orbit, Origami, Otkit, Oxide, Patternfly,
   Photon, Plasma, Polaris, Poncho, Precise, Predix, Primer, Protocol,
   Purple, Quartz, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir,
   Scooter, Seeds, Skin, ShowCar, Snacks, Solar, Solid, SolidWork,
   Spark, Spectrum, Stacks, Starling, Sticky, SynNeo, Tack, Stitch,
   rm, Tape, Terra, ThingWorx, Thumbprint, Uniform,
   Unison, Unity, Ustyle, Vanilla,
   erblocks, Yarn
   @BennoLoewenberg
     DESIGNSYSTEME 
   

   View Slide

7. Alps, Alta, Anatomy,
   Archipelago, Argon, Apex, Aurora, Axiom,
   Backpack, Base, Binary, Bits, Bloom, Bluemix, Blueprint,
   Boundless, Build, Bouy, Bolt, Canvas, Carbon, Cedar, Chameleon,
   Chrome, Cirrus, Clarity, Clay, Comet, Connect, Constellation,
   Cosmos, DressCode, Duet, Eos, Epoxy, Evergreen, Fabric, Feather,
   Feelix, Fiori, Fish Tank, Fleet, Float, Fluent, Foundation, Forma,
   Frontier, Fuse, Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity,
   Grommet, Group, Harmony, Hedwig, Helix, Honeycomb, Horizon,
   Indigo, Janus, Keirin, Kotti, Latitude, Lexicon, Lightning, Liquid,
   Luci, Luna, Material, Mayflower, Miui, Mind, Mineral, Minutiae,
   Mixtape, Momentum, Mosaic, Muesli, Nachos, Nicollet, Northstar,
   Nova, One, Oneui, Opattern, Orbit, Origami, Otkit, Oxide, Patternfly,
   Photon, Plasma, Polaris, Poncho, Precise, Predix, Primer, Protocol,
   Purple, Quartz, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir,
   Scooter, Seeds, Skin, ShowCar, Snacks, Solar, Solid, SolidWork,
   Spark, Spectrum, Stacks, Starling, Sticky, SynNeo, Tack, Stitch,
   rm, Tape, Terra, ThingWorx, Thumbprint, Uniform,
   Unison, Unity, Ustyle, Vanilla,
   derblocks, Yarn
   @BennoLoewenberg
     �ESIGNSYSTEM� 
   

   View Slide

8. @BennoLoewenberg
   + Ausdruck der Markenpersönlichkeit
   + Hilfe und Anleitung für Nutzer
     ZWE�K & NU�ZEN 
   

   View Slide

9. Quelle: Audi – Animation als Video: https://youtu.be/t7k2alfyOEM (01:33)
   

   View Slide

10. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM 02:02)
    

    View Slide

11. “ Just like typography and color,
    the animation you use says something
    about your product and its personality.”
    Quelle: Val Head
    

    View Slide

12. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (02:34)
    

    View Slide

13. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (03:01)
    

    View Slide

14. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (03:15)
    

    View Slide

15. “ Motion is a key part of any UX.
    Because most digital interfaces
    lack real world cues.
    Motion helps to understand an UI.”
    Quelle: Una Kravets
    

    View Slide

16. Quelle: Caleb Barclay
    Visual Modularity
    Animation Modularity
    

    View Slide

17. 1. Konsistenz in der Verwendung von Animation
    (über alle Produkte hinweg)
    2. Zeitersparnis für alle im Team
    3. Durchgängige Markenerscheinung
      WI�DERVERW�NDBAR� 
    B�WEGU�GSMUSTE� 
    Quelle: Val Head
    

    View Slide

18. @BennoLoewenberg
      C�TCHING 
      THE HAS�Y 
    

    View Slide

19. + Timing-Kurven
    + Verwendungsarten (Marke, UX)
    + Choreographische Muster (Objekte & Zusammenspiel)
    + Effekte (Größe, Sichtbarkeit)
    + Abläufe, bei denen Animation fehlt oder ERSCHLÄGT
     WORAU� ACHTE� 
    @BennoLoewenberg
    

    View Slide

20.   �NIMATION �UDI� 
    Quelle: Alla Kholmatova
    

    View Slide

21.   �NIMATION �UDI� 
    Quelle: Alla Kholmatova
    

    View Slide

22.   �NIMATION �UDI� 
    Quelle: Caleb Barclay
    

    View Slide

23. @BennoLoewenberg
      �EFINING 
     THE TRANSIEN� 
    

    View Slide

24. @BennoLoewenberg
    Markenwerte und -persönlichkeit ausdrücken
    mittels bedeutungstragender Animation …
      M�RKEN�RLEBNIS 
    

    View Slide

25. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (04:48)
    

    View Slide

26. Quelle: Ant Motion – Animation als Video: https://youtu.be/t7k2alfyOEM (05:20)
    

    View Slide

27. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (05:45)
    

    View Slide

28. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (06:07)
    

    View Slide

29. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (06:25)
    

    View Slide

30. Quelle: Alla Kholmatova
    

    View Slide

31. @BennoLoewenberg
      �UILDING 
      THE NONPERMANEN� 
    

    View Slide

32. @BennoLoewenberg
    + Animationsdauer
    + Easing-Werte
    + Benannte Effekte
    + Choreographie & Rhythmus
      �AUSTEIN� 
    

    View Slide

33. Motion Scale
    Typopgraphic Scale
    Quelle: Caleb Barclay
    

    View Slide

34. Quelle: Otto – Animation als Video: https://youtu.be/t7k2alfyOEM (08:05)
    

    View Slide

35. Quelle: Caleb Barclay – Animation als Video: https://youtu.be/t7k2alfyOEM (08:23)
    

    View Slide

36. Quelle: SAP »Fiori«
    

    View Slide

37. Quelle: Puralsight
    

    View Slide

38. Quelle: Workday »Canvas« & Puralsight (commented)
    Macro Motion
    Micro Motion
    

    View Slide

39. Quelle: Salesforce »Lightning«
      ASP�KTE 
    

    View Slide

40. Quelle: FutureLearn
      ANWEN�UNGEN 
    

    View Slide

41. Quelle: SAP »Fiori«
      FU�KTIONEN 
    

    View Slide

42. Quelle: Price line »One« – Animation als Video: https://youtu.be/t7k2alfyOEM (09:27)
    

    View Slide

43. Modifizierer
    Dauer
    Easing
    Anwendung
    Quelle: Caleb Barclay (commented)
    

    View Slide

44.  STATICS 
      FOR ANIMATIO� 
    @BennoLoewenberg
    

    View Slide

45.   S�RY→BOAR� 
    @BennoLoewenberg
    

    View Slide

46. @BennoLoewenberg
    

    View Slide

47. @BennoLoewenberg
    

    View Slide

48. @BennoLoewenberg
    

    View Slide

49. @BennoLoewenberg
    

    View Slide

50. @BennoLoewenberg
    

    View Slide

51. @BennoLoewenberg – Animation als Video: https://youtu.be/t7k2alfyOEM (11:02)
    

    View Slide

52.  SPE��ING 
      THE GLIMPS� 
    @BennoLoewenberg
    

    View Slide

53.   S�RY→BOAR� 
    @BennoLoewenberg
    

    View Slide

54. @BennoLoewenberg
    + MOTION SPECS 
    

    View Slide

55. @BennoLoewenberg
    

    View Slide

56. @BennoLoewenberg
    

    View Slide

57. @BennoLoewenberg
    

    View Slide

58. @BennoLoewenberg
    

    View Slide

59.   �EBENDIGE �IEFERFORM 
    + Storyboards + Motion Specs
    + Motion-Comps (d. h. Videos)
    + Interaktive Klick-Dummies
    @BennoLoewenberg
    

    View Slide

60. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (12:13)
    

    View Slide

61. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (12:36)
    

    View Slide

62. Quelle: Caleb Barclay (commented)
    Schlüssel-
    zustände
    Easings
    Choreographie
    

    View Slide

63. Quelle: Caleb Barclay (commented)
    Technische
    Spezifikation
    Motion-Comp
    (od. interaktiver
    Klick-Dummy)
    334 ?
    

    View Slide

64. “ Millisekunden entscheiden darüber,
    obeine Animation gelingt oder ni…cht.”
    @BennoLoewenberg
    

    View Slide

65. Quelle: Sparebank – Animation als Video: https://youtu.be/t7k2alfyOEM (13:14)
    

    View Slide

66. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (13:41)
    

    View Slide

67.  MOMENTUM 
      FOR M�TION 
    @BennoLoewenberg
    

    View Slide

68. Quelle: Google »Material«
     W�S 
    

    View Slide

69. Quelle: Google »Material«
      WI� 
    

    View Slide

70. “ A combination of both motion principles
    and implementable examples provides
    the most effective combination
    for teams building internal
    design systems.”
    Quelle: Bryan Zavestoski
    

    View Slide

71. “ If animation is always left to the end,
    it can never be more than decoration.”
    Quelle: Val Head
    

    View Slide

72.   @�ENNO�OEWENBERG 
     LINKEDIN / XING / TWI�ER
    

    View Slide

73. http://
    Talks & Workshops
    

    View Slide