ई-कॉमर्स वेबसाइट डिजाइन के अच्छे तरीके: पेज-दर-पेज

खरीदार जिस पेज पर है उसी के अनुसार दुकान डिजाइन करें: मुख्य पेज, खोज, श्रेणी, उत्पाद, कार्ट, चेकआउट और मोबाइल — क्या शामिल करें और किन गलतियों से बचें।

अक्सर पूछे जाने वाले सवाल

ई-कॉमर्स डिजाइन के सबसे जरूरी अच्छे तरीके क्या हैं?

खरीदार के सोचने के तरीके से मिलता नेविगेशन, तेज़ पेज, बड़ी ज़ूम योग्य उत्पाद तस्वीरें, कार्ट बटन के पास कीमत और शिपिंग, दिखती समीक्षा, काम करने वाली साइट खोज और अतिथि खरीद वाला छोटा चेकआउट। अधिकतर ब्राउज़िंग फ़ोन पर होती है, इसलिए पहले मोबाइल डिजाइन करें।

श्रेणी पेज पर कितने उत्पाद दिखाएं?

इतने कि अंतहीन पेजिंग बिना तुलना हो सके। कई दुकानें प्रति पेज 24 से 48 दिखाती हैं या “और दिखाएं” बटन देती हैं। सही आकार, रंग, कीमत और उपलब्धता के फ़िल्टर अधिक महत्वपूर्ण हैं।

उत्पाद पेज पर बिना नीचे गए क्या दिखना चाहिए?

उत्पाद नाम, मुख्य तस्वीर, कीमत, आकार/रंग विकल्प, स्टॉक, कार्ट में जोड़ने का बटन और शिपिंग या डिलीवरी समय की एक पंक्ति। समीक्षा हो तो स्टार और गिनती भी।

क्या ई-कॉमर्स मुख्य पेज पर घूमता carousel होना चाहिए?

आमतौर पर नहीं। अपने-आप घूमने वाली स्लाइड अक्सर अनदेखी होती है और सुलभता व गति बिगाड़ सकती है। एक मजबूत मुख्य तस्वीर, स्पष्ट संदेश और प्रमुख श्रेणियों के लिंक बेहतर हैं।

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

सामान्य सिद्धांतों की सूची के बजाय यह गाइड पेज-दर-पेज चलती है, क्योंकि खरीदार का सवाल हर पेज पर बदलता है।

मुख्य पेज: “क्या मैं सही जगह हूं?”

मुख्य पेज के पास कुछ सेकंड हैं — यह बताने के लिए कि आप क्या बेचते हैं और किसके लिए।

शामिल करें:

एक ऐसी हेडलाइन जो साफ़ शब्दों में बताए आप क्या बेचते हैं (“रोज़ाना इस्तेमाल के लिए हस्तनिर्मित चमड़े के बैग” — “आपके लिए बना” नहीं)
एक हीरो तस्वीर जिसमें उत्पाद उपयोग में दिखे
आपकी शीर्ष 3 से 6 श्रेणियों के लिंक, तस्वीरों के साथ
पेज के ऊपर एक पतली पट्टी में मुख्य शिपिंग या वापसी का वादा
बेस्ट सेलर या नई आवक, ताकि लौटने वाले आगंतुकों को कुछ नया दिखे

बचें: अपने-आप घूमने वाले कैरोसेल, पेज लोड होने से पहले खुलने वाले पॉप-अप, और ऐसे हीरो वीडियो जो मोबाइल पर पहला दृश्य देरी से दिखाएं।

नेविगेशन: “मुझे चाहिए चीज़ कहां है?”

श्रेणियां उस तरह नाम दें जैसे ग्राहक खोजते हैं। “रनिंग शूज़”, न कि “परफॉर्मेंस फुटवियर।” आपके साइट खोज लॉग और Google Search Console की क्वेरी बताती हैं कि लोग कौन से शब्द इस्तेमाल करते हैं।
शीर्ष स्तर छोटा रखें। पांच से आठ मुख्य आइटम एक उचित सीमा है। बड़े कैटलॉग के लिए मेगा मेनू इस्तेमाल करें, दृश्य उत्पादों के लिए तस्वीरों के साथ।
उत्पाद को एक से अधिक जगह रखें। वाटरप्रूफ जैकेट “जैकेट” और “हाइकिंग” दोनों में हो सकती है।
ब्रेडक्रम्ब जोड़ें श्रेणी और उत्पाद पेजों पर ताकि लोग एक स्तर ऊपर जा सकें। खोज के लिए BreadcrumbList स्ट्रक्चर्ड डेटा से मार्कअप करें।

श्रेणी पेज: “इनमें से कौन-सा मेरे लिए सही है?”

यहीं अधिकतर तुलना होती है।

तत्व	अच्छा तरीका
उत्पाद कार्ड	हर उत्पाद के लिए समान तस्वीर अनुपात, नाम, कीमत, रेटिंग और होवर पर दूसरी तस्वीर
फ़िल्टर	असली चुनाव मिलाएं: आकार, रंग, कीमत, सामग्री, स्टॉक में। गिनती दिखाएं
क्रम	डिफ़ॉल्ट “फ़ीचर्ड” या “सबसे अधिक बिका”; कीमत और नवीनतम विकल्प दें
स्टॉक	बिक चुके आइटम छिपाएं या साफ़ निशान लगाएं
पेजिंग	“और दिखाएं” या क्रमांकित पेज; वापस जाने पर फ़िल्टर स्थिति बनाए रखें
मोबाइल	फ़िल्टर एक स्लाइड-अप पैनल में, स्पष्ट “34 नतीजे दिखाएं” बटन के साथ

एक आम गलती यह है कि फ़िल्टर तब मिट जाते हैं जब खरीदार कोई उत्पाद खोलकर वापस आता है। बैक बटन जरूर जांचें।

साइट खोज: “मुझे पता है क्या चाहिए”

खोज करने वाले खरीदारों का इरादा आमतौर पर पक्का होता है, इसलिए कमज़ोर खोज सीधे बिक्री घटाती है।

खोज फ़ील्ड हेडर में रखें — डेस्कटॉप पर दिखे, मोबाइल पर एक टैप में मिले।
टाइपो और समानार्थी शब्द संभालें (“tee” से “t-shirt” मिलना चाहिए)।
टाइप करते समय तस्वीरों के साथ उत्पाद सुझाव दिखाएं।
“कोई नतीजा नहीं” पर कभी खाली पेज न दिखाएं — श्रेणियां या बेस्ट सेलर सुझाएं।
हर महीने खोज शब्द देखें। बार-बार खोजे जाने वाले शब्द जिन पर कोई नतीजा नहीं — बताते हैं क्या स्टॉक करना है या उत्पाद का नाम कैसे बदलें।

उत्पाद पेज: “क्या मुझे यह खरीदना चाहिए?”

उत्पाद पेज बिक्री करता है। ऊपर से नीचे तक काम करें।

तस्वीरें

हर उत्पाद की कई तस्वीरें: आगे, पीछे, विस्तार, स्केल (किसी व्यक्ति पर या किसी परिचित चीज़ के पास) और उपयोग में
डेस्कटॉप पर ज़ूम और मोबाइल पर पिंच-ज़ूम
पूरे कैटलॉग में एकसमान पृष्ठभूमि
जहां हलचल मायने रखती हो वहां वीडियो — जैसे कपड़े का गिरना या कोई गैजेट कैसे फोल्ड होता है

कीमत, विकल्प और खरीद बटन

उत्पाद नाम के पास कीमत, सेल प्राइस साफ़ दिखाएं
जब विकल्प कम हों तो ड्रॉपडाउन की जगह बटन या स्वॉच इस्तेमाल करें
अनुपलब्ध साइज़ दिखाएं लेकिन डिसेबल करें, ताकि खरीदार रेंज जान सकें
एक हाई-कॉन्ट्रास्ट “कार्ट में जोड़ें” बटन, और मोबाइल पर स्क्रॉल करते समय स्टिकी वर्शन
उसके नीचे डिलीवरी अनुमान और शिपिंग लागत या थ्रेशहोल्ड

विवरण और जानकारी

पहले बताएं उत्पाद ग्राहक के लिए क्या करता है, फिर स्पेसिफिकेशन। आयाम, सामग्री और देखभाल के लिए छोटी स्पेक टेबल दें। साइज़ गाइड एक पैनल में खुले — लोगों को अलग पेज पर न भेजें।

भरोसा

ऊपर स्टार रेटिंग और समीक्षा गिनती, नीचे पूरी समीक्षाएं — ग्राहक की तस्वीरें हों तो और अच्छा
बटन के पास एक लाइन में वापसी नीति
उन सवालों के जवाब जो सपोर्ट इनबॉक्स में सबसे ज़्यादा आते हैं

Product स्ट्रक्चर्ड डेटा जोड़ें (नाम, तस्वीर, कीमत, उपलब्धता, समीक्षाएं) ताकि खोज नतीजों में कीमत और रेटिंग दिख सके।

कार्ट और चेकआउट: “भुगतान करने दो और जाने दो”

चेकआउट डिजाइन अपने आप में एक विषय है। संक्षेप में: पूरी कीमत जल्दी दिखाएं, गेस्ट चेकआउट दें, फ़ॉर्म छोटा रखें, और Apple Pay व Google Pay जैसे एक्सप्रेस वॉलेट दें। हमारी चेकआउट ऑप्टिमाइज़ेशन गाइड में हर चरण विस्तार से है।

खरीद के बाद के पेज: “क्या यह काम किया, और अब क्या?”

डिजाइन Pay बटन पर नहीं रुकता। ऑर्डर कन्फर्मेशन पेज और ईमेल लगभग हर खरीदार ध्यान से पढ़ता है।

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

मोबाइल: यहीं से डिजाइन करें

अधिकतर दुकान विज़िट फ़ोन से होती हैं, इसलिए पहले फ़ोन लेआउट डिजाइन और टेस्ट करें, फिर डेस्कटॉप के लिए बढ़ाएं।

टैप टारगेट करीब 44 पिक्सेल ऊंचे या उससे ज़्यादा
टेक्स्ट 16 पिक्सेल या बड़ा ताकि iOS फ़ॉर्म फ़ील्ड में ज़ूम न करे
उत्पाद पेजों पर स्टिकी “कार्ट में जोड़ें”
केवल होवर से काम करने वाली कोई सुविधा नहीं — टचस्क्रीन पर होवर नहीं होता
असली मिड-रेंज फ़ोन पर मोबाइल डेटा से टेस्ट करें

गति और सुलभता

दोनों डिजाइन के निर्णय हैं, सिर्फ तकनीकी नहीं।

गति: तस्वीरें कंप्रेस करें और WebP या AVIF दें, लेआउट जंप रोकने के लिए तस्वीरों पर width और height सेट करें, थर्ड-पार्टी ऐप और स्क्रिप्ट सीमित करें, और Google के PageSpeed Insights में Core Web Vitals जांचें।

सुलभता: WCAG 2.2 AA के अनुसार रंग कंट्रास्ट, उत्पाद तस्वीरों पर alt टेक्स्ट, लेबल किए गए फ़ॉर्म फ़ील्ड, कीबोर्ड से पहुंच योग्य मेनू और फ़िल्टर, और त्रुटि संदेश जो बताएं क्या गलत हुआ। सुलभ दुकानें सभी के लिए आसान होती हैं, और कई क्षेत्रों में सुलभता कानूनी अपेक्षा भी है।

लॉन्च से पहले डिजाइन समीक्षा

[ ] मुख्य पेज एक वाक्य में बताता है आप क्या बेचते हैं
[ ] श्रेणी के नाम ग्राहक के खोज शब्दों से मेल खाते हैं
[ ] फ़िल्टर बैक बटन के बाद भी बने रहते हैं
[ ] खोज टाइपो संभालती है और कभी खाली पेज नहीं दिखाती
[ ] हर उत्पाद की कई तस्वीरें हैं, ज़ूम के साथ
[ ] उत्पाद पेजों पर शिपिंग लागत या थ्रेशहोल्ड दिखता है
[ ] उत्पाद पेजों के ऊपर समीक्षाएं दिखती हैं
[ ] मोबाइल पर स्टिकी “कार्ट में जोड़ें”
[ ] गेस्ट चेकआउट सक्षम है
[ ] PageSpeed Insights मोबाइल रिपोर्ट जांची और मुख्य समस्याएं ठीक की

दुकान बनवाना

अगर आप शुरुआत से बना रहे हैं, तो एक अच्छा शुरुआती लेआउट इनमें से कई निर्णय खुद ले लेता है। दुकान के डिजाइन के लिए हमारे टेम्पलेट देखें, या We.Inc के चैट में अपनी दुकान का वर्णन करें — वह उत्पाद पेज, कार्ट और चेकआउट के साथ एक ऑनलाइन स्टोर बनाता है जिसे आप विजुअली या कोड में आगे परिष्कृत कर सकते हैं, होस्टिंग और SSL के साथ।

मुफ़्त शुरू करें

फ़्री में शुरू करें · क्रेडिट कार्ड की ज़रूरत नहीं

Umair Ali Sadaqat

We.Inc के संस्थापक

उमैर We.Inc के संस्थापक हैं। वे AI से वेबसाइट बनाने, एजेंसियों और वेब स्टूडियो चलाने के व्यवसाय के बारे में लिखते हैं।

कुछ शानदार बनाने के लिए तैयार हैं?

उन 15,000+ बिज़नेस से जुड़ें जो एक ही प्लेटफ़ॉर्म से लॉन्च करने, बढ़ने और ऑटोमेट करने के लिए We.Inc इस्तेमाल करते हैं।

फ़्री में शुरू करें

क्रेडिट कार्ड की ज़रूरत नहीं · सेल्स टीम से बात करें