ऐनिमेशन और मोशन

क्या कभी ऐसा हुआ है कि कार, नाव या हवाई जहाज़ में सफ़र करते समय, आपको अचानक दुनिया घूमती हुई लगी हो? या माइग्रेन इतना तेज़ हो कि फ़ोन या टैबलेट पर "खुशी" देने के लिए बनाए गए ऐनिमेशन, अचानक आपको बीमार कर दें? या ऐसा भी हो सकता है कि आपको हमेशा से ही हर तरह की मोशन सेंसिटिविटी की समस्या रही हो? ये वेस्टिबुलर डिसऑर्डर की अलग-अलग तरह की समस्याओं के उदाहरण हैं.

40 साल की उम्र तक, 35% से ज़्यादा वयस्कों को वेस्टिबुलर डिसफ़ंक्शन की कोई न कोई समस्या हो सकती है. इससे चक्कर आ सकते हैं, माइग्रेन की वजह से वर्टाइगो हो सकता है या वेस्टिबुलर डिसएबिलिटी की समस्या हमेशा के लिए हो सकती है.

वर्टाइगो के अलावा, कई लोगों को हिलने-डुलने, पलक झपकाने या स्क्रोल करने वाले कॉन्टेंट से परेशानी होती है. ADHD

इस मॉड्यूल में, हम मोशन सेंसिटिविटी की वजह से होने वाली सभी तरह की समस्याओं से जूझ रहे लोगों की बेहतर तरीके से मदद करने के कुछ तरीकों के बारे में जानेंगे.

फ़्लैशिंग और हिलने-डुलने वाला कॉन्टेंट

ऐनिमेशन और मोशन बनाते समय, खुद से पूछें कि क्या एलिमेंट का मूवमेंट बहुत ज़्यादा है. उदाहरण के लिए, गहरे से हल्के रंग में फ़्लिकर करने या स्क्रीन पर तेज़ी से होने वाले मूवमेंट की वजह से, फ़ोटोसेंसिटिव एपिलेप्सी की समस्या वाले लोगों को दौरे पड़ सकते हैं. ऐसा माना जाता है कि एपिलेप्सी की समस्या वाले 3% लोगों को फ़ोटोसेंसिटिविटी की समस्या होती है. यह समस्या, महिलाओं और कम उम्र के लोगों में ज़्यादा आम है.

फ़्लैशिंग के बारे में WCAG के दिशा-निर्देशों में, इन चीज़ों से बचने का सुझाव दिया गया है:

• किसी भी एक सेकंड में तीन से ज़्यादा बार फ़्लैश होना
• सामान्य फ़्लैश और लाल फ़्लैश की थ्रेशोल्ड से कम फ़्लैश होना .

इन फ़्लैश की वजह से, ज़्यादा से ज़्यादा वेब पेज का इस्तेमाल न कर पाने की समस्या हो सकती है. वहीं, सबसे खराब स्थिति में, बीमारी हो सकती है.

किसी भी तरह के तेज़ मूवमेंट के लिए, यह ज़रूरी है कि आप फ़ोटोसेंसिटिव एपिलेप्सी एनालिसिस टूल (PEAT) का इस्तेमाल करके उसकी जांच करें. PEAT एक मुफ़्त टूल है. इसकी मदद से यह पता लगाया जा सकता है कि स्क्रीन पर दिखने वाले कॉन्टेंट, वीडियो या ऐनिमेशन की वजह से दौरे पड़ने की संभावना है या नहीं. यह ज़रूरी नहीं है कि सभी कॉन्टेंट का आकलन PEAT से किया जाए. हालांकि, ऐसे कॉन्टेंट का आकलन किया जाना चाहिए जिनमें फ़्लैशिंग या हल्के और गहरे बैकग्राउंड रंगों के बीच तेज़ी से ट्रांज़िशन हो. ऐसा सिर्फ़ सुरक्षा के लिए किया जाना चाहिए.

ऐनिमेशन और मोशन के बारे में आपको खुद से एक और सवाल पूछना चाहिए. वह यह है कि क्या एलिमेंट का मूवमेंट, स्क्रीन पर दिखने वाले कॉन्टेंट या कार्रवाइयों को समझने के लिए ज़रूरी है. अगर यह ज़रूरी नहीं है, तो बनाए जा रहे या डिज़ाइन किए जा रहे एलिमेंट से सभी तरह के मूवमेंट हटा दें. यहां तक कि माइक्रो-मूवमेंट भी हटा दें.

मान लीजिए, आपको लगता है कि एलिमेंट का मूवमेंट ज़रूरी नहीं है, लेकिन इससे उपयोगकर्ता का अनुभव बेहतर हो सकता है. इसके अलावा, ऐसा भी हो सकता है कि किसी अन्य वजह से, मूवमेंट को हटाया न जा सके. ऐसे में, आपको मोशन के बारे में WCAG के दिशा-निर्देशों का पालन करना चाहिए. इन दिशा-निर्देशों के मुताबिक, आपको उपयोगकर्ताओं के लिए एक ऐसा विकल्प बनाना होगा जिससे वे इन एलिमेंट के मूवमेंट को रोक सकें, बंद कर सकें या छिपा सकें: अपने-आप चलने वाले, पांच सेकंड से ज़्यादा चलने वाले, और पेज के अन्य एलिमेंट का हिस्सा बनने वाले, गैर-ज़रूरी हिलने-डुलने, पलक झपकाने या स्क्रोल करने वाले एलिमेंट.

मूवमेंट को रोकें, बंद करें या छिपाएं

अपने पेज में, रोकने, बंद करने या छिपाने का कोई तरीका जोड़ें. इससे उपयोगकर्ता, मोशन ऐनिमेशन को बंद कर पाएंगे. ऐसा हो सकता है कि इस ऐनिमेशन की वजह से, लोगों को परेशानी हो. यह काम, स्क्रीन लेवल या एलिमेंट लेवल पर किया जा सकता है.

उदाहरण के लिए, मान लीजिए कि आपके डिजिटल प्रॉडक्ट में कई ऐनिमेशन शामिल हैं. उपयोगकर्ताओं को अपना अनुभव कंट्रोल करने की अनुमति देने के लिए, एक सुलभ JavaScript टॉगल जोड़ने पर विचार करें. जब बटन को टॉगल करके "मोशन बंद" पर सेट किया जाता है, तो उस स्क्रीन और अन्य सभी स्क्रीन पर दिखने वाले सभी ऐनिमेशन फ़्रीज़ हो जाते हैं.

मीडिया क्वेरी का इस्तेमाल करना

ऐनिमेशन के बारे में सोच-समझकर फ़ैसले लेने के अलावा, अपने उपयोगकर्ताओं को मूवमेंट को रोकने, बंद करने, छिपाने के विकल्प दिए जा सकते हैं. साथ ही, इनफ़ाइनाइट ऐनिमेशन लूप से बचा जा सकता है. इसके अलावा, मोशन पर फ़ोकस करने वाली मीडिया क्वेरी भी जोड़ी जा सकती है. इससे उपयोगकर्ताओं को स्क्रीन पर दिखने वाले कॉन्टेंट के बारे में और भी ज़्यादा विकल्प मिलते हैं.

@prefers-reduced-motion

कलर मॉड्यूल में, रंग पर फ़ोकस करने वाली मीडिया क्वेरी की तरह, मीडिया क्वेरी, @prefers-reduced-motion ऐनिमेशन से जुड़ी उपयोगकर्ता के ओएस की सेटिंग की जांच करती है.

कोई उपयोगकर्ता, मोशन को कम करने के लिए डिसप्ले की प्राथमिकताएं सेट कर सकता है. ये सेटिंग, अलग-अलग ऑपरेटिंग सिस्टम में अलग-अलग होती हैं. इन्हें पॉज़िटिव या नेगेटिव तरीके से फ़्रेम किया जा सकता है. @prefers-reduced-motion की मदद से, ऐसी साइट डिज़ाइन की जा सकती है जो इन प्राथमिकताओं का पालन करती है.

macOS और Android पर, उपयोगकर्ता मोशन को कम करने के लिए सेटिंग चालू करता है. macOS पर, कोई उपयोगकर्ता Settings > Accessibility > Display में जाकर, Reduce motion को सेट कर सकता है. Android की सेटिंग Remove animations है. Windows पर, सेटिंग को पॉज़िटिव तरीके से फ़्रेम किया गया है. यह Show animations के तौर पर दिखती है और डिफ़ॉल्ट रूप से चालू होती है. मोशन को कम करने के लिए, उपयोगकर्ता को यह सेटिंग बंद करनी होगी.

मोशन सेंसिटिविटी की समस्या वाले लोगों के लिए, सुलभता पक्का करने के लिए, WCAG 2.0 AA के दिशा-निर्देशों में बताई गई पांच सेकंड की थ्रेशोल्ड से कम समय वाले ऐनिमेशन के लिए भी सावधानी बरतनी चाहिए. इसके लिए, सबसे भरोसेमंद तरीका यह है कि मोशन को कम करने की प्राथमिकता बताने वाले उपयोगकर्ताओं को ऐनिमेशन पर खास कंट्रोल देकर सशक्त बनाया जाए. इससे वे ऐनिमेशन को शुरू और बंद कर पाएंगे. इसके लिए, क्रमशः प्ले बटन और पॉज़ बटन जैसे खास कंट्रोल दिए जा सकते हैं.

मूवमेंट के लिए परतदार वृद्धि

डिज़ाइनर और डेवलपर के तौर पर, हमारे पास कई विकल्प होते हैं. इनमें डिफ़ॉल्ट मूवमेंट स्टेट और कितना मूवमेंट दिखाना है, जैसे विकल्प शामिल हैं. मोशन के आखिरी उदाहरण पर फिर से नज़र डालें.

मान लीजिए, हम तय करते हैं कि स्क्रीन पर दिखने वाले कॉन्टेंट को समझने के लिए ऐनिमेशन ज़रूरी नहीं है. ऐसे में, हम फ़ुल मोशन वर्शन के बजाय, डिफ़ॉल्ट स्टेट को कम मोशन वाले ऐनिमेशन पर सेट कर सकते हैं. जब तक उपयोगकर्ता खास तौर पर ऐनिमेशन के लिए नहीं कहते, तब तक ऐनिमेशन बंद रहते हैं.

हम यह अनुमान नहीं लगा सकते कि किस लेवल का मूवमेंट, दौरे, वेस्टिबुलर और अन्य विज़ुअल डिसऑर्डर की समस्या वाले लोगों के लिए परेशानी पैदा करेगा. स्क्रीन पर थोड़ा सा भी मूवमेंट होने से, चक्कर आ सकते हैं, धुंधली नज़र आ सकती है या इससे भी ज़्यादा परेशानी हो सकती है. इसलिए, यहां दिए गए उदाहरण में, हमने डिफ़ॉल्ट रूप से कोई ऐनिमेशन नहीं रखा है.

लेयर्ड मीडिया क्वेरी

अपने उपयोगकर्ताओं को और भी ज़्यादा विकल्प देने के लिए, एक से ज़्यादा मीडिया क्वेरी का इस्तेमाल किया जा सकता है. @prefers-color-scheme, @prefers-contrast, और @prefers-reduced-motion का इस्तेमाल एक साथ किया जा सकता है.

उपयोगकर्ताओं को चुनने की अनुमति देना

डिजिटल प्रॉडक्ट में ऐनिमेशन जोड़कर, उपयोगकर्ताओं को खुशी देना मज़ेदार हो सकता है. हालांकि, यह याद रखना ज़रूरी है कि इन डिज़ाइन से कुछ लोगों पर असर पड़ेगा. मोशन सेंसिटिविटी की समस्या किसी को भी हो सकती है. इससे थोड़ी असहजता से लेकर, गंभीर बीमारी या दौरे पड़ने तक की समस्या हो सकती है.

यह अनुमान लगाने के बजाय कि कितना मोशन बहुत ज़्यादा है, उपयोगकर्ताओं को यह तय करने की अनुमति देने के लिए, कई अलग-अलग टूल का इस्तेमाल किया जा सकता है कि उनके लिए क्या बेहतर है. उदाहरण के लिए, अपनी साइट या वेब ऐप्लिकेशन में ऐनिमेशन को चालू या बंद करने के लिए, एक टॉगल जोड़ें. ऐसे टॉगल को डिफ़ॉल्ट रूप से बंद पर सेट करने पर विचार करें.