एक ऑनलाइन स्टोर का डिजाइन बेचना। भाग 2. इंटरफ़ेस तत्व

श्रृंखला से लेख का दूसरा भाग "एक ऑनलाइन स्टोर की बिक्री डिजाइन।" जो लोग पहले वाले से चूक गए थे, आप उन्हें यहाँ पढ़ सकते हैं: “ ऑनलाइन स्टोर का डिज़ाइन बेचना। भाग 1. विश्लेषिकी । ” आज मैं स्टोर इंटरफेस के विभिन्न हिस्सों के बारे में बात करूँगा जो रूपांतरण और बिक्री के लिए महत्वपूर्ण हैं। मैं यह इंगित करने का प्रयास करूंगा कि साइट के हेडर और पाद लेख में, मुख्य पृष्ठ पर, कैटलॉग पृष्ठ पर, और बहुत कुछ क्या होना चाहिए।

साइट हेडर

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

अंजीर। 10. वेबसाइट कैप्स, flipkart.com, aliexpress.com, infibeam.com







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

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

अंजीर। 11. प्रसिद्ध ऑनलाइन स्टोर के लोगो



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

अंजीर। 12. alibaba.com, homeshop18.com पर खोजें





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

अंजीर। 13. bigbrownbox.com.au, ballarddesigns.com पर फोन नंबर





फोन नंबर। बड़े ऑनलाइन स्टोर आमतौर पर हॉटलाइन नंबर 0 800 का उपयोग करते हैं। आप इस नंबर को लैंडलाइन फोन से मुफ्त में कॉल कर सकते हैं, ऑपरेटर के टैरिफ पर मोबाइल फोन से (संकेत समय पर, उदाहरण के लिए, 8:00 से 21:00 तक, या घड़ी के आसपास, यह सब होना चाहिए। संलग्न)। अक्सर, ऑनलाइन स्टोर संपर्क के लिए हॉटलाइन नंबर और स्थानीय नंबर का उपयोग करते हैं। यदि आप मोबाइल ऑपरेटरों की संख्या का उपयोग करना पसंद करते हैं, तो ड्रॉप-डाउन सूची में ऑपरेटर की पसंद को जोड़कर उन्हें लिखें (आखिरकार, यदि आपके पास 5 या 7 ऐसी संख्याएं हैं, तो वे सभी बहुत अधिक जगह लेंगे)।

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

अंजीर। 14. हेडर में और प्रोडक्ट पेज पर ऑनलाइन चैट, zappos.com, beauty.com





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

खरीदारी। टोकरी को हमेशा खोजने में आसान बनाने के लिए, यह साइट के सभी पृष्ठों पर मौजूद होना चाहिए। इसलिए, टोकरी आमतौर पर साइट के हेडर में स्थित होती है। टोकरी को दृश्यमान बनाएं, बाहर खड़े रहें, ताकि उपयोगकर्ता इसे आसानी से ढूंढ सके और एक ऑर्डर दे सके।

अंजीर। 15. amazon.com, hushbabies.com, beauty.com पर शॉपिंग कार्ट







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

मुख्य पृष्ठ

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

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

अंजीर। 16. साइटों की सूची amazon.com, ebay.com, yebhi.com पर







मध्य भाग। शोध के अनुसार, एक व्यक्ति अवचेतन रूप से ऊपरी बाएं कोने को याद करता है, लोगो का क्षेत्र जिसे हमने ऊपर वर्णित किया है। इसके तुरंत बाद, उसकी टकटकी स्क्रीन के मध्य तक कम हो जाती है। यहां आपके पास ऐसी जानकारी होनी चाहिए जो ब्याज, ब्याज का लालच दे सकती है। और ये सबसे लोकप्रिय सामान, रियायती सामान, नए आगमन, बेस्टसेलर हैं। उदाहरण के लिए, स्टॉक टेक्स्ट बेचने का भी उपयोग करें: “दिन का उत्पाद: ब्लेंडर। 599 डालर 900 के बजाय, 5 बचे हैं। ” एक शब्द में, सब कुछ जो उपयोगकर्ता को हुक कर सकता है, उसे ब्याज दे सकता है और रहने के लिए मना सकता है। एक प्रचार ब्लॉक भी है।

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

अंजीर। 17. amazon.com, beauty.com पर प्रोमो ब्लॉक





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

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

अंजीर। 18. beauty.com के बेसमेंट, zappos.com ऑनलाइन स्टोर

उत्पाद फ़िल्टर

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

अंजीर। 19. साइट्स पर faceted नेविगेशन के उदाहरण bigbrownbox.com.au, amazon.com, yebhi.com







अगले और अंतिम लेख में मैं आपको उत्पाद स्टोर के बारे में विस्तार से बताऊंगा, ऑर्डर देना, वितरण और भुगतान को प्रभावित करना, सदस्यता और ऑनलाइन स्टोर इंटरफ़ेस के अन्य महत्वपूर्ण तत्व।

लेखक की घोषणाएँ:

ईकॉमर्स पाठ्यक्रम। जल्द ही, हमारा डिजिटोव बिजनेस स्कूल लेख के लेखकों से व्यावहारिक पाठ्यक्रम लॉन्च करेगा : गंभीर साइटें डिजाइन करना , ऑनलाइन स्टोर के लिए मार्केटिंग और ऑनलाइन स्टोर बनाने के बारे में सब कुछ । पाठ्यक्रम के लिए साइन अप करें और छूट प्राप्त करें!

ईकॉमर्स बुक। हम ऑनलाइन स्टोर के निर्माण और प्रचार पर एक किताब लिख रहे हैं। जो लोग एक अनुरोध छोड़ सकते हैं और पुस्तक की पहली प्रतियां प्राप्त कर सकते हैं। ऐसा करने के लिए, "ई-कॉमर्स बुक" विषय के साथ एक ईमेल ई-मेल पर भेजें: info@seclgroup.ru और पुस्तक के प्रकाशन के तुरंत बाद हम विस्तृत जानकारी भेजेंगे।

नए लेख। दूसरों से पहले हमारे नए लेख प्राप्त करने के लिए या बस नए प्रकाशनों को याद नहीं करने के लिए, SECL समूह प्रशंसक पृष्ठों की सदस्यता लें: Facebook , VK , और Twitter, या Digitov प्रशंसक पृष्ठों पर, जहां प्रशिक्षण सामग्री और ईवेंट पोस्ट किए जाएंगे, जिनमें मुफ्त वाले शामिल हैं: Facebook , VK , और ट्विटर ।

मूल लेख: http://seclgroup.ru/article_prodayushchiy_dizayn_internet-magazina_elementy_interfeysa_2.html

लेखक:

सर्गेई याकोवेन्को, वरिष्ठ डिजाइनर, एसईसीएल ग्रुप / इंटरनेट सेल्स टेक्नोलॉजीज
निकिता सेमेनोव ( फेसबुक , वीके , लिंक्डइन ), सीईओ, एसईसीएल ग्रुप / इंटरनेट सेल्स टेक्नोलॉजीज