قوانین حیاتی در طراحی Navigation Menu از دید UX



visibility  
mode_comment   ۱

طراحی تجربه کاربری منوی ناوبری پایین اپلیکیشن (Bottom Navigation)

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

چرا منوی ناوبری پایین بسیار مهم است؟

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

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

نوار تب (Tab Bar)

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

سه قانون حیاتی برای طراحی منوی ناوبری (Navigation)

منوی ناوبری معمولا همانند خودرویی، کاربران را به مکان هایی که می خواهند می رسانند و منوی ناوبری پایین (اصلی) همواره برای استفاده مقاصد با اولویت و اهمیت بالا استفاده می شود. این مقاصد نیاز به دسترسی مستقیم از هر نقطه در برنامه را دارا می باشند.

طراحی منوی ناوبری پایینی خوب و مناسب از سه قانون بسیار مهم پیروی می کنند:

  1. تنها مهمترین مقاصد را نمایش می دهند

در منوی ناوبری پایین می توان حد اقل 3 و حداکثر 5  مقصد با اولویت بالا درج نمود. اگر کمتر از سه مقصد وجود داشته باشد، به جای آن باید از زبانه ها یا تب ها استفاده کرد.

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

اگر نیاز به بیش از پنج مقصد مهم در منوی ناوبری هستید، به مقاصدی که در منوی ناوبری پایین قرار ندارند از طریق سایر مکان های جایگزین دسترسی دهید.

اجتناب از نوار اسکرول افقی

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

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

  1. با مکان فعلی ارتباط برقرار کنید.

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

کاربران در نگاه اول باید بدانند که چگونه از نقطه A به نقطه B بروند در حالیکه هیچ راهنمای دیگری آنها را هدایت نماید. شما باید از نشانه های بصری مناسب (آیکون ها، برچسب ها و رنگ ها) به نحوی استفاده کنید که ناوبری نیازی به توضیحات اضافه نداشته باشد.

آیکن ها

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

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

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

 

رنگ ها

متخصص اندروید
اپ های اندروید خودت رو بساز و درآمد کسب کن برنامه نویسی اندروید الان خیلی پتانسیل کسب درآمد داره. اگر بتونید تو این زمینه متخصص شید، می تونید به راحتی از طریق مارکت ها، پروژه های فریلنسری و یا استخدام در شرکت های مطرح به درآمد عالی برسید. ما در دوره متخصص اندروید شما رو به یک برنامه نویس حرفه ای اپ های اندروید تبدیل می کنیم: متخصص اندروید arrow_back

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

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

اگر منوی ناوبری رنگی بود، المان منتخب و فعال را سیاه سفید قرار دهید و بالعکس.

نوشته ها

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

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

ابعاد و اندازه هدف

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

دستور العمل اندروید ابعاد زیر را برای تعبیه دکمه های منوی ناوبری پیشنهاد می دهد:

تمامی مقادیر درج شده به پیکسل می باشد.

نشانه در یک تب

شما می توانید نشانه ای را برای تب ها انتخاب کنید که گویای اطلاعات جدید و در ارتباط با آنها باشد.

  1. منوی ناوبری باید خود نمایی کند!

منوی ناوبری خوب باید مانند یک دست نامرئی، کاربران را حین پیمایش در برنامه هدایت کند. بنابراین با وجود جالبترین ویژگی ها و یا پر کاربردترین محتوا، اگر کاربران نتوانند آن را بیابند و مورد استفاده قرار دهند، کاملا بی استفاده خواهد بود.

رفتارها

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

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

تلاش برای هماهنگی

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

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

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

پنهان کردن خودکار

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

لذت بصری

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

برداشت ها

منوی ناوبری باید ...

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

نتیجه گیری

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

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

 

comment دیدگاه کاربران
علیرضا خلقت

عالی بود.ممنون

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.