कॉल टू एक्शन बटन दिशानिर्देश, सर्वश्रेष्ठ अभ्यास और उदाहरण

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

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

"कॉल टू एक्शन" बटन का उद्देश्य

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

क्योंकि कॉल टू एक्शन बटन के ऐसे विभिन्न उद्देश्य हैं, बहुत सारे विचार में जाना पड़ता है कि बटन का लक्ष्य क्या है। साइट का प्रकार, लक्ष्य बाजार, और वांछित कार्रवाई सभी एक भूमिका निभा सकते हैं कि कॉल बटन को एक्शन बटन को कैसे डिज़ाइन किया जाए.

"कॉल टू एक्शन" बटन के प्रकार

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

1. कार्ट बटन में जोड़ें

ई-कॉमर्स साइटें आमतौर पर कई कॉल टू एक्शन बटन का उपयोग करती हैं, लेकिन सबसे ज्यादा इस्तेमाल किया जाने वाला है “कार्ट में डालें” बटन। ये बटन आम तौर पर व्यक्तिगत उत्पाद पृष्ठों पर दिखाई देते हैं। उनका उद्देश्य किसी वस्तु को खरीदने के लिए ग्राहकों को लुभाना है। ऐड टू कार्ट बटन में आम डिज़ाइन तत्वों में सरल शब्दांकन शामिल हैं (जैसे कि “कार्ट में डालें” या “झोले में डालो” या “अभी खरीदें“) और आइकन का उपयोग (आमतौर पर एक बैग या गाड़ी).

2. बटन डाउनलोड करें

डाउनलोड बटन कार्ट बटन जोड़ने के लिए समान हैं, जिसमें वे किसी वस्तु को कब्जे में लेने के लिए आगंतुक को लुभाने की कोशिश कर रहे हैं। डाउनलोड बटन के मामले में, कई डिजाइनर अन्य प्रकार के बटन (जैसे संस्करण की जानकारी या डाउनलोड आकार) से अधिक जानकारी शामिल करने का विकल्प चुनते हैं.

3. परीक्षण बटन

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

4. अधिक बटन जानें

अधिक जानें बटन आमतौर पर टीज़र जानकारी के एक ब्लॉक के अंत में उपयोग किया जाता है (अक्सर होम पेज पर)। ये बटन आमतौर पर सरल होते हैं, लेकिन अक्सर आगंतुक का ध्यान आकर्षित करने के लिए ओवरसाइज़ किया जाता है.

5. बटन साइन अप करें

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

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

प्रभावी रूप से नकारात्मक स्थान का उपयोग करना

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

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

कुछ दिशानिर्देश:

• सुनिश्चित करें कि आपके बटन के चारों ओर पर्याप्त जगह है ताकि यह अव्यवस्थित महसूस न करे
• तिहाई का नियम या गोल्डन रेशियो जैसे सिद्धांतों पर विचार करें कि कितना स्थान शामिल करना है
• नकारात्मक स्थान आपके कॉल को एक्शन बटन रूम में आपकी अन्य सामग्री से अलग करने के लिए देता है और इसे अलग करता है

आकार और रंग

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

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

कुछ दिशानिर्देश:

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

भाषा

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

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

अपने फ़ॉन्ट आकार को भी न भूलें। आपके कॉल टू एक्शन बटन का टेक्स्ट बड़ा और बोल्ड होना चाहिए, जो बटन के आकार और रंग के अनुकूल हो। सुनिश्चित करें कि पर्याप्त कंट्रास्ट है और पाठ को पढ़ना आसान है.

कुछ दिशानिर्देश:

• सरल, सीधी भाषा का प्रयोग करें
• मुख्य पाठ के लिए बटन पर एक बड़े, बोल्ड फ़ॉन्ट का उपयोग करें
• सुनिश्चित करें कि भाषा विशिष्ट कार्रवाई के लिए स्पष्ट रूप से कॉल करती है

आग्रह पैदा करो

आप चाहते हैं कि आपकी साइट पर विज़िटर वांछित कार्रवाइयों को यथासंभव कम सोचे। जब आप अपने आगंतुकों को धोखा नहीं देना चाहते हैं, तो आप उन्हें रोकने और विचार करने के लिए जितने अधिक अवसर देंगे, वे उतना ही अधिक अवसर देंगे, जितना अधिक अवसर आप उन्हें कहने के लिए दे रहे हैं। “नहीं”.

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

कुछ दिशानिर्देश:

• अपने आगंतुकों को तुरंत कार्य करने के लिए प्रोत्साहित करें
• अपने आगंतुकों को विराम देने का कोई कारण न दें
• जबकि तात्कालिकता महत्वपूर्ण है, अपने आगंतुकों को किसी भी तरह से गुमराह न करें

अतिरिक्त जानकारी प्रदान करें

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

जब अतिरिक्त जानकारी शामिल हो, तो याद रखें कि आपको वास्तविक कॉल टू एक्शन पर ध्यान केंद्रित रखने की आवश्यकता है। यह सुनिश्चित करें कि आगंतुकों को कार्य करने के लिए भाषा को लुभाने वाला पाठ सबसे प्रमुख है, जिसमें अन्य जानकारी बहुत कम दिखाई देती है.

कुछ दिशानिर्देश:

• उपयोगकर्ता अनुभव में जुड़ने पर केवल अतिरिक्त जानकारी शामिल करें
• कुछ प्रकार के कॉल टू एक्शन बटन पर अतिरिक्त जानकारी केवल उचित है, सबसे विशेष रूप से डाउनलोड या ट्रायल बटन
• सुनिश्चित करें कि कार्रवाई का मुख्य कॉल अभी भी आपके बटन पर सबसे प्रमुख पाठ है

प्राथमिकता

यदि आपके पेज पर एक से अधिक हैं तो कॉल टू एक्शन बटन को प्राथमिकता देना महत्वपूर्ण है। यह कई तरीकों से किया जा सकता है, लेकिन रंग और आकार के उपयोग के माध्यम से सबसे आम हैं.

एक पृष्ठ पर सबसे महत्वपूर्ण बटन को उजागर करने के लिए रंग का उपयोग करें, या कम महत्वपूर्ण लोगों को कम प्रमुख प्रतीत होता है। या सबसे महत्वपूर्ण बटन को खड़ा करने के लिए आकार का उपयोग करें (इसे बड़ा करके) और कम-महत्वपूर्ण लोगों पर जोर देना.

प्रतीक और चित्र

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

कुछ दिशानिर्देश:

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

उदाहरण

यहाँ कुछ है कार्रवाई बटन के लिए महान कॉल के उदाहरण. जबकि वे सभी उपरोक्त दिशानिर्देशों के अनुरूप नहीं हैं, वे महान मानने के लिए पर्याप्त मानदंडों को पूरा करते हैं.

लाइव स्ट्रीम - "अभी खरीदें" (सशुल्क विकल्पों के लिए) और "साइन अप" (मुक्त विकल्पों के लिए) बटन को अलग करना एक अच्छी रणनीति है.

विंडोज 7 - विज़िटर के लिए बड़ा, हरा "Get Windows7" ​​बटन आसान है.

फाइलशेयर मुख्यालय - यहां हरे रंग का चमकीला बटन वास्तव में सफेद पृष्ठभूमि के खिलाफ है.

कार्यपंजी - "डाउनलोड" और "खरीदें" बटन के लिए अलग-अलग रंगों का उपयोग करना उन्हें अलग करता है और "खरीदें" बटन को प्राथमिकता देता है.

TasteBook - यह बटन एक आइकन का बहुत उपयोग करता है और बाहर खड़े होने के लिए बड़े, बोल्ड टेक्स्ट का उपयोग करता है.

GoodBarry - कार्रवाई बटन के लिए एक और उज्ज्वल ग्रीन कॉल.

लाइफट्री क्रिएटिव - एक ही टाइपफेस को बॉडी कॉपी से कॉल टू एक्शन बटन पर जारी रखने से सामंजस्य की भावना पैदा होती है.

फिर से शुरू करनेवाला - बोल्ड प्रकार के साथ एक उज्ज्वल लाल कॉल टू एक्शन बटन नीले रंग की पृष्ठभूमि के खिलाफ बाहर खड़ा है.

Notepod - कॉल बटन से एक्शन बटन में अतिरिक्त जानकारी शामिल करने का एक अच्छा उदाहरण है.

Inkd - आकार के साथ प्राथमिकता वाले बटन का एक बड़ा उदाहरण.

सुरुचिपूर्ण थीम्स - आसपास के डिजाइन तत्वों के साथ टकराव के बिना बाहर खड़े होने के लिए रंग का उपयोग करने का एक और उत्कृष्ट उदाहरण है.

Zendesk - रंग का उपयोग करके एक बटन बनाने का एक और बढ़िया उदाहरण है.

Storenvy - एक गोल बटन अप्रत्याशित है और बाहर खड़ा है, खासकर जब एक सफेद सीमा से घिरा हुआ है.

Bara'Mail - कभी-कभी एक बटन जो आपके समग्र साइट डिज़ाइन में बेहतर काम करता है, खासकर जब कार्रवाई कम जरूरी हो.

और अधिक संसाधनों

• एक्शन बटन्स को कॉल करें: उदाहरण और सर्वश्रेष्ठ अभ्यास - पत्रिका को नष्ट करने से
• अच्छा कॉल-टू-एक्शन बटन - यूएक्स बूथ से
• कॉल टू एक्शन बटन: क्या साइज मैटर करता है? - लोचदार से प्राप्त करें
• एक प्रभावी के लिए 10 तकनीक “कार्यवाई के लिए बुलावा” - Boagworld से
• एक्शन बटन के लिए एक प्रभावी कॉल बनाने के लिए 5 युक्तियाँ - SitePoint से