מה הקשר בין אנימציה ל UX?
כולנו מכירים אנימציה - סרטונים, פרסומות, גיפים - הם חלק בלתי נפרד מהעולם הדיגיטלי שלנו. אבל כשזה מגיע לחוויית משתמש, אנחנו רגילים לחשוב על מסכים, לא על ״מסעות״. מה שמוביל לכך שאנחנו לא ממש מקשרים בין אנימציה לחווית משתמש. אנחנו רגילים לחשוב על אנימציות כמושג שהולך יד ביד עם שיווק, עם פרסומות, או אולי עם עיצוב הממשק ולאו דווקא עם מה שאנחנו מכירים כ- UX.
וגם אם לא ממש שמנו לב, אנימציות תמיד היו חלק מממשקים דיגיטליים. הנה דוגמה שתזרוק אתכםן חזרה לניינטיז:
למעשה, היא תמיד הייתה שם בתור אלמנט אפיוני, UX׳י.
כאן למעלה אנחנו רואים אנימציה של סמן (text cursor) מהבהב. מטרתו היא לפקס את המשתמש בנקודת ההתחלה של הכתיבה, מטרה UXית לכל הדעות. אנימציה, כמו שנראה מיד, היא למעשה אלמנט אפיוני לחלוטין ומשום כך מהווה כלי נוסף בארגז הכלים של המאפיינת. היא תשמש אותה למגוון מטרות, כשהחשובה שבהן היא החוויה עצמה.
מה התפקיד של אנימציה ב-UX?
אנחנו מאוד רגילים לאנימציה. כל מוצר דיגיטלי שאנחנו משתמשים בו היום (ובעשורים האחרונים) כולל אנימציות. למעשה, אי שימוש באנימציה ייצור חוויה מאוד מוזרה למשתמשים (אפילו אם הם לא יבינו למה זה מוזר) ובכך יפגום בחוויה.
שימו לב לדוגמה הבאה. מצד אחד אפליקציה להזמנת אוכל כשהפשטנו אותה מהאנימציות ובצד השני אותה האפליציה עם האנימציות. מרגישים עד כמה החוויה שונה?
מעבר לחוויה, לאנימציה יש מספר תפקידים חשובים מאוד בממשקי משתמשים:
פוקוס
כמו שראינו בדוגמה למעלה מממשק DOS, אנימציה משמשת כדי לפקס את המשתמש, במקרה הזה היא מצביעה על הנקודה בה הוא מקליד. גלגל יותר עדכני של אנימציה זו ניתן למצוא בכל ממשק טקסט (אפילו בצ׳אט GPT).
פידבק
אחד השימושים הנפוצים ביותר באנימציה הוא פידבק. זוהי דרך מאוד אינטואיטיבית ופשוטה לתת למשתמש תגובה לגבי פעולה שביצע. למשל הדוגמה של סיסמה לא נכונה באייפון, או אישור על פעולה בוצעה בהצלחה - כמו בגוגל פיי:
שימו לב שלגבי זמני פידבק, ההמלצה של NN/g היא לדבוק בשיטת ה- 0.1, 1, 10.
תקשור מצב מערכת (אוריאנטציה, טעינה)
כל אנימצית טעינה היא אנימציה עם מטרה UXית. המטרה שלה היא לתקשר למשתמש שהמערכת לא נתקעה, אלא טוענת והוא צריך להמתין. בנוסף היא לפעמים מראה עוד כמה זמן נשאר. ולפעמים, מספקת עוד קצת מידע - כמו בטעינת שלדית (Skeleton loading).
בנוסף, אנימציה יכולה לשמש אותנו כדי לתקשר למשתמש לאן הוא הגיע או מה קורה עכשיו, ובכך לשמור אותו באוריאנטציה. דוגמה טובה לכך ניתן לראות בחנות האפליקציות של אפל
וגם בהוספת מוצר לעגלה באמזון
תקשור ה- affordance (אפשרויות אינטראקציה)
אנימציה הרבה פעמים מאפשרת להציג את אפשרויות האינטראקציה של הממשק. אנחנו יכולים להציג למשל אפשרות של גלילה - כמו ברילס של אינסטגרם:
איך להשתמש נכון באנימציה ב- UX
אז כפי שראינו, אנימציה היא כלי מאוד חשוב מבחינה אפיונית בכל ממשק דיגיטלי. חשוב שנדע איך להשתמש בכלי הזה בצורה טובה, לכן יש מספר כללים שצריך לזכור בכל פעם שאנחנו משתמשים באנימציה:
עידון. באופן כללי אפשר להגיד שאנימציה צריכה להיות עדינה. מאוד עדינה, ממש על גבול הלא מורגשת. מכיוון שאנימציה היא כלי חזק והיא תמיד תמשוך את העין, צריך לשים לב טוב מאוד שאנחנו לא מושכים יותר מידי תשומת לב. ולא פוגעים בשמישות של הממשק ע״י אנימציה מוגזמת.
מהירות תנועה. ישנם מספר חוקי אצבע לגבי מהירות תנועה של אנימציות ממשק. לרוב מדברים על משך זמן של 100, 200, 300 מילי-שניות או אלפיות השנייה. מה שאומר שזה צריך להיות מהר, אפילו הטווח של התנועות האיטיות יחסית הן, 400-500 מילי-שניות, שזה מהר מאוד. הדרך הכי טובה להבין אם אובייקט נע במהירות טובה הוא לבחון את זה, ע״י פרוטוטייפ של התנועה. קל מאוד להבחין בין תנועות שהן במהירות טובה לבין כאלו שהן מהירות מידי או איטיות מידי.
תאוצה תאוטה. כמעט כל תנועה שאנחנו רואים בחיים האמיתיים היא לא ליניארית. כלומר היא לא מתחילה ונגמרת באותה מהירות. דמיינו שאתם זורקים כדור כלפי מעלה, הוא מתחיל מהר, ואז מאט לקראת שיא הגובה שלו, ואז בירידה, מתחיל לאט ומאיץ לקראת הפגיעה שלו באדמה. מהירות התנועה שלו משתנה. וכך גם צריכים להתנהג האלמנטים בממשקים שלנו. הם צריכים להראות ולהרגיש ״טבעיים״. לכן כדאי להקפיד להשתמש ב- ease in / ease out כאשר אנחנו מגדירים אנימציה לאובייקט בממשק.
כיוון תנועה. הכיוון של תנועת אובייקטים בממשקים צריך להיות מינימלי וברור. כלומר כדאי להימנע מתנועות ארוכות ולא ברורות (בהן אובייקט נע למקום שלא ציפינו שינוע). באופן כללי כדאי לייצר מצב בו יש תנועה אחת מרכזים של אובייקט מרכזי בכיוון ברור וצפוי. וכל שאר האובייקטים יכולים להיות מונפשים בהופעה הדרגתית פשוטה (Fade).
לסיכום, אנימציה היא כלי רב עוצמה שבשימוש נכון יכול לשפר משמעותית את חווית המשתמש. על ידי שימוש נכון באנימציה, ניתן ליצור ממשקים יעילים, נעימים וקלים לשימוש. ומעבר לזה היא כלי שאנחנו חייבים להשתמש בו. בכל ממשק. כדי לייצר חוויה טובה וברורה.
המאמר נכתב על-ידי אורי פרידמן, מעצב חוויית משתמש בחברת Martix.
לכל שאלה אתםן מוזמנים/ות ליצור איתו קשר כאן:
עריכה: טל סולומון
Comments