قوانین حیاتی در طراحی Navigation Menu از دید UX
طراحی تجربه کاربری منوی ناوبری پایین اپلیکیشن (Bottom Navigation)
به گفته اکثر طراحان ، طراحی فراتر از آن فرآیندی است که به نظر می‌رسد. علاوه بر تعاریف مختلف، طراحی چگونگی تعامل کاربران با یک محصول است. ممکن است این محصول یک اپلیکیشن یا یک وب سایت باشد. جالب است بدانید طراحی مانند یک مکالمه است، طراحی منوی ناوبری نیزاز این تعریف مستثنا نیست و با کاربران برنامه همواره در حال مکالمه است. اگر کاربران نتوانند مسیر خود را به واسطه طراحی نامناسب منوی ناوبری پیدا کنند، آن زمان سایت یا اپلیکیشن شما اهمیت و کاربران خود را از دست خواهد داد.
چرا منوی ناوبری پایین بسیار مهم است؟
استیون هوبر در تحقیق خود در مورد استفاده از دستگاه‌های تلفن همراه، متوجه شد که 49 درصد از مردم با انگشت شست دستشان اقدام به انجام فعالیت بر صفحه تلفن همراه می‌کنند. در شکل زیر بخش هایی که روی صفحه نمایش تلفن‌های همراه نمایش داده شده است، محدوده دسترسی نزدیک است، که در آن رنگ‌ها نشان دهنده محدوده ای است که ممکن است کاربر بتواند با انگشت شست دست، ارتباط برقرار کند. محدوده سبز رنگ مناطقی را نشان می‌دهد که کاربر می‌تواند به راحتی به آن دست یابد و محدوده زرد رنگ، منطقه ای است که نیاز به مقداری کشش وجود دارد؛ و محدوده قرمز، منطقه ای است که در این حالت غیر قابل دستیابی است تا زمانیکه کاربر حالت نگهداری تلفن همراه را تغییر دهد.
لذا این مهم است که محل قرار گیری منوی ناوبری اصلی برنامه با توجه به اهمیت آن در سطح اول اولویت‌ها و در قسمت پایین صفحه نمایشگر تلفن همراه طراحی گردد. چراکه به راحتی با حرکت انگشت شست قابل دستیابی خواهد بود.
نوار تب (Tab Bar)
اپلیکیشن‌های بسیاری از این قانون پیروی می‌کنند و برای نمایش بخش‌ها یا ویژگی‌های مهم اپلیکیشن خود از منوی ناوبری پایینی یا نوار تب استفاده می‌کنند. فیس بوک نیز از این امکان جهت نمایش و هدایت به بخش‌های اصلی اپلیکیشن شبکه اجتماعی خود استفاده می‌کند و به کاربر اجازه می‌دهد تنها با یک لمس به صورت مستقیم بتنواند به امکانات متنوعی دست یابد.
سه قانون حیاتی برای طراحی منوی ناوبری (Navigation)
منوی ناوبری معمولا همانند خودرویی، کاربران را به مکان هایی که می‌خواهند می‌رسانند و منوی ناوبری پایین (اصلی) همواره برای استفاده مقاصد با اولویت و اهمیت بالا استفاده می‌شود. این مقاصد نیاز به دسترسی مستقیم از هر نقطه در برنامه را دارا می‌باشند.
طراحی منوی ناوبری پایینی خوب و مناسب از سه قانون بسیار مهم پیروی می‌کنند:
- تنها مهمترین مقاصد را نمایش می‌دهند
در منوی ناوبری پایین می‌توان حد اقل 3 و حداکثر 5 مقصد با اولویت بالا درج نمود. اگر کمتر از سه مقصد وجود داشته باشد، به جای آن باید از زبانه‌ها یا تب‌ها استفاده کرد.
استفاده کردن بیش از پنج مقصد اصلی در منوی ناوبری پایین صفحه، آنها را بیش از حد به یکدیگر نزدیک می‌کند و لمس و انتخاب آن توسط کاربر را با دشواری همراه می‌کند. همچنین قرار دادن تعداد زیادی تب در نوار تب ها، انتخاب تب مورد نظر کاربر را مشکل خواهد ساخت. در نتیجه با افزودن هر تب به صفحه، موجب افزایش پیچیدگی اپلیکیشن خود خواهید شد.
اگر نیاز به بیش از پنج مقصد مهم در منوی ناوبری هستید، به مقاصدی که در منوی ناوبری پایین قرار ندارند از طریق سایر مکان‌های جایگزین دسترسی دهید.
اجتناب از نوار اسکرول افقی
منو‌های ناوبری نیمه پنهان، راه حلی کاملا واضح برای صفحه‌های نمایش کوچک هستند. لازم نیست شما در مورد وضعیت محدود صفحه نمایش کوچک نگران باشید، فقط کافی است گزینه‌های ناوبری خود را در یک منو با قبلیت اسکرول افقی قرار دهید. اما محتوای منوی با قابلیت اسکرول افقی کارآمدی کمتری خواهند داشت. زیرا برای مشاهده گزینه مورد نظر باید یک بار این منو را به حرکت در آورده و سپس آن گزینه را از بین سایر گزینه‌ها یافته و انتخاب کنید.
یکی از مشکلات منو‌های رونده به اصطلاح این است که چیزی که دیده نمی‌شود، گویی در ذهن قرار نمی‌گیرد.
- با مکان فعلی ارتباط برقرار کنید.
عدم تشخیص مکان فعلی در ناوبری، رایج‌ترین مشکلی است که در منوی برنامه‌ها مشاهده می‌شود. یکی از سوالات اصلی که برای کاربران در زمان استفاده از منو‌های ناوبری ایجاد می‌شود این است که “من در حال حاضرکجا هستم؟”
کاربران در نگاه اول باید بدانند که چگونه از نقطه A به نقطه B بروند در حالیکه هیچ راهنمای دیگری آنها را هدایت نماید. شما باید از نشانه‌های بصری مناسب (آیکون ها، برچسب‌ها و رنگ ها) به نحوی استفاده کنید که ناوبری نیازی به توضیحات اضافه نداشته باشد.
آیکن ها
قالبا منوی ناوبری پایین به صورت آیکون ارائه می‌شود، ولی باید به این نکته نیز توجه داشت که صرفا ازآنها باید برای قسمت هایی استفاده کرد که محتوای آن با آیکون ارتباط مناسبی برقرار کند.
با این وجود، آیکن‌های معروفی وجود دارند که کاربران آنها را از دیگر آیکن‌ها بهتر درک می‌کنند. یک آیکون جهانی وجود دارد که کاربران به خوبی می‌دانند، به عنوان مثال آیکن‌های مربوط به ارسال ایمیل، جستجو، صفحه اصلی و … بیش از سایرین در دید مخاطبین قرار گرفته است، لذا از این رو محبوب‌تر و آشناتر خواهند بود و با یک دید مفهوم را به کاربر منتقل می‌کنند.
متاسفانه تعداد آیکن‌های محبوب و معروف بسیار کم است و طراحان اپلیکیشن مجبور به استفاده از آیکن‌های دیگری می‌شوند که عملکرد آنها به سختی قابل درک می‌باشد.
رنگ ها
از استفاده رنگ‌های متنوع در طراحی آیکن‌ها و برچسب متنی در نوار تب یا منو‌های ناوبری خودداری کنید. به جای این کار و برای ایجاد جلوه بصری خاص در اپلیکیشن می‌توانید رنگبندی ثانویه ای را برای کاربر ایجاد نمایید تا در صورت لزوم اقدام به تغییر رنگ بندی کلی کند.
همواره از یک قاعده ساده پیروی کنید و آن استفاده از رنگ بندی اصلی و یکنواخت در منوی ناوبری پایین می‌باشد. به عبارت دیگر سعی نمایید در تمام المان‌های موجود در تب پایین، اعم از نوشته‌ها و آیکن‌ها از یک رنگ استفاده نمایید و در حالات انتخاب یا لمس از رنگ دیگری برای مشخص نمودن المان فعال استفاده نمایید.
اگر منوی ناوبری رنگی بود، المان منتخب و فعال را سیاه سفید قرار دهید و بالعکس.
نوشته ها
نوشته‌ها در منوی ناوبری باید تعاریفی کوتاه و معناداری را برای آیکن‌ها ارائه دهند. همواره سعی نمایید از نوشته‌های مختصر و مفید برای این قسمت استفاده نمایید، چرا که در غیر اینصورت می‌تواند موجب پیچیدگی و عدم خوانایی در منوی اصلی برنامه گردد.
المان‌های منوی ناوبری باید به قدری گویا باشند که کاربر در دید اول بداند چه اتفاقی پس از لمس آن خواهد افتاد.
ابعاد و اندازه هدف
دکمه‌های هدف را به اندازه ای طراحی کنید که به راحتی توسط کاربر لمس شوند. برای محاسبه طول هر دکمه منو ناوبری، طول نمایشگر را بر تعداد دکمه‌ها تقسیم نمایید. به صورت خلاصه، بزرگترین اندازه ای که در عرض صفحه نمایشگر قابل ارائه به تعداد دکمه هاست را به آنها اختصاص دهید.
دستور العمل اندروید ابعاد زیر را برای تعبیه دکمه‌های منوی ناوبری پیشنهاد می‌دهد:
تمامی مقادیر درج شده به پیکسل می‌باشد.
نشانه در یک تب
شما می‌توانید نشانه ای را برای تب‌ها انتخاب کنید که گویای اطلاعات جدید و در ارتباط با آنها باشد.
- منوی ناوبری باید خود نمایی کند!
منوی ناوبری خوب باید مانند یک دست نامرئی، کاربران را حین پیمایش در برنامه هدایت کند. بنابراین با وجود جالبترین ویژگی‌ها و یا پر کاربردترین محتوا، اگر کاربران نتوانند آن را بیابند و مورد استفاده قرار دهند، کاملا بی استفاده خواهد بود.
رفتارها
هر آیکن ناوبری پایین باید به یک مقصد هدفمند منجر شود و نباید منو، فهرست و یا پنجره‌های اضافی را باز کند. کاربر با لمس آیکن منوی ناوبری پایین، باید مستقیما به محل مربوطه هدایت شده و یا آن نمایه را فعال کند.
نباید از یک دکمه برای کنترل عملی روی المانی در صفحه جاری استفاده کرد. اگر به مدیریت پیشرفته‌تر المان‌ها نیاز دارید می‌توانید از یک تولبار استفاده کنید.
تلاش برای هماهنگی
در صورت امکان، تب‌ها را با هماهنگی و در یک سو تعبیه نمایید. هنگامی که شما از تب‌ها در جهتی معین و مشخص استفاده می‌کنید، موجب ایجاد احساس ثبات بصری در کاربر خواهید شد.
زمانی که هر یک از گزینه‌ها فعال نبودند، آنها را حذف نکنید، در غیر اینصورت رابط کاربری برنامه شما ناپایدار و غیر قابل پیش بینی خواهد شد. در کل تلاش نمایید تمامی تب‌ها فعال باشند، ولی در صورت لزوم توضیح دهید که چرا این تب غیر فعال است.
به عنوان مثال، اگر کاربری فایل‌های آفلاین نداشت، تب مربوط به فایل‌های آفلاین در اپلیکیشن دراپباکس توضیح می‌دهد که چگونه می‌توان فایل‌های آفلاین ایجاد کرد. این ویژگی حالت خالی نام دارد.
پنهان کردن خودکار
اگر در صفحه محتوای اسکرول شونده داشته باشیم، زمانی که کاربر برای محتوای جدید اقدام به اسکرول به پایین می‌کند، منوی ناوبری می‌تواند مخفی شود و با اسکرول به بالا مجدد ظاهر گردد.
لذت بصری
از حرکت تیز برای نمایش انتقال بین سایر بخش‌ها خودداری نمایید. در زمان استفاده از تب‌ها و برای نمایش محتوای هر کدام از آنها صفحه نمایش بهتر است با یک انیمیشن بسیار نرم و محو شونده، تغییر نماید.
برداشت ها
منوی ناوبری باید …
- قابل مشاهده و ساختار یافته باشد. حداقل سه و حداکثر پنج تب با مهمترین اولویت استفاده کنید و از محتوای اسکرول شونده در منوی ناوبری پایین اجتناب کنید.
- مشخص باشد. المان‌های منو باید به آسانی درک شوند و دکمه‌ها باید به اندازه مناسب طراحی شوند تا به راحتی لمس گردند.
- ساده باشد. اطمینان حاصل کنید که هر آیکن در منوی ناوبری به مقصد مرتبط با محتوای بصری منجر شود.
نتیجه گیری
هدایت کاربران در حال پیمایش در اپلیکیشن‌ها و سایت‌ها همواره اولویت برتر توسعه دهندگان آنهاست، هدف از این منوی ناوبری، ایجاد رابط تعاملی مناسبی است که به صورت طبیعی با مدل‌های ذهنی کاربر هماهنگ شود.
شما همواره برای کاربران خود اقدام به طراحی می‌کنید. همیشه در مورد شخصیت کاربر خود فکر کنید. در مورد اهدافی که در هنگام استفاده از برنامه خود دارید، فکر کنید و از منوی ناوبری برنامه خود برای کمک به آنها، در جهت رسیدن به اهداف خود استفاده کنید. هرچه طراحی‌های شما ساده‌تر و در عین حال گویا باشد احتمال استفاده از آنها بیشتر خواهد بود.
