বিকেন্দ্রীকৃত এক্সচেঞ্জ (DEX) ডিজাইনের সেরা অনুশীলন

2018 সালে ইউনিসোয়াপ চালু হওয়ার পর থেকে, কয়েক ডজন বিভিন্ন চেইন জুড়ে শত শত বিকেন্দ্রীকৃত এক্সচেঞ্জ চালু হয়েছে। এর মধ্যে অনেকগুলি নতুন উপাদান প্রবর্তন করেছে বা তাদের নিজস্ব বৈশিষ্ট্য যুক্ত করেছে, তবে ইন্টারফেসটি সাধারণত একই রয়ে গেছে।

এর একটি কারণ হলো জ্যাকবের সূত্র (Jakob’s Law) (opens in a new tab):

ব্যবহারকারীরা তাদের বেশিরভাগ সময় অন্যান্য সাইটে ব্যয় করে। এর মানে হলো ব্যবহারকারীরা পছন্দ করে যে আপনার সাইটটি তাদের পরিচিত অন্যান্য সমস্ত সাইটের মতোই কাজ করুক।

ইউনিসোয়াপ, Pancakeswap এবং Sushiswap-এর মতো প্রাথমিক উদ্ভাবকদের ধন্যবাদ, বিকেন্দ্রীভূত অর্থব্যবস্থা (DeFi) ব্যবহারকারীদের একটি DEX দেখতে কেমন হয় সে সম্পর্কে একটি সম্মিলিত ধারণা রয়েছে। এই কারণে, "সেরা অনুশীলন"-এর মতো কিছু এখন আবির্ভূত হচ্ছে। আমরা দেখছি যে সাইটগুলি জুড়ে আরও বেশি সংখ্যক ডিজাইনের সিদ্ধান্ত প্রমিত করা হচ্ছে। আপনি DEX-এর বিবর্তনকে লাইভ টেস্টিংয়ের একটি বিশাল উদাহরণ হিসেবে দেখতে পারেন। যে জিনিসগুলি কাজ করেছে তা রয়ে গেছে, যেগুলি করেনি, সেগুলি বাতিল হয়ে গেছে। এখনও নিজস্বতা দেখানোর সুযোগ রয়েছে, তবে কিছু নির্দিষ্ট মান রয়েছে যা একটি DEX-এর মেনে চলা উচিত।

এই নিবন্ধটি নিম্নলিখিত বিষয়গুলির একটি সারসংক্ষেপ:

• কী অন্তর্ভুক্ত করতে হবে
• কীভাবে এটিকে যতটা সম্ভব ব্যবহারযোগ্য করা যায়
• ডিজাইন কাস্টমাইজ করার প্রধান উপায়গুলি

সমস্ত উদাহরণ ওয়্যারফ্রেমগুলি বিশেষভাবে এই নিবন্ধটির জন্য তৈরি করা হয়েছিল, যদিও সেগুলি সবই বাস্তব প্রকল্পগুলির উপর ভিত্তি করে তৈরি।

Figma কিটটিও নীচে অন্তর্ভুক্ত করা হয়েছে - নির্দ্বিধায় এটি ব্যবহার করুন এবং আপনার নিজস্ব ওয়্যারফ্রেমগুলির গতি বাড়ান!

একটি DEX-এর প্রাথমিক গঠন

UI-তে সাধারণত তিনটি উপাদান থাকে:

1. মূল ফর্ম
2. বোতাম
3. বিবরণ প্যানেল

বৈচিত্র্য

এটি এই নিবন্ধে একটি সাধারণ বিষয় হবে, তবে এই উপাদানগুলিকে সংগঠিত করার বিভিন্ন উপায় রয়েছে। "বিবরণ প্যানেল" হতে পারে:

• বোতামের উপরে
• বোতামের নীচে
• একটি অ্যাকর্ডিয়ন প্যানেলে লুকানো
• এবং/অথবা একটি "প্রিভিউ" মডাল-এ

দ্রষ্টব্য: একটি "প্রিভিউ" মডাল ঐচ্ছিক, তবে আপনি যদি মূল UI-তে খুব কম বিবরণ দেখান, তবে এটি অপরিহার্য হয়ে ওঠে।

মূল ফর্মের কাঠামো

এটি সেই বাক্স যেখানে আপনি আসলে বেছে নেন কোন টোকেন আপনি সোয়াপ করতে চান। উপাদানটি একটি সারিতে একটি ইনপুট ফিল্ড এবং একটি ছোট বোতাম নিয়ে গঠিত।

DEX-গুলি সাধারণত উপরে একটি সারিতে এবং নীচে একটি সারিতে অতিরিক্ত বিবরণ প্রদর্শন করে, যদিও এটি ভিন্নভাবে কনফিগার করা যেতে পারে।

বৈচিত্র্য

এখানে দুটি UI বৈচিত্র্য দেখানো হয়েছে; একটি কোনো বর্ডার ছাড়া, যা একটি খুব উন্মুক্ত ডিজাইন তৈরি করে এবং অন্যটি যেখানে ইনপুট সারিতে একটি বর্ডার রয়েছে, যা সেই উপাদানটির উপর ফোকাস তৈরি করে।

এই প্রাথমিক কাঠামোটি ডিজাইনে চারটি কী (key) তথ্য দেখানোর অনুমতি দেয়: প্রতিটি কোণায় একটি করে। যদি কেবল একটি শীর্ষ/নীচের সারি থাকে, তবে কেবল দুটি স্থান থাকে।

DeFi-এর বিবর্তনের সময়, এখানে বিভিন্ন ধরণের জিনিস অন্তর্ভুক্ত করা হয়েছে।

অন্তর্ভুক্ত করার মতো কী (key) তথ্য

• ওয়ালেট-এ ব্যালেন্স
• ম্যাক্স (Max) বোতাম
• ফিয়াট সমতুল্য
• "প্রাপ্ত" পরিমাণের উপর মূল্য প্রভাব

DeFi-এর শুরুর দিকে, ফিয়াট সমতুল্য প্রায়শই অনুপস্থিত ছিল। আপনি যদি কোনো ধরণের Web3 প্রজেক্ট তৈরি করেন, তবে একটি ফিয়াট সমতুল্য দেখানো অপরিহার্য। ব্যবহারকারীরা এখনও স্থানীয় মুদ্রার পরিপ্রেক্ষিতে চিন্তা করে, তাই বাস্তব জগতের মানসিক মডেলগুলির সাথে মেলাতে, এটি অন্তর্ভুক্ত করা উচিত।

দ্বিতীয় ফিল্ডে (যেখানে আপনি যে টোকেন-এ সোয়াপ করছেন তা বেছে নেন) আপনি ইনপুট পরিমাণ এবং আনুমানিক আউটপুট পরিমাণের মধ্যে পার্থক্য গণনা করে ফিয়াট মুদ্রার পরিমাণের পাশে মূল্য প্রভাব অন্তর্ভুক্ত করতে পারেন। এটি অন্তর্ভুক্ত করার জন্য বেশ দরকারী একটি বিবরণ।

শতাংশ বোতামগুলি (যেমন, 25%, 50%, 75%) একটি দরকারী বৈশিষ্ট্য হতে পারে, তবে তারা আরও বেশি জায়গা নেয়, আরও কল টু অ্যাকশন যোগ করে এবং আরও মানসিক চাপ বাড়ায়। শতাংশ স্লাইডারগুলির ক্ষেত্রেও একই কথা প্রযোজ্য। এই UI সিদ্ধান্তগুলির মধ্যে কয়েকটি আপনার ব্র্যান্ড এবং আপনার ব্যবহারকারীর ধরণের উপর নির্ভর করবে।

অতিরিক্ত বিবরণ মূল ফর্মের নীচে দেখানো যেতে পারে। যেহেতু এই ধরণের তথ্য বেশিরভাগই প্রো ব্যবহারকারীদের জন্য, তাই এটি করা যৌক্তিক হতে পারে:

• এটিকে যতটা সম্ভব ন্যূনতম রাখা, অথবা;
• এটিকে একটি অ্যাকর্ডিয়ন প্যানেলে লুকিয়ে রাখা

অন্তর্ভুক্ত করার মতো অতিরিক্ত তথ্য

• টোকেন মূল্য
• স্লিপেজ
• প্রাপ্ত ন্যূনতম পরিমাণ
• প্রত্যাশিত আউটপুট
• মূল্য প্রভাব
• গ্যাস খরচের অনুমান
• অন্যান্য ফি
• অর্ডার রাউটিং

যুক্তিযুক্তভাবে, এই বিবরণগুলির মধ্যে কয়েকটি ঐচ্ছিক হতে পারে।

অর্ডার রাউটিং আকর্ষণীয়, তবে বেশিরভাগ ব্যবহারকারীর জন্য এটি খুব বেশি পার্থক্য তৈরি করে না।

কিছু অন্যান্য বিবরণ কেবল একই জিনিসকে বিভিন্ন উপায়ে পুনরায় বর্ণনা করে। উদাহরণস্বরূপ "প্রাপ্ত ন্যূনতম পরিমাণ" এবং "স্লিপেজ" একই মুদ্রার দুটি পিঠ। যদি আপনার স্লিপেজ 1% এ সেট করা থাকে, তবে আপনি ন্যূনতম যা পাওয়ার আশা করতে পারেন = প্রত্যাশিত আউটপুট-1%। কিছু UI প্রত্যাশিত পরিমাণ, ন্যূনতম পরিমাণ এবং স্লিপেজ দেখাবে... যা দরকারী তবে সম্ভবত অতিরিক্ত।

বেশিরভাগ ব্যবহারকারী ডিফল্ট স্লিপেজ-ই রেখে দেবেন।

"মূল্য প্রভাব" প্রায়শই "to" ফিল্ডে ফিয়াট সমতুল্যের পাশে বন্ধনীতে দেখানো হয়। এটি যোগ করার জন্য একটি দুর্দান্ত UX বিবরণ, তবে এটি যদি এখানে দেখানো হয়, তবে কি এটি সত্যিই নীচে আবার দেখানোর দরকার আছে? এবং তারপর আবার একটি প্রিভিউ স্ক্রিনে?

অনেক ব্যবহারকারী (বিশেষ করে যারা অল্প পরিমাণ সোয়াপ করছেন) এই বিবরণগুলি নিয়ে মাথা ঘামাবেন না; তারা কেবল একটি সংখ্যা লিখবেন এবং সোয়াপ-এ চাপ দেবেন।

ঠিক কী বিবরণ দেখানো হবে তা নির্ভর করবে আপনার দর্শক এবং আপনি অ্যাপটিতে কেমন অনুভূতি দিতে চান তার উপর।

আপনি যদি বিবরণ প্যানেলে স্লিপেজ টলারেন্স অন্তর্ভুক্ত করেন, তবে আপনার এটি সরাসরি এখান থেকে সম্পাদনাযোগ্য করা উচিত। এটি একটি "অ্যাক্সিলারেটর"-এর একটি ভালো উদাহরণ; একটি চমৎকার UX কৌশল যা অ্যাপের সাধারণ ব্যবহারযোগ্যতাকে প্রভাবিত না করেই অভিজ্ঞ ব্যবহারকারীদের ফ্লো-কে ত্বরান্বিত করতে পারে।

শুধুমাত্র একটি স্ক্রিনে একটি নির্দিষ্ট তথ্য নিয়ে নয়, বরং সম্পূর্ণ ফ্লো সম্পর্কে সাবধানে চিন্তা করা একটি ভালো ধারণা: মূল ফর্মে সংখ্যা প্রবেশ করানো → বিবরণ স্ক্যান করা → প্রিভিউ স্ক্রিনে ক্লিক করা (যদি আপনার একটি প্রিভিউ স্ক্রিন থাকে)। বিবরণ প্যানেল কি সব সময় দৃশ্যমান থাকা উচিত, নাকি ব্যবহারকারীকে এটি প্রসারিত করতে ক্লিক করতে হবে? আপনার কি একটি প্রিভিউ স্ক্রিন যোগ করে ঘর্ষণ (friction) তৈরি করা উচিত? এটি ব্যবহারকারীকে ধীর হতে এবং তাদের ট্রেড বিবেচনা করতে বাধ্য করে, যা দরকারী হতে পারে। কিন্তু তারা কি আবার একই তথ্য দেখতে চায়? এই মুহূর্তে তাদের জন্য সবচেয়ে দরকারী কী?

ডিজাইন বিকল্প

যেমনটি উল্লেখ করা হয়েছে, এর অনেকটাই আপনার ব্যক্তিগত শৈলীর উপর নির্ভর করে আপনার ব্যবহারকারী কে? আপনার ব্র্যান্ড কী? আপনি কি প্রতিটি বিবরণ দেখানো একটি "প্রো" ইন্টারফেস চান, নাকি আপনি মিনিমালিস্ট হতে চান? এমনকি আপনি যদি প্রো ব্যবহারকারীদের লক্ষ্য করে থাকেন যারা সম্ভাব্য সমস্ত তথ্য চান, তবুও আপনার অ্যালান কুপারের জ্ঞানী কথাগুলি মনে রাখা উচিত:

আপনার ইন্টারফেস যতই সুন্দর হোক না কেন, যতই চমৎকার হোক না কেন, এটি কম হলেই ভালো হতো।

কাঠামো

• বাম দিকে টোকেন, বা ডান দিকে টোকেন
• 2টি সারি বা 3টি
• বোতামের উপরে বা নীচে বিবরণ
• বিবরণ প্রসারিত, ছোট করা, বা দেখানো হয়নি

উপাদানের শৈলী

• খালি
• আউটলাইন করা
• ভরাট করা

একটি বিশুদ্ধ UX দৃষ্টিকোণ থেকে, UI শৈলী আপনার ধারণার চেয়ে কম গুরুত্বপূর্ণ। ভিজ্যুয়াল ট্রেন্ডগুলি চক্রাকারে আসে এবং যায় এবং অনেক পছন্দই বিষয়ভিত্তিক।

এটি অনুভব করার - এবং বিভিন্ন কনফিগারেশন সম্পর্কে চিন্তা করার - সবচেয়ে সহজ উপায় হলো কিছু উদাহরণ দেখা এবং তারপর নিজে কিছু পরীক্ষা-নিরীক্ষা করা।

অন্তর্ভুক্ত Figma কিটটিতে খালি, আউটলাইন করা এবং ভরাট করা উপাদান রয়েছে।

আপনি কীভাবে এই সব একসাথে রাখতে পারেন তার বিভিন্ন উপায় দেখতে নীচের উদাহরণগুলি দেখুন:

কিন্তু টোকেন কোন দিকে থাকা উচিত?

মূল কথা হলো এটি সম্ভবত ব্যবহারযোগ্যতার ক্ষেত্রে খুব বেশি পার্থক্য তৈরি করে না। তবে কিছু বিষয় মাথায় রাখতে হবে, যা আপনাকে এক বা অন্য দিকে প্রভাবিত করতে পারে।

সময়ের সাথে সাথে ফ্যাশনের পরিবর্তন দেখাটা কিছুটা আকর্ষণীয়। ইউনিসোয়াপ-এ প্রাথমিকভাবে টোকেন বাম দিকে ছিল, কিন্তু তারপর থেকে এটি ডানদিকে সরানো হয়েছে। Sushiswap-ও একটি ডিজাইন আপগ্রেডের সময় এই পরিবর্তন করেছে। বেশিরভাগ, তবে সব নয়, প্রোটোকলগুলি এটি অনুসরণ করেছে।

আর্থিক প্রথা ঐতিহ্যগতভাবে সংখ্যার আগে মুদ্রার প্রতীক রাখে, যেমন, $50, €50, £50, কিন্তু আমরা বলি 50 ডলার, 50 ইউরো, 50 পাউন্ড।

সাধারণ ব্যবহারকারীর কাছে - বিশেষ করে যারা বাম থেকে ডানে, উপর থেকে নীচে পড়েন - ডানদিকে টোকেন থাকাটা সম্ভবত বেশি স্বাভাবিক মনে হয়।

বাম দিকে টোকেন এবং ডানদিকে সমস্ত সংখ্যা রাখা দেখতে আনন্দদায়কভাবে প্রতিসম মনে হয়, যা একটি ইতিবাচক দিক, তবে এই লেআউটের আরেকটি নেতিবাচক দিক রয়েছে।

নৈকট্যের সূত্র (law of proximity) বলে যে কাছাকাছি থাকা আইটেমগুলিকে সম্পর্কিত বলে মনে করা হয়। সেই অনুযায়ী, আমরা সম্পর্কিত আইটেমগুলিকে একে অপরের পাশে রাখতে চাই। টোকেন ব্যালেন্স সরাসরি টোকেন-এর সাথেই সম্পর্কিত এবং যখনই একটি নতুন টোকেন নির্বাচন করা হবে তখনই এটি পরিবর্তিত হবে। তাই টোকেন নির্বাচন বোতামের পাশে টোকেন ব্যালেন্স থাকাটা কিছুটা বেশি যৌক্তিক। এটিকে টোকেন-এর নীচে সরানো যেতে পারে, তবে এটি লেআউটের প্রতিসাম্য ভেঙে দেয়।

শেষ পর্যন্ত, উভয় বিকল্পের জন্যই ইতিবাচক এবং নেতিবাচক দিক রয়েছে, তবে এটি আকর্ষণীয় যে কীভাবে প্রবণতাটি ডানদিকে টোকেন রাখার দিকে বলে মনে হচ্ছে।

বোতামের আচরণ

অনুমোদন করা (Approve)-এর জন্য আলাদা কোনো বোতাম রাখবেন না। এছাড়াও অনুমোদন করা (Approve)-এর জন্য আলাদা কোনো ক্লিক রাখবেন না। ব্যবহারকারী সোয়াপ করতে চান, তাই বোতামে কেবল "সোয়াপ" লিখুন এবং প্রথম ধাপ হিসেবে অনুমোদন শুরু করুন। একটি মডাল একটি স্টেপারের সাহায্যে অগ্রগতি দেখাতে পারে, অথবা একটি সাধারণ "tx 1 of 2 - approving" বিজ্ঞপ্তি দেখাতে পারে।

প্রাসঙ্গিক সহায়তা হিসেবে বোতাম

বোতামটি একটি সতর্কতা হিসেবে দ্বিগুণ দায়িত্ব পালন করতে পারে!

এটি আসলে Web3-এর বাইরে একটি মোটামুটি অস্বাভাবিক ডিজাইন প্যাটার্ন, তবে এর মধ্যে এটি স্ট্যান্ডার্ড হয়ে উঠেছে। এটি একটি ভালো উদ্ভাবন কারণ এটি স্থান বাঁচায় এবং মনোযোগ নিবদ্ধ রাখে।

যদি কোনো ত্রুটির কারণে মূল কাজ - সোয়াপ - অনুপলব্ধ হয়, তবে এর কারণটি বোতামের সাহায্যে ব্যাখ্যা করা যেতে পারে, যেমন:

• নেটওয়ার্ক পরিবর্তন করুন
• ওয়ালেট সংযুক্ত করুন
• বিভিন্ন ত্রুটি

বোতামটিকে যে কাজটি করা দরকার তার সাথে ম্যাপ করাও যেতে পারে। উদাহরণস্বরূপ, যদি ব্যবহারকারী ভুল নেটওয়ার্ক-এ থাকার কারণে সোয়াপ করতে না পারেন, তবে বোতামটিতে "ইথেরিয়াম-এ পরিবর্তন করুন" লেখা উচিত এবং ব্যবহারকারী যখন বোতামটিতে ক্লিক করবেন, তখন এটি নেটওয়ার্ক-টিকে ইথেরিয়াম-এ পরিবর্তন করবে। এটি ব্যবহারকারীর ফ্লো-কে উল্লেখযোগ্যভাবে ত্বরান্বিত করে।

এই Figma ফাইলের সাহায্যে আপনার নিজেরটি তৈরি করুন

একাধিক প্রোটোকলের কঠোর পরিশ্রমের জন্য ধন্যবাদ, DEX ডিজাইনের অনেক উন্নতি হয়েছে। আমরা জানি ব্যবহারকারীর কী তথ্য প্রয়োজন, আমাদের কীভাবে এটি দেখানো উচিত এবং কীভাবে ফ্লো-টিকে যতটা সম্ভব মসৃণ করা যায়। আশা করি এই নিবন্ধটি UX নীতিগুলির একটি শক্ত ওভারভিউ প্রদান করে।

আপনি যদি পরীক্ষা-নিরীক্ষা করতে চান, তবে নির্দ্বিধায় Figma ওয়্যারফ্রেম কিটটি ব্যবহার করুন। এটিকে যতটা সম্ভব সহজ রাখা হয়েছে, তবে বিভিন্ন উপায়ে প্রাথমিক কাঠামো তৈরি করার জন্য এতে যথেষ্ট নমনীয়তা রয়েছে।

Figma ওয়্যারফ্রেম কিট (opens in a new tab)

DeFi বিকশিত হতে থাকবে এবং উন্নতির জন্য সর্বদা সুযোগ রয়েছে।

শুভকামনা!