আসুন জেনে নেয়া যাক, সবচেয়ে কমন হেডার টাইপস এবং ডিজাইনের বেসিকের পাশাপাশি কিভাবে হেডার ডিজাইন করলে সেটি ইনফরমেটিভ কন্সিস্টেন্ট হবে এবং ইউজারদের ওয়েবসাইট নেভিগেশনে সাহায্য করবে

-----লার্ন ডিজাইন//

“আগে হেডার কেবল একটি নেভিগেশোনাল স্লিপ ছিলো যা পেইজের লোগো, কন্ট্যাক্ট ইনফরমেশন এবং কল-টু-একশন বাটন ধারণ করতো।কিন্তু এখন “above the fold” সবকিছুই হেডারের অংশ।

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

হেডার টাইপস

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

1. ক্লাসিক হেডার
2. ম্যাগাজিন-স্টাইল হেডার
3. হিরো হেডার
4. ভার্টিক্যাল নেভিগেশন ড্রয়ার
5. হেডার উইথ এ হ্যামবার্গার মেন্যু
6. স্টিকি হেডার
7. হেডার উইথ এ ডাবল মেন্যু
   

1. ক্লাসিক হেডার

ক্লাসিক হেডার প্রচলিত হেডারগুলোর মধ্যে অন্যতম জনপ্রিয় একটি হেডার। সাধারণত, পেইজের লোগো, কন্ট্যাক্ট ইনফরমেশন এবং কল-টু-একশন বাটন এবং কনটেন্টেরবেসিক ক্যাটাগরির লিংক এখানে থাকে।

ল্যান্ডিং পেইজ ও সিম্পল ওয়েবসাইটগুলোতে ক্লাসিক হেডার খুবই স্টাইলি ও ক্লাসি লুক দেয়।

তাছাড়া, ক্লাসিক হেডারটি সবচেয়ে কমন আই ট্র্যাকিং প্যাটার্ন (গুটেনবার্গ, এফ-প্যাটার্ন, জেড প্যাটার্ন) এর সমন্বয়ে খুবই স্ট্রং একটি ফোকাল-জোন তৈরি করে। যেহেতু মানুষের চোখ উপরের বাম কোণ থেকে উপরের ডান কোণায় মুভ করে থাকে তাই ক্লাসিক হেডারটি ইউজারের নজর কাড়ে।

2. ম্যাগাজিন-স্টাইল হেডার

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

3. হিরো হেডার

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

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

4. ভার্টিক্যাল নেভিগেশন ড্রয়ার

আপনার ওয়েবসাইটের জন্য ভার্টিক্যাল নেভিগেশন ড্রয়ার হেডারটি হতে পারে সেই ফ্লেক্সিবল “কাচ্চির আলু কিংবা ফ্রেঞ্চ ফ্রাই”। অর্থাৎ, এই হেডারটি আপনি প্রায় যেকোনো প্রোডাক্ট বা সার্ভিসের জন্য ব্যবহার করতে পারেন। এর সাইডবার মেন্যুটি কমপ্লেক্স এপ্লিকেশন কিংবা ওয়েবসাইট উভয়ের জন্য অত্যন্ত ভালো কাজ করে।

5. হেডার উইথ এ হ্যামবার্গার মেন্যু

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

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

রেসপন্সিভ ও এডাপ্টিভ ডিজাইন প্রিন্সিপালের কারণে এটি ওয়েবসাইটের ইউজার এনগেজমেন্ট বাড়ায়, পাশাপাশি UI -কে কোহেসিভ ও ইউনিফর্ম লুক দেয়।

6. স্টিকি হেডার

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

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

7. হেডার উইথ এ ডাবল মেন্যু

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

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

হেডার ডিজাইন— বেস্ট প্র্যাকটিসেস

হেডার ডিজাইন করার সময় যেই বিষয়গুলো মনে রাখা উচিৎ:

1. হেডার সাইজ, পেইজ সাইজের সাথে সামঞ্জস্যপূর্ণ হতে হবে।
2. ভিজ্যুয়াল হায়ারার্কি বজায় রাখা।
3. কল-টু-একশন বাটন এর ব্যবহার প্রাসঙ্গিক রাখা।
4. প্রাসঙ্গিক ছবি ব্যবহার করা।
5. প্রাসঙ্গিক ফন্ট ব্যবহার করা।
   

1. পেইজের সাথে সামঞ্জস্যপূর্ণ হেডার সাইজ

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

এনলার্জড হিরো ইমেজের ক্ষেত্রে, ইমেজের নিচে কিছুটা স্পেস রাখতে হবে যাতে ইউজারকে স্ক্রলিং -এ এনগেজ রাখা যায়।

টাচস্ক্রিন ডিভাইসে টাচ টার্গেট এটলিস্ট 8-10mm (30-38px) হতে হবে এবং টেক্সট ভালোভাবে পড়া যাচ্ছে কিনা এ বিষয়ে লক্ষ্য রাখতে হবে।

2. ভিজ্যুয়াল হায়ারার্কি বজায় রাখুন

গবেষণায় দেখা যায়, ইউজাররা ইউনিক ও আনকমন ইন্টারফেজের চাইতে রেগুলার ওয়েবসাইট ইন্টারফেজ বেশি প্রেফার করেন। এন এন গ্রুপের মতে, প্রচলিত টপ-লেফট লোগো ইউজারদের জন্য তুলনামূলক বেশি কমফোর্টেবল এবং ব্র্যান্ড-রিকল ৮৯% পর্যন্ত বাড়ায়।

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

3. কল-টু-একশন বাটন এর প্রাসঙ্গিক ব্যবহার

CTA বাটন ডিজাইন করার সময় যে বিষয়গুলো মনে রাখতে হবে:

• পেইজের সাথে পর্যাপ্ত কনট্রাস্ট রাখতে হবে। মিনিমাম অনুপাত 4:5:1 , তবে এটি অবশ্যই ফন্ট সাইজ ও টার্গেটের উপর নির্ভর করবে।
• সৃজনশীল CTA বাটন তৈরি
• CTA বাটন ইউজার এক্সপেক্টেড প্লেসে বসাতে হবে। সাধারণত এটি পেইজের টপ-রাইট কর্ণারে থাকে। যদি আপনি হিরো হেডার ব্যবহার করেন, তাহলে CTA বাটনটি হিরো ইমেজে ফোকাস করে বসাতে হবে।

4. প্রাসঙ্গিক ছবি ব্যবহার

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

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

5. প্রাসঙ্গিক ফন্ট ব্যবহার

যদি আপনি সঠিক ফন্ট ব্যবহার না করেন তাহলে সবচেয়ে ক্রিয়েটিভ ইমেজটি কিংবা পারফেক্ট কল-টু-একশন বাটনটি আপনার কোনো কাজেই আসবে না। তাই, হাই কন্ট্রাস্টি রিডেবল ফন্ট ব্যবহার করুন।

বিভিন্ন টুল ব্যবহার করে ফন্টের রিডেবিলিটি চেক করুন। থিম অনুযায়ী ফন্টের কালার ও স্টাইল এডজাস্ট করুন। কারণ এখানে এস্থেটিকলি প্লিজিং এর চেয়ে ফন্টের রিডেবিলিটি বেশি গুরুত্বপূর্ণ।

কি? হেডার ডিজাইন সম্পর্কে জানলেন তো? Now Just Practice!

এখনই শুরু করে দিন আপনার UI/UX ডিজাইন জার্নিটা। ভালো ডিজাইন ফাউন্ডেশন, ডিজাইন সেন্স, কোনো একটি স্পেসিফিক নিশ- এ দক্ষ হবার এখনই তো সময়।

হ্যাপি ডিজাইনিং…