אנימציה ותנועה

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

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

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

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

הבהוב והזזה של תוכן

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

בהנחיות של WCAG לגבי Flash, מומלץ שלא:

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

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

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

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

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

השהיה, עצירה או הסתרה של תנועה

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

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

שימוש בשאילתות מדיה

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

@prefers-reduced-motion

בדומה לשאילתות מדיה שמתמקדות בצבע במודול הצבע, שאילתת המדיה @prefers-reduced-motion בודקת את הגדרות מערכת ההפעלה של המשתמש שקשורות לאנימציה.

משתמש יכול להגדיר העדפות תצוגה כדי לצמצם את התנועה. ההגדרות האלה שונות בכל מערכות ההפעלה, ויכול להיות שהן יוצגו באופן חיובי או שלילי. באמצעות @prefers-reduced-motion, אפשר לעצב אתר בהתאם להעדפות אלה.

ב-MacOS וב-Android, המשתמש מפעיל את ההגדרה כדי להפחית את התנועה. ב-MacOS, משתמשים יכולים להגדיר את האפשרות הפחתת תנועה ב'הגדרות' > 'נגישות' > 'תצוגה'. ההגדרה ב-Android היא הסרת אנימציות. ב-Windows, ההגדרה ממוסגרת באופן חיובי כShow מונפש (הצגת אנימציות), והיא פועלת כברירת מחדל. המשתמשים צריכים להשבית את ההגדרה הזו כדי לצמצם את התנועה.

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

הגברת התנועה לאורך זמן

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

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

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

שאילתות מדיה בשכבות

אפשר להשתמש בשאילתות מדיה מרובות כדי לתת למשתמשים יותר אפשרויות בחירה. בואו נשתמש ב-@prefers-color-scheme, ב-@prefers-contrast וב-@prefers-reduced-motion ביחד.

המשתמשים יכולים לבחור

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

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

בדיקת ההבנה

בחינת הידע שלכם בנושא נגישות לתנועה ולאנימציה.