8 نمونه از طراحی منوی ناوبری اپلیکیشن موبایل

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

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

مقاله مرتبط: چرا کسب‌وکارها به اپلیکیشن موبایل نیاز دارند؟

۱. عملکرد منوی ناوبری چیست؟

• بهبود محتوای محصول، ساختار عملکرد و سلسله‌مراتب

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

• عملکردهای اصلی را برجسته جلوه دهید

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

• مسیر کاربر را ساده کنید

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

۲. انواع منوهای ناوبری

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

۱) Tabber – یک منوی ناوبری کلاسیک:

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

مزایا:

محل ورود به قسمتی که در آن هستید را به‌وضوح نشان می‌دهد، مهم‌ترین بخش ورود به اطلاعات محتوا را مستقیماً نمایش می‌دهد.

معایب:

اگر کارکرد زیادی داشته باشید، عملکرد آن سنگین و کند می‌شود.

مقاله مرتبط: ٥ تمرین ساده برای شناخت فرآیند و بهبود تجربه کاربری UX

۲) منوی ناوبری شبکه‌ای و مستطیلی:

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

مزایا:

این شکل ناوبری ساده است همچنین ناوبری واضح و مشخص آن می‌تواند به افزایش کارآمدی اپلیکیشن کمک کند.

معایب:

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

۳) ناوبری کشویی:

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

مزایا: فضای کمتری برای نمایش اشغال می‌کند و به کاربر اجازه می‌دهد محتوا را در ابعاد مناسب در صفحه کنونی ببیند و رویش تمرکز کند.

معایب: برای اپلیکیشن‌هایی که در آن مدام بین قسمت‌ها جابجا می‌شوید مناسب نیست.

۴) Rudder Navigation:

این شکل محبوب ناوبری عموماً به نام «ناوبری سکانی» یا Rudder Navigation شناخته می‌شود، چون مدلی شبیه به سکان هدایت کشتی درد که چند دکمه عملیاتی هم در هر طرف قرار دارد. وقتی یک صفحه دارای اکثر سلسله‌مراتب یک محتوا است اما به استفاده مداوم از یکی از ورودی‌های مهم و پرکاربرد احتیاج دارید، می‌توانید از این نوع ناوبری اپلیکیشن استفاده کنید.

مزایا: می‌تواند مهم‌ترین ورودی‌ها که بیشترین کاربرد دارند را برجسته نشان دهد.

معایب: همانند ناوبری برچسبی است.

۳. طراحی منوی ناوبری کلاسیک

• ابزار Material Design گوگل، از یک «دکمه عملکرد شناور» برای انجام این ناوبری استفاده می‌کند. این دکمه یک آیکون شناور در بالای رابط کاربری است و افکت‌های پویای متناسب را دارد که دستورالعمل‌های ناوبری جدید را ایجاد می‌کند.

.

• Evernote نیز به شکلی مشابه، نکاتی را از این مدل الهام گرفته است. کاربر می‌تواند به‌سادگی روی گوشه پایین سمت راست دکمه شناور کلیک کند و خیلی سریع ایده خود را ثبت کند.

• Tumblr نیز به آیکون‌های بارزی با برچسب‌های مناسب مجهز است. وقتی صفحه را پایین می‌برید تا محتوا را ببینید، این آیکون‌ها به‌طور خودکار ناپدید می‌شوند.

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

خلاصه مطلب

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