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