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

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

এর একটি কারণ হলো Jakob’s Law (opens in a new tab):

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

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

এই আর্টিকেলটি নিচের বিষয়গুলোর একটি সারসংক্ষেপ:

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

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

নিচে Figma কিটটিও দেওয়া হয়েছে - নির্দ্বিধায় এটি ব্যবহার করুন এবং আপনার নিজের ওয়্যারফ্রেম তৈরির কাজ দ্রুত করুন!

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

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

1. মূল ফর্ম (Main form)
2. বাটন (Button)
3. বিস্তারিত প্যানেল (Details panel)

ভ্যারিয়েশন

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

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

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

মূল ফর্মের গঠন

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

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

ভ্যারিয়েশন

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

এই প্রাথমিক গঠনটি ডিজাইনে চারটি মূল তথ্য দেখানোর সুযোগ দেয়: প্রতিটি কোণায় একটি করে। যদি ওপরে/নিচে কেবল একটি সারি থাকে, তবে কেবল দুটি জায়গা থাকে।

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

যে মূল তথ্যগুলো অন্তর্ভুক্ত করতে হবে

• ওয়ালেট ব্যালেন্স
• ম্যাক্স (Max) বাটন
• ফিয়াট সমতুল্য (Fiat equivalent)
• "প্রাপ্ত" পরিমাণের ওপর প্রাইস ইমপ্যাক্ট (Price impact)

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

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

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

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

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

যে অতিরিক্ত তথ্য অন্তর্ভুক্ত করতে হবে

• টোকেন প্রাইস
• স্লিপেজ (Slippage)
• সর্বনিম্ন প্রাপ্তি (Minimum received)
• প্রত্যাশিত আউটপুট (Expected output)
• প্রাইস ইমপ্যাক্ট (Price impact)
• আনুমানিক গ্যাস খরচ
• অন্যান্য ফি
• অর্ডার রাউটিং (Order routing)

যুক্তিসঙ্গতভাবে, এই বিস্তারিত তথ্যের কিছু ঐচ্ছিক হতে পারে।

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

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

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

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

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

ঠিক কী কী বিস্তারিত তথ্য দেখানো হবে তা নির্ভর করবে আপনার অডিয়েন্স এবং আপনি অ্যাপটিতে কেমন অনুভূতি দিতে চান তার ওপর।

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

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

ডিজাইন অপশন

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

আপনার ইন্টারফেস যতই সুন্দর হোক না কেন, যতই আকর্ষণীয় হোক না কেন, এটি যত কম হবে ততই ভালো।

গঠন

• টোকেন বাম দিকে, নাকি টোকেন ডান দিকে
• 2টি সারি নাকি 3টি
• বিস্তারিত তথ্য বাটনের ওপরে নাকি নিচে
• বিস্তারিত তথ্য প্রসারিত, সংকুচিত, নাকি দেখানো হয়নি

কম্পোনেন্ট স্টাইল

• ফাঁকা (empty)
• আউটলাইন করা (outlined)
• ভরাট করা (filled)

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

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

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

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

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

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

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

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

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

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

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

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

বাটনের আচরণ

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

প্রাসঙ্গিক সাহায্য হিসেবে বাটন

বাটনটি অ্যালার্ট হিসেবে দ্বৈত দায়িত্ব পালন করতে পারে!

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

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

• নেটওয়ার্ক পরিবর্তন করুন (switch network)
• ওয়ালেট কানেক্ট করুন (connect wallet)
• বিভিন্ন ত্রুটি

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

এই figma ফাইলটি দিয়ে আপনার নিজেরটি তৈরি করুন

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

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

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

DeFi-এর বিবর্তন চলতেই থাকবে, এবং উন্নতির সুযোগ সবসময়ই থাকে।

শুভকামনা!