ऑनलाइन स्टोर डिजाइनिंग। भाग 3. होम पेज और कैटलॉग

पिछले भागों में मैंने एसईओ के लिए ऑनलाइन स्टोर के डिजाइन और टोकरी और चेकआउट की उपयोगिता के बारे में बात की थी। इस भाग में, मैं आपको ऑनलाइन स्टोर के सबसे महत्वाकांक्षी भाग के बारे में बताऊंगा।

ऑनलाइन स्टोर में कैटलॉग सबसे महत्वपूर्ण चीज है। सब कुछ इस बात पर निर्भर करता है कि इसे कैसे बनाया गया है। एक खरीदार द्वारा उत्पाद खोजने में आसानी। खोज इंजन द्वारा अनुक्रमण। रूपांतरण। लौटाने।



तकनीकी कार्य की शुरुआत से बहुत पहले कैटलॉग डिजाइन शुरू होता है। डिजाइन एक निर्देशिका संरचना के साथ शुरू होता है।


(बड़े आकार में खोलने के लिए क्लिक करें)

संरचना डिजाइन

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

यह समझना महत्वपूर्ण है कि कौन से उत्पादों का उपयोग किया जाता है जिसके साथ (और जो नहीं हैं), किसी विशेष उद्योग में किन श्रेणियों की आवश्यकता होती है, और विशेष रूप से उन्हें कैसे करना है।

एक सामान्य गलती यह है कि सब कुछ एक पंक्ति में करना। - मेरे पास 100 आपूर्तिकर्ता हैं, मैं प्रत्येक से 10,000 उत्पादों के लिए मूल्य सूची लूंगा और उसमें से एक लाख सामानों के लिए एक स्टोर एकत्र करूंगा।

दुर्भाग्य से, इस तरह के तर्क बहुत बार सुना जाता है। ऐसा करना इसके लायक नहीं है, क्योंकि इस तरह के एक ऑनलाइन हाइपरमार्केट को आपके लिए उत्पाद कार्डों के लिए डेटा एकत्र करने, मौजूदा कीमतों और संतुलन बनाए रखने, सलाहकारों के लिए जो प्रतिस्पर्धी मूल्य और सेवाओं के लिए वर्गीकरण में पारंगत हैं, के लिए भारी संसाधनों की आवश्यकता होगी। इस सब के बिना, माल का यह विशाल द्रव्यमान नहीं बेचा जाएगा, और उनमें से कुछ को खोजने के लिए पर्याप्त लगभग असंभव होगा।

एक छोटा व्यक्तिगत मामला।

मैं वाइल्डबेरी पर 2 डिब्बों के साथ एक चमड़े के बैग की तलाश में था और 1000 कार्ड के सामान की समीक्षा कर रहा था, मुझे यह नहीं मिला।

100 अच्छी तरह से चयनित उत्पादों के एक छोटे से विशेष स्टोर में, मैंने इसे 5 मिनट में पाया।

सामान्य से विशेष तक

वर्गीकरण पर निर्णय लेने के बाद, हम सामानों की सूची का एक पदानुक्रम बनाना शुरू करते हैं। साइट की उपस्थिति सीधे उस पर निर्भर करती है। 1-2 शब्दों के नाम वाले 8 वर्गों को क्षैतिज मेनू में 1 पंक्ति में रखा जा सकता है। अधिक के लिए, आपको एक ऊर्ध्वाधर मेनू की आवश्यकता है। यह इतना सुविधाजनक नहीं है और इसके आधार पर एक अच्छा डिजाइन बनाना अधिक कठिन है।

सामान्य तौर पर, कैटलॉग "सामान्य से विशेष तक" (धन्यवाद, टोपी) के सिद्धांत पर बनाया गया है। जो बहुत कम स्पष्ट है: एक ही उत्पाद विभिन्न श्रेणियों में हो सकता है। उदाहरण के लिए, एक बिस्तर, यह दोनों "फर्नीचर" और "सोने के लिए उत्पाद" है। क्या गद्दे पहले या दूसरे के करीब है?

इस तरह के विवादास्पद मुद्दों के साथ थोड़ा शोध हमारी मदद कर सकता है। शोध पद्धति को "कार्ड छांटना" कहा जाता है। उसी समय, उत्तरदाताओं ने अपने पत्राचार के अनुसार कार्ड बिछाए: उदाहरण के लिए, "आप पहले स्थान पर गद्दे की तलाश कहाँ करेंगे"?



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

तर्क खोजो

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

मध्य एशिया के चित्र का एक उदाहरण



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

सीए की जरूरतों और पीड़ा का एक उदाहरण



यह समझने में कि हमारा स्टोर कौन और क्यों उपयोग करेगा, यह कौन से उत्पाद बेचता है, हमें किस कैटलॉग संरचना की आवश्यकता है और यह किस चीज से भरा है, हम पेज डिजाइन करने के लिए आगे बढ़ सकते हैं।

मुख पृष्ठ

हम साइट के मुख्य पृष्ठ से डिजाइन करना शुरू करते हैं। संरचना की मूल अवधारणा पर काम किया जा रहा है।

• मेनू स्थान
• संपर्क जानकारी
• शहर का चयन
• बैनर और घोषणाएँ
• मुख्य लाभ का निष्कर्ष

हम उन कार्यों का वर्णन करने के लिए ब्लॉक में पेज का विश्लेषण करेंगे जो उनमें एम्बेडेड हैं।

साइट हेडर

• टोपी में क्या महत्वपूर्ण है
• लोगो (मुख्य एक को छोड़कर सभी पृष्ठों पर, यह मुख्य एक के लिए एक कड़ी है)
• सूचना मेनू (कंपनी, भुगतान और वितरण, संपर्क के बारे में)
• फोन / ईमेल (यदि कंपनी की रणनीति का अर्थ उपयोगकर्ता से छिपा हुआ नहीं है)
• आवेदन (बी 2 बी स्टोर्स के लिए, जहां विशिष्ट आदेशों के बिना अनुप्रयोगों का प्रसंस्करण प्रदान किया जाता है)
• खरीदारी की टोकरी
• पसंदीदा
• व्यक्तिगत खाता (पंजीकरण, प्राधिकरण)
• भाषा संस्करण

यहाँ हमारे द्वारा डिज़ाइन की गई टोपी का एक उदाहरण है

निर्देशिका

कैटलॉग क्षैतिज (हेडर के नीचे सही) और ऊर्ध्वाधर (आमतौर पर बाईं ओर) हो सकता है। पहला विकल्प अधिक सुविधाजनक है, क्योंकि यह फिल्टर के लिए साइड स्पेस छोड़ देता है। दूसरा - अधिक सार्वभौमिक - यह साइट पर प्रथम-स्तरीय वर्गों की संख्या में व्यावहारिक रूप से असीमित है। यहां हमारे द्वारा डिज़ाइन की गई साइटों पर निर्देशिका के उदाहरण हैं

खड़ा


क्षैतिज

घोषणाएँ और बैनर

ब्लॉक, आमतौर पर मुख्य पृष्ठ के मध्य भाग में स्थित होता है। वे आपको कंपनी के लाभ, नई आवक, पदोन्नति, बिक्री, विशेष प्रस्तावों से अवगत कराते हैं।

घोषणाएं विभिन्न प्रारूपों में हो सकती हैं। स्लाइडर
कई बैनर
पाठ की घोषणाएँ

एक डिजाइन साइट में घोषणाओं का एक उदाहरण

उत्पाद के नमूने

चयनित वस्तुओं के साथ ब्लॉक। आमतौर पर ये हिट, सस्ता माल, प्रचारक आइटम हैं।
यह कुछ प्रकार के विषयगत संग्रह हो सकते हैं, उदाहरण के लिए, फैशन में "तैयार चित्र"
साइट पर उत्पाद चयन

तहखाना

ऐसी जानकारी है जो केवल साइट के तहखाने में घोषित की जा सकती है।
आमतौर पर ये सोशल नेटवर्क के लिंक होते हैं
वैकल्पिक संपर्क जानकारी (कई फोन)
साइट के सूचना अनुभागों पर एक व्यापक मेनू
कैटलॉग के मुख्य भाग
साइट में तहखाने का उदाहरण

खंड सूची

अनुभाग सूची पृष्ठ आंशिक रूप से कैटलॉग ड्रॉप-डाउन मेनू को डुप्लिकेट करता है। यह खोज इंजन द्वारा साइट के अनुक्रमण को सुविधाजनक बनाने के लिए और ब्रेडक्रंब पर जाने में सक्षम होने के लिए आवश्यक है।

अनुभागों की सूची वाला एक पृष्ठ डिजाइन करने के लिए काफी सरल है।
आमतौर पर यह दो संस्करणों में आता है

• फोटो के साथ
• निर्वाह के साथ

पहला विकल्प स्पष्ट है


दूसरा वांछित अनुभाग की खोज को तेज करता है और साइट के अनुक्रमण को सरल करता है।


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

उत्पाद सूची

लिस्टिंग (उत्पादों की सूची वाला एक पृष्ठ) स्टोर में सबसे कठिन है। यह एक साथ साइट के लिए सभी संभावित खोज परिदृश्यों पर काम करना चाहिए।

पृष्ठ पर मुख्य कार्य

• उत्पाद सूची
• माल की सूची के प्रकार पर स्विच करना (विस्तृत विवरण के साथ बड़ी तस्वीर के साथ विकल्प, मूल्य सूची का कॉम्पैक्ट दृश्य)
• छँटाई (कीमत, लोकप्रियता, उपलब्धता के आधार पर)
• निस्पंदन (मूल्य के अनुसार, गुणों के अनुसार, उपलब्धता के आधार पर, दुकानों में उपलब्धता से)
• अनुभाग विवरण
• सदस्यता की सूची
• छानने के लिए टैग
• खोज
• पेज नेविगेशन

सूची में उत्पाद ब्लॉक में कौन से डेटा की आवश्यकता है

फ़ोटो

• कीमत
• छूट
• उपलब्धता
• मिनी विवरण
• रंग उपलब्ध हैं
• उपलब्ध करता है

सूची में उत्पाद ब्लॉक में कार्य

• पूर्वावलोकन
• कार्ट में जोड़ें
• तुलना में जोड़ना
• पसंदीदा में जोड़ें

उत्पाद कार्ड

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

तदनुसार, पांच मुख्य कार्यों को कार्ड में प्रतिष्ठित किया जा सकता है

दृश्य भाग

फोटो, वीडियो, नयनाभिराम रोटेटर
आपको विभिन्न पक्षों से उत्पाद का निरीक्षण करने, ज़ूम इन करने, विस्तार से जांच करने की अनुमति दें

खरीद कार्य

• कीमत
• उपलब्धता
• छूट
• कार्ट सुविधाओं में जोड़ें
• पसंदीदा
• तुलना
• वितरण
• भुगतान
• वापसी और विनिमय
• बोनस कार्यक्रम में भागीदारी

विस्तृत जानकारी

• उत्पाद विशेषताएँ
• संपत्ति समूह
• प्रलेखन
• समीक्षा
• प्रश्न और उत्तर

क्रॉस सेल और अपसेल

एनालॉग उत्पाद
यहां हम एक ही खंड, श्रृंखला, संग्रह या निर्माता से उत्पाद पेश करते हैं। एनालॉग्स को मैन्युअल रूप से चुना जा सकता है, लेकिन एल्गोरिदम हो सकता है।

संबंधित उत्पाद
इस आइटम के साथ खरीदे गए आइटम। झूमर के लिए। क्रॉसबो के लिए तीर। टाइल को पेंट करें। अच्छी तरह से और इतने पर। वे उत्पाद और अनुभाग दोनों के साथ जुड़े हो सकते हैं (उदाहरण के लिए, सभी झाड़ के लिए 2-3 प्रकार के दीपक)

स्टोर के फायदे

एक ब्लॉक स्टोर के फायदों की याद दिलाता है और यह अब ऑर्डर करने लायक क्यों है।

निष्कर्ष

विकास में गलतियां अप्रिय हैं। डिज़ाइन त्रुटियां घातक हैं।
सब कुछ आपके ऑनलाइन स्टोर की डिज़ाइन गुणवत्ता पर निर्भर करता है।

• क्या सभी अनुभाग और उत्पाद कैटलॉग में फिट होंगे
• क्या सर्च इंजन उन्हें सही तरीके से इंडेक्स कर पाएगा
• क्या खरीदार के लिए उत्पादों को चुनना और महत्वपूर्ण जानकारी की तलाश करना सुविधाजनक होगा

तैयार उत्पादों पर डिज़ाइन त्रुटियों को ठीक करना बहुत मुश्किल है। कभी-कभी एक फिक्स की कीमत किसी साइट को विकसित करने की लागत से अधिक होती है।

उच्च-गुणवत्ता वाले डिज़ाइन के लिए, साइट पर मौजूद सामग्री की मात्रा, साथ ही साइट के लिए उपयोगकर्ताओं के पथ और उनकी आवश्यकता वाले टूल को समझना महत्वपूर्ण है

PS नए प्रकाशनों को जारी रखने के लिए, मुझे फेसबुक पर फॉलो करें ।