۲۰ اصل طراحی منوی ناوبری

۲۰ اصل طراحی منوی ناوبری

فرض کنید برای اولین بار به عنوان یک بازدید کننده وارد سایت خودتون شدید. شما می دونید دنبال چه چیزی هستید اما هیچ ایده و روشی برای پیدا کردن و رسیدن به هدفتون در این سایت ندارید! همچنین شما فرصت کافی برای بررسی تمام محتویات صفحه رو ندارید، پس در این لحضه شما باید در اولین ثانیه های ورود به سایت، یک ایده و راهنمای سریع در سایتون پیدا کنید تا شما رو به هدفتون  نزدیک کنه و جلوی خروج شما از سایت رو بگیره.

قبلا در اینجا با نحوه حرکت چشم بازدید کنندگان آشنا شدید و این رو هم می دونیم که یک کاربر تازه وارد که احتمالا از یک موتور جستجو به سایت ما رسیده، خیلی عجول هست و می خواد خیلی سریع به هدفش برسه و اگر ما در لحضات اول، یک راهکار برای رسیدن کاربر به هدفش نداشته باشیم، کاربر از سایت ما خارج شده و مجددا به موتور جستجو برخواهد گشت و به تلاش برای پیدا کردن یک سایت مناسب ادامه میده.
در واقع بعد از ورود یک کاربر به سایت، به طور مداوم این سوال در ذهن او تکرار میشه، که آیا این سایت دقیقاً جای است که می تواند نیاز من رو برآورده کند؟! یا باید به موتور جستجو برگرده و به دنبال یک نتیجه مناسب تر باشه؟!
در اینجاست که منوی ناوبری سایت اهمیت خودش رو نشون میده و به ما کمک میکنه کاربر رو به هدفش نزدیک کنیم و جلوی خروج بازدیدکننده رو بگیریم.

در این پست به ۲۰ اصل یک منوی ناوبری خوب اشاره می کنم که با رعایت این اصول می تونید یک راهنمای سریع و خوب برای بازدید کنندگان طراحی کنید.

۲۰ اصل طراحی منوی ناوبری:

۱-  متفاوت و متمایز

منوی ناوبری باید از نظر بصری قابل تشخیص باشه و کاربر بتونه به راحتی اون رو در سایت پیدا کنه. منوی ناوبری نباید از نظر رنگ، فونت و سایز با متن Body شباهت داشته باشه. متن منوی ناوبری باید همیشه قابل تشخیص باشه و بشه به راحتی بین منو و محتوا تمایز قائل شد. همچنین بهتره برای دکمه ها و ایتم های این منو از رنگ های با کنتراست بالا و بسیار خوانا استفاده کنید.

۲۰ اصل طراحی منوی ناوبری

۲-  ساده

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

۲۰ اصل طراحی منوی ناوبری

۳- ساختار مشابه و هماهنگ

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

۴- طراحی متعارف

از ایجاد منو های غیر معمول اجتناب کنید. سعی کنید ایتم های منوی شما با یک الگوی واحد طراحی شده باشند و از طراحی ایتم هایی با شکل های پیچیده پرهیز کنید.

۲۰ اصل طراحی منوی ناوبری

۵- واضح و شفاف

ایتم های منو را طوری ایجاد کنید که دقیقاً منظور کلمه استفاده شده رو به مخاطب منتقل کند. از کلمات ساده، شفاف، قابل فهم و بدون نیاز به فکر کردن برای فهمیدن معنی، استفاده کنید.
کلماتی کوتاه، توصیفی و با توجه به موضوع لینک انتخاب کنید. اگر درک مفهوم یک ایتم منو در سایت شما، به بیشتر از یک ثانیه زمان نیاز داشته باشه، به ایجاد یک تجربه بد برای بازدید کننده کمک زیادی کرده اید!

۶- توصیف

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

۷- مختصر و کوتاه

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

۲۰ اصل طراحی منوی ناوبری

۸- تعاملی

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

۹- ترتیب

ایتم ها و لینک های با اهمیت بیشتر را در ابتدای لیست منو و ایتم های با اهمیت کمتر را در میانه لیست قرار دهید. اکثر افراد به ابتدا و انتهای لیست ایتم های منو بیشترین توجه رو دارند.
مثلا بهترین مکان برای ایتم "تماس با ما" در اخر لیست منو است.

۲۰ اصل طراحی منوی ناوبری

۱۰- سبک

در صورت طراحی به یک سبک خاص اصول را هم رعایت کنید. سبک مینیمال همچنان در روند طراحی وب تاثیر گذار هست و طراحان وب زیادی سعی در ساده سازی منوی ناوبری سایت دارند. این خیلی خوبه اگر، طراحی ان کسل کننده نشود و اصول شماره #۱ متمایر و #۸ تعاملی، در این سبک منو رعایت شود.

۲۰ اصل طراحی منوی ناوبری

۱۱- ساختار

منوی ناوبری باید بر اساس معماری اطلاعات وب سایت طراحی شود. شما باید ویژگی ها و اولویت های سایت خودتون رو بشناسید و بدونید چه چیزی اهمیت بیشتری در سایت شما دارد و بر این اساس سلسله مراتب لایه های منو و ترتیب منو ها را ایجاد کنید.
موارد مهم رو در لایه اول و موارد با اهمیت کمتر رو در لایه های بعدی ایجاد کنید.

۲۰ اصل طراحی منوی ناوبری

۱۲- دسترسی

مطمئن بشیدکه منوی سایت شما همیه در دسترس باشد. در مرورگر های مختلف، دستگاه های مختلف و صفحات لمسی قابل دسترس و استفاده باشد.

۲۰ اصل طراحی منوی ناوبری

۱۳- قابل کلیک

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

۲۰ اصل طراحی منوی ناوبری

۱۴ – بی صدا

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

۱۵ – عمق منو

بازدید کننده رو با زیر منو های زیاد و با لایه های دو و سه سردرگم نکنید. تا جایی که میتونید از ایجاد زیر منو خودداری کنید و سعی کنید زیر منو ها رو در صفحه ای جدید که با کلیک بر روی منوی سطح اول باز می شود نمایش بدهید.
برای مثال سایت اپل، تنها گروه های اصلی و عنوان های مهم را در منوی اصلی سایت نمایش می دهد و وقتی روی یکی از گزینه ها کلیک کنید، به صفحه ای جدید هدایت می شوید که یک منوی جدید مرتبط با عنوان انتخاب شده در زیر منوی ناوبری سایت نمایش داده می شود.
متاسفانه استفاده از زیر منو ها به شدت رایج است و حتی در مواردی تا سطح ۴ و ۵ این زیر منو ها ادامه پیدا می کنند!

۲۰ اصل طراحی منوی ناوبری

۲۰ اصل طراحی منوی ناوبری

۱۶- گرافیک

از یک منو ناوبری با گرافیک قابل قبول استفاده کنید و با css لینک ها را از حالت خام و بدون فرم خارج کنید. نیازی نیست خیلی منو رو پیچیده کنید و خیلی با رنگ ها بازی کنید. این منو باید در حین سادگی از یک گرافیک نسبی هم برخوردار باشه.
قبلا در اینجا در باره استفاده از تصاویر و ایکون ها در منوی ناوبری صحبت کردم. همونطور که قبلا گفتم، بهتره در این منو از تصاویر و ایکون ها استفاده نکنید و با اضافه کردن جزئییات اضافی سرعت خوانی منو رو کاهش ندهید.

۱۷- واکنشگرا

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

۲۰ اصل طراحی منوی ناوبری

۱۸- یکپارچه

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

۲۰ اصل طراحی منوی ناوبری

۱۹ – افکت و انیمیشن

حتما از افکتهای انیمیشن css3 در منوی ناوبری استفاده کنید. از این افکت ها میتونید در زمان حرکت موس روی ایتم های منو و یا نمایش زیر منو ها استفاد کنید.
توجه کنید که نباید از افکتهای با زمان اجرای طولانی و خیلی پیچیده استفاده کنید.

۲۰- منوی چسبنده

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

کلام آخر

منوی ناوبری در ایجاد یک تجربه کاربری مناسب تاثیر زیادی داره. با رعایت نکات و اصول ذکر شده می تونید یک منوی کاربر پسند و کاربردی داشته باشید و بازدید کنندگان بیشتری را در سایت خود نگه دارید.

منبع: اصول ذکر شده بر اساس نوشته های این سایت دراین مطلب اورده شده است. البته مطالب این پست، ترجمه خط به خط این سایت نیست و در واقع این مطلب ترکیبی است از مطالب این سایت و تجربیات شخصی خودم!

 

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

لینک دوستان

template4
قالب جوملا | جومپلیت | دانلود قالب رایگان جوملا و فروشگاه قالب جوملا

جومپلیت ، مرکز دانلود قالب جوملا و ارائه دهنده قالب رایگان جوملا ، قالب جوملا 2.5 و قالب فارسی جوملا است.

joomplate [@] gmail.com

ورود کاربران

بازيابي رمز عبور!