הבלוג

יותר מדי אנימציות באתרים

יותר מדי אנימציות ואפקטים באתרים

קצת הקדמה והתרשמות כללית

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

כי אנימציות עושים עם טעם או לא עושים בכלל

אז מדוע יותר מדי אנימציות ואפקטים באתרים זו איננה הדרך הנכונה? מיותר לגמרי להחיל הנפשות (אנימציות) על כל אלמנט, למה? כי זה מגניב !! אז לא !!! אנימציות אמורים להיות מיושמים בטעם ובמיוחד בצורה עדינה – אם אין כל מטרה ספיציפית עבור ההנפשה אז אין מה ליישם אותה באתר כי רק בגלל שזה עתה למדת או מאידך מצאת את הפונקציה של האנימציה שמחילה על אותו אלמנט ואת/ה "בהתלהבות יתרה".
לדוגמה באתר שלי (שאת/ה נמצא/ת בו) בעמוד הבית החלתי על "כרטיסי" השרות שאני נותן אנימציה של סיבוב בעת מעבר עכבר כי רציתי שהגולש יקרא טקסט קצר על אותו שירות ובמעבר עכבר על שרות אחר השרות הקודם יסתובב חזרה למצב של האייקון – זו למעשה דוגמה פונקציונלית שגם מביאה סוג של חוויה אינטראקטיבית לגולש. אני לא "מביא" את האלמנט שיגיח לו מאיזה שהוא צד למיקום שלו (מצד ימין למיקום שלו לדוגמה) בסליידינג (כמו שהאלמנט מחליק למיקום שלו).
כן אפשרי לתת אפקט נעים של הנפשת/תזוזת טקסט באזור התמונה הראשית (המונח המקצועי זה HERO ) בשילוב של פיידינג ממצב שלא רואים את הטקסט למצב שכן רואים את הטקסט לפרק זמן של מספר שניות ( FADE ). גם אין לתת מבחינת הגדרת המהירות מהירות גבוהה , הכל שייעשה בעדינות.

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

ועם כל הנכתב הנ"ל יש חובה להתחשב באוכלוסיה נוספת – בעלי המוגבלויות , נגישות באתר.

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

  1. יש טרנד כיום ליצור הנפשות/אנימציות מאוד מוגזמות באתרים מה דעתך על ריבוי ההנפשות הללו ?
    אין כיום טרנד ליצירת הנפשות/אנימציות שהן מוגזמות באתרים אך הדבר היחידי שהוא בעייתי מאוד שאין את היכולת לשלוט על האנימציות הללו כן גם אין כל התייחסות בתוספי הנגישות, אין שום דבר שיחליף את כפתור העצירה.
  2. מה מתרחש במוחו של אדם בעל מוגבלות כאשר הוא גולש באתר שיש בו ריבוי אנימציות / הנפשות ? מה התנועה יכולה לגרום לו ?
    זה בעייתי למעשה לכמה סוגי מוגבלויות – אדם שהוא בעל הפרעת קשב וריכוז : אדם שגולש באתר והוא רוצה לקרוא את התוכן שנמצא באתר בהמשך הדף ורצים מול עיניו אלמנטים אז הוא כלל לא יוכל להתרכז בתוכן שהוא אמור לקרוא, בגלל כל התנועתיות של האנימציה. לדוגמה כל הסליידרים למיניהם התחלופה של השקופיות היא מהירה מדי וגם לאנשים שהם מבוגרים קשה להם מאוד לקרוא את הטקסטים, כן גם אנשים עם מחלות RP (אנשים שיש להם כתמים בעיניים ואלו חוסמים להם את השדה ראייה והם אינם יכולים לקלוט את המידע במבט אחד (ראיית צינור) ואם התחלופה מהירה מדי אז הם לא מספיקים לסרוק בכלל את האזור ולכן הם לא מצליחים גם להבין מה שנעשה באזור הסליידר , הפתרון הפשוט באתרים זה לדאוג לכפתור עצירה.בעיה נוספת אלו אנימציות הגיפים ( Gif Animation ) שבתמונות המונפשות הללו אין את היכולת לבצע עצירה בגלל שזהו קובץ סגור ולא ניתן להחיל עליו כפתור עצירה – ניתן להסתיר אותו,לכסות אותו לא באמת לעצור אותו ואם האדם הוא בעל הפרעות קשה וריכוז זה יכול להיות מאוד אבל מאוד בעייתי.
  3. האם יש לאנשים אלו דרכי התמודדות עבור האנימציות במקרה שמפתח האתר או מאידך בעל האתר לא טיפל בסוגיה זו ?
    אין דרכי התמודדות בנושא, אין להם מה לעשות והשאלה היא למעשה כמה זמן שהייה באותו אתר על האדם בעל המוגבלות שצריך לשהות – אם מדובר במאמר שצריך עבורו מספר דקות כדי לקרוא אותו אז זה זניח, אך אם מדובר על אתר לימודי או קורס כלשהו אז אנימציות יכולות להיות קריטיות כי הן מונעות מלמידה רציפה ומסודרת. אנשים עם קשב וריכוז למשל היכולות למידה לשבת במקום אחד וללמוד היא מאוד מאוד בעייתית , הזמן שהם יכולים להקדיש ללמידה זה עד חצי שעה עד שעה והם ממש "נלחמים" כשהם צריכים ללמוד במידה ויש אנימציות באתר כי זהו האתר, הם חייבים להתמודד עם זה, אך הם מאוד מאבדים עניין.
  4. במידה וכן רוצים להוסיף אנימציות / הנפשות מה היא המלצתך ע"מ שזה יעשה בצורה נכונה ובאילו אזורים באתר ? האם ישנה הגבלה כמותית ?
    ראשית כל כפתור עצירה לכל אנימציה אוטומטית שיהיה ניתן לעצור או כפתור הסתרה, וזה מקובל על פי התקן. אם מדובר בתמונת GIF יש להחליפה בתמונה סטאטית זה עדיף , ובמידה ולא אז לא לשלב אותן בתוך אזור התוכן – או בתחילת המאמר או ב HEADER או ב FOOTER , שתמונת הגיף לא תופיע מצד כלשהו במהלך המאמר ולחשוב שלא יציקו לאותו קורא את המאמר. אין כלל הגבלה כמותית הכל לפי החלטת המעצב ואופי האתר, אך שהסליידרים יהיו מופעלים בלחצני פעולה שניתן לשליטה
    (עצירה, הפעלה, ימינה , שמאלה) ולא מופעלים אוטומטית. מאוד מומלץ כמה שפחות אנימציות אוטומטיות.

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

"תפסת מרובה – לא תפסת"

 

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

צרו עימי קשר

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