4 اشتباه رایج در ساختن منوی وبسایت ها
سلام به شما دوستان عزیز و خوب . امروز در این مقاله 5 اشتباه رایج در ساختن منوی وبسایت را بررسی میکنیم . و راه حل های جایگزین آن را نیز براش شما دوستان عزیز شرح میدهیم .
نویگیشن و یا همان منوی وبسایت تقریبا میتوان گفت شاید اولین چیزی باشد که کاربر برای بدست آوردن اطلاعات مورد نظر با آن ارتباط بر قرار میکند و اگر تعامل با آن سخت و یا نامفهوم و گیج کننده باشد منجر به ترک وبسایت و یا تعامل ناقص کاربر میشود . و این باعث بوجود اوردن یک تجربه بد برای کاربر میشود.
اشتباه اول (هایلایت نکردن و نداشتن جلوه بصری)
وقتی کاربر اطلاعات مورد نظرش را در منو وبسایت میبیند و میخواهد یکی از المنت های منو را تاچ یا کلیک کند منوی ما باید یک حالت بصری داشته باشد تا کاربر آگاه شود که روی کدام یک کلیک کرده ؟ آیا همانی که میخواست بود؟ آیا به هدفش میرسد؟
در این مثال ما بهترین کاری که میتوانیم به عنوان جلوه بصری ایجاد کنیم یک خط به صورت آندر لاین زیر آن المنت کلیک یا تاچ شده حالا یا به صورت انیمیشن یا بدون انیمیشن میگذاریم که کاربر متوجه تعامل خودش با المنت مورد نظر شود .
نکته بعدی در مورد اینجوری منو هایی که بعضا رعایت نمیشود این است که شاید کاربران ما کور رنگی داشته باشند و نتوانند با تغییر رنگ متوجه شوند که کدام المنت کلیک یا تاچ شده . پس بهترین گزینه همان خط آندر لاین است .
اشتباه دوم (کنتراست پایین برای رنگ المنت انتخاب شده)
اشتباه رایجی که در خیلی از سایت ها دیده شده این است که وقتی کاربر المنتی را از منو انتخاب میکند ان المنت رنگ تیره و یا شفافیت(opacity) آن تغییر میکند مثل این عکس :
باز هم تاکید میکنم, شاید کاربران ما کورنگ باشند پس بهتر است یک خط آندر لاین زیر آن المنت تاچ یا کلیک شده بگذاریم . و اما این عکس بالا به خوبی به شما نشان میدهد که منو هایی که به این شکل هستند شاید برای کاربر تجربه خوبی را درست نکنند مثلا : اون المنت (Company) که در عکس بالا انتخاب شده خواندنش شاید برای برخی کاربران سخت باشد و بهترین کار برای نجات از این وضعیت همان آندرلاین یا جلوه های بصری رایج برای منو ها است .
این نکته را به خاطر داشته باشید که المنت انتخاب شده باید بیشتری کنتراست را داشته باشد . (بیشترین کنتراست بین رنگ پس زمینه و رنگ متن).
شما میتوانید کنراست یک متن با پس زمینه را اینجا ازمایش کنید .
اشتباه سوم (کنتراست پایین برای رنگ المنت انتخاب نشده)
به مثال زیر دقت کنید :
این مثال یکی دیگر از اشتباهات رایج در منو و ساخت نویگیشن ها است . کنتراست المنت های انتخاب نشده باید کمی کمتر از انتخاب شده ها باشد ولی نه آنقدر کم که هم برای خواندن سخت باشد و شاید اصلا کاربر فکر کند بقیه المنت ها خاموش (Disable) هستند .
شتباه چهارم (نداشتن افکت هاور وبهم ریختگی در برخی نویگیشن ها)
به مثال زیر دقت کنید :
در این مثال خیلی واضح شما میبینید که وقتی هاور (Hover) میشود یک محدوده خاصی مشخص میشود که این بسیار خوب میتواند تعامل را برای کاربر راحت تر و کلیک کردن یا تاچ کردن را خیلی مطمین تر و راحت تر کند . و شما با گذاشتن افکت هاور (Hover) به کاربر میگویید که ؛ حتما لازم نیست روی خود خود نوشته کلیک کنید . شما این منطقه (این محدوده) را برای کلیک کردن دارید .
ولی یک اشتباهی که اینجا رخ داده بهم ریختگی در این منو است که وقتی روی کمپانی کلیک شده افکت آندرلاین دارد و برای هاور نیز یک محدوده با رنگ تیره تر هست . خب صدردصد شما هم متوجه این بهم ریختگی شده اید که این طرز ساختار زیاد جالب نیست و یا شاید باعث سردرگم شدن کاربر شود .
بهتر است سعی کنیم هوشمندانه و عاقلانه افکت ها و جلوه ها را در وبسایت خود بکار بگیریم .
نتیجه گیری
ما برای جذب مشتری و یا بازدیدکنندگان و کاربران وبسایت تنها کاری که لازم است جلب توجه و خوشحالی و رضایت کاربران است که مارا به هدفمان میرساند پس بهتر است با دقت بیشتری در ساخت اجزای وبسایتتان پیش بروید .