منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۲ دقیقه

ناوبری (Navigation) در طراحی رابط چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

ناوبری (Navigation) مجموعهٔ عناصری است که به کاربر امکان می‌دهد در محصول شما جابه‌جا شود: نوار بالا، منوی کناری، مسیر راهنما، لینک‌های میان‌متنی، جست‌وجو، و حتی دکمهٔ بازگشت. اما اگر ناوبری را فقط «منو» بدانیم، بیشتر مسئله را از دست داده‌ایم.

مفیدترین راه فکر‌کردن دربارهٔ ناوبری این است که آن را پاسخ به سه پرسش ببینیم، پرسش‌هایی که کاربر در هر صفحه — حتی بدون اینکه آگاهانه بپرسدشان — دارد: کجا هستم؟ کجا می‌توانم بروم؟ چطور برمی‌گردم؟ منو فقط به پرسش دوم جواب می‌دهد. بیشتر رابط‌هایی که «ناوبری‌شان گیج‌کننده است» در واقع منوی بدی ندارند؛ پرسش اول و سوم را بی‌جواب گذاشته‌اند.

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

هشت گونهٔ ناوبری و کارِ هرکدام

هر الگوی ناوبری یک سازش است؛ انتخاب درست به حجم محتوا، دستگاه و تکرار استفاده بستگی دارد:

• - ۱. نوار بالا: افقی و در بالای صفحه. آشناترین الگو و بهترین گزینه برای تعداد محدودی دستهٔ اصلی. سازشش این است که فضای افقی محدود دارد و با برچسب‌های بلند سریع پر می‌شود.
• - ۲. ناوبری کناری: عمودی، در سمت راست یا چپ. برای محصولاتی با تعداد زیاد بخش — پنل‌های مدیریتی و ابزارهای سازمانی — بهتر از نوار بالا کار می‌کند، چون فهرست عمودی جای بیشتری برای آیتم دارد. در عوض بخشی از عرض صفحه را می‌گیرد.
• - ۳. مسیر راهنما (Breadcrumb): رشتهٔ لینک‌هایی که موقعیت فعلی کاربر را در سلسله‌مراتب نشان می‌دهد. برای محتوای تودرتو تقریباً ضروری است، چون هم‌زمان به پرسش اول و سوم جواب می‌دهد. فقط وقتی ارزش دارد که ساختار واقعاً سلسله‌مراتبی باشد.
• - ۴. منوی کشویی: فهرستی که با کلیک باز می‌شود. فضا را ذخیره می‌کند، به‌قیمت اینکه گزینه‌ها را از دید فوری برمی‌دارد — همان سازشی که در افشای تدریجی بحث شد.
• - ۵. ناوبری تمام‌صفحه: منویی که تمام نمایشگر را می‌گیرد. روی صفحه‌های کوچک و برای محصولات محتوایی خوب کار می‌کند، چون به کاربر مجال می‌دهد کل ساختار را یک‌جا ببیند بدون اینکه در فضای تنگ فشرده شود.
• - ۶. منوی همبرگری: دکمه‌ای که فهرست را پنهان نگه می‌دارد. صرفه‌جویی فضایش واقعی است و مشکلش هم واقعی: کل ساختار ناوبری را از چشم کاربر پنهان می‌کند. برای کاربر تکراری قابل قبول، برای کاربر روز اول گران.
• - ۷. ناوبری اشاره‌ای: بخش نامرئی اما مهم طراحی موبایل — کشیدن انگشت برای بازگشت یا جابه‌جایی. برای کاربر آشنا سریع‌ترین راه است و برای کاربر تازه، تا کشفش نکند، وجود ندارد. پس هرگز نباید تنها راه انجام یک کار باشد.
• - ۸. نوار پایین: منوی چسبیده به پایین صفحه در اپلیکیشن‌ها. دسترسی مستقیم به چند بخش کلیدی می‌دهد و در دسترس شست است؛ در عوض بخشی از محتوا را می‌پوشاند و بیش از پنج آیتم را تحمل نمی‌کند.

یک نکتهٔ عملی دربارهٔ منوی کشویی: اگر تعداد آیتم‌های زیرمجموعه زیاد است، به‌جای چند منوی کشویی تودرتو سراغ «مگامنو» بروید — یک پنل بزرگ که همهٔ گزینه‌ها را دسته‌بندی‌شده و یک‌جا نشان می‌دهد. ویتالی فریدمن هم همین را توصیه می‌کند و دلیلش ساده است: یک پنل که کاربر آن را با چشم می‌کاود، بهتر از سه لایه منو است که باید با دقت رویشان اشاره‌گر نگه داشت.

ناوبری و معماری اطلاعات: یکی نیستند

این دو مفهوم مدام جای هم استفاده می‌شوند، در حالی که رابطه‌شان رابطهٔ زیربنا و نماست. معماری اطلاعات سه چیز را تعیین می‌کند: ساختار سازمانی (چه چیزی با چه چیزی در یک گروه است)، ساختار محتوا (هر چیز با چه سلسله‌مراتبی نمایش داده می‌شود)، و ساختار ناوبری (کاربر با کدام مسیرها و ابزارها بین‌شان حرکت می‌کند). ناوبری فقط سومی است.

پیامد عملی‌اش مهم است: مشکل ناوبری را نمی‌شود با طراحی ناوبری حل کرد، اگر ریشه‌اش در دسته‌بندی باشد. اگر کاربران «هزینهٔ ارسال» را زیر «پشتیبانی» می‌جویند و شما آن را زیر «راهنمای خرید» گذاشته‌اید، عوض‌کردن رنگ منو یا افزودن آیکون هیچ کمکی نمی‌کند. باید بفهمید ذهن کاربر آن موضوع را کجا می‌بیند.

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

ناوبری موبایل: فضا، انگشت و همبرگر

روی موبایل همان تصمیم‌ها با محدودیت‌های سخت‌تری تکرار می‌شوند و چند قاعدهٔ مشخص دارند:

• - هدف لمس را کوچک نکنید. حدود ۴۴ در ۴۴ پیکسل کمینهٔ معقول است. لینک‌های ناوبری که در فهرستی فشرده کنار هم نشسته‌اند، شایع‌ترین جای نقض این قاعده‌اند.
• - ارگونومی شست را حساب کنید. بالای صفحه در گوشی‌های بزرگ به‌سختی در دسترس است. عناصر پرتکرار ناوبری باید پایین باشند — دلیل اصلی محبوبیت نوار پایین همین است، نه مد.
• - نوار تب برای سه تا پنج بخش. بیشتر از این، برچسب‌ها به آیکون‌های بی‌برچسب تبدیل می‌شوند و کاربر باید حدس بزند.
• - دکمهٔ شناور اقدام (FAB) برای یک کار اصلی خوب است، نه برای میان‌بُر به چند کار. اگر بیش از یک کار در آن جمع شود، دیگر میان‌بُر نیست، یک منوی دیگر است.
• - برچسب بگذارید. آیکون بدون متن تقریباً همیشه بدتر از آیکون با متن عمل می‌کند؛ تنها استثناها چند آیکون کاملاً تثبیت‌شده‌اند مثل خانه، جست‌وجو و پروفایل.

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

قاعده‌های عملی

• - برچسب مشخص، نه برچسب عمومی. «محصولات» به کاربر چیزی نمی‌گوید؛ «کفش ورزشی» می‌گوید. این ساده‌ترین و کم‌هزینه‌ترین بهبود ناوبری است و بیشترین اثر را دارد — و به همان کاری برمی‌گردد که در نوشتار رابط بحث شد.
• - با مدل ذهنی کاربر هم‌راستا شوید. ناوبری باید شبیه چیزی باشد که کاربر از محصولات مشابه انتظار دارد. نوآوری در جای منو، تقریباً همیشه هزینه‌ای است که سودش را نمی‌دهد.
• - ثبات را حفظ کنید. ناوبری باید در همهٔ صفحه‌ها یک‌جا و یک‌شکل باشد. جابه‌جا شدن منو بین بخش‌های مختلف، کاربر را مجبور می‌کند هر بار از نو جهت‌یابی کند.
• - سلسله‌مراتب را بصری کنید. تفاوت اندازه، وزن و فاصله به کاربر می‌گوید چه چیزی سطح اول است و چه چیزی زیرمجموعه؛ این همان کاری است که سلسله‌مراتب بصری انجام می‌دهد.
• - جست‌وجو را جدی بگیرید — اما به‌عنوان مکمل، نه جای‌گزین. جست‌وجو راه فرار کاربری است که ساختار را نفهمیده؛ اگر بیشتر کاربران از آن استفاده می‌کنند، این خودش گزارشی دربارهٔ ساختار شماست.
• - ناوبری با کیبورد و صفحه‌خوان کار کند. ترتیب منطقی فوکوس، برچسب روشن، و امکان رد‌کردن منو برای رسیدن به محتوا؛ جزئیاتش در دسترس‌پذیری آمده. ناوبری اولین چیزی است که کاربر صفحه‌خوان با آن روبه‌رو می‌شود.
• - در همهٔ اندازه‌ها آزمایش کنید. طراحی واکنش‌گرا برای ناوبری بیش از هر عنصر دیگری اهمیت دارد، چون معمولاً اولین چیزی است که در عرض کم می‌شکند.

پنج عددی که ناوبری را می‌سنجند

ناوبری از آن چیزهایی است که می‌شود کمّی سنجید، و پنج معیار بیشترین کارایی را دارند:

• - ۱. نسبت جست‌وجو به ناوبری. چند درصد کاربران برای رسیدن به هدف سراغ جست‌وجو می‌روند و چند درصد از منو. اگر از ۲۰ نفر، ۱۲ نفر جست‌وجو کنند، نسبت ۶۰ به ۴۰ است — و عدد بالای جست‌وجو معمولاً یعنی ساختار قابل حدس نیست.
• - ۲. نرخ کلیک آیتم‌های منو. آیتمی که تقریباً هیچ‌کس رویش کلیک نمی‌کند، دو حالت دارد: یا واقعاً مهم نیست و باید از سطح اول برداشته شود، یا مهم است و برچسبش کار نمی‌کند. تفکیک این دو را فقط با گفت‌وگو با کاربر می‌شود انجام داد.
• - ۳. نرخ پرش صفحه‌های ناوبری. اگر کاربران به یک صفحهٔ دسته می‌رسند و بلافاصله بیرون می‌روند، یعنی آن صفحه چیزی را که برچسبش وعده داده بود تحویل نداده.
• - ۴. زمان‌ماندن روی صفحه‌های ناوبری. زمان زیاد روی یک صفحهٔ فهرست خبر خوبی نیست؛ این صفحه‌ها مسیرند نه مقصد، و ماندن طولانی معمولاً یعنی کاربر دارد تصمیم می‌گیرد کدام گزینه کمتر اشتباه است.
• - ۵. مسیرهای واقعی کاربران. ارزشمندترین گزارش همین است: کاربران عملاً از کجا به کجا می‌روند. مسیرهای پرتکراری که پیش‌بینی نکرده بودید نامزدهای میان‌بُر هستند، و بن‌بست‌ها — صفحه‌هایی که کاربر بعد از رسیدن به آن‌ها فقط برمی‌گردد — فوری‌ترین کارِ شما.

یک هشدار دربارهٔ این اعداد: هیچ‌کدام به‌تنهایی نمی‌گویند چرا. عدد به شما می‌گوید کجا را نگاه کنید؛ برای فهمیدن دلیل باید سراغ آزمون کاربردپذیری بروید. تیم‌هایی که فقط به تحلیل رفتاری تکیه می‌کنند، معمولاً مشکل را درست پیدا می‌کنند و راه‌حل غلط برایش می‌سازند.

کجا خراب می‌شود

این بخش افزودهٔ مترجم است و از الگوهایی می‌آید که در بازبینی محصولات مدام تکرار می‌شوند:

• - سطح اول شلوغ. وقتی همهٔ ذی‌نفعان بخش خودشان را در منوی اصلی می‌خواهند، سطح اول به فهرستی از ساختار سازمانی تبدیل می‌شود، نه نیازهای کاربر. نشانه‌اش این است که منوی شما شبیه چارت سازمانی شرکت است.
• - آیکون‌های معماگونه. ردیفی از آیکون بدون برچسب که هر کدام باید حدس زده شود. اگر برای فهمیدن معنای آیکون باید اشاره‌گر را رویش نگه داشت، روی موبایل عملاً بی‌معناست.
• - مسیر راهنمای تزئینی. مسیر راهنمایی که لینک‌هایش کلیک‌پذیر نیستند فقط تزئین است. همین‌طور مسیر راهنمایی که مسیر واقعی کاربر را نشان می‌دهد نه جای او در سلسله‌مراتب — این دو یکی نیستند و دومی است که کمک می‌کند.
• - صفحهٔ بی‌پدر. صفحه‌هایی که فقط از طریق جست‌وجو یا لینک مستقیم پیدا می‌شوند و در هیچ منویی نیستند. کاربری که از گوگل به آن‌ها می‌رسد نمی‌فهمد کجاست و راهی برای ادامه ندارد. هر صفحه باید بگوید بخشی از چه چیزی است.
• - جست‌وجو به‌عنوان بهانه. «کاربر جست‌وجو می‌کند» توجیه رایج برای رهاکردن ساختار است. اما جست‌وجو فقط برای کسی کار می‌کند که بداند دنبال چه واژه‌ای است؛ کاربری که در حال کاویدن است و نمی‌داند محصول شما چه چیزهایی دارد، از جست‌وجو استفاده نمی‌کند.
• - بی‌جواب گذاشتن پرسش اول. شایع‌ترین از همه: نبودن هیچ نشانه‌ای از موقعیت فعلی. آیتم فعال منو متمایز نیست، عنوان صفحه با برچسب منو یکی نیست، و مسیر راهنما وجود ندارد. این ارزان‌ترین اصلاح ناوبری است و بیشتر از افزودن هر گزینهٔ تازه‌ای اثر دارد.

در رابط‌های راست‌به‌چپ و فارسی‌زبان

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

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

جهت پیکان‌ها. در فارسی، «بازگشت» پیکان به راست است و «بعدی» به چپ. این را در نوار ناوبری، در صفحه‌بندی و در گالری‌ها یک‌جا چک کنید؛ پیکانی که جهتش برنگشته، دقیقاً پیام معکوس می‌دهد. جداکنندهٔ مسیر راهنما هم همین‌طور: › باید ‹ شود، و اگر می‌خواهید درگیر این جزئیات نشوید از / استفاده کنید که جهت‌مند نیست.

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

طول برچسب و سرریز نوار بالا. برچسب‌های فارسی از معادل انگلیسی‌شان بلندترند و نوار بالا زودتر پر می‌شود. راه‌حل رایج — بردن همه‌چیز به همبرگر روی دسکتاپ — بدترین انتخاب است. اول برچسب‌ها را کوتاه کنید («سفارش‌ها» به‌جای «پیگیری وضعیت سفارش‌ها»)، بعد تعداد آیتم سطح اول را کم کنید، و همبرگر دسکتاپ را آخرین گزینه بدانید.

اشارهٔ بازگشت. در راست‌به‌چپ، کشیدن انگشت برای بازگشت هم جهتش عوض می‌شود. سیستم‌عامل‌ها اگر جهت رابط را درست اعلام کرده باشید این را خودشان مدیریت می‌کنند، اما پیاده‌سازی‌های سفارشی معمولاً نمی‌کنند — و نتیجه‌اش اشاره‌ای است که کاربر را جلو می‌برد وقتی می‌خواسته برگردد.

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

جمع‌بندی

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

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