सीएसएस और यूज़र इंटरफ़ेस (यूआई) की सुविधाओं का मतलब है, सीएसएस की नई सुविधाओं और सिंटैक्स का इस्तेमाल करना. इनकी मदद से, कस्टम JavaScript सलूशन या कुछ सीएसएस हैक को कम या बदला जा सकता है. साथ ही, इनसे आपको बेहतर और आसान कोड लिखने में मदद मिलती है. सीएसएस की आधुनिक सुविधाओं का इस्तेमाल करने से डेवलपर को ये काम करने में मदद मिलेगी:
- डेवलपमेंट का समय कम करें.
- कोड की परफ़ॉर्मेंस को बेहतर बनाएं, उसे आसानी से पढ़ें, और उसके रखरखाव में मदद करें.
- परफ़ॉर्मेंस बेहतर करें.
- ऐसे शानदार यूज़र इंटरफ़ेस बनाएं जो इस्तेमाल में आसान और बेहतर हों और आसानी से ऐक्सेस किए जा सकें.
केस स्टडी की इस सीरीज़ में, जानें कि कई ई-कॉमर्स साइटों ने
स्क्रोल-ड्रिवन ऐनिमेशन, व्यू ट्रांज़िशन, पॉपओवर एपीआई, कंटेनर क्वेरी, और has() सिलेक्टर
का इस्तेमाल कैसे किया. साथ ही, उन्हें ऐसा करने से होने वाले फ़ायदों के बारे में भी जानें.
ई-कॉमर्स साइटों को इन सुविधाओं का इस्तेमाल क्यों करना चाहिए?
बेहतर उपयोगकर्ता अनुभव को सही ठहराने के छह चरण में Forrester Research के मुताबिक, अच्छी तरह से डिज़ाइन किए गए यूज़र इंटरफ़ेस (यूआई) से कन्वर्ज़न को 200% तक बढ़ाया जा सकता है. ऐसा लगता है कि उपयोगकर्ता डिज़ाइन की क्वालिटी को 94% उपभोक्ताओं का भरोसा से लिंक करते हैं. उन्होंने बताया कि किसी वेबसाइट को छोड़ने या उस पर भरोसा न करने की मुख्य वजह डिज़ाइन डिज़ाइन करना है. इसी वजह से ई-कॉमर्स साइटों को खास तौर पर, सीएसएस और यूज़र इंटरफ़ेस की इन क्षमताओं का फ़ायदा मिलेगा. कन्वर्ज़न फ़नल सबसे आसान होने चाहिए, ताकि उपयोगकर्ता आसानी से और भरोसे के साथ अपना टास्क पूरा कर सकें. रिस्पॉन्सिव इंटरैक्शन और आसान नेविगेशन से लोगों को अच्छा विज़ुअल फ़ीडबैक मिल सकता है. साथ ही, पूरे सफ़र में उन्हें आनंद आ सकता है और वे अपनी भावनाएं ज़ाहिर कर सकते हैं.
इन सुविधाओं को इस्तेमाल में आसान बनाया गया है और इन्हें कम से कम JavaScript के साथ ज़्यादातर सीएसएस में लागू किया जा सकता है. इनसे उन्हें शानदार ई-कॉमर्स अनुभव बनाने में मदद मिलती है. इसके लिए, तीसरे पक्ष की लाइब्रेरी या कस्टम JavaScript का इस्तेमाल करने की ज़रूरत नहीं पड़ती. कम JavaScript का इस्तेमाल करने से आपकी परफ़ॉर्मेंस भी बेहतर हो सकती है: इससे आपको इस्तेमाल करना आसान और रिस्पॉन्सिव (स्क्रीन के हिसाब से ढल जाने वाला) हो जाता है.
वेब यूआई की सुविधाओं का इस्तेमाल, उपयोगकर्ता के हर अनुभव में किया जा सकता है. असल दुनिया के कुछ उदाहरण यहां दिए गए हैं:
| सुविधा/कंपनी | redBus | PolicyBazaar | टोकोपीडिया |
|---|---|---|---|
| स्क्रोल करके चलने वाले ऐनिमेशन | कार्ट | प्रॉडक्ट प्रविष्टि पेज (पीएलपी) | प्रॉडक्ट की जानकारी वाला पेज (पीडीपी) |
| ट्रांज़िशन देखें | लॉगिन | पीडीपी | पीडीपी |
| पॉपओवर | - | - | पीडीपी |
| कंटेनर क्वेरी | होम पेज | - | पीडीपी |
| :has() | - | पीएलपी | पीडीपी |
इसे कन्वर्ज़न फ़नल के तौर पर भी दिखाया जा सकता है:
नीचे दी गई केस स्टडी में बताया गया है कि कंपनियों ने इन सुविधाओं को कैसे लागू किया और उन्हें क्या फ़ायदे मिले.
लेखों की इस सीरीज़ के बारे में आपके सुझाव और समीक्षा के लिए, पेनेलोप मक्लेन, हैना वैन ऑप्स्टल, उना क्रावेट्स, ब्रेमस, वैन डैम, और रेचल ऐंड्रू का खास कॉल.