ইউজার ইন্টারফেস প্যাটার্ন

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

এর মানে হলো, কিছু ইন্টারফেস এলিমেন্টকে কোন প্রেক্ষাপটে দেখা হচ্ছে তার উপর নির্ভর করে বেশ ভিন্ন দেখাতে হতে পারে। বিভিন্ন স্ক্রিন সাইজের সর্বোত্তম ব্যবহারের জন্য আপনাকে একই HTML কোডবেসে খুব ভিন্ন CSS প্রয়োগ করতে হতে পারে। এটি ডিজাইনের ক্ষেত্রে বেশ বড় একটি চ্যালেঞ্জ হতে পারে!

এখানে কিছু সাধারণ সমস্যা তুলে ধরা হলো, যেগুলোর সম্মুখীন আপনি হতে পারেন।

নেভিগেশন

বড় স্ক্রিনে ন্যাভিগেশন লিঙ্কের তালিকা দেখানো বেশ সহজ। এই লিঙ্কগুলো রাখার জন্য যথেষ্ট জায়গা থাকে।

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

এমন একটি কৌশল খুঁজে বের করার চেষ্টা করুন যাতে আপনার নেভিগেশন লুকিয়ে না যায়। যদি আপনার আইটেমের সংখ্যা তুলনামূলকভাবে কম থাকে, তবে আপনি ছোট স্ক্রিনেও সুন্দর দেখানোর জন্য নেভিগেশনটি স্টাইল করতে পারেন।

আপনার নেভিগেশনে অনেকগুলো লিঙ্ক থাকলে ওই প্যাটার্নটি স্কেল হবে না। ছোট স্ক্রিনে লিঙ্কগুলো দুই বা তিন লাইনে চলে এলে নেভিগেশনটি অগোছালো দেখাবে।

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

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

শেষ উপায় হিসেবে আপনি আপনার নেভিগেশন ডিফল্টরূপে লুকানো রাখতে পারেন এবং ব্যবহারকারীদের বিষয়বস্তু দেখানো ও লুকানোর জন্য একটি টগল ব্যবস্থা রাখতে পারেন। একে প্রগ্রেসিভ ডিসক্লোজার বলা হয়।

নেভিগেশনের প্রদর্শন পরিবর্তন ও পরিবর্তন করার বাটনটিতে যেন লেবেল থাকে, তা নিশ্চিত করুন। বোঝার জন্য শুধু একটি আইকনের উপর নির্ভর করবেন না।

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

ক্যারোসেল

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

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

সরু স্ক্রিনের জন্য, ফ্লেক্সবক্স ব্যবহার করে আইটেমগুলো এক সারিতে প্রদর্শন করুন। আইটেমের সারিটি স্ক্রিনের কিনারা ছাড়িয়ে যাবে। আনুভূমিকভাবে সোয়াইপ করার সুবিধা দিতে overflow-x: auto ব্যবহার করুন।

@media (max-width: 50em) {
  .cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
  }
  .cards .card {
    flex-shrink: 0;
    flex-basis: 15em;
    scroll-snap-align: start;
  }
}

scroll-snap প্রোপার্টিগুলো নিশ্চিত করে যে আইটেমগুলো সাবলীলভাবে সোয়াইপ করা যায়। scroll-snap-type: inline mandatory কারণে, আইটেমগুলো নির্দিষ্ট স্থানে স্ন্যাপ করে বসে যায়।

যখন স্ক্রিনটি যথেষ্ট বড় হবে—এই ক্ষেত্রে 50em চেয়ে চওড়া—তখন গ্রিড মোডে চলে যান এবং কোনো কিছু না লুকিয়ে আইটেমগুলো সারি ও কলামে প্রদর্শন করুন।

@media (min-width: 50em) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  }
}

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

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

আবার, scroll-snap প্রোপার্টিগুলো নিশ্চিত করে যে ইন্টারঅ্যাকশনটি মসৃণ হয়। আরও লক্ষ্য করুন যে, ক্যারোসেলের ছবিগুলোতে loading="lazy" প্রয়োগ করা হয়েছে। এক্ষেত্রে, ছবিগুলো ‘বিলো দ্য ফোল্ড’-এ নেই, বরং সেগুলো ‘বিয়ন্ড দ্য এজ’-এ রয়েছে, কিন্তু একই নীতি এখানেও প্রযোজ্য: যদি ব্যবহারকারী কখনও সেই আইটেমটি পর্যন্ত সোয়াইপ না করেন, তাহলে ছবিটি ডাউনলোড হবে না, ফলে ব্যান্ডউইথ সাশ্রয় হবে।

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

ডেটা টেবিল

সারণিবদ্ধ ডেটা কাঠামোবদ্ধ করার জন্য table এলিমেন্টটি আদর্শ; এটি সম্পর্কিত তথ্যের সারি এবং কলাম তৈরি করে। কিন্তু টেবিলটি খুব বড় হয়ে গেলে, এটি আপনার ছোট পর্দার লেআউট নষ্ট করে দিতে পারে।

আপনি টেবিলের ক্ষেত্রেও ওভারফ্লো প্যাটার্ন প্রয়োগ করতে পারেন। এই উদাহরণে, টেবিলটিকে table-container ক্লাসযুক্ত একটি div এর মধ্যে রাখা হয়েছে।

.table-container {
  max-inline-size: 100%;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}
.table-container th,
.table-container td {
  scroll-snap-align: start;
  padding: var(--metric-box-spacing);
}

নির্দেশিকা

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

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

প্রথমে ছোট পর্দার কথা মাথায় রেখে ডিজাইন করুন। বড় পর্দার জন্য ছোট পর্দার ডিজাইন মানিয়ে নেওয়া সহজ, কিন্তু এর উল্টোটা করা কঠিন। যদি আপনি প্রথমে বড় পর্দার জন্য ডিজাইন করেন, তাহলে ছোট পর্দার ডিজাইনটি যেন পরে যোগ করা হয়েছে বলে মনে হতে পারে।

আরও লেআউট এবং UI এলিমেন্ট প্যাটার্নের জন্য, web.dev-এর প্যাটার্নস সেকশনটি দেখুন।

যখন আপনি বিভিন্ন স্ক্রিন সাইজের সাথে ইন্টারফেস এলিমেন্টগুলো মানিয়ে নেন, তখন ডিভাইসের ডাইমেনশন বের করার জন্য মিডিয়া কোয়েরি খুবই দরকারি। কিন্তু min-width এবং min-height এর মতো মিডিয়া ফিচারগুলো তো কেবল শুরু। এরপর, আপনি আরও অনেক ধরনের মিডিয়া ফিচারের সন্ধান পাবেন।