विकेंद्रीकृत विनिमय (DEX) डिजाइन सर्वोत्तम अभ्यास

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

इसका एक कारण याकूब का नियम (opens in a new tab) है:

उपयोगकर्ता अपना अधिकांश समय अन्य साइटों पर बिताते हैं। इसका मतलब है कि उपयोगकर्ता आपकी साइट को उसी तरह काम करना पसंद करते हैं जैसे वे अन्य सभी साइटें जिन्हें वे पहले से जानते हैं।

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

यह लेख इसका सारांश है:

• क्या शामिल करें
• इसे यथासंभव प्रयोग करने योग्य कैसे बनाएं
• डिजाइन को अनुकूलित करने के मुख्य तरीके

सभी उदाहरण वायरफ्रेम विशेष रूप से इस लेख के लिए बनाए गए थे, हालांकि वे सभी वास्तविक परियोजनाओं पर आधारित हैं।

फिग्मा किट भी नीचे शामिल है - बेझिझक इसका उपयोग करें और अपने स्वयं के वायरफ्रेम को गति दें!

DEX की मूल शारीरिक रचना

UI में आम तौर पर तीन तत्व होते हैं:

1. मुख्य रूप
2. बटन
3. विवरण पैनल

! जेनेरिक DEX UI, तीन मुख्य तत्व दिखा रहा है

Variations

यह इस लेख में एक सामान्य विषय होगा, लेकिन इन तत्वों को व्यवस्थित करने के कई अलग-अलग तरीके हैं। "विवरण पैनल" हो सकता है:

• बटन के ऊपर
• बटन के नीचे
• एक अकॉर्डियन पैनल में छिपा हुआ
• और/या "पूर्वावलोकन" मोडल पर

N.B. एक "पूर्वावलोकन" मोडल वैकल्पिक है, लेकिन यदि आप मुख्य यूआई पर बहुत कम विवरण दिखा रहे हैं, तो यह आवश्यक हो जाता है।

मुख्य रूप की संरचना{#structure-of-the-main-form}

यह वह बॉक्स है जहां आप वास्तव में चुनते हैं कि आप किस टोकन को स्वैप करना चाहते हैं। घटक में एक इनपुट फ़ील्ड और एक पंक्ति में एक छोटा बटन होता है।

DEX आमतौर पर ऊपर एक पंक्ति में और नीचे एक पंक्ति में अतिरिक्त विवरण प्रदर्शित करते हैं, हालांकि इसे अलग तरह से कॉन्फ़िगर किया जा सकता है।

! इनपुट पंक्ति, ऊपर और नीचे एक विवरण पंक्ति के साथ

विविधताएं

दो UI विविधताएँ यहाँ दिखाई गई हैं; बिना किसी सीमा के, एक बहुत ही खुला डिज़ाइन बनाना, और एक जहां इनपुट पंक्ति में एक सीमा होती है, जो उस तत्व पर ध्यान केंद्रित करती है।

! मुख्य रूप के दो UI रूपांतर

यह मूल संरचना ** जानकारी के चार प्रमुख टुकड़े ** को डिजाइन में दिखाने की अनुमति देती है: प्रत्येक कोने में एक। यदि केवल एक शीर्ष/निचली पंक्ति है, तो केवल दो स्थान हैं।

डीफाई के विकास के दौरान, यहां कई अलग-अलग चीजों को शामिल किया गया है।

{#key-info-to-include}

• वॉलेट में बैलेंस
• अधिकतम बटन
• फिएट समकक्ष
• "प्राप्त" राशि पर मूल्य प्रभाव

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

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

प्रतिशत बटन (जैसे, 25%, 50%, 75%) एक उपयोगी सुविधा हो सकते हैं, लेकिन वे अधिक जगह लेते हैं, अधिक कॉल टू एक्शन जोड़ते हैं, और अधिक मानसिक भार डालते हैं। प्रतिशत स्लाइडर्स के साथ भी। इनमें से कुछ UI निर्णय आपके ब्रांड और आपके उपयोगकर्ता प्रकार पर निर्भर करेंगे।

अतिरिक्त विवरण मुख्य फॉर्म के नीचे दिखाए जा सकते हैं। चूंकि इस प्रकार की जानकारी ज्यादातर समर्थक उपयोगकर्ताओं के लिए है, इसलिए यह या तो समझ में आता है:

• इसे यथासंभव कम से कम रखें, या;
• इसे एक अकॉर्डियन पैनल में छुपाएं

! उस मुख्य रूप के कोनों में दिखाया गया विवरण

{#extra-info-to-include}

• टोकन मूल्य
• गिरावट
• न्यूनतम प्राप्त
• अपेक्षित आउटपुट
• मूल्य प्रभाव
• गैस लागत अनुमान
• अन्य शुल्क
• आदेश रूटिंग

यकीनन, इनमें से कुछ विवरण वैकल्पिक हो सकते हैं।

ऑर्डर रूटिंग दिलचस्प है, लेकिन अधिकांश उपयोगकर्ताओं के लिए बहुत फर्क नहीं पड़ता है।

कुछ अन्य विवरण बस एक ही चीज़ को अलग-अलग तरीकों से पुनः स्थापित कर रहे हैं। उदाहरण के लिए, "न्यूनतम प्राप्त" और "फिसलन" एक ही सिक्के के दो पहलू हैं। यदि आपके पास 1% पर फिसलन सेट है, तो न्यूनतम आप प्राप्त करने की उम्मीद कर सकते हैं = अपेक्षित आउटपुट -1%। कुछ UI अपेक्षित राशि, न्यूनतम राशि और फिसलन दिखाएंगे... जो उपयोगी है लेकिन संभवतः ओवरकिल है।

अधिकांश उपयोगकर्ता वैसे भी डिफ़ॉल्ट फिसलन छोड़ देंगे।

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

कई उपयोगकर्ता (विशेष रूप से छोटी मात्रा में स्वैप करने वाले) इन विवरणों की परवाह नहीं करेंगे; वे बस एक संख्या दर्ज करेंगे और स्वैप दबाएंगे।

! कुछ विवरण एक ही बात दिखाते हैं

वास्तव में क्या विवरण दिखाए जाते हैं, यह आपके दर्शकों पर निर्भर करेगा और आप ऐप को क्या महसूस करना चाहते हैं।

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

! विवरण पैनल से स्लिपेज को नियंत्रित किया जा सकता है

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

डिज़ाइन विकल्प

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

कोई फर्क नहीं पड़ता कि कितना सुंदर है, कोई फर्क नहीं पड़ता कि आपका इंटरफ़ेस कितना अच्छा है, यह बेहतर होगा यदि इसमें से कम थे।

संरचना

• बाईं ओर टोकन, या दाईं ओर टोकन
• 2 पंक्तियाँ या 3
• बटन के ऊपर या नीचे विवरण
• विवरण विस्तारित, छोटा किया गया, या नहीं दिखाया गया

घटक शैली

• खाली
• उल्लिखित
• भरा

शुद्ध UX दृष्टिकोण से, UI शैली आपके विचार से कम मायने रखती है। दृश्य रुझान चक्रों में आते हैं और जाते हैं, और बहुत सारी वरीयता व्यक्तिपरक होती है।

इसके लिए एक महसूस करने का सबसे आसान तरीका - और विभिन्न विभिन्न विन्यासों के बारे में सोचें - कुछ उदाहरणों पर एक नज़र डालना है और फिर स्वयं कुछ प्रयोग करना है।

शामिल फिग्मा किट में खाली, उल्लिखित और भरे हुए घटक होते हैं।

नीचे दिए गए उदाहरणों पर एक नज़र डालें कि आप इसे एक साथ रखने के विभिन्न तरीकों को देख सकते हैं:

! भरी हुई शैली में 3 पंक्तियाँ

! एक उल्लिखित शैली में 3 पंक्तियाँ

! खाली शैली में 2 पंक्तियाँ

! एक उल्लिखित शैली में 3 पंक्तियाँ, एक विवरण पैनल के साथ

! एक उल्लिखित शैली में इनपुट पंक्ति के साथ 3 पंक्तियाँ

! भरी हुई शैली में 2 पंक्तियाँ

लेकिन टोकन किस तरफ जाना चाहिए?

लब्बोलुआब यह है कि यह शायद प्रयोज्य के लिए एक बड़ा फर्क नहीं पड़ता है। हालाँकि, कुछ बातों का ध्यान रखना चाहिए, जो आपको एक या दूसरे तरीके से प्रभावित कर सकती हैं।

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

वित्तीय परिपाटी में पारंपरिक रूप से संख्या से पहले मुद्रा का प्रतीक लगाया जाता है, जैसे, $50, €50, £50, लेकिन हम कहते हैं 50 डॉलर, 50 यूरो, 50 पाउंड।

सामान्य उपयोगकर्ता के लिए - विशेष रूप से कोई व्यक्ति जो बाएं से दाएं, ऊपर से नीचे पढ़ता है - दाईं ओर टोकन शायद अधिक स्वाभाविक लगता है।

! बाईं ओर टोकन के साथ एक यूआई

टोकन को बाईं ओर रखना और दाईं ओर सभी संख्याएं सुखद सममित दिखती हैं, जो एक प्लस है, लेकिन इस लेआउट का एक और नकारात्मक पहलू है।

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

अंततः, दोनों विकल्पों के लिए प्लस और माइनस हैं, लेकिन यह दिलचस्प है कि प्रवृत्ति दाईं ओर टोकन की ओर कैसे दिखाई देती है।

बटन व्यवहार{#button-behavior}

Don’t have a separate button for Approve. साथ ही, स्वीकृति के लिए अलग से क्लिक न करें. उपयोगकर्ता स्वैप करना चाहता है, इसलिए बस बटन पर "स्वैप" कहें और पहले चरण के रूप में अनुमोदन शुरू करें। एक मोडल एक स्टेपर, या एक साधारण "tx 1 of 2 - अनुमोदन" अधिसूचना के साथ प्रगति दिखा सकता है।

! अनुमोदन और स्वैप के लिए अलग बटन के साथ एक यूआई

! एक बटन वाला UI जो अनुमोदन कहता है

प्रासंगिक सहायता के रूप में बटन

बटन अलर्ट के रूप में डबल ड्यूटी कर सकता है!

यह वास्तव में वेब3 के बाहर एक काफी असामान्य डिज़ाइन पैटर्न है, लेकिन इसके भीतर मानक बन गया है। यह एक अच्छा नवाचार है क्योंकि यह स्पेस बचाता है, और ध्यान केंद्रित रखता है।

यदि मुख्य क्रिया - स्वैप - किसी त्रुटि के कारण अनुपलब्ध है, तो कारण बटन के साथ समझाया जा सकता है, उदाहरण के लिए:

• नेटवर्क स्विच करें
• वॉलेट कनेक्ट करें
• विभिन्न त्रुटियां

बटन को ** कार्रवाई के लिए मैप किया जा सकता है ** जिसे प्रदर्शन करने की आवश्यकता है। उदाहरण के लिए, यदि उपयोगकर्ता स्वैप नहीं कर सकता क्योंकि वे गलत नेटवर्क पर हैं, तो बटन को "एथेरियम पर स्विच करें" कहना चाहिए, और जब उपयोगकर्ता बटन पर क्लिक करता है, तो उसे नेटवर्क को एथेरियम में स्विच करना चाहिए। यह उपयोगकर्ता प्रवाह को काफी गति देता है।

! मुख्य सीटीए से शुरू की जा रही प्रमुख कार्रवाइयां

! मुख्य CTA में दिखाया गया त्रुटि संदेश

इस figma फ़ाइल

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

यदि आप प्रयोग करना चाहते हैं, तो कृपया बेझिझक फिगमा wireframe किट का उपयोग करें। इसे यथासंभव सरल रखा जाता है, लेकिन विभिन्न तरीकों से मूल संरचना बनाने के लिए पर्याप्त लचीलापन है।

फिग्मा वायरफ्रेम किट (opens in a new tab)

डीफाई का विकास जारी रहेगा, और सुधार की हमेशा गुंजाइश रहती है।

शुभकामनाएँ!