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

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

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

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

इस मॉड्यूल में, हम उन सभी तरीकों पर गौर करेंगे जिनकी मदद से, लोगों को किसी भी तरह की हलचल की वजह से होने वाली समस्याओं से बचाया जा सकता है.

फ़्लैशिंग और मूविंग कॉन्टेंट

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

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

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

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

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

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

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

गतिविधि रोकें, बंद करें या छिपाएं

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

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

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

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

@prefers-reduced-motion

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

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

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

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

मूवमेंट के लिए प्रोग्रेसिव एन्हैंसमेंट

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

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

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

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

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

इससे उपयोगकर्ता अपनी पसंद का विकल्प चुन सकते हैं

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

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

आपने जो सीखा है उसकी जांच करें

मोशन और ऐनिमेशन की सुलभता के बारे में अपनी जानकारी को परखें.