பரவலாக்கப்பட்ட பரிமாற்றக (DEX) வடிவமைப்பின் சிறந்த நடைமுறைகள்

2018 இல் யூனிஸ்வாப் (Uniswap) தொடங்கப்பட்டதிலிருந்து, டஜன் கணக்கான வெவ்வேறு சங்கிலிகளில் நூற்றுக்கணக்கான பரவலாக்கப்பட்ட பரிமாற்றகங்கள் தொடங்கப்பட்டுள்ளன. இவற்றில் பல புதிய கூறுகளை அறிமுகப்படுத்தின அல்லது அவற்றின் சொந்த மாற்றங்களைச் சேர்த்தன, ஆனால் இடைமுகம் பொதுவாக ஒரே மாதிரியாகவே உள்ளது.

இதற்கு ஒரு காரணம் ஜேக்கப்பின் விதி (Jakob’s Law) (opens in a new tab):

பயனர்கள் தங்கள் பெரும்பாலான நேரத்தை பிற தளங்களில் செலவிடுகிறார்கள். இதன் பொருள், பயனர்கள் ஏற்கனவே அறிந்த மற்ற எல்லா தளங்களையும் போலவே உங்கள் தளமும் செயல்பட வேண்டும் என்று விரும்புகிறார்கள்.

யூனிஸ்வாப், Pancakeswap மற்றும் Sushiswap போன்ற ஆரம்பகால கண்டுபிடிப்பாளர்களுக்கு நன்றி, பரவலாக்கப்பட்ட நிதி (DeFi) பயனர்களுக்கு DEX எப்படி இருக்கும் என்பது பற்றிய ஒரு கூட்டு யோசனை உள்ளது. இந்த காரணத்திற்காக, "சிறந்த நடைமுறை" போன்ற ஒன்று இப்போது உருவாகி வருகிறது. தளங்கள் முழுவதும் மேலும் மேலும் வடிவமைப்பு முடிவுகள் தரப்படுத்தப்படுவதை நாங்கள் காண்கிறோம். DEX-களின் பரிணாமத்தை நேரலையில் சோதிப்பதற்கான ஒரு பெரிய உதாரணமாக நீங்கள் பார்க்கலாம். வேலை செய்த விஷயங்கள் தங்கியிருந்தன, வேலை செய்யாதவை தூக்கி எறியப்பட்டன. தனித்துவத்திற்கு இன்னும் இடமுள்ளது, ஆனால் ஒரு DEX இணங்க வேண்டிய சில தரநிலைகள் உள்ளன.

இந்தக் கட்டுரை பின்வருவனவற்றின் சுருக்கமாகும்:

• எதைச் சேர்க்க வேண்டும்
• அதை எவ்வாறு முடிந்தவரை பயன்படுத்தக்கூடியதாக மாற்றுவது
• வடிவமைப்பைத் தனிப்பயனாக்குவதற்கான முக்கிய வழிகள்

அனைத்து எடுத்துக்காட்டு வயர்ஃப்ரேம்களும் (wireframes) இந்தக் கட்டுரைக்காகவே பிரத்யேகமாக உருவாக்கப்பட்டவை, இருப்பினும் அவை அனைத்தும் உண்மையான திட்டங்களை அடிப்படையாகக் கொண்டவை.

Figma கருவித்தொகுப்பும் கீழே சேர்க்கப்பட்டுள்ளது - தயங்காமல் அதைப் பயன்படுத்தி உங்கள் சொந்த வயர்ஃப்ரேம்களை விரைவுபடுத்துங்கள்!

DEX இன் அடிப்படை அமைப்பு

UI பொதுவாக மூன்று கூறுகளைக் கொண்டுள்ளது:

1. முதன்மைப் படிவம்
2. பொத்தான்
3. விவரங்கள் பலகம்

வேறுபாடுகள்

இது இந்தக் கட்டுரையில் ஒரு பொதுவான கருப்பொருளாக இருக்கும், ஆனால் இந்தக் கூறுகளை ஒழுங்கமைக்க பல்வேறு வழிகள் உள்ளன. "விவரங்கள் பலகம்" பின்வருமாறு இருக்கலாம்:

• பொத்தானுக்கு மேலே
• பொத்தானுக்கு கீழே
• அக்கார்டியன் (accordion) பலகத்தில் மறைக்கப்பட்டுள்ளது
• மற்றும்/அல்லது "முன்னோட்ட" (preview) மாதிரிப் படிவத்தில்

குறிப்பு: ஒரு "முன்னோட்ட" மாதிரிப் படிவம் விருப்பத்திற்குரியது, ஆனால் நீங்கள் பிரதான UI இல் மிகக் குறைவான விவரங்களைக் காட்டினால், அது அவசியமாகிறது.

முதன்மைப் படிவத்தின் கட்டமைப்பு

நீங்கள் எந்த வில்லைகளைப் பரிமாற்றம் செய்ய விரும்புகிறீர்கள் என்பதைத் தேர்ந்தெடுக்கும் பெட்டி இதுவாகும். இந்தக் கூறு ஒரு உள்ளீட்டுப் புலம் மற்றும் ஒரு வரிசையில் ஒரு சிறிய பொத்தானைக் கொண்டுள்ளது.

DEX-கள் பொதுவாக கூடுதல் விவரங்களை மேலே ஒரு வரிசையிலும் கீழே ஒரு வரிசையிலும் காண்பிக்கும், இருப்பினும் இதை வித்தியாசமாக உள்ளமைக்க முடியும்.

வேறுபாடுகள்

இரண்டு UI வேறுபாடுகள் இங்கே காட்டப்பட்டுள்ளன; ஒன்று எந்த எல்லைகளும் இல்லாமல், மிகவும் திறந்த வடிவமைப்பை உருவாக்குகிறது, மற்றொன்று உள்ளீட்டு வரிசையில் ஒரு எல்லையைக் கொண்டுள்ளது, இது அந்தக் கூறின் மீது கவனத்தை உருவாக்குகிறது.

இந்த அடிப்படைக் கட்டமைப்பு வடிவமைப்பில் நான்கு முக்கியத் தகவல்களைக் காட்ட அனுமதிக்கிறது: ஒவ்வொரு மூலையிலும் ஒன்று. மேல்/கீழ் வரிசை ஒன்று மட்டுமே இருந்தால், இரண்டு இடங்கள் மட்டுமே இருக்கும்.

பரவலாக்கப்பட்ட நிதி (DeFi) பரிணாம வளர்ச்சியின் போது, பல்வேறு விஷயங்கள் இங்கே சேர்க்கப்பட்டுள்ளன.

சேர்க்க வேண்டிய முக்கியத் தகவல்கள்

• பணப்பையில் உள்ள இருப்பு
• அதிகபட்ச (Max) பொத்தான்
• ஃபியட் (Fiat) சமமான மதிப்பு
• "பெறப்பட்ட" தொகையின் மீதான விலை தாக்கம்

பரவலாக்கப்பட்ட நிதி (DeFi) இன் ஆரம்ப நாட்களில், ஃபியட் சமமான மதிப்பு பெரும்பாலும் விடுபட்டிருந்தது. நீங்கள் எந்த வகையான Web3 திட்டத்தை உருவாக்கினாலும், ஃபியட் சமமான மதிப்பைக் காட்டுவது அவசியம். பயனர்கள் இன்னும் உள்ளூர் நாணயங்களின் அடிப்படையில் சிந்திக்கிறார்கள், எனவே நிஜ உலக மன மாதிரிகளுடன் பொருந்துவதற்கு, இது சேர்க்கப்பட வேண்டும்.

இரண்டாவது புலத்தில் (நீங்கள் பரிமாற்றம் செய்யும் வில்லைகளைத் தேர்ந்தெடுக்கும் இடம்) உள்ளீட்டுத் தொகைக்கும் மதிப்பிடப்பட்ட வெளியீட்டுத் தொகைகளுக்கும் இடையிலான வேறுபாட்டைக் கணக்கிடுவதன் மூலம், ஃபியட் நாணயத் தொகைக்கு அடுத்துள்ள விலை தாக்கத்தையும் நீங்கள் சேர்க்கலாம். இது சேர்க்க மிகவும் பயனுள்ள விவரமாகும்.

சதவீதப் பொத்தான்கள் (எ.கா., 25%, 50%, 75%) பயனுள்ள அம்சமாக இருக்கலாம், ஆனால் அவை அதிக இடத்தை எடுத்துக்கொள்கின்றன, அதிக அழைப்புச் செயல்களைச் சேர்க்கின்றன, மேலும் அதிக மனச் சுமையைச் சேர்க்கின்றன. சதவீத ஸ்லைடர்களுக்கும் (sliders) இதுவே பொருந்தும். இந்த UI முடிவுகளில் சில உங்கள் பிராண்ட் மற்றும் உங்கள் பயனர் வகையைப் பொறுத்தது.

கூடுதல் விவரங்களை முதன்மைப் படிவத்திற்குக் கீழே காட்டலாம். இந்த வகையான தகவல்கள் பெரும்பாலும் தொழில்முறை பயனர்களுக்கானவை என்பதால், பின்வருவனவற்றில் ஒன்றைச் செய்வது அர்த்தமுள்ளதாக இருக்கும்:

• அதை முடிந்தவரை குறைவாக வைத்திருங்கள், அல்லது;
• அதை ஒரு அக்கார்டியன் பலகத்தில் மறைக்கவும்

சேர்க்க வேண்டிய கூடுதல் தகவல்கள்

• வில்லை விலை
• விலை நழுவல்
• பெறப்பட்ட குறைந்தபட்சம்
• எதிர்பார்க்கப்படும் வெளியீடு
• விலை தாக்கம்
• எரிவாயு செலவு மதிப்பீடு
• பிற கட்டணங்கள்
• ஆர்டர் ரூட்டிங் (Order routing)

விவாதத்திற்குரிய வகையில், இந்த விவரங்களில் சில விருப்பத்திற்குரியதாக இருக்கலாம்.

ஆர்டர் ரூட்டிங் சுவாரஸ்யமானது, ஆனால் பெரும்பாலான பயனர்களுக்கு இது பெரிய வித்தியாசத்தை ஏற்படுத்தாது.

வேறு சில விவரங்கள் ஒரே விஷயத்தை வெவ்வேறு வழிகளில் மீண்டும் கூறுகின்றன. எடுத்துக்காட்டாக "பெறப்பட்ட குறைந்தபட்சம்" மற்றும் "விலை நழுவல்" ஆகியவை ஒரே நாணயத்தின் இரு பக்கங்கள். நீங்கள் விலை நழுவலை 1% ஆக அமைத்திருந்தால், நீங்கள் பெற எதிர்பார்க்கும் குறைந்தபட்சம் = எதிர்பார்க்கப்படும் வெளியீடு-1%. சில UI-கள் எதிர்பார்க்கப்படும் தொகை, குறைந்தபட்ச தொகை மற்றும் விலை நழுவல் ஆகியவற்றைக் காண்பிக்கும்... இது பயனுள்ளதாக இருக்கும் ஆனால் தேவையற்ற அளவுக்கு அதிகமாக இருக்கலாம்.

எப்படியிருந்தாலும் பெரும்பாலான பயனர்கள் இயல்புநிலை விலை நழுவலை அப்படியே விட்டுவிடுவார்கள்.

"விலை தாக்கம்" பெரும்பாலும் "to" புலத்தில் ஃபியட் சமமான மதிப்பிற்கு அடுத்து அடைப்புக்குறிக்குள் காட்டப்படும். இது சேர்க்க ஒரு சிறந்த UX விவரம், ஆனால் அது இங்கே காட்டப்பட்டால், அது மீண்டும் கீழே காட்டப்பட வேண்டுமா? பின்னர் மீண்டும் ஒரு முன்னோட்டத் திரையில் காட்டப்பட வேண்டுமா?

பல பயனர்கள் (குறிப்பாக சிறிய தொகைகளைப் பரிமாற்றம் செய்பவர்கள்) இந்த விவரங்களைப் பற்றி கவலைப்பட மாட்டார்கள்; அவர்கள் வெறுமனே ஒரு எண்ணை உள்ளிட்டு பரிமாற்றம் என்பதை அழுத்துவார்கள்.

எந்த விவரங்கள் காட்டப்படுகின்றன என்பது உங்கள் பார்வையாளர்கள் மற்றும் பயன்பாடு எப்படி உணர வேண்டும் என்று நீங்கள் விரும்புகிறீர்கள் என்பதைப் பொறுத்தது.

விவரங்கள் பலகத்தில் விலை நழுவல் சகிப்புத்தன்மையை நீங்கள் சேர்த்தால், அதை இங்கிருந்தே நேரடியாகத் திருத்தக்கூடியதாக மாற்ற வேண்டும். இது ஒரு "முடுக்கிக்கு" (accelerator) ஒரு நல்ல எடுத்துக்காட்டு; பயன்பாட்டின் பொதுவான பயன்பாட்டினைப் பாதிக்காமல், அனுபவம் வாய்ந்த பயனர்களின் ஓட்டங்களை விரைவுபடுத்தக்கூடிய ஒரு நேர்த்தியான UX தந்திரம்.

ஒரு திரையில் உள்ள ஒரு குறிப்பிட்ட தகவலைப் பற்றி மட்டுமல்லாமல், முழு ஓட்டத்தைப் பற்றியும் கவனமாகச் சிந்திப்பது நல்லது: முதன்மைப் படிவத்தில் எண்களை உள்ளிடுதல் → விவரங்களை ஸ்கேன் செய்தல் → முன்னோட்டத் திரைக்குக் கிளிக் செய்தல் (உங்களிடம் முன்னோட்டத் திரை இருந்தால்). விவரங்கள் பலகம் எல்லா நேரங்களிலும் தெரிய வேண்டுமா அல்லது அதை விரிவுபடுத்த பயனர் அதைக் கிளிக் செய்ய வேண்டுமா? முன்னோட்டத் திரையைச் சேர்ப்பதன் மூலம் நீங்கள் உராய்வை உருவாக்க வேண்டுமா? இது பயனரை மெதுவாக்கவும் அவர்களின் வர்த்தகத்தைக் கருத்தில் கொள்ளவும் கட்டாயப்படுத்துகிறது, இது பயனுள்ளதாக இருக்கும். ஆனால் அவர்கள் அதே தகவல்கள் அனைத்தையும் மீண்டும் பார்க்க விரும்புகிறார்களா? இந்த கட்டத்தில் அவர்களுக்கு மிகவும் பயனுள்ளதாக இருப்பது எது?

வடிவமைப்பு விருப்பங்கள்

குறிப்பிட்டுள்ளபடி, இதில் பெரும்பாலானவை உங்கள் தனிப்பட்ட பாணியைப் பொறுத்தது உங்கள் பயனர் யார்? உங்கள் பிராண்ட் என்ன? ஒவ்வொரு விவரத்தையும் காட்டும் "ப்ரோ" (pro) இடைமுகம் உங்களுக்கு வேண்டுமா அல்லது நீங்கள் மிகக் குறைவாக இருக்க விரும்புகிறீர்களா? சாத்தியமான அனைத்துத் தகவல்களையும் விரும்பும் தொழில்முறை பயனர்களை நீங்கள் இலக்காகக் கொண்டிருந்தாலும், ஆலன் கூப்பரின் (Alan Cooper) புத்திசாலித்தனமான வார்த்தைகளை நீங்கள் இன்னும் நினைவில் கொள்ள வேண்டும்:

உங்கள் இடைமுகம் எவ்வளவு அழகாக இருந்தாலும், எவ்வளவு அருமையாக இருந்தாலும், அது குறைவாக இருந்தால் நன்றாக இருக்கும்.

கட்டமைப்பு

• இடதுபுறத்தில் வில்லைகள் அல்லது வலதுபுறத்தில் வில்லைகள்
• 2 வரிசைகள் அல்லது 3
• பொத்தானுக்கு மேலே அல்லது கீழே உள்ள விவரங்கள்
• விவரங்கள் விரிவாக்கப்பட்டன, குறைக்கப்பட்டன அல்லது காட்டப்படவில்லை

கூறு பாணி

• காலியானது
• கோடிட்டது
• நிரப்பப்பட்டது

ஒரு தூய்மையான UX கண்ணோட்டத்தில், UI பாணி நீங்கள் நினைப்பதை விடக் குறைவான முக்கியத்துவமே கொண்டுள்ளது. காட்சிப் போக்குகள் சுழற்சிகளில் வந்து செல்கின்றன, மேலும் பல விருப்பங்கள் அகநிலை சார்ந்தவை.

இதைப் பற்றிய உணர்வைப் பெறுவதற்கும் - பல்வேறு உள்ளமைவுகளைப் பற்றிச் சிந்திப்பதற்கும் - எளிதான வழி, சில எடுத்துக்காட்டுகளைப் பார்த்துவிட்டு, நீங்களே சில சோதனைகளைச் செய்வதாகும்.

சேர்க்கப்பட்டுள்ள Figma கருவித்தொகுப்பில் காலியான, கோடிட்ட மற்றும் நிரப்பப்பட்ட கூறுகள் உள்ளன.

அனைத்தையும் ஒன்றாக இணைக்கக்கூடிய வெவ்வேறு வழிகளைக் காண கீழே உள்ள எடுத்துக்காட்டுகளைப் பாருங்கள்:

ஆனால் வில்லை எந்தப் பக்கத்தில் செல்ல வேண்டும்?

இதன் முக்கிய அம்சம் என்னவென்றால், இது பயன்பாட்டிற்கு ஒரு பெரிய வித்தியாசத்தை ஏற்படுத்தாது. இருப்பினும், மனதில் கொள்ள வேண்டிய சில விஷயங்கள் உள்ளன, அவை உங்களை ஒரு வழியில் அல்லது வேறு வழியில் திசைதிருப்பக்கூடும்.

காலப்போக்கில் ஃபேஷன் மாறுவதைப் பார்ப்பது சற்று சுவாரஸ்யமாக இருக்கிறது. யூனிஸ்வாப் ஆரம்பத்தில் வில்லையை இடதுபுறத்தில் வைத்திருந்தது, ஆனால் பின்னர் அதை வலதுபுறமாக நகர்த்தியது. Sushiswap ஒரு வடிவமைப்பு மேம்படுத்தலின் போது இந்த மாற்றத்தையும் செய்தது. பெரும்பாலான நெறிமுறைகள் இதைப் பின்பற்றியுள்ளன, ஆனால் அனைத்தும் அல்ல.

நிதி மரபு பாரம்பரியமாக நாணயக் குறியீட்டை எண்ணுக்கு முன் வைக்கிறது, எ.கா., $50, €50, £50, ஆனால் நாம் 50 டாலர்கள், 50 யூரோக்கள், 50 பவுண்டுகள் என்று சொல்கிறோம்.

பொதுவான பயனருக்கு - குறிப்பாக இடமிருந்து வலமாகவும், மேலிருந்து கீழாகவும் படிப்பவருக்கு - வலதுபுறத்தில் உள்ள வில்லை மிகவும் இயல்பானதாகத் தோன்றும்.

வில்லையை இடதுபுறத்திலும் அனைத்து எண்களையும் வலதுபுறத்திலும் வைப்பது மகிழ்ச்சியான சமச்சீராகத் தெரிகிறது, இது ஒரு பிளஸ் ஆகும், ஆனால் இந்த அமைப்பில் மற்றொரு குறைபாடு உள்ளது.

அருகாமை விதியானது, நெருக்கமாக இருக்கும் உருப்படிகள் தொடர்புடையதாகக் கருதப்படுகின்றன என்று கூறுகிறது. அதன்படி, தொடர்புடைய உருப்படிகளை ஒன்றன் பின் ஒன்றாக வைக்க விரும்புகிறோம். வில்லை இருப்பு நேரடியாக வில்லையுடன் தொடர்புடையது, மேலும் புதிய வில்லை தேர்ந்தெடுக்கப்படும் போதெல்லாம் மாறும். எனவே வில்லை இருப்பு வில்லை தேர்ந்தெடுக்கும் பொத்தானுக்கு அடுத்ததாக இருப்பது சற்று அர்த்தமுள்ளதாக இருக்கும். அதை வில்லைக்கு அடியில் நகர்த்தலாம், ஆனால் அது அமைப்பின் சமச்சீர்மையை உடைக்கிறது.

இறுதியில், இரண்டு விருப்பங்களுக்கும் நன்மைகள் மற்றும் தீமைகள் உள்ளன, ஆனால் வலதுபுறத்தில் உள்ள வில்லையை நோக்கிய போக்கு எவ்வாறு தோன்றுகிறது என்பது சுவாரஸ்யமானது.

பொத்தான் நடத்தை

ஒப்புதல் அளி என்பதற்குத் தனிப் பொத்தானை வைத்திருக்க வேண்டாம். மேலும் ஒப்புதல் அளி என்பதற்குத் தனி கிளிக்கை வைத்திருக்க வேண்டாம். பயனர் பரிமாற்றம் செய்ய விரும்புகிறார், எனவே பொத்தானில் "பரிமாற்றம்" என்று கூறி, முதல் படியாக ஒப்புதலைத் தொடங்கவும். ஒரு மாதிரிப் படிவம் ஒரு ஸ்டெப்பருடன் (stepper) முன்னேற்றத்தைக் காட்டலாம் அல்லது "tx 1 of 2 - approving" என்ற எளிய அறிவிப்பைக் காட்டலாம்.

சூழ்நிலை உதவியாகப் பொத்தான்

பொத்தான் ஒரு எச்சரிக்கையாக இரட்டைப் பணியைச் செய்ய முடியும்!

இது உண்மையில் Web3 க்கு வெளியே மிகவும் அசாதாரணமான வடிவமைப்பு முறையாகும், ஆனால் அதற்குள் தரநிலையாகிவிட்டது. இது ஒரு நல்ல கண்டுபிடிப்பாகும், ஏனெனில் இது இடத்தை மிச்சப்படுத்துகிறது மற்றும் கவனத்தை ஒருமுகப்படுத்துகிறது.

பிழை காரணமாக முக்கியச் செயல் - பரிமாற்றம் - கிடைக்கவில்லை என்றால், அதற்கான காரணத்தைப் பொத்தானைக் கொண்டு விளக்கலாம், எ.கா.:

• பிணையத்தை மாற்று
• பணப்பையை இணை
• பல்வேறு பிழைகள்

செய்ய வேண்டிய செயலுக்கும் பொத்தானை வரைபடமாக்கலாம். எடுத்துக்காட்டாக, பயனர் தவறான பிணையத்தில் இருப்பதால் பரிமாற்றம் செய்ய முடியாவிட்டால், பொத்தான் "எத்திரியத்திற்கு மாற்று" என்று கூற வேண்டும், மேலும் பயனர் பொத்தானைக் கிளிக் செய்யும் போது, அது பிணையத்தை எத்திரியத்திற்கு மாற்ற வேண்டும். இது பயனர் ஓட்டத்தைக் கணிசமாக வேகப்படுத்துகிறது.

இந்த figma கோப்பைக் கொண்டு உங்களுடையதை உருவாக்குங்கள்

பல நெறிமுறைகளின் கடின உழைப்புக்கு நன்றி, DEX வடிவமைப்பு நிறைய மேம்பட்டுள்ளது. பயனருக்கு என்ன தகவல் தேவை, அதை எப்படி காட்ட வேண்டும், ஓட்டத்தை எப்படி முடிந்தவரை சீராக மாற்றுவது என்பது எங்களுக்குத் தெரியும். இந்தக் கட்டுரை UX கொள்கைகளின் உறுதியான கண்ணோட்டத்தை வழங்கும் என்று நம்புகிறோம்.

நீங்கள் பரிசோதனை செய்ய விரும்பினால், தயங்காமல் Figma வயர்ஃப்ரேம் கருவித்தொகுப்பைப் பயன்படுத்தவும். இது முடிந்தவரை எளிமையாக வைக்கப்பட்டுள்ளது, ஆனால் அடிப்படைக் கட்டமைப்பை பல்வேறு வழிகளில் உருவாக்குவதற்குப் போதுமான நெகிழ்வுத்தன்மையைக் கொண்டுள்ளது.

Figma வயர்ஃப்ரேம் கருவித்தொகுப்பு (opens in a new tab)

பரவலாக்கப்பட்ட நிதி (DeFi) தொடர்ந்து உருவாகும், மேலும் மேம்படுத்துவதற்கு எப்போதும் இடமுண்டு.

நல்வாழ்த்துக்கள்!