Skeleton Screen क्या है ?

Skeleton Screen क्या है ?

Skeleton screen एक डिजाइन पेटर्न है जो किसी वेबसाइट के पेज के लोडिंग होने के दौरान एक प्लेस होल्डर लेआउट को डिस्प्ले करने के लिए यूज किया जाता है यह यूजर को पेज के लेआउट को समझने और कंटेंट की जगह की उम्मीद करने में मदद करता है

यानी कि जब भी आप किसी ऐप या वेबसाइट को खोलते हैं तो उसमें कुछ Skeleton screen टाइप का दिखता है और आपको लगता है कि कंटेंट बस अब प्ले होने वाला ही है या शो होने वाला है पर ऐसा नहीं होता है एप डेवलपर या वेबसाइट डेवलपर ऐसा इसलिए करते हैं क्योंकि पहले के टाइम में जब आप कोई वीडियो प्ले करते थे या यूट्यूब में या फेसबुक में तो उसमें Loding… जैसा इंटरफेस दिखता था पर इस प्रॉब्लम को सॉल्व करने के लिए Skeleton screen का use करना चालू कर दिया गया जिससे viewers को यह लगता है कि बस कंटेंट अब प्ले होने ही वाला है।

Skeleton screen के फायदे

आप डेवलपर और वेबसाइट डेवलपर को Skeleton screen के कई फायदे मिले जो इस प्रकार हैं

बेहतर यूजर एक्सपीरियंस

Skeleton screen यूजर को पेज के लेआउट का एक विजिबल रिप्रेजेंटेशन देता है जो उन्हें कंटेंट hereshji को समझने और एंटीसेप्टिक करने में मदद करता है यह स्लो इंटरनेट कनेक्शन वाले यूजर्स या वेबसाइट से अनजाने यूजर्स के लिए खास तरह से मददगार होता है यानी यदि आपका इंटरनेट कनेक्शन शुरू है तो यह Skeleton screen दिखाकर आपको यह उम्मीद दिलाया जाता है कि आपका कंटेंट बस शो होने वाला है या वीडियो फॉर्मेट में अगर है तो वापस प्ले होने ही वाला है जिससे आप उसे वेबसाइट या उसे ऐप पर रुक जाते हैं और इस बात का इंतजार करते हैं कि कंटेंट कब प्ले होगा।

कम लोड टाइम की भावना

Skeleton screen विज़ुअल फ़ीडबैक देकर लोड टाइम को कम भावना दे देता है यह इसलिए है क्योंकि यूजर एक ब्लैक स्क्रीन को देखते हुए नहीं रहते हैं जो फ्रस्ट्रेटिंग हो सकता है इसलिए आपको ऐसा एहसास दिलाया जाता है कि आपका कंटेंट बहुत ही जल्द दिख जाएगा।

बेहतर SEO

Skeleton screen वेबसाइट के SEO को इंप्रूव करने में मदद कर सकता है यह इसलिए क्योंकि कंटेंट क्राउलिंग और इंडेक्सिंग हो सकती है भले ही या फुली लोडेड ना हो इससे आपके कंटेंट की इंडेक्सिंग और कॉलिंग में मदद मिलती है।

कम सर्वर लोड

Skeleton screen सर्वर लोड को कम करने में मदद करता है यह ऐसा इसलिए होता है क्योंकि कंटेंट की लोडिंग तब तक defer कर दी जाती है जब तक कि वह जरूरी ना हो

Skeleton screen कितने प्रकार के होते हैं

Skeleton screen दो प्रकार के होते हैं जो इस प्रकार हैं

Content placeholder

यह स्क्रीन सिंपल शेप और लाइंस का उसे करके पेज के डिफरेंट एलिमेंट को रिप्रेजेंट करते हैं जैसे इमेज टेक्स्ट ब्लॉक और बटन।

Color placeholder

यह स्क्रीन एक सिंगल कलर का डिफरेंट सेट्स का इस्तेमाल करके पेज के डिफरेंट एलिमेंट को रिप्रेजेंट करने का काम करता है।

Skeleton screen को implement कैसे किया जाता है

स्क्रीन को इंप्लीमेंट करने के कई तरीके हैं जो इस प्रकार

CSS animations

यह एक पॉप्युलर तकनीक है Skeleton screen बनाने के लिए यह एनीमेशन Skeleton screen क्रिएट करता है जो एक यूजर एक्सपीरियंस देता है।

JavaScript libraries

कुछ ज्यादा स्क्रिप्ट लाइब्रेरीज अवेलेबल होते हैं जो आपको Skeleton screen बनाने में मदद करते हैं।
Pre-built components:
कुछ वेबसाइट डेवलपमेंट फ्रेमवर्क फ्री बिल्ड कॉम्पोनेंट्स प्रोवाइड करते हैं जो आप Skeleton screen बनाने में इस्तेमाल कर सकते हैं।

Additional Tips

करेक्ट टाइप का Skeleton screen का उपयोग करना
Skeleton screen की टाइप तेज में लोड होने वाले कंटेंट के टाइप पर निर्भर करता है अगर आप इमेज लोड कर रहे हैं तो आप कलर प्लेस फोल्डर उसे कर सकते हैं लेकिन अगर आप टेक्स्ट लोड कर रहे हैं तो आप कंटेंट प्लेस होल्डर को उसे कर सकते हैं।

Skeleton screen की विजिबिलिटी सुनिश्चित करें

Skeleton screen यूजर को एक बार नए पेज पर नेविगेट करने के बाद दिखाई देनी चाहिए इस बात की पुष्टि सबसे पहले आपको करना होगा।
Skeleton screen को एक्चुअल कंटेंट लोड होने के बाद एक बार भी disappear होना चाहिए।

यह सुनिश्चित करें कि आपका Skeleton screen सभी डिवाइस और ब्राउज़र पर प्रॉपर्ली वर्क कर रहे हैं या नहीं अगर यह प्रॉपर्ली वर्क नहीं करेंगे तो आपका यूजर एक्सपीरियंस बहुत ही ज्यादा खराब हो जाएगा और यूजर्स स्कीप करके चला जाएगा।

निष्कर्ष

ऊपर बताया के सभी टिप्स को फॉलो करके आप Skeleton screen क्रिएट कर सकते हैं जो आपकी वेबसाइट और यूजर एक्सपीरियंस को काफी इंप्रूव कर सकते हैं इस पोस्ट के माध्यम से हमने जाना की Skeleton screen क्या है कितने प्रकार का होता है और यह कैसे वर्क करता है।

इन्हे भी पढ़ें :-

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *