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

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

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

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

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

Skeleton screens

להשלים את ממשק המשתמש בהדרגה עוד לפני שכל התוכן נטען במלואו. קרדיט תמונה: tandemseven

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

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

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

להנפיש זה “להחיות”. קרדיט תמונה: smashingmagazine

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

הסבר על יחסים בין אלמנטים

אנימציה יכולה להעצים את תחושת השליטה הישירה של המשתמש.

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

קרדיט תמונה: Material Design

השתמשו במשוב חזותי כדי להדגיש שמשהו השתבש

[contact-form-7 id=”958e338″ title=”Post Contact Form”]

הטופס בעצם “מניד בראשו” אליך. קרדיט תמונה: Michaël Villar

השתמשו במשוב חזותי כדי להראות מה הושג

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

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

קרדיט תמונה: Michaël Villar

סיכום

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

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

תודה!

המאמר המקורי פורסם ב-UX Planet, מאת ניק בביץ’ (Nick Babich)

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.

Animation may be used in a wide range of scales and contexts to unite beauty and function: it can influence behavior, communicate status, guide the users attention and help the user see the results of their actions. Here are just a few examples to illustrate places where you can add some animations in your UI to improve the experience:

Loading Doesn’t Have to Be Boring

You should always try to make the wait more pleasant if you can’t shorten the line and animation can be used in replacement of an annoying spinning loading indicators (which basically just reminds reminds the user that they are waiting). Almost any site or app can utilize a skeleton screen together with a subtle animation when loading it’s content to keep users engaged.

Skeleton screens complete the UI incrementally before the content is fully loaded. Image credit: tandemseven

Design State Change Without Hard Cuts

Animation can be used to make transitions more obvious, so it’s clear what happened between where the user started and ended up. A well-designed transition enables the user to clearly understand where their attention should be focused.

Adrian Zumbrunnen has a great example on how scrolling animation can help user maintain context when they click on a link. Just compare this static instant change which feels like a hard cut:

Nothing feels more unnatural than a sudden change, such changes in an interface are hard for users to process. Image credit: smashingmagazine

With an animated behavior:

To animate is “to bring to life”. Image credit: smashingmagazine

And as you see, transitions help users understand the pace and flow of an interface. It also helps guide the user to the next step of an interaction.

Explain Relationships Between Elements

Animation can enhance the sense of direct manipulation.

For example, a menu icon may smoothly transition to a playback control, and back again. This effect both informs the user of the button’s function while adding an element of wonder to the interaction. Transforming the play icon into the pause also signifies that the two actions are connected, and that one cannot exist while the other is present.

 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

Another example — when pressing floating action button, the plus sign transforms into a pencil. This indicates that the pencil is the primary creation method. Such a small detail means the difference between having to guess what will happen next and knowing what the icon means in either state.

 Image credit: Material Design

Use Feedback to Highlight That Something Went Wrong

[contact-form-7 id=”958e338″ title=”Post Contact Form”]

Animation can reinforce the actions a user is preforming.

For example, form entry can be greatly enhanced with some animation. If correct data has been entered, a simple ‘nod’ animation can be introduced upon completion. Whereas a horizontal shake can be used when denying the input. When users notice such animation they instantly understand the action.

 The form is basically shaking its head at you. Image credit: Michaël Villar

Use Feedback to Show What’s Been Accomplished

Animation can be used to help people visualize the results of their actions. By following the principle “show, don’t tell”, you can use animated feedback to show what’s been accomplished.

In Stripe’s example below, when the user clicks “Pay”, a spinner briefly appears before the app shows the success state. Checkmark animation makes user feel like they easily did the payment and users do appreciate such important details.

 Image credit: Michaël Villar

Conclusion

Animation is powerful when used in a sophisticated ways. It’s really important to take time and consider when an animation is and isn’t appropriate. We need to embrace the motion from the very beginning and think of it as natural constituent of our design, because design is more than just about visual presentation. As Steve Jobs said about design:

“It’s not just what it looks like and feels like. Design is how it works.“

Thank you!

Original article found at UX Planet, posted by Nick Babich