הזמינו שיחה
האם אתם מעוניינים לשפר את המרות המכירות שלכם? להפחית את שימור המשתמשים? לקצץ בשיעורי הנטישה? סיור מוצר שנבנה בצורה מיומנת יכול לתרום לכל אחת מהמטרות הללו. אבל מה הופך חוויית קליטה לנהדרת?
קל מאוד להיסחף עם אנימציות וליצור משהו שמבלבל או מציף את המשתמשים.
בואו נבחן 5 דוגמאות לאנימציה נכונה באתרים ומה הלקח המרכזי שניתן ללמוד מכל אחת מהן.
אל תעשו אנימציה של כמה אלמנטים בו-זמנית
לדוגמה: אולי תתפתו ליצור אנימציה מרשימה לאזור ה-hero שכוללת טקסט, איורים וכפתור קריאה לפעולה.
אבל הדבר הכי גרוע שתוכלו לעשות זה להסיח את דעת המשתמש על ידי הנפשה של יותר מדי אלמנטים באותו זמן. כשהמסך עמוס, המשתמש לא ידע לאן להסתכל — וכנראה פשוט יעבור למקום אחר.
קשור: עקרונות האנימציה בממשקי משתמש (UI)
תחשבו על כל אנימציה כסיפור — היא צריכה להיות ברורה, מדורגת ולכוון את המשתמש בדיוק לאן שאתם רוצים.
מומלץ לאנימציה של אלמנט אחד בכל פעם, עם הפרש של כחצי שנייה עד שנייה בין אנימציה לאנימציה.
דוגמה מצוינת לכך ניתן לראות בעבודה של Anton Aheichanka עבור Craft מבית InVision, שם הוא מראה איך אפשר להנפיש כמה אלמנטים בלי להגזים.
Master Sketch with these free video tutorials by Anton Aheichanka
תנו לאנימציה משמעות
אנימציה אקראית וחסרת מטרה? ממש לא.
חשוב לזכור מהו המוצר או השירות שאתם מנסים לקדם. לפעמים אנחנו כמעצבים מייצרים איורים מושלמים — אבל הם לא תמיד תורמים למטרה של הלקוח.
"פשוט תגידו לא לאנימציות חסרות משמעות."
בכל פעם שאתם מוסיפים אנימציה, תשאלו את עצמכם: האם זה משרת את המטרה של הלקוח? והאם זה באמת מועיל למשתמש?
בדוגמה הנהדרת של Sergey Valiukh, האנימציה תומכת במעבר בין AM ל-PM בצורה דינמית שהייתה הרבה פחות מעניינת אם הייתה סטטית.
GIF for the Timeline App, by Sergey Valiukh
שימו לב לזמן
שמרו על אנימציות קצרות וממוקדות. אף אחד לא רוצה לחכות שהכפתור שלכם יסיים את האנימציה לפני שהוא יכול ללחוץ עליו.
דוגמה טובה לכך: מעבר מהיר ואלגנטי בכפתור, עם תנועה חדה ומיידית.
Open, by Joe Jordan
תגידו לא לאנימציות לינאריות ומשעממות
אנימציה שמתבצעת במסלול ישר וללא עקומות תאוצה (easing) מרגישה מכנית. תוסיפו מעבר הדרגתי בין המצבים, ונסו לחקות כוחות מהעולם האמיתי, כמו כבידה.
Remix Jobs היא דוגמה מצוינת לשימוש במעברים חלקים ומעניינים, בהשראת עקרונות material design של גוגל.
Event Website Design, by Julien Renvoye
תכננו אנימציה כבר בשלב ה-Wireframe
כמו כל עיצוב, גם אנימציה צריכה להיות מתוכננת מההתחלה. כשאתם יוצרים סקיצות או Wireframes, חשוב לחשוב מראש איך האלמנטים ינועו.
צוות Ramotion מדגים היטב תכנון מוקדם של אנימציות במעבר "משוך לרענון".
Pull Down to Refresh, by Ramotion
כמו בעיצוב, גם אנימציה היא עניין אישי וסובייקטיבי. חשוב תמיד לזכור את האנשים שיתקשרו עם מה שאתם יוצרים. כל תנועה צריכה להוסיף ערך אמיתי לחוויית המשתמש.
המאמר המקורי פורסם בבלוג InVision blog, נכתב על ידי Joe Jordan בתאריך 12 בפברואר 2018.
