विकेंद्रीकृत एक्सचेंज (DEX) डिज़ाइन की सर्वोत्तम प्रथाएँ
2018 में यूनिस्वैप (Uniswap) के लॉन्च के बाद से, दर्जनों विभिन्न चेन पर सैकड़ों विकेंद्रीकृत एक्सचेंज लॉन्च किए गए हैं। इनमें से कई ने नए तत्व पेश किए या अपना खुद का ट्विस्ट जोड़ा, लेकिन इंटरफ़ेस आम तौर पर समान ही रहा है।
इसका एक कारण जैकब का नियम (Jakob’s Law) (opens in a new tab) है:
उपयोगकर्ता अपना अधिकांश समय अन्य साइटों पर बिताते हैं। इसका मतलब है कि उपयोगकर्ता चाहते हैं कि आपकी साइट भी उसी तरह काम करे जैसे वे अन्य सभी साइटें करती हैं जिन्हें वे पहले से जानते हैं।
यूनिस्वैप, Pancakeswap और Sushiswap जैसे शुरुआती इनोवेटर्स को धन्यवाद, विकेंद्रीकृत वित्त (DeFi) उपयोगकर्ताओं को सामूहिक रूप से यह विचार है कि एक DEX कैसा दिखता है। इस कारण से, अब "सर्वोत्तम प्रथा" जैसी कोई चीज़ उभर रही है। हम देखते हैं कि साइटों पर अधिक से अधिक डिज़ाइन निर्णयों को मानकीकृत किया जा रहा है। आप DEX के विकास को लाइव परीक्षण के एक विशाल उदाहरण के रूप में देख सकते हैं। जो चीज़ें काम कर गईं वे रह गईं, जो नहीं कर पाईं, उन्हें बाहर कर दिया गया। अभी भी व्यक्तित्व के लिए जगह है, लेकिन कुछ निश्चित मानक हैं जिनका एक DEX को पालन करना चाहिए।
यह लेख निम्नलिखित का सारांश है:
- क्या शामिल करें
- इसे यथासंभव उपयोग करने योग्य कैसे बनाएं
- डिज़ाइन को कस्टमाइज़ करने के मुख्य तरीके
सभी उदाहरण वायरफ्रेम विशेष रूप से इस लेख के लिए बनाए गए थे, हालांकि वे सभी वास्तविक प्रोजेक्ट्स पर आधारित हैं।
Figma किट भी नीचे शामिल है - बेझिझक इसका उपयोग करें और अपने स्वयं के वायरफ्रेम को गति दें!
एक DEX की बुनियादी संरचना
UI में आम तौर पर तीन तत्व होते हैं:
- मुख्य फॉर्म
- बटन
- विवरण पैनल
विविधताएँ (Variations)
यह इस लेख में एक सामान्य विषय होगा, लेकिन इन तत्वों को व्यवस्थित करने के विभिन्न तरीके हैं। "विवरण पैनल" हो सकता है:
- बटन के ऊपर
- बटन के नीचे
- एक एकॉर्डियन पैनल में छिपा हुआ
- और/या "पूर्वावलोकन (preview)" मोडल पर
ध्यान दें: एक "पूर्वावलोकन" मोडल वैकल्पिक है, लेकिन यदि आप मुख्य UI पर बहुत कम विवरण दिखा रहे हैं, तो यह आवश्यक हो जाता है।
मुख्य फॉर्म की संरचना
यह वह बॉक्स है जहाँ आप वास्तव में चुनते हैं कि आप किस टोकन को स्वैप करना चाहते हैं। इस घटक में एक पंक्ति में एक इनपुट फ़ील्ड और एक छोटा बटन होता है।
DEX आमतौर पर ऊपर एक पंक्ति और नीचे एक पंक्ति में अतिरिक्त विवरण प्रदर्शित करते हैं, हालांकि इसे अलग तरीके से कॉन्फ़िगर किया जा सकता है।
विविधताएँ
यहाँ दो UI विविधताएँ दिखाई गई हैं; एक बिना किसी बॉर्डर के, जो एक बहुत ही खुला डिज़ाइन बनाता है, और दूसरा जहाँ इनपुट पंक्ति में एक बॉर्डर है, जो उस तत्व पर ध्यान केंद्रित करता है।
यह बुनियादी संरचना डिज़ाइन में जानकारी के चार प्रमुख हिस्सों को दिखाने की अनुमति देती है: प्रत्येक कोने में एक। यदि केवल एक ऊपर/नीचे की पंक्ति है, तो केवल दो स्थान होते हैं।
विकेंद्रीकृत वित्त (DeFi) के विकास के दौरान, यहाँ कई अलग-अलग चीज़ें शामिल की गई हैं।
शामिल करने के लिए प्रमुख जानकारी
- वॉलेट में बैलेंस
- अधिकतम (Max) बटन
- फिएट समतुल्य
- "प्राप्त" राशि पर मूल्य प्रभाव
DeFi के शुरुआती दिनों में, फिएट समतुल्य अक्सर गायब रहता था। यदि आप किसी भी प्रकार का Web3 प्रोजेक्ट बना रहे हैं, तो यह आवश्यक है कि एक फिएट समतुल्य दिखाया जाए। उपयोगकर्ता अभी भी स्थानीय मुद्राओं के संदर्भ में सोचते हैं, इसलिए वास्तविक दुनिया के मानसिक मॉडल से मेल खाने के लिए, इसे शामिल किया जाना चाहिए।
दूसरे फ़ील्ड पर (वह जहाँ आप वह टोकन चुनते हैं जिसे आप स्वैप कर रहे हैं) आप इनपुट राशि और अनुमानित आउटपुट राशियों के बीच के अंतर की गणना करके, फिएट मुद्रा राशि के बगल में मूल्य प्रभाव भी शामिल कर सकते हैं। यह शामिल करने के लिए काफी उपयोगी विवरण है।
प्रतिशत बटन (उदा., 25%, 50%, 75%) एक उपयोगी विशेषता हो सकते हैं, लेकिन वे अधिक स्थान लेते हैं, अधिक कॉल टू एक्शन जोड़ते हैं, और अधिक मानसिक भार बढ़ाते हैं। प्रतिशत स्लाइडर्स के साथ भी ऐसा ही है। इनमें से कुछ UI निर्णय आपके ब्रांड और आपके उपयोगकर्ता प्रकार पर निर्भर करेंगे।
अतिरिक्त विवरण मुख्य फॉर्म के नीचे दिखाए जा सकते हैं। चूँकि इस प्रकार की जानकारी ज्यादातर प्रो उपयोगकर्ताओं के लिए होती है, इसलिए यह समझ में आता है कि या तो:
- इसे यथासंभव न्यूनतम रखें, या;
- इसे एक एकॉर्डियन पैनल में छिपा दें
शामिल करने के लिए अतिरिक्त जानकारी
- टोकन की कीमत
- स्लिपेज
- न्यूनतम प्राप्त
- अपेक्षित आउटपुट
- मूल्य प्रभाव
- गैस लागत का अनुमान
- अन्य शुल्क
- ऑर्डर रूटिंग
यकीनन, इनमें से कुछ विवरण वैकल्पिक हो सकते हैं।
ऑर्डर रूटिंग दिलचस्प है, लेकिन अधिकांश उपयोगकर्ताओं के लिए इससे कोई खास फर्क नहीं पड़ता है।
कुछ अन्य विवरण केवल एक ही बात को अलग-अलग तरीकों से दोहरा रहे हैं। उदाहरण के लिए "न्यूनतम प्राप्त" और "स्लिपेज" एक ही सिक्के के दो पहलू हैं। यदि आपने स्लिपेज 1% पर सेट किया है, तो आप न्यूनतम प्राप्त करने की उम्मीद कर सकते हैं = अपेक्षित आउटपुट-1%। कुछ UI अपेक्षित राशि, न्यूनतम राशि और स्लिपेज दिखाएंगे... जो उपयोगी है लेकिन संभवतः आवश्यकता से अधिक है।
वैसे भी अधिकांश उपयोगकर्ता डिफ़ॉल्ट स्लिपेज ही छोड़ देंगे।
"मूल्य प्रभाव" अक्सर "to" फ़ील्ड में फिएट समतुल्य के बगल में कोष्ठक में दिखाया जाता है। यह जोड़ने के लिए एक बेहतरीन UX विवरण है, लेकिन अगर इसे यहाँ दिखाया गया है, तो क्या वास्तव में इसे नीचे फिर से दिखाने की आवश्यकता है? और फिर से पूर्वावलोकन स्क्रीन पर?
कई उपयोगकर्ता (विशेष रूप से वे जो छोटी मात्रा में स्वैप कर रहे हैं) इन विवरणों की परवाह नहीं करेंगे; वे बस एक संख्या दर्ज करेंगे और स्वैप दबाएंगे।
वास्तव में कौन से विवरण दिखाए जाते हैं यह आपके दर्शकों पर निर्भर करेगा और आप ऐप को कैसा महसूस कराना चाहते हैं।
यदि आप विवरण पैनल में स्लिपेज टॉलरेंस शामिल करते हैं, तो आपको इसे सीधे यहीं से संपादन योग्य भी बनाना चाहिए। यह एक "एक्सेलरेटर" का एक अच्छा उदाहरण है; एक साफ-सुथरी UX ट्रिक जो ऐप की सामान्य उपयोगिता को प्रभावित किए बिना अनुभवी उपयोगकर्ताओं के प्रवाह को गति दे सकती है।
केवल एक स्क्रीन पर जानकारी के एक विशिष्ट हिस्से के बारे में ही नहीं, बल्कि पूरे प्रवाह के बारे में सावधानीपूर्वक सोचना एक अच्छा विचार है: मुख्य फॉर्म में संख्याएँ दर्ज करना → विवरण स्कैन करना → पूर्वावलोकन स्क्रीन पर क्लिक करना (यदि आपके पास पूर्वावलोकन स्क्रीन है)। क्या विवरण पैनल हर समय दिखाई देना चाहिए, या उपयोगकर्ता को इसे विस्तारित करने के लिए क्लिक करने की आवश्यकता है? क्या आपको पूर्वावलोकन स्क्रीन जोड़कर घर्षण (friction) पैदा करना चाहिए? यह उपयोगकर्ता को धीमा होने और अपने ट्रेड पर विचार करने के लिए मजबूर करता है, जो उपयोगी हो सकता है। लेकिन क्या वे वही सारी जानकारी फिर से देखना चाहते हैं? इस बिंदु पर उनके लिए सबसे उपयोगी क्या है?
डिज़ाइन विकल्प
जैसा कि उल्लेख किया गया है, इसमें से बहुत कुछ आपकी व्यक्तिगत शैली पर निर्भर करता है आपका उपयोगकर्ता कौन है? आपका ब्रांड क्या है? क्या आप हर विवरण दिखाने वाला एक "प्रो" इंटरफ़ेस चाहते हैं, या आप न्यूनतम (minimalist) होना चाहते हैं? भले ही आप उन प्रो उपयोगकर्ताओं को लक्षित कर रहे हों जो हर संभव जानकारी चाहते हैं, फिर भी आपको एलन कूपर के बुद्धिमान शब्दों को याद रखना चाहिए:
आपका इंटरफ़ेस कितना भी सुंदर क्यों न हो, कितना भी शानदार क्यों न हो, यह बेहतर होगा यदि यह कम हो।
संरचना
- बाईं ओर टोकन, या दाईं ओर टोकन
- 2 पंक्तियाँ या 3
- बटन के ऊपर या नीचे विवरण
- विवरण विस्तारित, न्यूनतम, या नहीं दिखाए गए
घटक शैली
- खाली
- आउटलाइन किया हुआ
- भरा हुआ
शुद्ध UX दृष्टिकोण से, UI शैली आपके विचार से कम मायने रखती है। दृश्य रुझान चक्रों में आते हैं और जाते हैं, और बहुत सी प्राथमिकताएँ व्यक्तिपरक होती हैं।
इसका अनुभव प्राप्त करने - और विभिन्न कॉन्फ़िगरेशन के बारे में सोचने - का सबसे आसान तरीका कुछ उदाहरणों पर एक नज़र डालना और फिर स्वयं कुछ प्रयोग करना है।
शामिल Figma किट में खाली, आउटलाइन किए गए और भरे हुए घटक शामिल हैं।
यह देखने के लिए कि आप इसे एक साथ कैसे रख सकते हैं, नीचे दिए गए उदाहरणों पर एक नज़र डालें:
लेकिन टोकन किस तरफ होना चाहिए?
लब्वोलुआब यह है कि इससे उपयोगिता में शायद कोई बड़ा अंतर नहीं आता है। हालाँकि, ध्यान में रखने के लिए कुछ बातें हैं, जो आपको एक या दूसरे तरीके से प्रभावित कर सकती हैं।
समय के साथ फैशन को बदलते देखना थोड़ा दिलचस्प रहा है। यूनिस्वैप में शुरू में टोकन बाईं ओर था, लेकिन तब से इसे दाईं ओर ले जाया गया है। Sushiswap ने भी डिज़ाइन अपग्रेड के दौरान यह बदलाव किया। अधिकांश, लेकिन सभी नहीं, प्रोटोकॉल ने इसका अनुसरण किया है।
वित्तीय परंपरा पारंपरिक रूप से मुद्रा प्रतीक को संख्या से पहले रखती है, उदा., $50, €50, £50, लेकिन हम कहते हैं 50 डॉलर, 50 यूरो, 50 पाउंड।
सामान्य उपयोगकर्ता के लिए - विशेष रूप से कोई ऐसा व्यक्ति जो बाएँ से दाएँ, ऊपर से नीचे पढ़ता है - दाईं ओर टोकन शायद अधिक स्वाभाविक लगता है।
टोकन को बाईं ओर और सभी संख्याओं को दाईं ओर रखना सुखद रूप से सममित (symmetrical) लगता है, जो एक प्लस है, लेकिन इस लेआउट का एक और नकारात्मक पक्ष है।
निकटता का नियम (law of proximity) बताता है कि जो वस्तुएँ एक साथ करीब होती हैं उन्हें संबंधित माना जाता है। तदनुसार, हम संबंधित वस्तुओं को एक दूसरे के बगल में रखना चाहते हैं। टोकन बैलेंस सीधे टोकन से ही संबंधित है, और जब भी कोई नया टोकन चुना जाएगा तो यह बदल जाएगा। इसलिए टोकन बैलेंस का टोकन चयन बटन के बगल में होना थोड़ा अधिक समझ में आता है। इसे टोकन के नीचे ले जाया जा सकता है, लेकिन इससे लेआउट की समरूपता टूट जाती है।
अंततः, दोनों विकल्पों के लिए प्लस और माइनस हैं, लेकिन यह दिलचस्प है कि कैसे प्रवृत्ति दाईं ओर टोकन की ओर प्रतीत होती है।
बटन का व्यवहार
स्वीकृति देने (Approve) के लिए एक अलग बटन न रखें। इसके अलावा स्वीकृति देने के लिए एक अलग क्लिक न रखें। उपयोगकर्ता स्वैप करना चाहता है, इसलिए बस बटन पर "स्वैप" कहें और पहले चरण के रूप में स्वीकृति शुरू करें। एक मोडल स्टेपर के साथ प्रगति दिखा सकता है, या एक साधारण "tx 1 of 2 - approving" अधिसूचना दिखा सकता है।
प्रासंगिक सहायता के रूप में बटन
बटन एक अलर्ट के रूप में दोहरी ड्यूटी कर सकता है!
यह वास्तव में Web3 के बाहर एक काफी असामान्य डिज़ाइन पैटर्न है, लेकिन इसके भीतर मानक बन गया है। यह एक अच्छा नवाचार है क्योंकि यह स्थान बचाता है, और ध्यान केंद्रित रखता है।
यदि मुख्य क्रिया - स्वैप - किसी त्रुटि के कारण अनुपलब्ध है, तो इसका कारण बटन के साथ समझाया जा सकता है, उदा.:
- नेटवर्क स्विच करें
- वॉलेट कनेक्ट करें
- विभिन्न त्रुटियाँ
बटन को उस क्रिया से भी मैप किया जा सकता है जिसे करने की आवश्यकता है। उदाहरण के लिए, यदि उपयोगकर्ता स्वैप नहीं कर सकता क्योंकि वे गलत नेटवर्क पर हैं, तो बटन पर "इथेरियम पर स्विच करें" लिखा होना चाहिए, और जब उपयोगकर्ता बटन पर क्लिक करता है, तो उसे नेटवर्क को इथेरियम पर स्विच करना चाहिए। यह उपयोगकर्ता प्रवाह को काफी तेज करता है।
इस Figma फ़ाइल के साथ अपना खुद का बनाएँ
कई प्रोटोकॉल की कड़ी मेहनत के लिए धन्यवाद, DEX डिज़ाइन में बहुत सुधार हुआ है। हम जानते हैं कि उपयोगकर्ता को किस जानकारी की आवश्यकता है, हमें इसे कैसे दिखाना चाहिए, और प्रवाह को यथासंभव सुचारू कैसे बनाना चाहिए। उम्मीद है कि यह लेख UX सिद्धांतों का एक ठोस अवलोकन प्रदान करता है।
यदि आप प्रयोग करना चाहते हैं, तो कृपया बेझिझक Figma वायरफ्रेम किट का उपयोग करें। इसे यथासंभव सरल रखा गया है, लेकिन इसमें विभिन्न तरीकों से बुनियादी संरचना बनाने के लिए पर्याप्त लचीलापन है।
Figma वायरफ्रेम किट (opens in a new tab)
विकेंद्रीकृत वित्त (DeFi) का विकास जारी रहेगा, और सुधार की गुंजाइश हमेशा रहती है।
शुभकामनाएँ!
पेज का अंतिम अपडेट: 21 अक्टूबर 2025
