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

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

এর একটি কারণ হলো জ্যাকবের আইন (opens in a new tab):

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

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

এই নিবন্ধটি এর একটি সারসংক্ষেপ:

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

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

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

একটি DEX-এর মৌলিক অ্যানাটমি

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

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

ভিন্নতা

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

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

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

প্রধান ফর্মের কাঠামো

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

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

ভিন্নতা

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

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

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

অন্তর্ভুক্ত করার জন্য মূল তথ্য

• ওয়ালেটের ব্যালেন্স
• সর্বোচ্চ বোতাম
• ফিয়াট সমতুল্য
• “প্রাপ্ত” পরিমাণের উপর মূল্যের প্রভাব

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

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

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

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

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

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

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

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

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

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

যাইহোক, বেশিরভাগ ব্যবহারকারী ডিফল্ট স্লিপেজ ছেড়ে দেবে।

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

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

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

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

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

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

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

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

কাঠামো

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

কম্পোনেন্ট শৈলী

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

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

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

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

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

কিন্তু টোকেন কোন দিকে যাওয়া উচিত?

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

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

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

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

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

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

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

বোতামের আচরণ

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

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

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

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

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

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

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

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

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

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

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

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

শুভকামনা!