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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@prefers-reduced-motion

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

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

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

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

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

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

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

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

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

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

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

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

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