মূল কন্টেন্টে যান
Change page

Web3 ইন্টারফেস ডিজাইনের জন্য 7টি হিউরিস্টিক

ব্যবহারযোগ্যতা হিউরিস্টিকস (Usability heuristics) হলো বিস্তৃত "সাধারণ নিয়ম" যা আপনি আপনার সাইটের ব্যবহারযোগ্যতা পরিমাপ করতে ব্যবহার করতে পারেন। এখানকার 7টি হিউরিস্টিক বিশেষভাবে Web3 এর জন্য তৈরি করা হয়েছে এবং এগুলো জ্যাকব নিয়েলসেনের (Jakob Nielsen) ইন্টারঅ্যাকশন ডিজাইনের 10টি সাধারণ নীতির (opens in a new tab) পাশাপাশি ব্যবহার করা উচিত।

Web3 এর জন্য 7টি ব্যবহারযোগ্যতা হিউরিস্টিক

  1. ফিডব্যাক অ্যাকশনকে অনুসরণ করে
  2. নিরাপত্তা এবং বিশ্বাস
  3. সবচেয়ে গুরুত্বপূর্ণ তথ্যটি সুস্পষ্ট
  4. বোধগম্য পরিভাষা
  5. অ্যাকশনগুলো যতটা সম্ভব সংক্ষিপ্ত
  6. নেটওয়ার্ক সংযোগগুলো দৃশ্যমান এবং নমনীয়
  7. ওয়ালেট থেকে নয়, অ্যাপ থেকে নিয়ন্ত্রণ

সংজ্ঞা এবং উদাহরণ

1. ফিডব্যাক অ্যাকশনকে অনুসরণ করে

যখন কিছু ঘটে বা ঘটছে, তখন তা সুস্পষ্ট হওয়া উচিত।

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

টিপস:

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

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

Informing the user about each step when swapping tokens

2. নিরাপত্তা এবং বিশ্বাস অন্তর্নিহিত থাকে

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

টিপস:

  • গর্বের সাথে আপনার অডিটগুলোর তালিকা দিন
  • একাধিক অডিট করান
  • আপনার ডিজাইন করা যেকোনো নিরাপত্তা বৈশিষ্ট্যের প্রচার করুন
  • অন্তর্নিহিত ইন্টিগ্রেশনসহ সম্ভাব্য ঝুঁকিগুলো তুলে ধরুন
  • কৌশলগুলোর জটিলতা সম্পর্কে জানান
  • নন-UI সমস্যাগুলো বিবেচনা করুন যা আপনার ব্যবহারকারীদের নিরাপত্তার ধারণাকে প্রভাবিত করতে পারে

উদাহরণ: ফুটারে একটি লক্ষণীয় আকারে আপনার অডিটগুলো অন্তর্ভুক্ত করুন।

Audits referenced in the website footer

3. সবচেয়ে গুরুত্বপূর্ণ তথ্যটি সুস্পষ্ট

জটিল সিস্টেমের জন্য, শুধুমাত্র সবচেয়ে প্রাসঙ্গিক ডেটা দেখান। কোনটি সবচেয়ে গুরুত্বপূর্ণ তা নির্ধারণ করুন এবং এর প্রদর্শনকে অগ্রাধিকার দিন। অত্যধিক তথ্য বিভ্রান্তিকর হতে পারে এবং সিদ্ধান্ত নেওয়ার সময় ব্যবহারকারীরা সাধারণত একটি তথ্যের উপর নির্ভর করে। বিকেন্দ্রীভূত অর্থব্যবস্থা (DeFi)-তে, এটি সম্ভবত ইল্ড (yield) অ্যাপগুলোতে APR এবং ঋণ প্রদান অ্যাপগুলোতে LTV হবে।

টিপস:

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

উদাহরণ: স্ক্যান করার সময় সম্পূর্ণ রঙের বড় টোকেনগুলো খুঁজে পাওয়া সহজ। APR বড় এবং একটি অ্যাকসেন্ট রঙে হাইলাইট করা হয়েছে।

The token and APR are easy to find

4. স্পষ্ট পরিভাষা

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

টিপস:

  • সহজ এবং সামঞ্জস্যপূর্ণ পরিভাষা ব্যবহার করুন
  • যতটা সম্ভব বিদ্যমান ভাষা ব্যবহার করুন
  • নিজের মতো করে কোনো পরিভাষা তৈরি করবেন না
  • প্রচলিত নিয়মগুলো অনুসরণ করুন
  • ব্যবহারকারীদের যতটা সম্ভব শিক্ষিত করুন

উদাহরণ: "আপনার রিওয়ার্ড" (Your rewards) একটি ব্যাপকভাবে বোধগম্য, নিরপেক্ষ পরিভাষা; এটি এই প্রজেক্টের জন্য তৈরি করা কোনো নতুন শব্দ নয়। বাস্তব জগতের মানসিক মডেলের সাথে মেলাতে রিওয়ার্ডগুলো USD-তে প্রকাশ করা হয়, এমনকি যদি রিওয়ার্ডগুলো অন্য কোনো টোকেনেও থাকে।

Token rewards, displayed in U.S. dollars

5. অ্যাকশনগুলো যতটা সম্ভব সংক্ষিপ্ত

সাব-অ্যাকশনগুলোকে একত্রিত করে ব্যবহারকারীর ইন্টারঅ্যাকশনগুলো দ্রুত করুন। এটি স্মার্ট কন্ট্রাক্ট স্তরের পাশাপাশি UI-তেও করা যেতে পারে। একটি সাধারণ অ্যাকশন সম্পন্ন করার জন্য ব্যবহারকারীকে সিস্টেমের এক অংশ থেকে অন্য অংশে যেতে হবে না – বা সিস্টেমটি পুরোপুরি ছেড়ে যেতে হবে না।

টিপস:

  • যেখানে সম্ভব অন্যান্য অ্যাকশনের সাথে "অনুমোদন করা" (Approve) একত্রিত করুন
  • স্বাক্ষরকরণ ধাপগুলোকে যতটা সম্ভব একসাথে যুক্ত করুন

উদাহরণ: "তারল্য যোগ করা" (add liquidity) এবং "স্টেক" (stake) একত্রিত করা হলো একটি অ্যাক্সিলারেটরের সহজ উদাহরণ যা ব্যবহারকারীর সময় এবং গ্যাস উভয়ই বাঁচায়।

Modal showing a switch to combine the deposit and stake actions

6. নেটওয়ার্ক সংযোগগুলো দৃশ্যমান এবং নমনীয়

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

টিপস:

  • সংযোগ বিচ্ছিন্ন থাকা অবস্থায় অ্যাপের যতটা সম্ভব অংশ দেখান
  • ব্যবহারকারী বর্তমানে কোন নেটওয়ার্কের সাথে সংযুক্ত আছেন তা দেখান
  • নেটওয়ার্ক পরিবর্তন করার জন্য ব্যবহারকারীকে ওয়ালেটে যেতে বাধ্য করবেন না
  • যদি অ্যাপটির জন্য ব্যবহারকারীকে নেটওয়ার্ক পরিবর্তন করতে হয়, তবে মূল কল টু অ্যাকশন (call to action) থেকে অ্যাকশনটি প্রম্পট করুন
  • যদি অ্যাপটিতে একাধিক নেটওয়ার্কের জন্য মার্কেট বা ভল্ট থাকে, তবে ব্যবহারকারী বর্তমানে কোন সেটটি দেখছেন তা স্পষ্টভাবে উল্লেখ করুন

উদাহরণ: ব্যবহারকারী কোন নেটওয়ার্কের সাথে সংযুক্ত আছেন তা তাদের দেখান এবং অ্যাপবারে (appbar) তাদের এটি পরিবর্তন করার অনুমতি দিন।

Dropdown button showing the connected network

7. ওয়ালেট থেকে নয়, অ্যাপ থেকে নিয়ন্ত্রণ

UI-এর উচিত ব্যবহারকারীকে তাদের প্রয়োজনীয় সবকিছু জানানো এবং তাদের যা যা করতে হবে তার সবকিছুর উপর নিয়ন্ত্রণ দেওয়া। Web3 তে, কিছু অ্যাকশন আপনি UI-তে নেন এবং কিছু অ্যাকশন আপনি ওয়ালেটে নেন। সাধারণত, আপনি UI-তে একটি অ্যাকশন শুরু করেন এবং তারপর ওয়ালেটে এটি নিশ্চিত করেন। যদি এই দুটি দিক সতর্কতার সাথে একত্রিত করা না হয় তবে ব্যবহারকারীরা অস্বস্তি বোধ করতে পারেন।

টিপস:

  • UI-তে ফিডব্যাকের মাধ্যমে সিস্টেমের অবস্থা জানান
  • তাদের হিস্ট্রির একটি রেকর্ড রাখুন
  • পুরানো ট্রানজ্যাকশনগুলোর জন্য ব্লক এক্সপ্লোরারের লিঙ্ক প্রদান করুন
  • নেটওয়ার্ক পরিবর্তন করার জন্য শর্টকাট প্রদান করুন।

উদাহরণ: একটি সূক্ষ্ম কন্টেইনার ব্যবহারকারীকে দেখায় যে তাদের ওয়ালেটে কী কী প্রাসঙ্গিক টোকেন রয়েছে এবং মূল CTA নেটওয়ার্ক পরিবর্তন করার জন্য একটি শর্টকাট প্রদান করে।

Main CTA is prompting the user to switch network