آیا هدرهای چسبنده همیشه ایده خوبی هستند؟ بهترین روش‌ها برای طراحی هدرهای چسبنده، همراه با مثال‌ها، راهنمای جامع UX و ملاحظات قابلیت استفاده.
ما اغلب به سربرگ‌های چسبنده تکیه می‌کنیم تا توجه کاربر را به ویژگی‌های حیاتی یا CTA جلب کنیم. به ناوبری نوار کناری، CTAها، سرصفحه‌ها و پاورقی‌های چسبنده، ردیف‌ها یا ستون‌های «ثابت» در جداول و دکمه‌های شناور فکر کنید. من بعدا الگوهای ناوبری تلفن همراه را در راهنمای جامع UI هوشمند بررسی خواهم کرد، اما منوهای چسبنده شایسته نگاه دقیق‌تر هستند.
همانطور که کاربران پیمایش می کنند، یک منوی چسبناک همیشه در معرض دید قرار می گیرد. و به طور معمول، به عنوان یک ویژگی خوب در نظر گرفته می شود، به خصوص اگر از منوها به طور مکرر استفاده می شود و به خصوص اگر می خواهیم سرعت ناوبری را افزایش دهیم.
آیا منوهای چسبنده برای سایت ما مناسب است؟
چگونه تصمیم بگیریم که یک منو باید چسبنده باشد یا نه؟ این بستگی به کار اصلی یک صفحه دارد. اگر اساساً برای انتقال اطلاعات طراحی شده است و ما انتظار ناوبری زیادی نداریم، منوهای چسبنده چندان مفید نیستند و بهتر است در فرایند طراحی سایت بیخیال آن شوید.
با این حال، اگر از کاربران انتظار داشته باشیم که بین نماهای مختلف در یک صفحه به میزان زیادی حرکت کنند و در حین انجام این کار در صفحه بمانند، همانطور که اغلب در صفحات فرود طولانی، صفحات محصول و فیلترها انجام می شود، پس دسترسی به ناوبری، A-Z یا برگه ها می تواند بسیار مفید باشد
همچنین، هنگامی که کاربران ویژگی‌ها را در جدول داده‌ها مقایسه می‌کنند، سربرگ‌های چسبنده به آنها کمک می‌کند تا بررسی کنند که همیشه در صفحه درستی هستند. اینجاست که سرصفحه‌ها یا ستون‌های چسبنده می‌توانند کمک کنند و به درک کمک کنند. به همین دلیل است که میله‌های چسبنده بسیار در تجارت الکترونیک استفاده می‌شوند و در تجربه من، قابلیت کشف محتوا و سرعت تعامل را بهبود می‌بخشند.
هدرهای چسبنده را کوچک، اما به اندازه کافی بزرگ نگه دارید
نقطه ضعف منوهای چسبنده این است که معمولاً کاوش صفحه را برای کاربران دشوارتر می کنند زیرا محتوا را مبهم می کنند. نوارهای عرض کامل در موبایل و دسکتاپ رایج هستند، اما باید فشرده باشند، به خصوص در صفحه نمایش های باریک. و برای جلوگیری از ضربه‌های خشمگین و کلیک‌های از روی خشم، باید به اندازه المان ها توجه ویژه‌ای داشته باشید.
به طور معمول، این بدان معناست که ما نمی‌توانیم بیش از پنج مورد در پیمایش نوار چسبنده داشته باشیم. انتخاب موارد نمایش داده شده در منوی چسبنده باید بر اساس مهمترین وظایفی باشد که کاربران باید در وب سایت انجام دهند. اگر بیش از پنج مورد دارید، احتمالاً لازم است به نوعی منوی سرریز نگاه کنید، همانطور که توسط سامسونگ نمایش داده می شود.
هر زمان که کاربران مجبورند با فرم‌های موجود در صفحه در تلفن همراه سروکار داشته باشند، آکاردئون را جایگزین منوهای چسبنده کنید. صفحه‌کلیدهای مجازی معمولاً تا 60 درصد از صفحه را اشغال می‌کنند و با یک نوار چسبنده، پر کردن یک فرم به سرعت غیرممکن می‌شود.
مشکلات دسترسی منوهای چسبنده
طبیعتاً منوهای چسبنده همیشه در بالای محتوا قرار دارند و اغلب باعث ایجاد مشکلات دسترسی می شوند. هنگامی که کاربران بزرگ‌نمایی می‌کنند، آنها خراب می‌شوند. اغلب محتوا را برای کاربران صفحه‌کلید که محتوا را درب می‌کنند مسدود می‌کنند. آنها پیوندها و سایر عناصر قابل تمرکز را مبهم می کنند. و اغلب کنتراست کافی بین منو و منطقه محتوا وجود ندارد.
هر زمان که یک منوی چسبنده را اجرا می کنیم، باید مطمئن شویم که عناصر قابل فوکوس همچنان با یک منوی چسبنده در عمل قابل مشاهده هستند. و این برای لنگرهای داخلی صفحه نیز صدق می کند که باید نوار چسبنده را با ویژگی scroll-padding در CSS در نظر بگیرند.
از نوارهای پیمایش متعدد منوهای چسبناک طولانی خودداری کنید
هنگامی که منوهای چسبنده طولانی می شوند، دسترسی به آخرین موارد موجود در لیست دشوار می شود. ما می‌توانیم آنها را با نوعی منوی سرریز نمایان کنیم، اما اغلب به‌عنوان صفحه‌های قابل پیمایش ظاهر می‌شوند و باعث ایجاد نوارهای پیمایش متعدد می‌شوند.
این رفتار نه تنها باعث مشکلات قابل کشف می شود، بلکه اغلب دلیلی برای اشتباهات و اقدامات تکراری در یک صفحه است. در حالت ایده‌آل، با کوتاه نگه داشتن تعداد موارد از آن جلوگیری می‌کنیم، اما اغلب امکان‌پذیر نیست یا نمی‌توان آن را به درستی مدیریت کرد.
راه چاره این است که به جای آن در مواقعی که فضا محدود است، به خصوص در دستگاه های تلفن همراه، منو به صورت آکاردئون نشان دهید. این کاری است که ما در وب دیزاین 98 انجام می دهیم، با دکمه ای که در صورت نیاز محتویات منو را آشکار و پنهان می کند.
منوهای نیمه ماندگار
از آنجایی که منوهای چسبنده اغلب فضای زیادی را اشغال می‌کنند، می‌توانیم در صورت نیاز آنها را آشکار کنیم و زمانی که کاربر روی محتوا تمرکز می‌کند، آنها را پنهان کنیم. این ایده پشت سرصفحه‌های نیمه پایدار است: وقتی کاربر شروع به اسکرول کردن به پایین می‌کند، منو ناپدید می‌شود، اما پس از آن هر حرکتی به بالا باعث می‌شود منو دوباره ظاهر شود.
مشکل این الگو این است که گاهی اوقات کاربران فقط می‌خواهند به بخش قبلی صفحه برگردند یا برخی جزئیات را در پاراگراف قبلی دوبار بررسی کنند و منو اغلب مانع می‌شود. Page Laubheimer از NN/Group توصیه می‌کند از یک انیمیشن اسلایدی استفاده کنید که تقریباً 300 تا 400 میلی‌ثانیه طول دارد و حس طبیعی را بدون ایجاد حواس پرتی حفظ می‌کند.