מאמר

animations
יאיר גולן

|

איך אנימציות ישפרו את השימוש בממשק שלי?

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

 

אנימציה מחייה את הממשק ומגיבה אל המשתמש שלי

 

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

 

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

 

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

 

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

 

כמה דוגמאות לשימוש טוב באנימציות:

 

my_supermarket

 

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

 

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

 

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

 

 

Pic01 

 

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

 

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

 

Pic02

 

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

 

 

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

אולי יעניין אותך גם: