نکات طراحی UX برای منوهای کشویی

نکات طراحی UX برای منوهای کشویی

نکات طراحی UX برای منوهای کشویی – در این راهنما سعی شده است که برخی تکنیک های طراحی مفید برای ساخت منوهای کشویی را متذکر شویم، که شامل منوهای کشویی چندسطحی و همچنین مگامنوها می باشد که همگی دارای قواعد طراحی یکسانی می باشد.

منوهای کشویی به لطف جاوااسکریپت و افکت های CSS مدت زیادی است که عرضه شده اند، اما همه ی آنها یکی نیستند و استراتژی های UX سبب ایجاد ارجحیت برخی به برخی دیگر شده است.

– استفاده از نشانگرها برای زیر منوها

استفاده از نشانگرها برای لینک هایی که دارای زیرمنو هستند ایده ی بسیار کارآمدی است. این نشانگرهای کوچک(فلش) کاربران را برای استفاده از زیرمنوها هدایت و راهنمایی می کند. همچنین استفاده از این علایم بدون توجه به تعداد زیر منوها، تا آخرین سطح بهتر است بکار برده شوند.

نشانگرها می توانند به هرگونه شکل دلخواهی باشند از جمله فلش، نقطه، مربع یا هر شکلی که کاربر را به وجود لایه ی بعد هدایت می کند. انتخاب نشانگر بسته به ذکاوت طراح می تواند متفاوت باشد. بیشتر طراحان از فلش requo بدلیل سادگی آن استفاده می کنند. همچنین آن ها این فلش دوتایی را به جهت حجیم تر بودن آن و همچنین جلب توجه بیشتر انتخاب می کنند. بعلاوه، این فلش(پیکان) شکل خود را در هرگونه اندازه ی صفحه حفظ می کند.

برخی هنگام طراحی، نمایش پیکان برای وجود لایه ی بعدی را محدود به هاور شدن روی لینک مربوطه می کنن، بعبارت دیگر تا زمانی که بروی لینک مورد نظر نرفته باشیم، متوجه وجود یا عدم وجود زیر لایه ی بعدی نخواهیم شد و فلش مربوط به آن نیز فعال نخواهد بود، اما بیاد داشته باشید که بهترین حالت، نمایش پیکان ها(فلش ها) در تمامی حالت هاست.

– فضایی همراه با پدینگ لینک ها

عدم استفاده از فضای مناسب در منوها بسیار آزاد دهنده است.

لینک ها در منوهای کشویی دارای فضای بسیار کمی برای خود هستند، لازم است به این نکته اشاره شود که تفاوت زیادی بین مفهوم margin و padding وجود دارد.

با margin شما تنها می توانید روی متن مورد نظر کلیک کنید و ناحیه قابل کلیک، تنها به اندازه متن مورد نظر است. اما با padding کل ناحیه مورد نظر قابلیت کلیک پیدا کرده و در واقع کاربر دارای ناحیه ی بزرگتری برای انتخاب است. در واقع در منوها بهتر است، سعی نمود تا برای لینک ها، ناحیه نسبتا زیادی جهت انتخاب مشخص کرد.

– هاور

استفاده از کلاس active برای منوهای هاور شده سبب ایجاد توجه بیشتر می شود. بیشتر طراحان از شبه کلاس hover برای لینک ها استفاده می کنند که بسیار کارآمد است.

باید توجه داشت داشت که لینک والد هنگامی که کاربر روی زیرمنوها حرکت می کند، همچنان در حالت هاور قرار داشته باشد. می توان برای هاور در تکنیک های مختلفی استفاده نمود، مثلا تغییر فونت- تغییر رنگ پس زمینه، استفاده از خط زیرین- هایلایت کردن- سایه ها و هر شکل دیگری که مطابق سلیقه طراح است.

به بیان ساده تر، وقتی کاربر یک منو را باز میکند و بروی زیر منوها حرکت می کند، بهتر است لینک اصلی منو همچنان فعال بوده و هاور اعمال شده بروی آن حذف نشود.

– منوهای کشویی سریع و انیمیشنی

با ترکیب CSS3 و jQuery می توان منوهای بسیار جالب و خلاقانه ای ایجاد نمود. اما هنگام استفاده از انیمیشن ها، حتما می بایست به این نکته توجه داشت که بکارگیری آن ها سبب کند شدن و نارضایتی کاربر از صفحه نگردد و بطور خلاصه بتوان آن ها را در دو کلمه سریع و قابل توجه خلاصه نمود.

نتیجه گیری

هنگام طراحی منوهای کشویی می بایست هردو قابلیت شکل و کاربرد را در نظر داشت. زیبایی از اهمیت بالایی برخوردار است اما استفاده ی ساده و آسان برای کاربرا الویت بیشتری دارد.

منبع: دوران دات نت

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.