ऑनलाइन स्टोर में जानकारी की प्रस्तुति के लिए एक वैचारिक दृष्टिकोण। भाग 1

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



The post बिल्कुल भी छोटा नहीं निकला! बहुत सारे पाठ, प्रतिबिंब की आवश्यकता होती है, और संभवतः (हमेशा मेरे साथ), समझने में मुश्किल होती है। लेकिन मैं पूरी पोस्ट को 2-3-4 भागों में नहीं तोड़ना चाहता। समय बिताना और एक साथ सब कुछ पढ़ना बेहतर है, फिर यह स्पष्ट हो जाएगा। विशेष रूप से, फिर भी, 3 पदों के लिए विषय की योजना बनाई गई थी। यह 1 है और सभी 3 महान होंगे।



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

प्रस्तावना

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



तो, मैं किस तरह के विचारों का पीछा करता हूं? जानकारी प्रस्तुत करना: 1) माल के उत्पादन के तरीके; 2) माल की एक स्पष्ट और समझने योग्य स्थिति (गोदाम, स्टॉक, ...); 3) छँटाई में आसानी; 4) उत्पाद समूहों के उपयोगकर्ता-अनुकूलन प्रदर्शन; 5) इन्फोग्राफिक्स के तत्वों का उपयोग (जानकारी की धारणा को आसान बनाने के लिए: आरेख, चार्ट, आइकन, आदि); 6) एक ही प्रकार के सामानों का समूह; 7) टोकरी प्रदर्शित करने के लिए तंत्र। और, ज़ाहिर है, मुख्य विचार: प्रत्येक उत्पाद समूह की जानकारी की अपनी प्रस्तुति है! और आंशिक रूप से UserInterfaceControl (शायद मैं इसे गलत डाल रहा हूँ, लेकिन कहीं न कहीं मैंने इसे पहले ही देख लिया था)। लब्बोलुआब यह है कि उपयोगकर्ता खुद निर्धारित कर सकता है कि वह क्या देखना चाहता है।

इनपुट डेटा

और ऐसा है। एक स्टोर है।

• नोटबुक
  
  रेंज: लैपटॉप, सहायक उपकरण
  
  

1 के उदाहरण पर मैं मुख्य विचार दिखाऊंगा, 2 के उदाहरण पर मैं केवल उस क्षण को दिखाऊंगा कि विभिन्न वस्तुओं के तहत उनकी जानकारी की बारीकियों

नोटबुक

पहली नज़र में, सबसे सरल, ऑनलाइन स्टोर का प्रकार। मैं सहमत हूं, उनका कार्यकाल एक दर्जन है। लेकिन यह उसके उदाहरण पर है कि मेरा मतलब क्या है यह दिखाना सबसे आसान है। हालांकि अन्य स्टोर कम प्रासंगिक नहीं हैं।



तो, माल की वापसी का मुख्य पृष्ठ। क्या महत्वपूर्ण है आसानी से और स्पष्ट रूप से उत्पादों को छाँटने और प्रदर्शित करने की क्षमता। यह भी चुनने का अवसर है कि आपको क्या रुचि है (उत्पादों का एक समूह)।







एक ब्लॉक है, इसके तीन मुख्य क्षेत्र हैं: नेविगेशन, सामग्री, सूचीकरण (पेजिंग)। चलो उन्हें अलग ले जाएं।







1 - नेविगेशन बार। इसे तुरंत 3 भागों में विभाजित किया जा सकता है: उत्पाद समूह, सॉर्टिंग, आउटपुट / प्रदर्शन विधि।



उत्पाद समूह: उपयोगकर्ता यह निर्धारित कर सकता है कि उसे क्या चाहिए। उदाहरण के लिए, वह केवल लैपटॉप, या लैपटॉप और बैटरी, या कुछ और इस ब्लॉक में प्रदर्शित करना चाहता है।







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







छंटाई। फिर से, उपयोगकर्ता के पास एक विकल्प है, और काफी सुविधाजनक है। खैर, लिंक "वेयरहाउस" और "प्रमोशन", मुझे लगता है, समझ में आता है, और पॉप-अप के बिना ... हालांकि "प्रचार" को भी प्रकार से विभाजित किया जा सकता है ... लेकिन यह अब वास्तव में आवश्यक नहीं है।



इसके अलावा, अगर साइट में एक ही आउटलेट जैसी विज्ञापन इकाइयाँ हैं ...







... तो फिर उपयोगकर्ता को विज्ञापन इकाइयों का विषय चुनने का अवसर क्यों नहीं दिया जाए? मान लें कि एक ब्लॉक को अनियंत्रित छोड़ दिया गया है, दूसरा विषय बदलने की संभावना के साथ। बस एक बड़ा ब्लॉक (जहां बदले में बहुत सारे चित्र हैं) मैं उपयोगकर्ता को चुनने के लिए देता हूं।



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



क्यूब्स में आउटपुट (मुझे यह भी पता नहीं है कि इसे सही ढंग से कॉल करने के लिए क्या है):







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



जब हम किसी उत्पाद पर क्लिक करते हैं, तो हम निम्नलिखित देखते हैं: महत्वपूर्ण उत्पाद विवरण और, फिर से, आइकन ... आइकन ... आइकन ...







वैसे, मैं मदद नहीं कर सकता, लेकिन झटके से, यह लानत है, यह घृणित लगता है जब साइट पर कीमत _red_ (डराने) रंग में उजागर होती है!



4 ग्रे आइकन इस या उस उत्पाद जानकारी को देखने के लिए त्वरित पहुँच का सुझाव देते हैं। उदाहरण के लिए, जहां गियर - उन। विवरण, फोटो आइकन - क्रमशः, फोटो। वीडियो ... अजीब है, लेकिन मुझे अभी भी समझ नहीं आया कि साइटों पर वीडियो क्यों नहीं हैं? आजकल, "बहुत ही बात" वीडियो सामग्री का उपयोग करना है! आप जो भी बेचते हैं! Dorokhov से जानकारी की प्रस्तुति का एक अच्छा उदाहरण, अर्थात् यहाँ ! वीडियो आपको अच्छी तरह से खरीदने के लिए प्रोत्साहित करता है। इसके अलावा, वीडियो अनुपात का एक अच्छा विचार देता है और आंशिक रूप से स्पर्श संवेदनाओं की आवश्यकता को विस्थापित करता है, और हर कोई जिसने कभी कुछ भी बेचा है, जानता है कि यह कितना महत्वपूर्ण है!



लेकिन वापस हमारे स्टोर में। माल का तीसरा आउटपुट एक सारणीबद्ध आउटपुट है। मैंने पिछले संस्करण में उत्पाद पर क्लिक करते समय उसी लेआउट का उपयोग किया था।







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



लेकिन पेजिंग की अभी भी आवश्यकता है, क्योंकि साइट के मुख्य पृष्ठ पर आप 1 नहीं, बल्कि 2 या 3-4 ब्लॉक रख सकते हैं।







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



एक एकल इकाई का दृष्टिकोण एक बहुत ही दिलचस्प बात है। तथ्य यह है कि अगर यह एक तरह की छोटी चीज है, उदाहरण के लिए, एक एचडीएमआई से वीजीए एडाप्टर, तो, निश्चित रूप से, कुछ भी आविष्कार करने की आवश्यकता नहीं है। तस्वीरों की गैलरी? क्यों? यही है, सब कुछ सरल है: एक फोटो, विवरण और मूल्य का आउटपुट। यहां तक ​​कि स्पष्ट रूप से स्पष्ट करने के लिए कुछ भी नहीं है ... लेकिन निष्कर्ष, उदाहरण के लिए, एक लैपटॉप इकाई है ... फिर यह शांत है, शांत नहीं है, लेकिन मैं कैसे और क्या के बारे में सोचना चाहता हूं।







वास्तव में, सब कुछ काफी समृद्ध है और सब कुछ डिजाइनर के स्तर पर तय किया गया है। सब कुछ सरल है। उत्पाद की एक तस्वीर है, एक छोटा (!) मार्केटिंग विवरण है, और उनके नीचे एक मिनी-पैनल है। मूल्य, "कार्ट में जोड़ें" और आइकन: उन्हें टैब के साथ प्रतिस्थापित किया जा सकता है, हां कुछ भी। एक व्यक्ति की जरूरत है कि सभी एक ही बार में है। गहरी खुदाई करना चाहते हैं? कृपया आइकन / टैब, अध्ययन करें। लेकिन ... एक और बात है।



प्रचार जानकारी एक महत्वपूर्ण बात है, क्योंकि यह बिक्री के लिए एक अतिरिक्त प्रोत्साहन है। और यह इस मामले में काफी सक्षम होगा जो इसे बाकी सब से अधिक जगह देगा।







लेकिन मुझे एक्शन को अलग तरीके से व्यक्त करने का विचार था। उत्पाद के लिए एक उपहार के रूप में, कीमत के बिना या 0 रिव्निया की कीमत के साथ एक बैग जोड़ें।







खैर, अब आप मुख्य पृष्ठ के लेआउट या स्टोर के इंटरफेस के बारे में थोड़ा और विचार कर सकते हैं।







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



और अब टोकरी के बारे में थोड़ा। तथ्य यह है कि मैं यह नहीं समझ सकता कि कैसे, क्यों ऑनलाइन स्टोर के बास्केट में, इसके अलावा, बिना किसी अपवाद के, एक साधारण रूपांतरण डिज़ाइन का उपयोग किया जाता है?







इसके बारे में खुद सोचें, क्यों? उदाहरण के लिए, उत्पाद की बारीकियों को देखते हुए, पेशेवर कैमरा या लैपटॉप लें। यह काफी महंगी तकनीक है। ठीक है, तो, जो, एक आदेश देने के लिए टोकरी में जा रहा है, क्या यह कभी भी 5-10 लैपटॉप ऑर्डर करने के लिए दिमाग में आएगा? कोई नहीं! मैं सभी 100 के लिए सुनिश्चित हूं, क्योंकि मैंने बिक्री में काम किया है। और कॉर्पोरेट सेक्टर हमेशा बड़ी संख्या में आने पर जीवंत बातचीत करता है। लेकिन! कोई निश्चित रूप से आपत्ति करेगा, वे कहते हैं, भले ही वे इसका उपयोग न करें, लेकिन एक अवसर होना चाहिए! और मैं इससे सहमत हूं, लेकिन फिर से ... कोई भी 10 लैपटॉप, या 5 महंगे प्रो-कैमरा नहीं खरीदेगा! क्या आप समझते हैं कि मेरा क्या मतलब है?



मैं इसका मुकाबला करने का प्रस्ताव क्या करूं? सब कुछ सरल है ... "+" - हां, हां, सामान्य प्लस चिह्न। इसके बाद, मैं टोकरी को देखते हुए इसका वर्णन करूंगा।



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







जैसा कि आप देख सकते हैं, सब कुछ काफी सरल है, "+" - एक ही उत्पाद जोड़ें, "-" हटाएं। और उपयोगकर्ता जितने चाहें उतने उत्पाद जोड़ सकते हैं। उत्पाद के पास मात्रा का एक छोटा संकेत दिखाई देता है।







ऐसा इसलिए है क्योंकि यह काफी सरल होगा, और एक ही समय में, आपको जो कुछ भी चाहिए वह है। लेकिन मैं जानबूझकर एक विवरण के बारे में चुप रहा ... पोस्ट की शुरुआत में मैंने रिपोर्टिंग की विधि के बारे में बात की कि प्रत्येक उत्पाद की आउटपुट की अपनी बारीकियां हैं। अगर किसी को क्यूब्स, क्लिक किए गए और सारणीबद्ध तरीके से सामान की वापसी के बारे में कोई सवाल था, तो मुझे आश्चर्य हो रहा है? :)



लेकिन असल में बात यही है। मैं दोहराता हूं: प्रत्येक प्रकार के उत्पाद की वापसी की अपनी बारीकियां होती हैं। ध्यान दें, मैंने एक लैपटॉप स्टोर चुना।



और इस दृष्टांत में हम क्या देखते हैं?







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







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

अंतभाषण

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



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



इसके अलावा अगले पोस्ट में हम ऑनलाइन स्टोर के लिए एक और महत्वपूर्ण बिंदु के बारे में बात करेंगे: उत्पाद तुलना पृष्ठ। क्योंकि मैं अभी तक सामानों की तुलना करने के लिए एक सामान्य तंत्र से नहीं मिला हूं और इस पर अपने विचार साझा करना चाहूंगा।

घोषणा

उत्पाद पृष्ठ की तुलना करें

उत्पाद पृष्ठ - लैपटॉप

उत्पाद पृष्ठ - कैमरा



जब तक बेशक यह आपके लिए दिलचस्प है!