# ईकॉमर्स के दस डिज़ाइन फ़ैसले जो कन्वर्ज़न को नापने लायक तरीके से बढ़ाते हैं

> 'ज़्यादा खाली जगह रखिए' या 'बटन का रंग टेस्ट कीजिए' जैसी बातें नहीं। विज़ुअल हायरार्की, फ़ोटोग्राफ़ी, टाइपोग्राफ़ी और मोबाइल के वे ठोस चुनाव जो असली स्टोर्स पर कन्वर्ज़न हिलाते हैं।

Ryan Badger - 3 नवंबर 2024 - 7 मिनट में पढ़ें

## डिज़ाइन के वे फ़ैसले जो सचमुच कन्वर्ज़न हिलाते हैं

डिज़ाइन के लेख आमतौर पर दो खेमों में बँटे होते हैं। "खूब खाली जगह रखिए!" (बहुत अस्पष्ट) या "47 बटन रंगों का A/B टेस्ट कीजिए" (बहुत बारीक)। दोनों में से कोई भी उस व्यक्ति के काम का नहीं जो अपने स्टोर को देखकर सोच रहा है कि वह 1.3% पर ही क्यों कन्वर्ट करता है।

यह पोस्ट उन ठोस विज़ुअल डिज़ाइन फ़ैसलों के बारे में है जो ईकॉमर्स स्टोर्स पर कन्वर्ज़न को नापने लायक तरीके से खिसकाते हैं। पसंद-नापसंद नहीं। ब्रांड की सौंदर्य-शैली नहीं। लेआउट, हायरार्की, रंग और टाइपोग्राफ़ी के वे चुनाव जो या तो लोगों को खरीदने में मदद करते हैं या रास्ते में आ जाते हैं।

## 1. विज़ुअल हायरार्की: सबसे ज़रूरी चीज़ सबसे ज़रूरी दिखनी चाहिए

ज़्यादातर स्टोर प्रोडक्ट पेज पर हर चीज़ को बराबर विज़ुअल वज़न देते हैं: 16px बॉडी कॉपी, 18px कीमत, 18px हेडिंग। हर तत्व होड़ में है; कोई नहीं जीतता। आँख को घुसने की कोई जगह नहीं मिलती।

उपाय: जिस चीज़ पर आप क्लिक चाहते हैं, वही पेज की सबसे बड़ी, सबसे ज़्यादा कॉन्ट्रास्ट वाली चीज़ होनी चाहिए।

- प्रोडक्ट का शीर्षक: 28-36px
- कीमत: 20-24px, बोल्ड, साफ़ अलग दिखती हुई
- Add to Cart बटन: मोबाइल पर पूरी चौड़ाई, पेज का विज़ुअली सबसे भारी तत्व
- विवरण, स्पेसिफ़िकेशन सूचियाँ, शिपिंग जानकारी: 14-16px, ज़्यादा शांत

जब आप अपने प्रोडक्ट पेज को 8 फ़ीट दूर से देखते हैं (हाँ, सचमुच पीछे झुककर), क्या आप बता सकते हैं कि मुख्य कार्रवाई क्या है? अगर पूरा पेज एक धूसर घोल जैसा दिखता है, तो आपकी हायरार्की टूटी हुई है।

## 2. खाली जगह CTA के आसपास, हर जगह नहीं

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

- Add to Cart वाले हिस्से के आसपास कम से कम 40-60px पैडिंग
- कीमत अपनी साफ़ जगह में बैठी हो, दूसरे टेक्स्ट से घिरी हुई नहीं
- प्रोडक्ट इमेज को जगह दी गई हो (बिना मार्जिन के किनारे से किनारे तक नहीं)

बाकी सब कुछ (रिव्यू, शिपिंग जानकारी, संबंधित प्रोडक्ट) ज़्यादा कसकर रखिए। वे गौण हैं। CTA वाला हिस्सा इसलिए जीतता है कि सिर्फ़ उसी के पास साँस लेने की जगह है।

## 3. एकरूप प्रोडक्ट फ़ोटोग्राफ़ी, "बेहतर" प्रोडक्ट फ़ोटोग्राफ़ी से जीतती है

50 प्रोडक्ट के कैटलॉग में अगर सारे फ़ोटो थोड़े-थोड़े अलग हैं (अलग पृष्ठभूमि, अलग रोशनी, अलग ज़ूम), तो वह शौकिया लगता है। जिस कैटलॉग में हर फ़ोटो का कोण, रोशनी, क्रॉप और पृष्ठभूमि एक जैसी है, वह पेशेवर लगता है।

यह मात्रा की समस्या है, गुणवत्ता की नहीं। आपके टॉप 5 बेस्टसेलर के चमकदार हीरो शॉट हो सकते हैं। बाकी सब एक जैसे खींचे जाने चाहिए, भले ही थोड़े कम ग्लैमरस हों। असंगति "छोटी, अविश्वसनीय दुकान" का संकेत, कम गुणवत्ता से ज़्यादा देती है।

व्यावहारिक नियम:

- मुख्य फ़ोटो: सफ़ेद या सादी पृष्ठभूमि, बीच में, पूरे कैटलॉग में एक जैसा क्रॉप
- दूसरे फ़ोटो: लाइफ़स्टाइल / इस्तेमाल में, एक जैसा टोन
- सभी फ़ोटो एक ही आस्पेक्ट रेशियो और रिज़ॉल्यूशन में

## 4. CTA का कॉन्ट्रास्ट, CTA का रंग नहीं

"नारंगी बटन हरे से X% ज़्यादा कन्वर्ट करते हैं!" यह आज़माया हुआ दावा आप बहुत देखते हैं। अकेले में यह बकवास है। मायने रखता है **आसपास के पेज से कॉन्ट्रास्ट**। नारंगी थीम वाली साइट पर नारंगी बटन अदृश्य है। उसी साइट पर नीला बटन एक प्रकाशस्तंभ है।

वह रंग चुनिए जो आपकी साइट के प्रमुख पैलेट से सबसे ज़्यादा कॉन्ट्रास्ट वाला हो। अगर आपका पेज सफ़ेद + काला + टैन है, तो आपका CTA वह एक रंग होना चाहिए जो कहीं और नहीं दिखता।

दूसरी बात: मुख्य CTA के लिए घोस्ट बटन (सिर्फ़ आउटलाइन, बिना भराव) से बचिए। वे सुरुचिपूर्ण दिखते हैं पर कन्वर्ज़न पर खराब टेस्ट होते हैं क्योंकि आँख को "गौण" का संकेत देते हैं। Add to Cart, Place Order, Buy Now के लिए ठोस भराव इस्तेमाल कीजिए।

## 5. मोबाइल पर टाइप का आकार और पंक्ति की लंबाई

ज़्यादातर मोबाइल स्टोर्स में टेक्स्ट बहुत छोटा और बहुत चौड़ा होता है। फ़ोन टेक्स्ट को ज़्यादा पिक्सेल घनत्व पर दिखाते हैं; डेस्कटॉप पर जो 16px है, वह मोबाइल पर छोटा लगता है।

मोबाइल टाइपोग्राफ़ी की न्यूनतम सीमा:

- बॉडी कॉपी: कम से कम 16-18px
- पंक्ति की लंबाई: प्रति पंक्ति 40-60 अक्षर
- लाइन हाइट: फ़ॉन्ट आकार का 1.4-1.6 गुना
- बटन / टैप टारगेट: कम से कम 44px ऊँचाई (Apple की एक्सेसिबिलिटी गाइडलाइन)

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

## 6. मोबाइल पर स्टिकी Add to Cart

मोबाइल पर किसी लंबे प्रोडक्ट पेज पर नीचे स्क्रॉल कीजिए: जब तक आप विवरण पढ़ चुके होते हैं, Add to Cart बटन 3 स्क्रीन ऊपर रह गया होता है। जिन ग्राहकों ने खरीदने का मन बना लिया है, उन्हें अब वापस स्क्रॉल करना पड़ता है, जिससे कन्वर्ज़न रेट गिरती है।

उपाय: एक स्टिकी Add to Cart जो मूल बटन के स्क्रीन से बाहर निकल जाने पर मोबाइल व्यूपोर्ट के नीचे तैरता रहे। एक टैप, कार्ट खुल जाए, स्क्रॉल करके ढूँढना नहीं।

डेस्कटॉप: स्टिकी कार्ट वैकल्पिक हो जाता है (व्यूपोर्ट बड़ा है)। मोबाइल: इस पर कोई समझौता नहीं।

## 7. हीरो इमेज जो नतीजा दिखाए, प्रोडक्ट नहीं

ज़्यादातर हीरो सेक्शन प्रोडक्ट को अकेले, सफ़ेद पर दिखाते हैं। संदर्भ फ़ोटो के लिए ठीक; हीरो के लिए गलत। हीरो को 2 सेकंड में बताना चाहिए कि "इसके साथ ज़िंदगी कैसी है"।

बेहतर: इस्तेमाल में आता प्रोडक्ट, संदर्भ में, किसी ऐसे व्यक्ति या माहौल के साथ जो आपके लक्षित खरीदार से मेल खाता हो।

- स्किनकेयर: कोई उसे इस्तेमाल करता हुआ, सुबह की रोशनी, बाथरूम
- फ़र्नीचर: वह चीज़ किसी असली कमरे में, जिसमें रहा जा रहा हो
- कपड़े: शरीर पर, हरकत में, पुतले पर नहीं
- खाना/कॉफ़ी: बनते या पीते हुए, प्रोडक्ट शॉट नहीं

इस्तेमाल में दिखता हीरो, अकेले दिखते प्रोडक्ट वाले हीरो से बेहतर कन्वर्ट करता है क्योंकि वह खरीदार के लिए कल्पना का ज़्यादा काम खुद कर देता है। वे बिना कल्पना किए खुद को उसका इस्तेमाल करते देख सकते हैं।

## 8. पूरे स्टोर में एक जैसे कॉम्पोनेंट

एक आम गलती: प्रोडक्ट पेज एक कार्ड शैली इस्तेमाल करते हैं, कैटेगरी पेज दूसरी, होमपेज की तीसरी। ग्राहक इस असंगति को भाँप लेते हैं, भले ही नाम न ले पाएँ। स्टोर तब भरोसेमंद लगते हैं जब वही कॉम्पोनेंट हर जगह एक जैसे दिखते हैं।

एक छोटा ईकॉमर्स डिज़ाइन सिस्टम है:

- एक प्रोडक्ट कार्ड कॉम्पोनेंट (होमपेज के चुने हुए, कैटेगरी ग्रिड, संबंधित प्रोडक्ट, सर्च नतीजों में इस्तेमाल हो)
- एक बटन सिस्टम (प्राइमरी, सेकेंडरी, टर्शरी; सिर्फ़ ये तीन)
- एक हेडिंग शैली सिस्टम (H1, H2, H3; एक जैसा लागू)
- एक रंग पैलेट (ज़्यादा से ज़्यादा 3 ब्रांड रंग, साथ में ग्रे स्केल)
- एक टाइप स्केल (ज़्यादा से ज़्यादा 3-4 आकार)

ज़्यादातर स्टोर हर एक के 15 रूप बना देते हैं जबकि एक से काम चल जाता। कम रूप = ज़्यादा पेशेवर दिखावट।

## 9. पहली स्क्रीन स्क्रॉल करने का विज्ञापन है

पहली बार लोड होने पर दिखने वाले हिस्से (फ़ोल्ड के ऊपर) का एक ही काम है: विज़िटर में स्क्रॉल करने की इच्छा जगाना। बस इतना। पहली ही स्क्रीन में बिक्री पूरी करने की कोशिश मत कीजिए।

फ़ोल्ड के ऊपर क्या चाहिए:

- यह किसके लिए है (एक पंक्ति में)
- प्रोडक्ट क्या है (विज़ुअली, एक अच्छी इमेज)
- एक साफ़ CTA (Add to Cart या Shop Now)
- भरोसे का एक आश्वस्त करने वाला संकेत (रेटिंग + रिव्यू की संख्या, या प्रेस का उद्धरण, या कोई जाना-माना ग्राहक)

फ़ोल्ड के ऊपर क्या नहीं चाहिए:

- ध्यान के लिए होड़ करते कई CTA
- हर 3 सेकंड में अपने आप आगे बढ़ने वाला हीरो कैरोसेल (कन्वर्ज़न का हत्यारा; कंटेंट हिलने पर ग्राहक ठिठक जाते हैं)
- प्रोडक्ट का हर एक फ़ायदा
- टेस्टिमोनियल की गैलरी

## 10. अपने होमपेज से कैरोसेल हटाइए

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

## Shoprocket क्या संभालता है

थीम वाला स्टोरफ़्रंट ऐसे टेम्पलेट के साथ आता है जो ऊपर की विज़ुअल हायरार्की, कॉन्ट्रास्ट और मोबाइल पैटर्न पहले से अपनाते हैं। अगर आप अपनी साइट पर विजेट एम्बेड इस्तेमाल कर रहे हैं, तो आसपास के पेज का डिज़ाइन आपके हाथ में है, पर:

- **कार्ट ड्रॉअर** (फ़ुल-पेज कार्ट नहीं) डिफ़ॉल्ट है
- **स्टिकी मोबाइल कार्ट** समर्थित है
- अपने आप WebP डिलीवरी और सही आस्पेक्ट रेशियो के साथ **रिस्पॉन्सिव प्रोडक्ट इमेज**
- **साइट बिल्डर + 40+ थीम**, ताकि आपको डिज़ाइन सिस्टम शुरू से न बनाना पड़े
- **कस्टम CSS हुक** आपको एम्बेड को अपनी साइट से मेल खाती थीम देने देते हैं

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

जो Shoprocket नियंत्रित नहीं करता: आपकी हीरो इमेज, आपकी फ़ोटोग्राफ़ी की एकरूपता, आपकी कॉपी, आपका रंग सिस्टम। इन्हें बनाना या बिगाड़ना आपके हाथ में है।

> **सुझाव:** अभी अपना स्टोर अपने फ़ोन पर खोलिए। कोई एक प्रोडक्ट पेज लीजिए। क्या आपको बिना स्क्रॉल किए Add to Cart दिखता है? क्या कीमत साफ़ तौर पर दूसरी सबसे बड़ी चीज़ है? क्या आप बिना आँखें सिकोड़े विवरण पढ़ सकते हैं? इनमें से किसी का भी जवाब नहीं है, तो पहला डिज़ाइन सुधार वही है।

## संक्षेप में

- **हायरार्की:** सबसे ज़रूरी तत्व सबसे ज़रूरी दिखना चाहिए। 8 फ़ीट के टेस्ट से जाँचिए
- **CTA के आसपास खाली जगह**, हर जगह अपने आप में नहीं
- **फ़ोटोग्राफ़ी की एकरूपता** फ़ोटोग्राफ़ी की गुणवत्ता से जीतती है। पूरे कैटलॉग में एक शैली
- **CTA का कॉन्ट्रास्ट, रंग नहीं।** आपके पेज पैलेट से सबसे ज़्यादा कॉन्ट्रास्ट वाला रंग जीतता है
- **मोबाइल टाइप: 16px+ बॉडी, 44px+ टैप टारगेट**
- **मोबाइल पर स्टिकी Add to Cart** पर कोई समझौता नहीं
- **हीरो इमेज नतीजे दिखाएँ** (इस्तेमाल में प्रोडक्ट), सफ़ेद पर अकेला प्रोडक्ट नहीं
- **छोटा डिज़ाइन सिस्टम (3 रंग, 4 आकार, 3 बटन रूप)** 15 रूपों से ज़्यादा पेशेवर दिखता है
- **पहली स्क्रीन स्क्रॉल बेचती है**, प्रोडक्ट नहीं। एक साफ़ संदेश, एक CTA
- **होमपेज का कैरोसेल हटाइए**। स्थिर हीरो जीतता है

अगर आप इन पैटर्न के साथ बिल्ट-इन थीम वाला स्टोरफ़्रंट चाहते हैं तो [मुफ़्त ट्रायल शुरू करें](https://app-v3.shoprocket.io/signup)। 14 दिन, कार्ड की ज़रूरत नहीं।

---

- HTML version: https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion
- Language: हिन्दी (hi)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)