طراحی سایت، طراحی UX، تجربه کاربری، منوی dropdown ، منوی کشویی، navigation
در طراحی سایت یکی از مهمترین قسمت های طراحی منو و راهبری سایت میباشد. ایجاد یک منوی کاربردی و راهبری مناسب تأثیر بسیار زیادی بر تجربه کاربری دارد و مانع از سر در گم شدن کاربر در سایتتان میشود. یکی از انواع منوهای رایج و پرکاربرد در طراحی سایت، منوهای dropdown یا کشویی میباشد.
منوهای کشویی یا dropdown با وجود جاوا اسکریپت و افکت های css3 تا به حال پیشرفت و تغییرات زیادی داشته اند. ولی تمام منوهای کشویی یکسان نیستند و رعایت برخی نکات مربوط به تجربه کاربری (UX) باعث بهبود کاربری آن ها میشود.
در این مقاله به تعدادی از تکنیک کاربردی اشاره میکنیم که با استفاده از آن ها موفق به طراحی منوهای کشویی کاربردی و کاربرپسند خواهید شد. منوهای کشویی چند سطحی و مگا منوها هم شامل این موارد میشوند.
علامت مشخص برای زیر منوها
بهتر است که در صورت وجود زیر منو برای آن نشانه ای بگذارید تا کاربر متوجه آن شود مثل یک فلش کوچک.
این نشانه ها میتوانند به شکل های دیگر مثل نقطه، مربع یا هر سمبل دیگری باشند. بیشتر کاربران متوجه نشانه ها میشوند به شرطی که این نشانه ها آشنا و شناخته شده باشند.
برای مثال سایت Threadbird برای زیرمنوهایش از دو علامت فلش استفاده کرده است. معمولاً طراحان استفاده از دو فلش کنار هم را به یک فلش ترجیح میدهند چون راحتتر دیده میشود. و از طرفی شکل فلش های دوتایی در سایزهای کوچکتر هم بهتر حفظ میشود.
استفاده از padding و فضای مناسب در آیتم های منو
در بیشتر منوهای کشویی یک فاصله مشخص بین آیتم های منو وجود دارد. ولی اینکه این فضا و فاصله چطور ایجاد شده است بسیار مهم است، تفاوت زیادی بین margin و padding وجود دارد!
اگر برای ایجاد فضا در اطراف آیتم از margin استفاده کنید آنگاه فضای قابل کلیک برای کاربر فقط بر روی نوشته آیتم میباشد. ولی در صورت استفاده از padding میتوانید فضای بزرگتری را برای کلیک کردن ایجاد نمایید. بنابراین کاربر در هنگام کلیک کردن بر روی یک آیتم از منو نیازی نیست دقیقاً بر روی خود نوشته کلیک کند، میتواند بر روی فضای اطراف آن هم کلیک کند. در کل از دو روش برای ایجاد فضا در اطراف آیتم های منو استفاده میشود: padding یا margin که با توجه به ویژگی های هر دو استفاده از padding به طور حتم بهتر و کاربردی تر میباشد.
برای درک بهتر میتوانید سایت webdesignerdepot را ببینید که از padding در منوی خود استفاده کرده و با منوی سایت The Philadelphia Orchestra که از margin در آن استفاده شده مقایسه کنید تا متوجه تفاوت آن ها شوید.
افکت hover مشخص
استفاده از یک کلاس مشخص برای لینک ها در حالت hover بسیار تأثیرگذار میباشد. بهتر است در حین دیدن زیرمنوهای یک آیتم، آن آیتم هم هایلایت باشد تا مشخص شود که زیرمنوهای کدام آیتم در حال نمایش است همه اینها به بهبود تجربه کاربر کمک میکند.
افکت hover را به هر شکل دلخواهی میتوانید پیاده سازی کنید مثلاً تغییر رنگ فونت، رنگ زمینه، آندرلاین شدن نوشته، هایلایت شدن، افکت سایه یا هر افکت دیگری.
پس برای داشتن تجربه کاربری بهتر، باید از افکت مشخص برای hover استفاده کنید و زمانی که کاربر وارد زیرمنوهای یک لینک اصلی میشود آن لینک هایلایت باقی بماند(منظور حتماً هایلایت نیست یعنی مسیری که کاربر طی کرده است به نحوی مشخص باشد مثلاً از طریق breadcrumb ها) تا کاربر بداند که چه مسیری را طی کرده است و در صورت نیاز به لینک مادر بازگردد.
انیمیشن مناسب از نظر حجم و سرعت
با استفاده از css3 به همراه jQuery میتوان انیمیشن های قدرتمندی در وب ایجاد کرد. ولی انیمیشن ها در کل باید به صورت هدفمند استفاده شوند. طراحان UX و UI باید از انیمیشن به صورت بهینه و کاربردی استفاده کنند. انیمیشن باید باعث جذابیت شود ولی در عین حال نباید سرعت را پایین بیاورد و در تجربه کاربری خللی ایجاد کند.
بهترین نوع انیمیشن های dropdown میتوانند در دو کلمه خلاصه شوند: سریع ولی جالب توجه
نگاهی به سایت ESPN بیندازید، در منوی آن از انیمیشن اسلاید استفاده شده و در کمتر از 1 ثانیه این تغییر اتفاق می افتد بدون اینکه کاربر نیاز به صبر کردن حتی به مدت چند ثانیه داشته باشد.
به طور کلی، بهتر است زمان انیمیشن های موجود در منو را حدود 1.5 ثانیه یا کمتر قرار دهید.
