אצלנו, בריצ'קיד, מתחילים את היום עם עיצוב ופיתוח אתרים, ומסיימים אותו – ובכן - עם עיצוב ופיתוח אתרים. תפסנו לראיון את בן שמש, המתכנת הסופר מוכשר שלנו, כדי לברר איתו איך ומתי כדאי לכם לשלב אנימציה באתר. קבלו סוג של מדריך.
הביו של בן:
> הוא התחיל את דרכו המקצועית כמעצב ווב ופלאשיסט.
> רק לאחר מספר שנים החליט לחצות את הכביש ולהפוך למתכנת.
> בהמשך החליט להעמיק את הידע והאהבה לאנימציות והפך למומחה שלנו בריצ'קיד לנושא
> ב-2013 הוא הקים את ריינבול, קבוצת הכדורגל הגאה הראשונה והיחידה בישראל
> הוא חובב אירוויזיון מושבע ועדיין לא מבין איך ריטה לא זכתה בזמנו
כשמקימים אתר תמיד מתעוררת השאלה אם וכמה כדאי להשתמש באנימציות כדי ליצור דינמיות וחוויית משתמש טובה יותר. אנימציה היא כלי עיצובי שאי אפשר להתעלם ממנו בעשור האחרון, מה שאומר שהגולשים מצפים למידה מסוימת של אנימציות וחיווי התנהגותי לפעולות שהם מבצעים באתר.
כדי לדעת מתי נכון להכניס אנימציה ומתי לא, תפסנו את בן לשיחה צפופה.
"המקטרגים תמיד יגידו שאנימציה יכולה לגרוע, ליצור הסחת דעת ולהיראות מעט ילדותית", הוא פותח.
אז מי צודק?
"בעקרון, שני הצדדים צודקים. אנימציה יכולה להיות אחלה דרך להוסיף חיות לאתר, אבל היא חייבת לעלות בקנה אחד עם המטרה הסופית של האתר. הלחם לא נכון של האנימציה עם עיצוב האתר יכול להיות צורם לעין – וזה משהו שאנחנו רוצים להימנע ממנו".
"חשוב לדעת שהאנימציה מגיעה בכל מיני צבעים ותכונות. האנימציה יכולה להיות מעודנת ולהתרכז רק בכפתור, או שהיא יכולה להיות גרנדיוזית יותר, לדוגמה כשכל הרקע נמצא בתנועה. האנימציה יכולה להגיב לפעולה של הגולש – למשל, הקלקה, מעבר עכבר, הסטת מסך באמצעות אצבע – או שהיא יכולה להיות עצמאית, ללא קשר לפעילות הגולש.
מתי האנימציה משרתת את האתר ומתי היא משתלטת עליו?
"המפתח הנכון לאתר טוב הוא יחס בריא של אנימציה והעיצוב הבסיסי שלו. באופן כללי, עדיף לא להגזים כמעט אף פעם עם אנימציות גם כדי לא להיראות מצועצע מדי וגם כי חלק גדול מהאנימציות משתמשות בפלאגינים, שעשויים להכביד מאד על האתר ולגרום לביצועים חלשים. אתה גם לא רוצה להסיח את דעתו של הגולש. הוא אמור לקבל חווית גלישה נעימה כי עדיין ברוב האתרים מה שהכי חשוב הוא התוכן".
באילו מקרים חייבים, לדעתך, להשתמש באנימציה?
"לעתים, האנימציה היא כלי שנועד לפשט או להמחיש תהליכים מורכבים. לדוגמה, כשמדובר על חברה כמו אורמת, שמפיקה תהליך מורכב כמו מתקן לקליטה וייצור של אנרגיה סולארית, אפשר מצד אחד לפרט את התהליך בטקסט ארוך, שעלול להרתיע את הגולש. זו הדרך המסורתית. הדרך המתקדמת יותר היא להמיר את המידע המייגע לאינפוגרפיקה אנימטיבית ידידותית שלוקחת את הגולש לאותו תהליך באופן קל לעיכול וזורם. זה גם יפה לעין וגם שימושי, מה שנותן לחוויית הגלישה את סוד הקסם: שילוב נכון של אנימציה ועיצוב.
מה כלל האצבע שלך לשילוב נכון?
"הקווים שתמיד מנחים אותי כדי לשמור על יחס טוב של אנימציה הם רק כאשר אני יכול באמת להצדיק את השימוש בה. לדוגמה, תזוזה נעימה של גלילה באתר בדר"כ תתן תחושה נעימה לגולש, חשיפת תוכן באופן הדרגתי היא גם דרך טובה להנגיש כמות גדולה של מלל או אלמנטים.
באתר של פסקוביץ', חברה לשיווק מזון, רצינו – אני והמעצב – ליצור חוויית משתמש מגניבה וזורמת. לצורך זה, השתמשנו בסקריפטים של גלילה נעימה לכל אורך האתר ופיתחנו עבורם גלריה מיוחדת. הניווט בין סליידר לסליידר בגלריה נעשה על ידי הקלקה על אייקון שמבטא את התוכן כמו בשר, ירקות וכדומה. באתר כמו זה, שמוכר מוצרי מזון, הפוקוס עדיין חייב להישאר על המוצרים עצמם, ולכן גייסנו גם את המוצרים עצמם לטובת האנימציות".
בפורוורד, פרויקט המיקסטייפ שלנו, היה רצון לשים דגש על חוויית גלישה מגניבה שתתאים לדור המילניאלס. "הם נולדו לתוך עולם שבו הצפה של גירויים איננה דבר מאיים ולכן אפשר היה לשחק עם מספר רב של אלמנטים – גם אם אנחנו נמצאים עדיין באותו המסך. כל אלמנט שעליו תעבור עם העכבר או תקליק, יגיב – או שאלמנט אחר יגיב עבורו. גם כאשר הגולש מנווט את עצמו לעמודים פנימיים ואחרים, עדיין - הודות לאנימציה - יש לו תחושה שהוא נשאר באותו הדף. מה שמיוחד באתר הזה הוא ריבוי האלמנטים האנימטיביים, אני מרגיש שזה גורם לגולש תמיד לחפש אלמנטים נוספים ולהישאר בו יותר זמן".
לדברי שמש, חשוב מאד כאשר אנחנו עושים אנימציות במעברי עכבר, במיוחד בכפתורים צריך להקפיד שאותו אלמנט אליו אנו מתייחסים לא יתחיל לזוז ולבלבל את הגולש. "אם לא חייבים, עדיף שהכפתור לא ישנה גודל. שינוי צבעוניות או הצללה בדרך כלל יספיקו", הוא אומר. "לטעמי, יש משהו מאד גס בכך שכפתור פתאום הופך להיות גדול יותר במעבר עכבר או בהקלקה".
יש אתרים שבהם האנימציה היא גולת הכותרת?
"בהחלט. כשיש באתר כמות קטנה יחסית של מלל, לדוגמה אתרי מוזיקה ואופנה, האנימציה תעבור מתפקיד תומך לתפקיד ראשי וזאת כדי להעצים את המוצר עצמו".
אז איך אתה מסביר את זה שבאתר של מוזיקאית כמו ביונסה - כמעט ואין אלמנטים שזזים?
"גם באתר שלה עדיין יש לא מעט אנימציות, אבל הן מעודנות כמו החשכות של תמונות ברגע שהן מגיעות למרכז המסך או כניסה של תפריט בהקלקה על המבורגר. ביונסה בהחלט ידעה למנן אלמנטים אנימטיביים כיוון שהיא רצתה לתת יותר פוקוס לתמונות הרקע".
אם יש מסר אחד שחשוב לי להעביר הוא: הכירו והיו רגישים לקהל היעד שלכם. קחו בחשבון את ההעדפות הויזואליות שלהם, את הסיבה שהביאה אותם מלכתחילה לבקר באתר, וכמובן את המכשיר ממנו הם גולשים. אנימציה שעובדת טוב בדסקטופ לאו דווקא תתאים לטאבלט או למובייל, וההפך".
כדי שלא תאמצו את האצבעות יותר מדי בחיפוש (למרות שזה נחשב לפעילות גופנית שורפת קלוריות), אנחנו מביאים כאן את המיטב: אתרים עשירים באנימציה, שבן ושאר צוות הפיתוח שלנו בנו עבור לקוחות ריצ'קיד, בהם מופגנות היכולות המופלאות של כלי האנימציה שאנו משתמשים בהם:
