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

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

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

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

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

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

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

ההנחיות של ארגון WCAG בנושא הבהוב ממליצות על אלמנטים הבאים:

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

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

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

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

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

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

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

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

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

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

@prefers-reduced-motion

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

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

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

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

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

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

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

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

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

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

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

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

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

בדיקת ההבנה

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