खरीदार जिस पेज पर है उसी के अनुसार दुकान डिजाइन करें: मुख्य पेज, खोज, श्रेणी, उत्पाद, कार्ट, चेकआउट और मोबाइल — क्या शामिल करें और किन गलतियों से बचें।
खरीदार के सोचने के तरीके से मिलता नेविगेशन, तेज़ पेज, बड़ी ज़ूम योग्य उत्पाद तस्वीरें, कार्ट बटन के पास कीमत और शिपिंग, दिखती समीक्षा, काम करने वाली साइट खोज और अतिथि खरीद वाला छोटा चेकआउट। अधिकतर ब्राउज़िंग फ़ोन पर होती है, इसलिए पहले मोबाइल डिजाइन करें।
इतने कि अंतहीन पेजिंग बिना तुलना हो सके। कई दुकानें प्रति पेज 24 से 48 दिखाती हैं या “और दिखाएं” बटन देती हैं। सही आकार, रंग, कीमत और उपलब्धता के फ़िल्टर अधिक महत्वपूर्ण हैं।
उत्पाद नाम, मुख्य तस्वीर, कीमत, आकार/रंग विकल्प, स्टॉक, कार्ट में जोड़ने का बटन और शिपिंग या डिलीवरी समय की एक पंक्ति। समीक्षा हो तो स्टार और गिनती भी।
आमतौर पर नहीं। अपने-आप घूमने वाली स्लाइड अक्सर अनदेखी होती है और सुलभता व गति बिगाड़ सकती है। एक मजबूत मुख्य तस्वीर, स्पष्ट संदेश और प्रमुख श्रेणियों के लिंक बेहतर हैं।
अच्छा ई-कॉमर्स वेब डिजाइन खरीदार को तीन काम जल्दी करने देता है: सही उत्पाद खोजना, उस पर भरोसा करके खरीदना, और बिना झंझट के भुगतान करना। व्यवहार में इसका अर्थ है — ग्राहक की सोच से मेल खाता नेविगेशन, तेज़ मोबाइल पेज, बड़ी उत्पाद तस्वीरें, जल्दी दिखती कीमत और शिपिंग, दिखती समीक्षाएं, और छोटा चेकआउट।
सामान्य सिद्धांतों की सूची के बजाय यह गाइड पेज-दर-पेज चलती है, क्योंकि खरीदार का सवाल हर पेज पर बदलता है।
मुख्य पेज के पास कुछ सेकंड हैं — यह बताने के लिए कि आप क्या बेचते हैं और किसके लिए।
शामिल करें:
बचें: अपने-आप घूमने वाले कैरोसेल, पेज लोड होने से पहले खुलने वाले पॉप-अप, और ऐसे हीरो वीडियो जो मोबाइल पर पहला दृश्य देरी से दिखाएं।
यहीं अधिकतर तुलना होती है।
| तत्व | अच्छा तरीका |
|---|---|
| उत्पाद कार्ड | हर उत्पाद के लिए समान तस्वीर अनुपात, नाम, कीमत, रेटिंग और होवर पर दूसरी तस्वीर |
| फ़िल्टर | असली चुनाव मिलाएं: आकार, रंग, कीमत, सामग्री, स्टॉक में। गिनती दिखाएं |
| क्रम | डिफ़ॉल्ट “फ़ीचर्ड” या “सबसे अधिक बिका”; कीमत और नवीनतम विकल्प दें |
| स्टॉक | बिक चुके आइटम छिपाएं या साफ़ निशान लगाएं |
| पेजिंग | “और दिखाएं” या क्रमांकित पेज; वापस जाने पर फ़िल्टर स्थिति बनाए रखें |
| मोबाइल | फ़िल्टर एक स्लाइड-अप पैनल में, स्पष्ट “34 नतीजे दिखाएं” बटन के साथ |
एक आम गलती यह है कि फ़िल्टर तब मिट जाते हैं जब खरीदार कोई उत्पाद खोलकर वापस आता है। बैक बटन जरूर जांचें।
खोज करने वाले खरीदारों का इरादा आमतौर पर पक्का होता है, इसलिए कमज़ोर खोज सीधे बिक्री घटाती है।
उत्पाद पेज बिक्री करता है। ऊपर से नीचे तक काम करें।
पहले बताएं उत्पाद ग्राहक के लिए क्या करता है, फिर स्पेसिफिकेशन। आयाम, सामग्री और देखभाल के लिए छोटी स्पेक टेबल दें। साइज़ गाइड एक पैनल में खुले — लोगों को अलग पेज पर न भेजें।
Product स्ट्रक्चर्ड डेटा जोड़ें (नाम, तस्वीर, कीमत, उपलब्धता, समीक्षाएं) ताकि खोज नतीजों में कीमत और रेटिंग दिख सके।
चेकआउट डिजाइन अपने आप में एक विषय है। संक्षेप में: पूरी कीमत जल्दी दिखाएं, गेस्ट चेकआउट दें, फ़ॉर्म छोटा रखें, और Apple Pay व Google Pay जैसे एक्सप्रेस वॉलेट दें। हमारी चेकआउट ऑप्टिमाइज़ेशन गाइड में हर चरण विस्तार से है।
डिजाइन Pay बटन पर नहीं रुकता। ऑर्डर कन्फर्मेशन पेज और ईमेल लगभग हर खरीदार ध्यान से पढ़ता है।
अधिकतर दुकान विज़िट फ़ोन से होती हैं, इसलिए पहले फ़ोन लेआउट डिजाइन और टेस्ट करें, फिर डेस्कटॉप के लिए बढ़ाएं।
दोनों डिजाइन के निर्णय हैं, सिर्फ तकनीकी नहीं।
गति: तस्वीरें कंप्रेस करें और WebP या AVIF दें, लेआउट जंप रोकने के लिए तस्वीरों पर width और height सेट करें, थर्ड-पार्टी ऐप और स्क्रिप्ट सीमित करें, और Google के PageSpeed Insights में Core Web Vitals जांचें।
सुलभता: WCAG 2.2 AA के अनुसार रंग कंट्रास्ट, उत्पाद तस्वीरों पर alt टेक्स्ट, लेबल किए गए फ़ॉर्म फ़ील्ड, कीबोर्ड से पहुंच योग्य मेनू और फ़िल्टर, और त्रुटि संदेश जो बताएं क्या गलत हुआ। सुलभ दुकानें सभी के लिए आसान होती हैं, और कई क्षेत्रों में सुलभता कानूनी अपेक्षा भी है।
अगर आप शुरुआत से बना रहे हैं, तो एक अच्छा शुरुआती लेआउट इनमें से कई निर्णय खुद ले लेता है। दुकान के डिजाइन के लिए हमारे टेम्पलेट देखें, या We.Inc के चैट में अपनी दुकान का वर्णन करें — वह उत्पाद पेज, कार्ट और चेकआउट के साथ एक ऑनलाइन स्टोर बनाता है जिसे आप विजुअली या कोड में आगे परिष्कृत कर सकते हैं, होस्टिंग और SSL के साथ।
फ़्री में शुरू करें · क्रेडिट कार्ड की ज़रूरत नहीं