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

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

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

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

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

תוכן מהבהב ונע

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

ההנחיות של WCAG בנושא הבהוב ממליצות להימנע מהפעולות הבאות:

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

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

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

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

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

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

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

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

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

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

@prefers-reduced-motion

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

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

Browser Support

• 74
• 79
• 63
• 10.1

Source

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

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

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

שיפור הדרגתי של התנועה

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

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

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

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

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

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

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

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

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