- פיטנגו UX היא עכשיו טריאולה! שלום וברוכים הבאים
הזמינו שיחה
Motion tells stories. Not long and complicated stories, but simple stories, like “hey, you need to look at this now” or “hurrah, your operation has just competed successfully.” However, the goal of animations isn’t entertaining the user, but rather they are helping the user understand what’s going on or how to use your app most effectively.
אנימציה מספרת סיפורים. לא סיפורים ארוכים ומסובכים, אלא סיפורים פשוטים, כמו "היי, כדאי שתסתכל כאן עכשיו" או "יש! הפעולה שלך הסתיימה בהצלחה." עם זאת, המטרה של אנימציות אינה לבדר את המשתמש, אלא לעזור לו להבין מה קורה או כיצד להשתמש באפליקציה שלך בצורה היעילה ביותר.
אנימציה יכולה לשמש במגוון רחב של היקפים והקשרים כדי לאחד בין יופי לפונקציונליות: היא יכולה להשפיע על התנהגות, להעביר סטטוס, לכוון את תשומת הלב של המשתמש ולעזור לו לראות את תוצאות הפעולות שלו. הנה כמה דוגמאות למקומות שבהם אפשר להוסיף אנימציות בממשק המשתמש כדי לשפר את החוויה:
טעינה לא חייבת להיות משעממת
תמיד כדאי לנסות להפוך את ההמתנה לנעימה יותר, אם אי אפשר לקצר אותה, ואנימציה יכולה להחליף את מחווני הטעינה המסתובבים והמטרידים (שבעצם רק מזכירים למשתמש שהוא מחכה). כמעט כל אתר או אפליקציה יכולים להשתמש במסך שלד (Skeleton Screen) יחד עם אנימציה עדינה בזמן טעינת התוכן, כדי לשמור על מעורבות המשתמשים.
Skeleton screens
להשלים את ממשק המשתמש בהדרגה עוד לפני שכל התוכן נטען במלואו. קרדיט תמונה: tandemseven
לעצב שינויי מצב בלי "קפיצות" חדות
אנימציה יכולה לשמש כדי להפוך מעברים לברורים יותר, כך שיהיה ברור מה קרה בין נקודת ההתחלה של המשתמש לבין המקום אליו הגיע. מעבר (Transition) מעוצב היטב מאפשר למשתמש להבין בבהירות היכן עליו למקד את תשומת הלב.
אדריאן צומברונן מציג דוגמה מצוינת לאופן שבו אנימציית גלילה יכולה לעזור למשתמש לשמור על הקשר כאשר הוא לוחץ על קישור. רק השווה בין שינוי מיידי וסטטי, שמרגיש כמו "קאט" חד:
אין דבר שמרגיש פחות טבעי משינוי פתאומי; שינויים כאלה בממשק קשים לעיבוד עבור המשתמשים. קרדיט תמונה: smashingmagazine
לעומת זאת, עם התנהגות מונפשת:
להנפיש זה "להחיות". קרדיט תמונה: smashingmagazine
כפי שניתן לראות, מעברים (Transitions) עוזרים למשתמשים להבין את הקצב והזרימה של הממשק, ומכוונים אותם לשלב הבא באינטראקציה.
הסבר על יחסים בין אלמנטים
אנימציה יכולה להעצים את תחושת השליטה הישירה של המשתמש.
לדוגמה, אייקון תפריט יכול לעבור בצורה חלקה לאייקון שליטה בניגון, ולחזור חזרה. האפקט הזה גם מסביר למשתמש את תפקיד הכפתור וגם מוסיף אלמנט של עניין לאינטראקציה. שינוי האייקון של "ניגון" לאייקון של "השהיה" מסמן ששתי הפעולות קשורות זו בזו, ושאחת לא יכולה להתקיים כאשר השנייה פעילה.
במקרה הזה, התנועה משמשת למשיכת העין אל מרכז המסך, שם ממוקמים בקרי המוזיקה. קרדיט תמונה: Material Design
דוגמה נוספת – כאשר לוחצים על כפתור פעולה צף (Floating Action Button), סימן הפלוס הופך לעיפרון. זה מסמן שהעיפרון הוא אמצעי היצירה המרכזי. פרט קטן כזה עושה את ההבדל בין לנחש מה יקרה הלאה לבין לדעת מה המשמעות של האייקון בכל מצב.
קרדיט תמונה: Material Design
השתמשו במשוב חזותי כדי להדגיש שמשהו השתבש
אנימציה יכולה לחזק את הפעולות שהמשתמש מבצע.
לדוגמה, ניתן לשפר משמעותית את חוויית מילוי הטפסים באמצעות אנימציה. אם הוזנו נתונים נכונים, אפשר להציג אנימציית "הנהון" פשוטה בסיום. לעומת זאת, כאשר הקלט נדחה, ניתן להציג רעידה אופקית. כאשר המשתמשים מבחינים באנימציות כאלה, הם מבינים מיד מה קרה.
הטופס בעצם "מניד בראשו" אליך. קרדיט תמונה: Michaël Villar
השתמשו במשוב חזותי כדי להראות מה הושג
אנימציה יכולה לעזור לאנשים לראות את תוצאות הפעולות שלהם. על פי העיקרון "להראות, לא לספר", אפשר להשתמש במשוב מונפש כדי להמחיש מה הושג.
בדוגמה של Stripe למטה, כאשר המשתמש לוחץ על "Pay", מופיע ספינר קצר לפני שהאפליקציה מציגה את מצב ההצלחה. אנימציית סימון ה-V גורמת למשתמש להרגיש שביצע את התשלום בקלות, ומשתמשים מעריכים פרטים חשובים כאלה.
קרדיט תמונה: Michaël Villar
סיכום
אנימציה היא כלי עוצמתי כאשר משתמשים בה בצורה מתוחכמת. חשוב מאוד להקדיש זמן ולשקול מתי אנימציה מתאימה ומתי לא. עלינו לאמץ את התנועה כבר מהשלבים הראשונים ולראות בה חלק טבעי מהעיצוב שלנו, כי עיצוב הוא הרבה יותר מהצגה ויזואלית בלבד. כפי שסטיב ג'ובס אמר על עיצוב:
"זה לא רק איך שזה נראה ומרגיש. עיצוב זה איך שזה עובד."
תודה!
המאמר המקורי פורסם ב-UX Planet, מאת ניק בביץ' (Nick Babich)
