सबमिट बटन पर आपके ब्रांड का रंग बताता है कि क्लिक कहां करना है। वही रंग फ़ॉर्म लेबल पर टेक्स्ट को पढ़ने में मुश्किल बना देता है। आपका ब्रांड फ़ॉन्ट हेडलाइन में परिष्कृत दिखता है। वही फ़ॉन्ट फ़ील्ड लेबल में 12 पिक्सल पर पढ़ने लायक नहीं रहता। ब्रांडेड फ़ॉर्म डिज़ाइन में यही मुख्य खिंचाव है। जो चीज़ें आपके ब्रांड को पहचानने लायक बनाती हैं, वही आपके फ़ॉर्म को भरना मुश्किल बना सकती हैं।
रणनीति यह नहीं है कि अपना ब्रांड हटा दें। रणनीति है अपने ब्रांड को चुनिंदा जगह इस्तेमाल करना। ब्रांड का रंग वहां लगाएं जहां वह लोगों को एक्शन की ओर ले जाए। ब्रांड टाइपोग्राफ़ी वहां इस्तेमाल करें जहां वह पढ़ने लायक रहे। जहां ब्रांड की शख्सियत रुकावट बनती है, वहां उसे हटा दें। इस लेख में वे ख़ास फ़ैसले बताए गए हैं जिनसे आपका फ़ॉर्म ब्रांडेड भी रहे और इस्तेमाल करने लायक भी।
फ़ॉर्म में ब्रांड का रंग कहां लगाएं
आपका मुख्य ब्रांड रंग सबमिट बटन पर होना चाहिए। जब कोई फ़ॉर्म के अंत में पहुंचता है, तो उसे पता होना चाहिए कि क्लिक कहां करना है। आपके ब्रांड रंग का बटन तुरंत पहचान में आता है। उस व्यक्ति ने वह रंग आपकी वेबसाइट पर पहले ही देखा होता है। वह जानता है कि इसका मतलब एक्शन है। ब्रांडेड बटन संकेत देता है "यह आपके ब्रांड का है और क्लिक करना सुरक्षित है।"
फ़ॉर्म का बैकग्राउंड न्यूट्रल रखें। सफ़ेद, ऑफ़-व्हाइट या बहुत हल्का ग्रे। हल्के बैकग्राउंड पर फ़ॉर्म फ़ील्ड उभरते हैं और टेक्स्ट पढ़ने लायक रहता है। कई ब्रांड अपनी वेबसाइट पर गहरे बैकग्राउंड इस्तेमाल करते हैं। गहरा नेवी आपके हेडर में परिष्कृत लग सकता है। उसे फ़ॉर्म के बैकग्राउंड में लगाएं तो फ़ॉर्म फ़ील्ड के अंदर का सफ़ेद टेक्स्ट अचानक पढ़ना मुश्किल हो जाता है। लोग आंखें सिकोड़ते हैं। वे सोचते हैं कि फ़ॉर्म खराब है। फ़ॉर्म आपके ब्रांड की ताकत नहीं रहता, रुकावट बन जाता है।
फ़ील्ड के फ़ोकस स्टेट में ब्रांड का रंग हल्के से लगाएं। जब कोई किसी फ़ॉर्म फ़ील्ड पर क्लिक करता है, तो उस फ़ील्ड को विज़ुअल फ़ीडबैक चाहिए। कोई बॉर्डर दिखता है या बैकग्राउंड बदलता है ताकि पता चले कि फ़ील्ड चालू है। यहां अपने ब्रांड रंग का हल्का शेड इस्तेमाल करें। मुख्य रंग की पूरी गहराई नहीं। नरम वर्शन संकेत देता है कि फ़ील्ड चुना गया है, बिना फ़ॉर्म पर हावी हुए।
एरर मैसेज के लिए अलग रंग चाहिए। लाल मानक है। लोग लाल को "रुको" या "कुछ गलत है" के रूप में समझते हैं। एरर के लिए अपना ब्रांड रंग इस्तेमाल न करें, भले ही आपका ब्रांड लाल हो। अगर आपका ब्रांड लाल है, तो एरर के लिए ख़ास तौर पर ज़्यादा गहरा या ज़्यादा गाढ़ा शेड जोड़ें। इससे "सामान्य" और "एरर" के बीच ऐसा विज़ुअल फ़र्क बनता है जिसे लोग तुरंत पहचानते हैं।
सफलता के मैसेज हरे रंग में हो सकते हैं। हरा पूरा होने और आगे बढ़ने का संकेत देता है। इसे सब समझते हैं। किसी के फ़ॉर्म सबमिट करने के बाद हरे रंग में सक्सेस पेज या मैसेज पुष्टि जैसा लगता है।
फ़ॉर्म के अंदर लिंक का रंग आपका ब्रांड रंग होना चाहिए। लिंक से उम्मीद की जाती है कि वे रंग से उभरें। हेल्पर टेक्स्ट या समझाने वाले लिंक आपके ब्रांड से जुड़े लगने चाहिए पर फ़ॉर्म फ़ील्ड से साफ़ अलग।
ब्रांड कलर पैलेट में एक्सेसिबिलिटी की समस्या
कई ब्रांड कलर पैलेट WCAG AA कंट्रास्ट मानक पर फ़ेल होते हैं। हल्का पुदीना हरा रंग, जो आपकी ब्रांड गाइड में सुंदर दिखता है, सफ़ेद के सामने 2 से 1 का कंट्रास्ट रेशियो रख सकता है। WCAG AA 4.5 से 1 मांगता है। कोई परिष्कृत बैंगनी रंग आपके चुने हुए फ़ॉर्म फ़ील्ड बैकग्राउंड के सामने फ़ेल हो सकता है। यह आम बात है। और इसे ठीक भी किया जा सकता है।
फ़ॉर्म में अपने ब्रांड रंग इस्तेमाल करने से पहले उन्हें टेस्ट करें। कंट्रास्ट चेकर टूल इस्तेमाल करें। अगर आपका ब्रांड रंग WCAG AA पूरा नहीं करता, तो आपके पास विकल्प हैं। उस रंग का ज़्यादा गहरा या ज़्यादा गाढ़ा वर्शन इस्तेमाल करें। पुदीना हरे का आपके पैलेट में जंगल हरे जैसा कोई वैरिएंट हो सकता है जो रेशियो पूरा करता हो। या अपना ब्रांड रंग सिर्फ़ बटन पर एक्सेंट की तरह इस्तेमाल करें, जहां कंट्रास्ट स्वाभाविक रूप से ज़्यादा होता है। जिस टेक्स्ट को कंट्रास्ट चाहिए, उसके लिए चारकोल जैसा गहरा न्यूट्रल रंग इस्तेमाल करें।
यह लेबल के लिए ख़ास तौर पर ज़रूरी है। अगर आपके लेबल हल्के ब्रांड रंग में हैं, तो कम दिखने वाले व्यक्ति को दिक्कत होगी। तेज़ धूप में बाहर फ़ोन की स्क्रीन पर फ़ॉर्म देखने वाले को भी दिक्कत होगी। लेबल सजावट नहीं हैं। वे ज़रूरी जानकारी हैं। उन्हें गहरा और मज़बूत कंट्रास्ट वाला रखें। अपना ब्रांड रंग बटन और एक्सेंट के लिए बचाकर रखें, जहां पढ़ने में आसानी का नुकसान नहीं होता।
फ़ॉर्म को पढ़ने लायक रखने के लिए टाइपोग्राफ़ी कैसे चुनें
आपके ब्रांड का शायद कोई अलग टाइपफ़ेस होगा। सेरिफ़ फ़ॉन्ट लॉ फ़र्म के लिए परिष्कार का संकेत देते हैं। ज्यामितीय सैन्स-सेरिफ़ टेक कंपनियों के लिए आधुनिक लगते हैं। चंचल स्क्रिप्ट क्रिएटिव ब्रांड पर जमती हैं। ये फ़ॉन्ट कीमती ब्रांड एसेट हैं। ये लोगों को आपका ब्रांड पहचानने में मदद करते हैं। फ़ॉर्म में ये समस्याएं पैदा करते हैं।
फ़ॉर्म लेबल को छोटे साइज़ पर स्कैन करने और पढ़ने लायक होना चाहिए। ज़्यादातर सजावटी ब्रांड फ़ॉन्ट ऐसे नहीं होते। हाथ से लिखी जैसी स्क्रिप्ट फ़ॉन्ट 36 पिक्सल की हेडलाइन में सुंदर लगती है। फ़ॉर्म लेबल के लिए 13 पिक्सल पर वह लगभग पढ़ने लायक नहीं रहती। पतला ज्यामितीय फ़ॉन्ट बड़े साइज़ में सुरुचिपूर्ण दिखता है। 12 पिक्सल पर वह पढ़ने में मुश्किल हो जाता है। अलंकृत सेरिफ़ फ़ॉन्ट अपने सजावटी घुमावों से उस फ़ॉर्म फ़ील्ड में विज़ुअल शोर बनाता है जो साफ़ और काम की चीज़ होना चाहिए।
हल यह है कि फ़ॉर्म के सारे टेक्स्ट के लिए साफ़ सैन्स-सेरिफ़ फ़ॉन्ट इस्तेमाल करें। लेबल, हेल्पर टेक्स्ट, प्लेसहोल्डर टेक्स्ट, एरर मैसेज। सब सरल, पढ़ने लायक फ़ॉन्ट में हों। Arial, Helvetica, या कोई आधुनिक सिस्टम फ़ॉन्ट। इसका मतलब अपने ब्रांड को छोड़ना नहीं है। यह वहां साफ़गोई चुनना है जहां वह मायने रखती है। आपका ब्रांड आपके बटन के रंग, आपके लेआउट और आपके पूरे सौंदर्य में दिखता है। आपके फ़ॉर्म लेबल को ब्रांड पहचान का पूरा बोझ उठाने की ज़रूरत नहीं है।
अगर आपका ब्रांड साफ़, पढ़ने लायक सैन्स-सेरिफ़ इस्तेमाल करता है, तो उसे मोबाइल फ़ोन पर 12 से 14 पिक्सल पर टेस्ट करें। क्या आप उसे साफ़ पढ़ पाते हैं? अगर हां, तो आप उसे अपने फ़ॉर्म में इस्तेमाल कर सकते हैं। अगर नहीं, तो फ़ॉलबैक फ़ॉन्ट इस्तेमाल करें।
आपके सबमिट बटन का टेक्स्ट आपका ब्रांड फ़ॉन्ट इस्तेमाल कर सकता है अगर वह 14 से 16 पिक्सल पर पढ़ने लायक हो। बटन का टेक्स्ट लेबल के टेक्स्ट से बड़ा होता है। सजावटी फ़ॉन्ट को काम करने की ज़्यादा जगह मिलती है। पर अगर आपका ब्रांड फ़ॉन्ट लेबल के साइज़ पर फ़ेल होता है, तो वह फ़ॉर्म फ़ील्ड में भी फ़ेल होगा। पहले पढ़ने में आसानी चुनें, ब्रांड की शख्सियत बाद में।
जब टाइपोग्राफ़ी और रंग साथ काम करें तो विज़ुअल हायरार्की बनाना
फ़ॉर्म में विज़ुअल हायरार्की व्यक्ति को ऊपर से नीचे ले जाती है। कौन-से एलिमेंट सबसे अहम हैं? कौन-से दूसरे दर्जे के हैं? फ़ॉर्म में हायरार्की सरल और ख़ास होती है। फ़ील्ड लेबल प्राथमिक हैं। हेल्पर टेक्स्ट द्वितीयक है। सबमिट बटन कॉल टू एक्शन है।
इस हायरार्की को सहारा देने के लिए फ़ॉन्ट साइज़ इस्तेमाल करें। लेबल 13 से 16 पिक्सल के होने चाहिए। हेल्पर टेक्स्ट छोटा और रंग में थोड़ा हल्का होना चाहिए, लगभग 12 पिक्सल। एरर मैसेज उतने ही पढ़ने लायक होने चाहिए जितने लेबल। एरर टेक्स्ट को छोटा या हल्का न बनाएं। लोगों को एरर तुरंत दिखनी चाहिए। एरर टेक्स्ट को उतना ही उभरा रखें जितना उस लेबल को जिसे वह सुधार रहा है।
आपका ब्रांड रंग इस हायरार्की को सहारा देता है। सबमिट बटन आपका मुख्य ब्रांड रंग है और फ़ील्ड लेबल से साफ़ अलग दिखता है। अकेला रंग ही यूज़र को बता देता है "अगला काम यही है।" लेबल गहरे और न्यूट्रल होने चाहिए। लेबल में कोई भी ब्रांड रंग हल्का और पढ़ने में आसानी के बाद आना चाहिए।
लंबे फ़ॉर्म में सेक्शन हेडर आपका ब्रांड रंग इस्तेमाल कर सकते हैं। इससे फ़ील्ड समूहों के बीच विज़ुअल ब्रेक बनता है। सेक्शन हेडर इनपुट फ़ील्ड नहीं है। उसमें लेबल से ज़्यादा अभिव्यक्ति की गुंजाइश है। उस गुंजाइश का इस्तेमाल करें, और लेबल को साफ़ और पढ़ने लायक रखें।
ब्रांड की शख्सियत कब लगाएं और कब हटाएं
फ़ॉर्म एक औज़ार है जिससे कोई व्यक्ति कुछ पूरा करने की कोशिश कर रहा है। वह फ़ॉर्म में तेज़ी से आगे बढ़ना चाहता है। हर डिज़ाइन फ़ैसले को या तो इसमें मदद करनी चाहिए या गायब हो जाना चाहिए।
ब्रांड की शख्सियत उन जगहों पर है जहां वह भरोसा बढ़ाती है। आपके फ़ॉर्म की कुल विज़ुअल क्वालिटी, फ़ील्ड के बीच की जगह, रंगों और टाइपोग्राफ़ी की एकरूपता, सब संकेत देते हैं कि आपका ब्रांड बारीकियों की परवाह करता है। निखरा, प्रोफ़ेशनल दिखने वाला फ़ॉर्म निखरे, प्रोफ़ेशनल ब्रांड का होता है। यही ब्रांड की शख्सियत का काम है। यह लोगों को आप पर भरोसा करने में मदद करती है।
ब्रांड की शख्सियत उन जगहों पर नहीं है जहां वह रुकावट बनती है। लेबल ALL-CAPS में न रखें क्योंकि वह ज़्यादा रौबदार लगता है। गहरे बैकग्राउंड पर बहुत हल्का टेक्स्ट न रखें क्योंकि वह ज़्यादा परिष्कृत लगता है। ज़्यादा टेक्स्ट समाने के लिए पतला, अलंकृत टाइपफ़ेस न इस्तेमाल करें क्योंकि वह आपके ब्रांड सौंदर्य से मेल खाता है। ये फ़ैसले इस्तेमाल में आसानी को नुकसान पहुंचाते हैं। ये लोगों को धीमा करते हैं। फ़ॉर्म डिज़ाइन उन गिनी-चुनी जगहों में से है जहां ब्रांड को कहना पड़ता है "मेरा सौंदर्य इस काम को पूरा करने में लोगों की मदद के पीछे आता है।"
अपने ब्रांड डिज़ाइन के फ़ैसलों को मोबाइल फ़ोन पर टेस्ट करें। अगर आपकी ब्रांड शख्सियत के फ़ैसले छोटी स्क्रीन पर फ़ॉर्म को भरना मुश्किल बनाते हैं, तो वे कोई वैल्यू नहीं जोड़ रहे। उन्हें हटा दें। फ़ॉर्म को तब तक सादा करें जब तक वह फ़ोन पर आसान न लगे। फिर ऐसे ब्रांड फ़ैसले लगाएं जो उस आसानी में दखल न दें।
आपके अलग-अलग फ़ॉर्म प्रकारों में एकरूपता कैसे काम करती है
किसी ब्रांड के अलग-अलग तरह के फ़ॉर्म हो सकते हैं। कॉन्टैक्ट फ़ॉर्म छोटा और बातचीत जैसा होता है। चेकआउट फ़ॉर्म लंबा और ज़्यादा संरचित। सर्वे खोजबीन वाला। न्यूज़लेटर साइनअप न्यूनतम। हर एक का मकसद अलग है। पर हर एक को उसी ब्रांड का दिखना और लगना चाहिए।
मूल विज़ुअल भाषा हर फ़ॉर्म में एक जैसी रहनी चाहिए। सबमिट बटन हमेशा आपके मुख्य ब्रांड रंग का हो। लेबल हमेशा उसी पढ़ने लायक फ़ॉन्ट में हों। फ़ील्ड की स्पेसिंग एक ही पैटर्न पर चले। जब कोई कॉन्टैक्ट फ़ॉर्म से चेकआउट फ़ॉर्म और फिर सर्वे पर जाए, तो उसे लगे कि वह एक ही ब्रांड अनुभव में है, भले ही फ़ॉर्म का मकसद अलग हो।
फ़ॉर्म स्टाइल गाइड बनाएं और अपने फ़ैसले दर्ज करें। लेबल का फ़ॉन्ट 14 पिक्सल का Open Sans है। मुख्य बटन का रंग आपका Pantone नंबर है। फ़ील्ड फ़ोकस स्टेट आपके ब्रांड रंग का यह ख़ास हल्का शेड है। हेल्पर टेक्स्ट 12 पिक्सल का ग्रे है। जब ये फ़ैसले दर्ज हों, तो आपकी टीम का बनाया हर फ़ॉर्म एक जैसा लगेगा। फ़ॉर्म बनाना तेज़ भी हो जाता है क्योंकि फ़ैसले पहले से तय हैं।
WEMASY में ब्रांडेड फ़ॉर्म बनाना
WEMASY में फ़ॉर्म टूल है, जिससे आप अपनी वेबसाइट पर फ़ॉर्म बना सकते हैं।
अपने ब्रांड का रंग बटन पर रखें और लेबल को पढ़ने लायक रखें। जो डिज़ाइन फ़ैसले आपने लिए, उन्हें हर फ़ॉर्म में एक जैसा रखें।
बटन या एक्सेंट के लिए ब्रांड रंग चुनते समय कंट्रास्ट ज़रूर जांचें, ताकि आपका ब्रांडेड फ़ॉर्म अलग भी दिखे और सबके लिए पढ़ने लायक भी रहे।
अपने WEMASY प्लान में कौन-से फ़ॉर्म फ़ीचर शामिल हैं, यह देखें।