כיצד להשתמש באנימציה כדי לשפר את ה UX

הרעיון הזה בא לידי ביטוי בצורה ברורה בציטוט של Zurb:

"אנחנו כבר לא מעצבים מסכים סטטיים בלבד. אנחנו מעצבים את הדרך שבה המשתמש עובר בין המסכים כדי להגיע ולצפות בתוכן."

אנימציה יכולה לשמש במגוון רחב של קני מידה והקשרים כדי לאחד בין יופי לפונקציונליות: היא יכולה להשפיע על התנהגות, לתקשר סטטוס, להכווין את תשומת הלב של המשתמש ולעזור לו לראות את תוצאות הפעולות שלו. הנה כמה דוגמאות למקומות שבהם אפשר להוסיף אנימציות בממשק כדי לשפר את החוויה:

טעינה לא חייבת להיות משעממת

תמיד כדאי לנסות להפוך את ההמתנה לנעימה יותר אם אי אפשר לקצר אותה, ואנימציה יכולה להחליף אינדיקטורים מסתובבים ומעצבנים (שבעצם רק מזכירים למשתמש שהוא מחכה). כמעט כל אתר או אפליקציה יכולים להשתמש ב-skeleton screen יחד עם אנימציה עדינה בזמן טעינת התוכן כדי לשמור על מעורבות המשתמשים.

Skeleton screens complete the UI incrementally before the content is fully loaded. Image credit: tandemseven
Skeleton screens משלימים את הממשק בהדרגה לפני שהכל נטען. קרדיט: tandemseven

עצבו שינויי מצב בלי קפיצות חדות

אנימציה יכולה להבליט מעברים, כך שיהיה ברור מה קרה בין נקודת ההתחלה לסיום של המשתמש. מעבר מתוכנן היטב מאפשר למשתמש להבין בקלות היכן עליו להתמקד.

Adrian Zumbrunnen מדגים איך אנימציית גלילה עוזרת למשתמש לשמור על הקשר כשהוא לוחץ על קישור. השוו את זה לשינוי מיידי וסטטי שמרגיש כמו "קאט" חד:

Nothing feels more unnatural than a sudden change, such changes in an interface are hard for users to process. Image credit: smashingmagazine
אין דבר פחות טבעי משינוי פתאומי – שינויים כאלה בממשק קשים לעיבוד עבור המשתמש. קרדיט: smashingmagazine

ועם התנהגות מונפשת:

To animate is “to bring to life”. Image credit: smashingmagazine
להנפיש זה "להחיות". קרדיט: smashingmagazine

כפי שניתן לראות, מעברים עוזרים למשתמש להבין את הקצב והזרימה של הממשק, ומכוונים אותו לשלב הבא באינטראקציה.

הסבירו קשרים בין אלמנטים

אנימציה יכולה להעצים את תחושת השליטה הישירה.
למשל, אייקון תפריט יכול לעבור בצורה חלקה לאייקון שליטה בניגון וחזרה. האפקט הזה גם מסביר למשתמש את תפקיד הכפתור וגם מוסיף עניין לאינטראקציה. שינוי אייקון הפליי לאייקון פאוז מסמן שהפעולות קשורות זו לזו, ואחת לא יכולה להתקיים כשהשנייה פעילה.

In this case, motion is used to draw the eye to the center of the screen where the music controls are located. Image credit: Material Design
במקרה הזה, התנועה מושכת את העין למרכז המסך, שם נמצאים כפתורי המוזיקה. קרדיט: Material Design

דוגמה נוספת – בלחיצה על כפתור פעולה צף, סימן הפלוס הופך לעיפרון. זה מסמן שהעיפרון הוא אמצעי היצירה העיקרי. פרט קטן כזה עושה את ההבדל בין לנחש מה יקרה לבין לדעת מה המשמעות של האייקון בכל מצב.

Image credit: Material Design
קרדיט: Material Design

השתמשו בפידבק כדי להדגיש שמשהו השתבש

אנימציה יכולה לחזק את הפעולות שהמשתמש מבצע.
למשל, הזנת טופס יכולה להשתפר משמעותית עם אנימציה. אם הוזנו נתונים נכונים, אפשר להוסיף אנימציית "הנהון" בסיום. לעומת זאת, ניעור אופקי יכול להופיע כאשר הקלט נדחה. כשהמשתמש רואה את האנימציה, הוא מבין מיד מה קרה.

The form is basically shaking its head at you. Image credit: Michaël Villar
הטופס בעצם "מנענע את הראש". קרדיט: Michaël Villar

השתמשו בפידבק כדי להראות מה הושג

אנימציה יכולה לעזור לאנשים לראות את תוצאות הפעולות שלהם.
בעיקרון של "להראות, לא לספר", אפשר להשתמש בפידבק מונפש כדי להמחיש מה הושג.

בדוגמה של Stripe, כאשר המשתמש לוחץ "Pay", מופיע ספינר קצר לפני שמוצג מצב הצלחה. אנימציית סימון ה-V גורמת למשתמש להרגיש שהפעולה עברה בקלות, ומשתמשים מעריכים את הפרטים הקטנים האלה.

Image credit: Michaël Villar
קרדיט: Michaël Villar

סיכום

אנימציה היא כלי עוצמתי כשהיא נעשית בחוכמה. חשוב להקדיש זמן ולשקול מתי נכון ומתי לא נכון להשתמש בה. צריך לאמץ את התנועה כבר מההתחלה ולחשוב עליה כחלק טבעי מהעיצוב, כי עיצוב הוא הרבה מעבר למראה החזותי בלבד. כפי שסטיב ג'ובס אמר על עיצוב:

"זה לא רק איך שזה נראה ומרגיש. עיצוב הוא איך שזה עובד."

פוסטים נוספים

עיין בכל