रूपांतरण वृद्धि के 7 बिंदु या बटन की क्लिक करने की क्षमता को कैसे बढ़ाया जाए

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

प्रस्तावना:

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

1. बटन की उपलब्धता

बटन पर क्लिक करने के लिए, पृष्ठ पर बटन होना चाहिए। यह अजीब लग सकता है, लेकिन बटन के बिना साइटें हैं। नीचे दिए गए उदाहरण में, VeloDrive ऑनलाइन स्टोर का उत्पाद पृष्ठ। साइट Yandex.Market में विज्ञापित है, लेकिन पृष्ठ पर कोई खरीदें बटन नहीं है, और लेख संख्या को कॉल करना और निर्देशित करना सबसे सुविधाजनक विकल्प नहीं है।


Velodrive.ru के उत्पाद पृष्ठ पर कोई बटन नहीं है

2. बटन को बटन की तरह दिखना चाहिए

बटन को क्लिक करने के लिए, उपयोगकर्ताओं को यह समझना होगा कि बटन उनके सामने है। ऐसा करने के लिए, उन्हें स्पष्ट और पहचानने योग्य बनाया जाना चाहिए, बटन बटन के समान होना चाहिए। इसे कैसे प्राप्त किया जाए, नीचे सिफारिशें।


लिंक (बाएं) बटन की तुलना में कम दिखाई देता है (दाएं)

2.1। बटन का आकार

आकार कोई भी हो सकता है (गोल, चौकोर, आयताकार), लेकिन आयताकार सबसे अधिक व्यापक रूप से उपयोग किया जाता है, क्योंकि इस पर इसके उद्देश्य के साथ शिलालेख फिट करना संभव है।


Tmall वेबसाइट पर बटन (AliExpress)

2.2। बटन के गोल कोने

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


Apple मैजिक कीबोर्ड, सभी कुंजियों में गोल कोने होते हैं

2.3। वॉल्यूम बटन

वॉल्यूमेट्रिक बटन करना बेहतर है, इसके लिए एक छाया, एक ढाल और एक फ्रेम का उपयोग किया जाता है। हाल के वर्षों की प्रवृत्ति फ्लैट डिजाइन है। ऐसा डिज़ाइन सुंदर है, लेकिन इसकी स्पष्ट कमियों में से एक यह है कि छाया की कमी और बटन की मात्रा के कारण, गैर-क्लिक करने योग्य डिज़ाइन तत्वों से अंतर करना अधिक कठिन है। नीलसन नॉर्मन समूह ने एक परीक्षण किया , जिसके दौरान यह पाया गया कि उपयोगकर्ताओं को फ्लैट बटन की तुलना में वॉल्यूम बटन 22% तेजी से मिलते हैं।


फ्लैट बटन (बाएं) और छाया और ढाल के साथ बड़ा बटन (दाएं)

2.4। इंटरएक्टिव बटन

बटन को उत्तरदायी बनाने के लिए यह वांछनीय है, अर्थात, जब आप इसके ऊपर मँडराते हैं, तो इसका रंग और आयतन बदल दें। इस प्रकार, जब आप कर्सर पर क्लिक करते हैं (क्लिक करने से पहले), तो यह स्पष्ट हो जाता है कि तत्व क्लिक करने योग्य है।


डिफ़ॉल्ट बटन (बाएं) और होवर बटन (दाएं)

3. राजा बटन

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


Nix.ru, कई बटन ध्यान बंटाते हैं और क्लिक करने की क्षमता कम करते हैं

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

4. बटन का रंग

4.1। भूत का बटन

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


बटन का रंग मुख्य बटन (शीर्ष) और द्वितीयक (नीचे) को अलग करता है

लेकिन भूत बटन को मुख्य न बनाएं, अन्यथा यह पृष्ठभूमि के साथ विलय हो जाता है और कम ध्यान देने योग्य हो जाता है।


मुख्य बटन के रूप में भूत बटन एक बुरा निर्णय है


इतना बेहतर mi-storekazan.ru

4.2। क्या रंग बटन का चयन करने के लिए

यह व्यापक रूप से माना जाता है कि बटन का रंग एक कार्रवाई का सुझाव दे सकता है, उदाहरण के लिए:

• सकारात्मक कार्रवाई (CTA: जोड़ें, भेजें, सहेजें, लोड करें): नीला, हरा;
• नकारात्मक कार्रवाई (CTA: डिलीट, ब्लॉक, रीसेट): लाल;
• तटस्थ कार्रवाई (सीटीए: अधिक जानें, तुलना करें, पसंदीदा में जोड़ें): काला;
• दुर्गम कार्रवाई: ग्रे।

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


लाल और हरे रंग का परिचित अर्थ

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

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

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


विभिन्न रंगों के बटन की रूपांतरण दर

एक अन्य परीक्षण में, बटन पर विभिन्न पाठ रंगों की रूपांतरण दर को मापा गया। नतीजतन, सफेद लगभग 77% के रूपांतरण के साथ, एक बड़े लाभ वाला नेता था। विभिन्न रंगों के बटन की पृष्ठभूमि के साथ उच्च विपरीत होने के कारण सफेद रंग सबसे पठनीय निकला।


बटन पर विभिन्न रंगों के पाठ के लिए रूपांतरण दर

5. बटन का आकार

बटन का आकार दो मुख्य कारणों से महत्वपूर्ण है:

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

UX मैगज़ीन (बाएं) और Apple के मैनुअल का एक टुकड़ा (दाएं)

एक और महत्वपूर्ण बिंदु जिसे आकार के लिए जिम्मेदार ठहराया जा सकता है वह है बटन के बीच की दूरी। यदि बटन एक साथ पास हैं, तो मोबाइल उपयोगकर्ता गलती से अपनी उंगली से गलत बटन दबा सकते हैं। बटन के बीच की अनुशंसित दूरी 3 मिमी है।

6. बटन लेआउट

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


मुख्य खरीदें बटन स्पोर्टमास्टर वेबसाइट पर उत्पाद पृष्ठ की पहली स्क्रीन में, एक प्रमुख स्थान पर स्थित है


मुख्य चेकआउट बटन एडिडास वेबसाइट पर टोकरी की पहली स्क्रीन पर स्थित है। टोकरी में बड़ी संख्या में उत्पादों के मामले में बटन को भी दोहराया गया है।


मुख्य बटन "प्लेस आर्डर" बाजार की टोकरी की पहली स्क्रीन "टेक" में गायब है।

7. बटन पाठ

7.1। स्पष्ट कॉल टू एक्शन

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


बटन पर पाठ स्पष्ट रूप से कार्रवाई का संकेत देना चाहिए

7.2। गतिशील बटन लेबल

एक अन्य विकल्प होवर पर बटन पर लेबल को बदलना है। उनके अनुसार, उपयोगकर्ता तुरंत समझ जाता है कि वह बटन पर क्लिक करके क्या कार्य करेगा। यह अनिश्चितता को कम करता है और क्लिक करने की क्षमता में सुधार करता है।


ट्विटर पर डायनामिक बटन, जब आप कार्रवाई करते हैं तो बटन शिलालेख और रंग बदल देता है

7.3। बटन आइकॉन

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


रूसी में अमेज़ॅन पर बटन (बाएं) और जापानी (दाएं)

लेकिन आइकनों का जानबूझकर उपयोग करना सार्थक है। सरल और स्पष्ट चिह्न उठाओ, गहने का दुरुपयोग न करें। चिह्न उस अनुभाग के अर्थ के भीतर होना चाहिए, जिस पर वे निर्देशित करते हैं।


प्रतीक (शीर्ष) और उनके अर्थ (नीचे)

1 - व्यक्तिगत खाता (पंजीकरण या प्रविष्टि)।
2 या 3 - आपको इन आइकन के साथ अधिक सावधान रहना चाहिए, क्योंकि वे कई कार्यों को इंगित कर सकते हैं: पसंदीदा, सहेजे गए, इच्छा सूची, बुकमार्क, जैसे, रेटिंग। भ्रमित होने में आसान।
4 - माल की तुलना (विशेषताओं के अनुसार)।
5 - पहले देखे गए उत्पाद।
6 - मदद (जानकारी)।

7.4। बटन के बगल में पाठ

बटन और आइकन के कैप्शन को इंगित करना उचित है। हस्ताक्षर के बिना, क्लिक करने की क्षमता घट जाती है, और इसके साथ रूपांतरण होता है। उदाहरण: जब Microsoft ने Outlook 97 ईमेल क्लाइंट जारी किया, तो नए बटन इंटरफ़ेस में मुख्य कमांड के बटन का उपयोग किया गया था।

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


माइक्रोसॉफ्ट आउटलुक 97

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


Microsoft Outlook 2003

बटन के बगल में व्याख्यात्मक पाठ भी उपयोगकर्ता की चिंताओं को कम करने में मदद करता है, उदाहरण के लिए: "क्या मैं बटन पर क्लिक करूंगा और क्या मेरे पैसे डेबिट होंगे?"


Booking.com पर एक बटन के बगल में व्याख्यात्मक पाठ

7.5। पाठ के साथ बटन अधिभार न डालें

ऐसा करने के लिए, आप ऊपर दी गई सिफारिशों का उपयोग कर सकते हैं।


Nix.ru

***

एडुअर्ड फ़ेसुल्लिन, कन्वर्सेंट.मे के संस्थापक द्वारा पोस्ट किया गया