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

خرده‌نان (Breadcrumbs) در ناوبری چیست؟

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

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

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

خرده‌نان چیست، و چه چیزی نیست؟

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

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

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

سه نوع خرده‌نان

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

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

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

قواعد عملی

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

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

خرده‌نانی که در نتایج جست‌وجو دیده می‌شود

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

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

چند نکتهٔ عملی:

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

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

خرده‌نان در رابط راست‌به‌چپ

این بخش هم افزودهٔ مترجم است و به‌نظرم مهم‌ترین بخش این مقاله برای خوانندهٔ فارسی‌زبان — چون خودِ منبع، بی‌آنکه بخواهد، دستورالعمل غلطی برای ما می‌دهد.

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

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

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

جمع‌بندی

• - خرده‌نان جای کاربر در سلسله‌مراتب را نشان می‌دهد، نه مسیری که آمده؛ استعارهٔ هانسل و گرتل دقیقاً همین‌جا گمراه‌کننده است.
• - ارزشش دو چیز است: جهت‌یابی، و خروج ارزان — که برای کاربر واردشده از موتور جست‌وجو مهم‌تر است، چون او تاریخچه‌ای در سایت ندارد.
• - سه نوع دارد: مکانی (پیش‌فرض درست)، ویژگی‌محور (مفید در فروشگاه، در کنار مکانی نه به‌جایش)، و مسیرمحور (معمولاً نسازید — با دکمهٔ بازگشت تکراری است).
• - برچسب با عنوان صفحه یکی باشد، صفحهٔ فعلی پیوند نباشد، مسیر طولانی را با «…» جمع کنید، و با صفحه‌کلید قابل پیمایش باشد.
• - جانشین ناوبری اصلی نیست؛ اگر تنها راه رسیدن به دسته‌هاست، مشکل در معماری اطلاعات است.
• - با دادهٔ ساختاریافته، مسیر به‌جای نشانی خام در نتایج جست‌وجو دیده می‌شود — و ترتیب در آن منطقی است نه دیداری، حتی در رابط راست‌به‌چپ.
• - در فارسی جهت آینه می‌شود و جداکننده هم باید بچرخد: «‹» نه «›». پیکانی که به راست اشاره می‌کند، در رابط فارسی به‌عقب اشاره می‌کند.
• - جداکننده را با CSS اضافه کنید نه به‌عنوان نویسه در متن، و مسیر را با یک نام لاتین وسطش آزمایش کنید.