UI/UX ডিজাইনের অসাধারণ ১০০টি কিলার টিপস্‌ এন্ড ট্রিকস্‌

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

ফ্লো

১. মনে করুন ওয়েবসাইটটি একটি ইয়েলো ব্রিক রোড এর মত। পেইজগুলো এমনভাবে ডিজাইন করুন যেন ভিজিটর অনায়েসে এক পেইজ থেকে অন্যটিতে যেতে পারেন এবং যথাযথভাবে প্রয়োজনীয় কাজ সম্পন্ন করতে সক্ষম হন।

২. ভিজিটররা তাদের পৃষ্ঠার একদম উপরে প্রয়োজনীয় আইটেমের তালিকা দেখতে পছন্দ করে থাকেন, তাদের গুরুত্ব অনুযায়ী।

৩. সঙ্গতিপূর্ণ এবং সহজে ব্যবহার করা ওয়েব ইন্টারফেসগুলি ভিজিটরদের ইলিমেন্টস্‌কে কেন্দ্রীভূত করতে সহায়তা করে।

৪. ওয়েবসাইটে ডেড অ্যান্ড পৃষ্ঠাগুলি তৈরি করা এড়িয়ে চলুন। তারা বিভ্রান্তি সৃষ্টি করে এবং ভিজিটরদের জন্য অতিরিক্ত কাজ তৈরি করে।

৫. সাধারণ ওয়েবসাইট পেটার্ণ এবং ইন্টারফেস ব্যবহার করুন; যেন ভিজিটরদের নতুন কোন কিছুর অভিজ্ঞতা অর্জন করতে না হয়।

স্ক্রলিং

৬. ভিজিটর ওয়েবপৃষ্ঠাটি ততক্ষণ স্ক্রোল করবে, যতক্ষণ প্রাসঙ্গিক তথ্যটি ফোল্ড এ স্পষ্ট করে দেয়া থাকবে।

৭. আপনার ওয়েবসাইট যেন সর্বদা স্ক্রলিং এর নির্দেশের দৃঢ় দৃশ্যমান ইঙ্গিত প্রদান করে যখন নিচের দিকে আরও কন্টেন্ট থাকে।

৮. ওয়েব পেইজ যতটা সম্ভম লম্বা করা থেকে বিরত থাকুন। লম্বা ওয়েব পেইজ অনেক ব্যাবহারকারীই পছন্দ করেন না।

৯. চলমান ওয়েবপেইজ ভাল , কারন স্ক্রোলিং ক্লিক করার চেয়ে দ্রুততর – শুধু পৃষ্ঠাগুলি খুব দীর্ঘ করবেন না ।

কন্ট্রাস্ট এবং কালার

১০. Color blind ইউজারদের জন্য ডিজাইন করুন। আপনার ডিজাইনকে গ্রেস্কেল রূপান্তর করুন  যেন সকল ইউজাররা গুরুত্বপূর্ণ তথ্য পড়তে পারে ।

১১. লিঙ্ক ছাড়া অন্য টেক্সটে রঙ নীল ব্যবহার করা থেকে বিরত থাকুন।

১২ . খেয়াল রাখতে হবে যাতে ওয়াবসাইটি তীব্রভাবে ঝলমল না করে ।

১৩. আপনার ওয়েবসাইট এর CTAs জন্য একটি নির্দিষ্ট রং নির্ধারন  করুন, এবং অন্য কিছুতে এই রং ব্যবহার থেকে বিরত থাকুন।

১৪. ঠান্ডা, গাঢ় রং ব্যাকগ্রাউন্ডে এবং ওয়ার্ম এবং ব্রাইট কালার এর উপরের কনটেন্টে ব্যবহার করুন।

লোডিং

১৫. নিশ্চিত করুন যে ওয়েবসাইট ব্যবহারকারীরা তাদের প্রাথমিক লক্ষ্য যেন দ্রুত এবং সহজেই পূরণ করতে পারে।

১৬. ওয়েবসাইটটি যেন দ্রুত লোডিং হয় তা অবশ্যই নিশ্চিত হতে হবে যেন ওয়েবসাইট ভিজিটররা বিরক্ত অনুভব না করেন।

১৭. ওয়েবসাইটের গতির পেইজ লোড হওয়া, পেইজরে ধরন, লোডিং টাইম, অ্যানিমেশন মসৃণতার উপর নির্ভর করে ।

১৮.পেইজটি লোড হওয়ার সময় ওয়েবসাইতে উপাদান গুলোর একটি Skeleton প্রদর্শন করা উচিত।

১৯. ওয়েব পেইজের লেখা গুলা ছবির আগে লোড হওয়া উচিত, যাতে ইউজার পুরো পেইজ লোড হয়ার আগে লেখা পড়া শুরু করতে পারে।

২০.লোডিং টাইম বেশি হলে ভিজিটররা প্রায়ই ওয়েবসাইটটি ছেড়ে চলে যান। সুতরাং ওয়াবসাইটি যেন দ্রুত লোড হয় তা নিশ্চিত হতে হবে।

মোবাইল

২১. যদি মোবাইল ইন্টারফেস উপাদানগুলি ছোট হয় তাহলে তা সঠিকভাবে ট্যাপ করা কঠিন হবে ।

২২. মুবাইলের টার্চ টার্গেট মিনিমাম 1cm x 1cm হতে হবে ।

২৩. আপনার মোবাইল ওয়েবসাইট বা অ্যাপ্লিকেশনে কেউ যদি কনিষ্ঠ আঙ্গুল ব্যবহার করে, তাহলে বুঝতে হবে Interface target অনেক ছোট হয়ে গেছে।

২৪. টেবলেটে ইউজারের জন্য স্কিনের স্লাইড ও বাটনর গুলো হাতে কাছে হতে হবে।

২৫. স্বাভাবিক ওয়েবপেজ স্ক্রোলিং ছাড়া অন্য কিছু জন্য Vertical Swiping এর প্রয়োজন নেই।

২৬. মোবাইল ইন্টারফেসের জন্য  ডবল ট্যাপ ব্যবহার করবেন না। যাতে ব্যবহারকারী সিঙেল টার্চে ইন্টারঅ্যাক্ট করতে পারেন।

২৭. মোবাইল লেআউট ডিজাইন করার সময় ব্যবহারকারীদের এক হাত বা দুই হাতে ডিভাইস ব্যবহার করবে কিনা তা নিশ্চিত হতে হবে।

নেভিগেশন

২৮. আপনার ওয়েবসাইটে নেভিগেশন মেনুতে অ্যাক্সেসের জন্য  সর্বদা একটি সহজ উপায় রাখতে হবে ।

২৯. যদি আপনার ওয়েবসাইটের অনুক্রম 3-4 স্তরের গভীরের চেয়ে বেশি হয়, তাহলে এটাকে রিডিজাইন করতে হবে ।

৩০. স্ট্যাকি মেনু ব্যবহার করুন, বিশেষ করে দীর্ঘ ওয়েবপেইজ গুলোতে এবং যখন দ্রুত অ্যাক্সেস প্রয়োজন হয় ।

৩১.ভাল ওয়েবসাইটে  নেভিগেশনের বিকল্প নেই, এটি যেন ব্যাগ্রাউন্ডে অদৃশ্য হয়ে যায় ।

৩২. আপনার ন্যাভিগেশন সামঞ্জস্যপূর্ণ করুন, এটি ওয়েবসাইট জুড়ে পরিবর্তন করা উচিত নয় ।

৩৩. ন্যাভিগেশন লেবেল নির্দিষ্ট করুন, এটি 2-3 শব্দ বেশী হবে না এবং সর্বাধিক শব্দবহন তথ্য দিয়ে শুরু করুন ।

৩৪. ব্রেডকামব ব্যবহার করে ইউজার  ওয়েবসাইটটি কোথায়  তা জানান ।

৩৫. মোবাইল  ন্যাভিগেশন :  সবচেয়ে বেশি ব্যবহৃত অপশন গুলো উপরে রাখুন এবং অন্যগুলো একটি হ্যামবার্গার মেনুর অধীনে রাখুন ।

৩৬. ডেস্কটপে হ্যামবার্গার মেনুগুলি কম লক্ষণীয়,পরিচিত এবং কম তথ্যের হবে ।

৩৭. মোবাইলের সেকেন্ডারি নেভিগেশনের জন্য  ল্যান্ডিং পেজ, সাব মেনু , ইন-পেইজ মেনু  ব্যবহার করুন ।

৩৮. মেনু ড্রপডাউনগুলি লম্বালম্বি হওয়া উচিত, আড়াআড়ি করবেন না , আড়াআড়ি স্ক্রোল করা  অনেক কঠিন।

৩৯. মেগা মেনু পৃষ্ঠার তুলনায় সংকীর্ণ হতে হবে যাতে তাদের ক্লিক করতে  সহজ হয়।

৪০. যদি মেগা মেনু ব্যবহার করা হয় , তাহলে Group গুলির মধ্যে লিংক রাখুন, এবং ক্লিকযোগ্য এবং অ- ক্লিকযোগ্য গুলোর মধে পাথ্যক্য রাখুন ।

৪১. ওয়েবসাইটের মেনুতে লগইন বা সার্চ মেনু হাইড করবেন না ।

ফর্ম

৪২. ফর্ম লেবেল সারিবদ্ধ করুন এবং দ্রুত স্ক্যানিং জন্য একটি সিঙেল সাইড ব্যবহার করুন ।

৪৩. ফিল্ডের লেবেলগুলি রিডিং এরিয়ার বাইরে হওয়া উচিত , যেন ব্যবহারকারীরা তাদের পথ হারান না।

৪৪. দীর্ঘ ওয়েব আরো ইউজার ফেন্ডলি করতে সেকশন গুলো বিভক্ত করতে হবে।

৪৫. ফর্ম Error এর জন্য একটি নির্দিষ্ট জায়গা নির্ধারণ করুন।

৪৬. ওয়েবসাইটের ইরর ম্যাসেজটি হেল্পফুল , ব্যবহারযোগ্য, সংক্ষিপ্ত এবং সহজ হতে হবে ।

৪৭. প্রতিটি Error এরিয়ার পাশে একবারে সব Error গুলো দেখান যাতে মোবাইল ব্যবহারকারী সতর্কতা মিস না করে ।

লিংক

৪৮. ওয়েবসাইট লিংক গুলো  নীল টেক্সট /আন্ডারলাইন  ব্যবহার করে লিংকটি স্পষ্ট ও লক্ষণীয় করতে হবে।

৪৯. লিংক সবসময় লিঙ্ক মত হওয়া উচিত।

৫০. এক জন ইউজার যখন কোন লিংক এ ক্লিক করে তখন ইউজার যেন বুজতে পারে এটি কিসের লিংক , লিংক টেক্সটি এরকম হয়া উচিত।

৫১. লিংক ছাড়া অন্য টেক্সটে Blue/Underline ইউজ করার যাবে না।

৫২. কিছু উপাদান যেমন , প্রডাক্ট ইমেজ ও রিভিউ  ক্লিকযোগ্য হতে হবে ।

৫৩. ব্যবহারকারীদের মেমরি লোড কমানো  ভিজিট লিঙ্ক জন্য ডিফারেন্ট  রং ব্যবহার করতে হবে ।

৫৪. ব্যবহারকারীদের মেমরি লোড কমাতে ওয়েবসাইটের ভিজিট করা লিঙ্কগুলির জন্য একটি আলাদা রঙ ব্যবহার করুন।

বাটনস্‌

৫৫. ওয়েবসাইটে Button গুলি ক্লিকযোগ্য দেখতে হবে  , ইউজার Button এ ক্লিক করার জন্য Button গুলো যথেষ্ট বড় হতে হবে।

৫৬. ওয়েবসাইটের বেশি গুরুত্তপুন্য অংশগুলো বড় এবং ইউজারদের হাতের কাছে হবে ।

৫৭. Button এ ব্যাগ্রাউন্ড কালার , বর্ডার , এমন হতে হবে যাতে বুঝা যায় এটি ক্লিক যোগ্য ।

৫৮. ফ্ল্যাট ডিজাইনের জন্য উজ্জল কালার ইউজ করুন ।

৫৯. মোবাইলের তথ্য পরিবর্তন বা মুছে ফেলার বাটনগুলি এমন হতে হবে যাতে ভুলে ক্লিক না পড়ে ।

৬০. মোবাইলের তথ্য পরিবর্তন বা মুছে ফেলার বাটনগুলির অনাকািঙ্খিত ব্যবহার প্রতিরোধ করতে ট্যাপ করার জন্য আরও বেশি প্রচেষ্টা প্রয়োজন।

সার্চ

৬১. ওয়েবসাইট যত েছোটই  হোক না কেন, অবশ্য সার্চ ফিল্ড ব্যবহার করুন।

৬২. ডেক্সটপে সার্চ বারটি টেক্সট বক্সের মত হবে, এবং মোবাইলে সার্চ আইকনটি “ OK “ হবে ।

৬৩. সার্চ বার টি উপরে ডান কর্নারে দিতে হবে যেন ইউজারের সার্চ বার টি সহজে খুজে পায় ।

৬৪. ওয়েবসাইট অনুসন্ধান করার সময়, ব্যবহারকারীরা সাধারণত “টাইপ করার জন্য ছোট বাক্স” খোঁজেন ।

৬৫. সমগ্র অনুসন্ধান ক্যোয়ারী দেখতে ওয়েবসাইটগুলির Search field গুলো যথেষ্ট wide হওয়া উচিত।

ক্যারোসলস্‌

৬৬. Carousels এড়িয়ে চলুন। প্রতিটি নতুন স্লাইড পূর্ববর্তী স্লাইডের স্মৃতি মুছে ফেলে । ব্যবহারকারীরা এক সময়ে শুধুমাত্র এক জিনিস উপর ফোকাস করতে পারে।

৬৭. Carousels নেভিগেশন ডটস মোবাইল ওয়েবসাইটগুলিতে দেখতে কঠিন। পরিবর্তে বাম এবং ডান থেকে peeking ইমেজ ব্যবহার করুন|

৬৮. ক্যারোরেল ন্যাভিগেশনে তীর নির্দেশনার পরিবর্তে  বর্ণনামূলক লেবেল ইউজ করুন , যেন ভিজিটর জানতে পারেন পরবর্তী স্লাইডে কি আছে।

৬৯. কেবলমাত্র 1% ব্যবহারকারী ক্যারোজেল স্লাইডে ক্লিক করেন , সুতরাং এটাতে ক্লিক পরার কোন আশা থাকে না।

৭০. ব্যবহারকারীরা তাদের সাথে ইন্টারঅ্যাক্ট করার পর ওয়েবসাইটের কারসেলগুলি স্বয়ংক্রিয়ভাবে স্লাইডে ম্যানুয়ালি স্যুইচ করা উচিত।

একোর্ডিয়েন্স

৭১. মোবাইল ওয়েবসাইটগুলিতে লম্বা কন্টেন্ট সংকুচিত করতে accordions ব্যবহার করুন

৭২. Accordions ব্যবহার করার সময়, Expand এবং collapse করার সুযোগ অফার করতে পারেন।

৭৩. In-page jump links চেয়ে ছোট পৃষ্ঠাগুলি ব্যবহার করা সহজ

৭৪. মোবাইল ওয়েবসাইটের উপর accordions ব্যবহার Interaction cost বৃদ্ধি করে।

হেল্‌প এবং হিন্টস্‌

৭৫. প্রতিটি ওয়েব পেজের মূল উদ্দেশ্য ব্যবহারকারীকে স্পষ্ট হওয়া উচিত|

৭৬. ব্যবহারকারীরা অনেকেই ওয়েবসাইটের Help ব্যবহার করতে চান না।  Offer wizards এবং FAQs প্রয়োজন থাকলে রাখতে পারেন।

৭৭. ওয়েবসাইটে Hints এবং Context এর App প্রদর্শন করুন  শুধুমাত্র যখন প্রয়োজন।

৭৮. Help এবং Instruction সংক্ষিপ্ত হতে হবে এবং অন্যান্য ইন্টারফেস থেকে দৃশ্যত ভিন্ন হতে হবে।

৭৯. একবারে একটি Hints প্রদর্শন করুন ওয়েবসাইট এবং মোবাইলে। এটি memory burden হ্রাস করে।

আইকন

৮০. আইকনগুলি অবশ্যই তাদের ফাংশন এবং উদ্দেশ্য বর্ণনা করবে এবং তাদের সহজ, পরিচিত এবং অর্থপূর্ণ করুন।

৮১. প্রয়োজন অনুযায়ী আইকন ব্যবহার করা উচিত, তাদের overusing এড়িয়ে চলুন এবং অলংকরণের জন্য কেবল তাদের ব্যবহার করবেন না

কনটেন্ট

৮২. আপনার ওয়েবপৃষ্ঠা সবচেয়ে গুরুত্বপূর্ণ তথ্য সর্বদা সবচেয়ে বেশি চোখে পরা উচিত।

৮৩. Key information প্রথমে রাখুন ,কারন ব্যবহারকারীরা উপরের বামদিকে থেকে পড়া  শুরু করে এবং প্রথম 2-3 টি শব্দ সবচেয়ে বেশি দেখে ।

৮৪. ওয়েবসাইটের টপ পেইজে বেশি অগ্রাধিকার প্রাপ্ত বিষয়বস্তু রাখুন। কোন ডিভাইসে কি অগ্রাধিকার পাবে তা নির্ধারণ করতে এনালাইটিক্স করুন ।

৮৫. ‍Supporting details থেকে Primary Information পৃথক করার জন্য আপনার ওয়েবসাইট রঙ এবং আকার বিপরীতে ব্যবহার করুন।

৮৬. অগ্রাধিকারযোগ্য, যেমন Context, Location এবং Emergency information, মোবাইল ব্যবহারকারীদের জন্য আরো গুরুত্বপূর্ণ।

৮৭. মোবাইলের জন্য অগ্রাধিকারযোগ্য : Location, events, phone number, emergency info, time-sensitive info চলমান থাকা প্রয়োজন।।

৮৮. ওয়েবসাইট ন্যাভিগেশন জন্য Industry Jargon বা প্রচলিতো শব্দ তুলনায় সহজ, সুস্পষ্ট শব্দ ভাল।

রিডেবিলিটি

৮৯. বেশীরভাগ ব্যবহারকারীই প্রথমে লেখাটি দেখেন এবং পরে পড়ে থাকেন , দেখে সহজে বোঝার জন্য ভিজ্যুয়াল বৈচিত্র এবং অর্থপূর্ণ লেখা ব্যবহার করুন।

৯০. পাঠযোগ্যতাটি শুধু আপনি কিছু পড়তে পারেন কিনা তা নয় –  আপনি এটা পড়তে চান কিনা তা ও বুজায়।

৯১. পঠনযোগ্যতা বৃদ্ধির জন্য বুলেটযুক্ত তালিকা, সংখ্যাসূচক তালিকা, লাইন এবং অনুচ্ছেদগুলির মধ্যে ফাকা রাখুন ।

৯২. একটি ওয়েবসাইট ফন্ট নির্বাচন করার সময়, তার সুনির্দিষ্টতা, পঠনযোগ্যতা, ওজন এবং শৈলী বিবেচনা করুন।

৯৩. মোবাইল ওয়েবসাইট এবং অ্যাপ্লিকেশনগুলিতে পঠনযোগ্যতা উন্নত করার জন্য একটি ফন্টের এক্স-উচ্চতা বড় করার কথা বিবেচনা করুন ।

৯৪. সব ডিভাইসে ছোট ফন্ট ব্যবহার করবেন না , বিশেষ করে দীর্ঘ ফর্মে। এবং বডি টেক্সটে ঘন ফন্ট ব্যবহার করবেন না

৯৫. মোবাইল ওয়েবসাইটের শিরোনামগুলির আকার অবশিষ্ট বিষয়বস্তু থেকে বড় হবে ।

৯৬. মোবাইল ওয়েবসাইটগুলিতে ফন্ট সাইজ বড় রাখবেন – সর্বদা স্ক্রিন আকারে সাথে মিল রেখে ফন্ট সাইজ নির্বাচন করুন ।

৯৭. ব্যানার অন্ধত্ব: ব্যবহারকারী যেন ব্যানারটি বিজ্ঞাপন ব্যানার মনে  না করে ।

৯৮. Long text blocks গুলো সহজে পাঠযোগ্য করতে, প্রতি Paragraph এ একটি আইডিয়া নিয়ে লিখুন।

৯৯. Italicized text পড়া কঠিন, বিশেষত ডিলেক্সিক পাঠকদের জন্য।

১০০. Tagline এবং Headline এর সব টেক্সট Capital Letter ব্যবহার ব্যবহার থেকে বিরত থাকুন।