در تصویر ارسالی، مشاهده میشود که هدر سایت Coursera org در صفحهی مربوط به دورهٔ Google Advanced Data Analytics Professional Certificate فضای زیادی را در بالای صفحه اشغال کرده است. این طراحی، هرچند ممکن است بهمنظور نمایش کامل مسیرهای ناوبری و تبهای مختلف (مانند About، Outcomes، Courses، Testimonials و Recommendations) انجام شده باشد، اما چند مشکل و نقص مهم دارد:
۱. احساس خفگی و شلوغی بصری
با اشغال بخش زیادی از فضای بالای صفحه، کاربر هنگام اسکرول کردن احساس محدودیت در دید میکند. این موضوع در لپتاپها یا نمایشگرهایی با ارتفاع کم (مانند دستگاههای ۱۳ اینچی) بهشدت محسوستر است و کاربر حس میکند که در فضای بستهای قرار دارد.
۲. پوشاندن محتوای اصلی
همانطور که در تصویر دیده میشود، وقتی ماوس روی گزینههایی مانند «Courses» یا «Testimonials» قرار میگیرد، منوی کشویی به سمت پایین باز میشود و بخشی از محتوای اصلی صفحه (مثلاً کارت دورهها) را میپوشاند. این باعث میشود دسترسی به اطلاعات با دشواری بیشتری همراه باشد.
افزایش نیاز به اسکرول بیمورد
هدر بلند باعث میشود کاربر مجبور شود برای رسیدن به محتوای اصلی بیشتر اسکرول کند، حتی اگر هدفش فقط مشاهده لیست دورهها باشد. این موضوع در تجربهٔ کاربری (UX) ضعف محسوب میشود.
پرتی تمرکز از محتوای اصلی
وقتی فضای زیادی در بالای صفحه صرف منوها و هدر میشود، توجه کاربر از محتوای اصلی منحرف شده و تمرکز کاهش مییابد. بهویژه برای افرادی که تازه وارد سایت میشوند، این موضوع گیجکننده است.
اشتباه در تصمیمگیری طراحی ریسپانسیو
این نوع هدر در نسخههای دسکتاپ نسبتاً بد طراحی شده و اگر همان منطق در موبایل هم پیاده شود، فضای اندکی برای نمایش دادهها باقی میماند و نیاز به طراحی بهینهتر وجود دارد.
کاهش ارتفاع هدر در نسخه دسکتاپ؛
تبدیل تبهای بالا به منوی کشویی جمعوجور در حالت hover؛
استفاده از sticky header باریک برای اسکرولهای بعدی؛
پنهان کردن هدر پس از اسکرول به پایین و بازگرداندن آن هنگام اسکرول به بالا.
