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

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

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

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

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

फ़्लैशिंग और गतिशील सामग्री

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

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

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

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

किसी भी बहुत ज़्यादा हलचल के लिए, यह ज़रूरी है कि आप फ़ोटोसेंसिटिव एपिलेप्सी विश्लेषण टूल (PEAT). 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 का इस्तेमाल करें सब एक साथ.

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

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

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

देखें कि आपको कितना समझ आया है

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