Animations in user experience - How to justify them, how to make them look great and how to create them

2. ‫ממשק‬ ‫משתמש‬ ‫אפשר‬ ‫להסביר‬

3. ‫נדבר‬ ‫על‬ …
Ø
Ø
Ø
‫איך‬ ‫מצדיקים‬ ‫אנימציות‬
‫איך‬ ‫גורמים‬ ‫להן‬ ‫להראות‬ ‫טוב‬
‫איך‬ ‫מייצרים‬ ‫אותן‬

4. ‫מוסיפים‬ … POP UP

5. ‫מוסיפים‬ ‫אנימציה‬ …

6. ‫ועוד‬ ‫אנימציה‬ …

7. 4
1
7
5
2
8
6
3
9
‫תשע‬ ‫משפחות‬ ‫לוגיות‬ ‫להצדקת‬ ‫אנימציות‬

8. ‫אוריאנטציה‬ 1
‫כי‬‫אין‬‫דבר‬‫בחיים‬‫שמגיע‬‫משום‬‫מקום‬-
‫ברור‬‫למשתמש‬‫מאיפה‬‫החלון‬‫פתאום‬‫הגיע‬,‫ולאן‬‫נעלם‬
‫כדי‬‫שהמשתמש‬‫לא‬‫יהיה‬‫מופתע‬‫כשהממשק‬‫משתנה‬‫לו‬
‫כי‬‫יותר‬‫קל‬‫להיחשף‬‫לתכנים‬‫חדשים‬‫בהדרגה‬

9. Orienta5on
Video credit: Tomas Skarba
1

10. Orienta5on
Video credit: Arthur GuillerminHZN
1

11. B
A ‫מבליט‬‫שינוי‬‫בלתי‬‫צפוי‬‫שהתרחש‬‫בפעולה‬‫של‬‫לחצן‬
‫אותו‬ ‫הלחצן‬ ,‫פעולה‬ ‫חדשה‬ 2

12. ‫אותו‬ ‫הלחצן‬ ,‫פעולה‬ ‫חדשה‬ 2
Video credit: Google

13. ‫אותו‬ ‫הלחצן‬ ,‫פעולה‬ ‫חדשה‬ 2
Video credit: Jardson Almeida

14. ‫הרחבה‬ ZOOM IN – 3

15. ‫הרחבה‬ 3
Video credit: Brandon Termini, dribbble

16. ‫הרחבה‬ 3
Video credit: Brandon Termini, dribbble
1
2
3

17. ‫הרחבה‬ 3
Video credit: Heileng, dribbble
‫אובייקט‬‫מאוד‬‫מזוהה‬ 1
‫האובייקט‬‫זז‬‫והופך‬‫לדומיננטי‬ 2
‫מופיע‬‫לחצן‬‫חזרה‬‫אחורה‬ 3

18. Video credit: Virgil Pana, dribbble

19. 1. Orienta5on
2. Same buQon, new ac5on
3. Zoom IN
4. Hint
5. Highlight
6. Simula5on
7. Visual feedback
8. Follow a process
9. Marke5ng with purpose
‫פונקציונליות‬ .‫לפני‬ ‫הכל‬!

20. ‫כוריאוגרפיה‬

21. ‫כוריאוגרפיה‬
‫אלסטיות‬
‫תנועת‬‫קשת‬(ARC)
‫כח‬‫משיכה‬(EASE IN)

22. ‫כוריאוגרפיה‬
Video credit: Mohammed Bilal, dribbble
Overlapping Action
Secondary Action

23. ‫פונקציונליות‬
)‫מטרה‬ ‫ומשמעות‬ (
‫גרפיקה‬
‫כוריאוגרפיה‬
)‫תנועה‬ (

24. ‫כלי‬ ‫אנימציה‬ 2016
Tumult Hype
Adobe
A/er Effects
Adobe
Animate CC
Principle
Mo;on
Avocado
Origami
Adobe
Experience
Design
Form
Atomic

25. 3‫סוגים‬ ‫של‬ ‫כלים‬
Timeline Events Patches

26. TIMELINE
Tumult
Hype
Adobe
A/er Effects
Adobe
Animate
Invision
Mo5on

27. PATCH
Avocado
(IDEO)
Form
(Google)
Origami
(Facebook)

28. EVENTS
Adobe
Experience
Design
(Google)

29. Tumult Hype
Adobe
A/er Effects
Adobe
Animate CC
Principle
Mo;on
Avocado Origami
Adobe
Experience
Design
Form Framer JS
Atomic
Adobe
Animate CC
Adobe
A/er Effects
Windows Mac Web

30. ‫כוריאוגרפיה‬
‫פונקציונליות‬
Tumult Hype
Avocado
Origami
Form
Atomic
Adobe
Animate CC
Adobe
A/er Effects
Principle
?
‫מורכבות‬
‫הממשק‬

31. ‫נסכם‬ …
‫אנימציות‬ ‫הן‬ ‫קודם‬ ‫כל‬ ‫פונקציונליות‬
Ø
‫כוריאוגרפיה‬ ‫זה‬ ‫שלב‬ ‫נפרד‬, ‫וגם‬ ‫התמחות‬
Ø
‫יש‬ ‫המון‬ ‫כלי‬ ‫אנימציה‬ .‫ה‬ ‫שילוב בתהליך האיפיון עוד לא מושלם‬
Ø