אנימציות באתר: מתי הן עוזרות ומתי הן מזיקות.

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

למה בכלל להוסיף תנועה לאתר

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

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

תנועה שעוזרת ותנועה שמזיקה

תנועה שעוזרת

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

תנועה שמזיקה

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

דוגמה: מסך פתיחה

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

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

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

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

דוגמה: עמוד תהליך עבודה

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

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

תלת-ממד: האפקט החזק והכבד ביותר

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

אבל תלת-ממד הוא גם הדבר הכבד ביותר באתר. לכן:

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

תנועה בטלפון

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

מהירות: אנימציה טובה לא מאטה

אנימציה טובה לא מאטה את האתר. כמה כללים טכניים שכדאי לבקש ממי שבונה לכם:

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

על הקשר בין עיצוב למהירות כתבתי במדריך למהירות אתר ועיצוב.

נגישות: מי שלא רוצה תנועה

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

כמה תנועה מתאימה לעסק שלכם

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

בדיקה לפני שמאשרים

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

לסיכום

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