स्क्वेयरस्पेस पर स्विचिंग: अपना भाषा बटन कैसे डिज़ाइन करें

तो आपने अपनी Squarespace साइट को बहुभाषी बना दिया है। शाबाश, बधाई, मबरूक - हमें यह देखकर बहुत खुशी हुई!

अब क्या ?

आपने देखा होगा कि हम हाल ही में स्क्वेयरस्पेस के बारे में बहुत बात कर रहे हैं, और ऐसा इसलिए है क्योंकि हमारे बहुत से ग्राहक इसका उपयोग कर रहे हैं (यहां तक कि ई-कॉमर्स के लिए भी) - और यह वास्तव में बहुत अच्छा काम कर रहा है।

सर्वश्रेष्ठ Weglot हमने जिन स्क्वेयरस्पेस साइटों को देखा है, वे वे हैं जो अपनी साइटों के सूक्ष्म विवरणों को परिष्कृत करते रहे हैं, विशेष रूप से "अब क्या" पूछने के बाद।

उपयोग करने के लाभों में से एक Weglot आपके भाषा-स्विच बटन डिज़ाइन में लचीलापन है। जैसा कि ज़्यादातर वेब डिज़ाइनर आपको बताएँगे, किसी पेज पर इम्पोर्टेड एलिमेंट्स—प्लगइन्स, ऐड-ऑन्स या अन्य ऐप कंपोनेंट्स—के लुक और फील पर पूरा नियंत्रण होना एक दुर्लभ विलासिता है।

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

Weglot यह उस तरह से काम नहीं करता—या कम से कम, ऐसा होना ज़रूरी नहीं है। जब आप इंस्टॉल करते हैं Weglot अपनी स्क्वेयरस्पेस साइट पर, आपको प्रारंभ में एक भाषा-स्विच बटन दिखाई देगा जो आपके पृष्ठ के निचले दाएं कोने पर इस तरह दिखता है:

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

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

लेकिन यदि आप अपने सुंदर, साफ-सुथरे आयत को देख रहे हैं और फिर भी संतुष्ट नहीं हैं, तो आपको उम्मीद खोने की जरूरत नहीं है।

मुझे अपना बटन कहां लगाना चाहिए?

"बटन प्लेसमेंट" की पूरी अवधारणा तुच्छ लग सकती है, लेकिन सोचें कि आप प्रतिदिन कितने बटन दबाते हैं। इसमें स्मार्टफोन कीबोर्ड की कुंजियाँ भी शामिल हैं, बच्चों; यह 2019 है और हमारी उंगलियाँ शायद साबुन और पानी से ज़्यादा बटनों के संपर्क में आती हैं ( घृणित, लेकिन सच )। मुद्दा यह है कि बटन हर जगह हैं।

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

पक्ष मायने रखता है.

हां, आपने सही पढ़ा। हां, आकार भी मायने रखता है - एक छोटा सा बटन विशेष रूप से दिखाई देने की संभावना नहीं है, और इसलिए क्लिक होने की संभावना भी कम है।

लेकिन वेब डिज़ाइन मूल रूप से एक स्थानिक पहेली है, और, अगर हम इसे एक गेम के रूप में सोच रहे हैं, तो आपका प्लेइंग बोर्ड दो मुख्य अक्षों के साथ 2-आयामी आयत तक सीमित है - बाएं-दाएं और ऊपर-नीचे, या "x" और "y", यदि आप चाहें तो - और एक वेबसाइट का पूरा बिंदु यह है कि इसमें बहुत सारी जानकारी हो सकती है। आप अपने सभी लिंक, चित्र, वीडियो और अन्य मज़ेदार इंटरैक्टिव तत्वों को इस विवश स्थान में कैसे फिट कर सकते हैं - और सबसे महत्वपूर्ण लोगों को दूसरों से दूर किए बिना खड़ा कर सकते हैं?

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

तो आप पूछेंगे कि शोध वास्तव में क्या कहता है?

इसमें कोई आश्चर्य की बात नहीं है कि उपयोगकर्ता की मूल भाषा - या कम से कम वह भाषा जिसमें वे वेब ब्राउज़ करने के आदी हैं - का इस बात पर महत्वपूर्ण प्रभाव पड़ता है कि वे वेबपेजों के साथ किस प्रकार इंटरैक्ट करते हैं।

मटीरियल डिज़ाइन के UI-UX डिज़ाइन विशेषज्ञों ने इस बारे में एक गहन मार्गदर्शिका जारी की है कि वेबपेज के किन तत्वों को बाएँ से दाएँ (उदाहरण के लिए अंग्रेज़ी की तरह LTR) और दाएँ से बाएँ (उदाहरण के लिए अरबी या हिब्रू की तरह RTL) पढ़ने वाली भाषाओं के बीच समायोजित किया जाना चाहिए (और किन तत्वों को नहीं )।

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

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

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

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

बेशक, यदि आप अपनी प्रारंभिक साइट किसी RTL भाषा में बना रहे हैं - जैसे अरबी, हिब्रू, या फ़ारसी - तो आप इसके विपरीत करना चाहेंगे, और उस बटन को बाईं ओर रखना चाहेंगे।

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

लेकिन क्या मैं मेनू देख सकता हूँ?

आप अभी भी सोच रहे होंगे कि इसे "प्राथमिक ऑप्टिकल क्षेत्र" क्षेत्र में क्यों नहीं रखा गया? - और यह एक वैध प्रश्न है।

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

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

स्क्वेयरस्पेस पर मेनू बटन: स्टाइलाइज़, सिंथेसाइज़, और स्थानीयकृत करें

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

अपने साइट एडिटर में, आप “पेज” पर क्लिक कर सकते हैं, जो आपको एक साइडबार पर ले जाएगा जो कुछ इस तरह दिखता है:

"मुख्य नेविगेशन" शीर्षक के आगे "+" चिह्न पर क्लिक करके, आप अपने मुख्य हेडर मेनू में लिंक और/या ड्रॉपडाउन मेनू जोड़ सकेंगे।

चाहे आप अपनी साइट की उपलब्ध भाषाओं को मुख्य मेनू पर प्रत्यक्ष विकल्प के रूप में शामिल करना चाहें...

…या, बल्कि, एक एकीकृत ड्रॉप-डाउन मेनू के तत्वों के रूप में…

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

एक बार जब आप अपने मुख्य मेनू बार या एकीकृत ड्रॉप-डाउन मेनू में लिंक जोड़ने का विकल्प चुनते हैं, तो आपको एक पॉप-अप दिखाई देगा जो इस तरह दिखता है:

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

इसके बाद, आपको वह लिंक डालना होगा जिस पर आप इस शीर्षक को ले जाना चाहते हैं। चूँकि आपका Weglot -अनुवादित स्क्वेयरस्पेस साइट में सबफ़ोल्डर्स में डुप्लिकेट पेज नहीं होते, बल्कि हर भाषा के लिए अलग-अलग सबडोमेन होते हैं, इसलिए आप वास्तव में किसी अलग URL से लिंक नहीं करेंगे। इसके बजाय, स्ट्रिंग "#" दर्ज करें। Weglot -” के बाद उस भाषा के लिए दो-अक्षर का ISO भाषा कोड लिखें जिस पर आप काम कर रहे हैं (हमारे पास यहां उनकी पूरी सूची है )।

एक बार जब आप यह काम पूरा कर लेंगे, तो आप देखेंगे कि आपकी भाषा के शीर्षक आपके मुख्य मेनू में पूरी तरह से एकीकृत हो गए हैं...

…इन लोगों की तरह.

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

बेशक, इससे आपको अपनी साइट के स्वरूप को निजीकृत करने और उसे वास्तव में अपना बनाने के प्रयास से नहीं रोकना चाहिए।

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

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

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

सिकु परियोजना

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

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

अभियान तैराकी

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

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

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

सेल्सकैंडी

सास स्टार्टअप सेल्सकैंडी मलेशिया में स्थित है, जो मूल रूप से बहुसांस्कृतिक और स्वाभाविक रूप से बहुभाषी समाज है। इस तरह के कारोबारी माहौल में बहुभाषी साइट का होना एक परम आवश्यकता है, और सेल्सकैंडी ने प्रत्येक पाठक की अपनी मूल भाषा तक पहुँच को सुविधाजनक बनाने के लिए कुछ पूर्व विचार किए हैं।

उन्होंने यह कैसे किया? दो बातें खास हैं: क) उनका भाषा ड्रॉपडाउन मेनू (हां, हम इस पर पर्याप्त जोर नहीं दे सकते) पृष्ठ के दाईं ओर अच्छी तरह से स्थित है, और ख) भाषा विकल्प मूल रूप से लिखे गए हैं - यानी, इस तरह:

क्या आप प्रेरित महसूस कर रहे हैं?

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