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

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

עד גיל 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, ההגדרה מנוסחת באופן חיובי בתור הצגת אנימציות, והיא מופעלת כברירת מחדל. המשתמש צריך להשבית את ההגדרה הזו כדי לצמצם את התנועה.

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

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

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

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

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

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

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

מאפשרים למשתמשים לבחור

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

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

בדיקת ההבנה

מבחן בנושא נגישות של תנועה ואנימציה.