تجربه ی کاربر, وبسایت و پروفایل شخصی داود جمیری

9 نکته در مورد Breadcrumb برای آسانتر شدن در مرور سایت [+ مثالها]

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

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

Download Our Free UX Research & Testing Kit

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

an example of breadcrumb navigation on the hubsot knowledge base website

Jakob Nielsen ، یکی از بنیانگذاران گروه Nielsen Norman تحسین شده ، توصیه پیمایش پودر نان از سال 1995 ، و یک نقطه قوت برای سودمندی و کارایی آنها: “تمام آنچه که آرد سوخاری انجام می دهد این است که حرکت در سایت را برای کاربران آسان تر می کند ، با فرض اینکه محتوای آن و ساختار کلی آن منطقی باشد. این سهم کافی برای چیزی است که فقط یک خط در طراحی اشغال می کند.”

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

نکات و مثالهای پیمایش Breadcrumb

1 فقط درصورتی که برای ساختار سایت شما منطقی باشد از پیمایش نان خرده نان استفاده کنید.

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

2. پیمایش نان خود را خیلی بزرگ نکنید.

پیمایش نان شما یک ابزار ثانویه برای نوار پیمایش اصلی شما است ، بنابراین نباید بیش از حد بزرگ یا برجسته در صفحه باشد. به عنوان مثال ، در وب سایت DHL ، نوار پیمایش اصلی آنها بزرگ و قابل تشخیص است ، با ستون هایی مانند “Express” “Parcel & eCommerce” “Logistics” و غیره. پیمایش پودر نان آنها بخش کوچکتر در زیر است که با عنوان “DHL Global |> Logistics |> حمل و نقل کالا” خوانده می شود. شما نمی خواهید کاربران شما ناوبری نان شما را به عنوان نوار اصلی پیمایش اشتباه بگیرند.

an example of breadcrumb navigation on the DHL website

3 مسیر ناوبری کامل را در پیمایش نان خود قرار دهید.

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

an example of breadcrumb navigation on the elon university website

4 پیشرفت از بالاترین سطح به پایین ترین.

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

5. عناوین ریزه خواری خود را با عناوین صفحه خود مطابقت دهید.

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

Nestle همچنین به خوبی پیوندها را از غیر پیوندها با رنگهای مختلف متمایز می کند – پیوندها آبی هستند ، در حالی که غیر پیوندها خاکستری باقی می مانند.

example of breadcrumb navigation on the nestle website

6. با طراحی خلاق باشید.

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

به عنوان مثال ، هدف از پیمایش پودر نان در صفحات محصول خود استفاده می کند (زیرا چه کسی نمی خواهد در قسمت کفش مجازی گم نشوید؟) ، اما از نمادهای “/” و متن ساده سیاه و خاکستری استفاده می کند. در این حالت ، تغییرات ظریف طراحی برای زیبایی سایت آنها منطقی است.

an example of breadcrumb navigation on the target website

7. آن را تمیز و بدون سر و صدا نگه دارید.

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

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

an example of breadcrumb navigation on the eionet website

8. در نظر بگیرید که کدام نوع پیمایش پودر نان برای سایت شما بیشتر منطقی است.

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

Bed Bath & Beyond از پیمایش پودر سوخاری مبتنی بر ویژگی استفاده می کند تا به کاربران نشان دهد کدام دسته را دارند صفحه محصول در زیر قرار می گیرد ، بنابراین کاربران می توانند برای جستجوی موارد مشابه ، روی “آشپزخانه” یا “لوازم کوچک” کلیک کنند. این نوع پیمایش آرد سوخاری برای مشتریان Bed Bath & Beyond بسیار مثر است. هنگامی که در حال ایجاد یک پیمایش پودر نان هستید ، به موارد مفید بیشتر برای بازدیدکنندگان سایت خود توجه کنید.

an example of breadcrumb navigation on the bed bath and beyond website

9. مخاطبان خود را بشناسید.

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

an example of breadcrumb navigation on the apple iphone x website

پیمایش Breadcrumb در HTML و CSS

آرد سوخاری نه تنها مفید نیست بلکه با کمی کد HTML و CSS به راحتی به وب سایت شما اضافه می شود.

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

) تنظیم کنید ، با هر مورد از لیست (

  • ) یک پیوند در سری آرد سوخاری تا مورد آخر ، که نشانگر صفحه فعلی است.

    در اینجا یک الگوی HTML برای آرد سوخاری وجود دارد که می توانید از آن استفاده کنید:

     
    

    توجه داشته باشید که چگونه لیست مرتب نشده را در عنصر HTML

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

    البته ، این HTML به تنهایی کافی نیست – در حال حاضر ، ما فقط یک لیست پیوندی داریم. با افزودن CSS ، می توانیم به ظاهر آرد سوخاری که بدنبال آن هستیم ، برسیم. CSS زیر را به HTML بالا اعمال کنید:

     
    

    ul {list-style: none؛ } / * remove bullet point * /
    ul li {display: inline؛ } / * نمایش موارد لیست به صورت افقی * /
    / * بین موارد لیست یک براکت (>) قرار دهید * /
    ul li + li: قبل از {
    محتوا: ">"؛
    بالشتک: 10px؛
    }
    ul li a {text-decoration: none؛ } / * حذف زیر خطوط از پیوندها * /
    ul li a: hover {text-decoration: underline؛ } / * نشان دادن زیرخود را تحت عنوان * /

    نشان دهید

    با هم ، این کد یک منطقه ناوبری برای ایجاد آرد سوخاری ایجاد می کند که می تواند در هر سایتی مورد استفاده قرار گیرد – نتیجه نهایی را در زیر ببینید. من همچنین یک ظاهر طراحی اضافی برای ظاهر تمیزتر اضافه کرده ام. برای دیدن ظاهر آرد سوخاری بدون این سبک ، توضیح دهید کد موجود در پایین قسمت برگه CSS.

    به قلم مراجعه کنید Breadcrumbs در HTML و CSS توسط کریستینا پریکون (hubspot ) در CodePen

    پیمایش Breadcrumb در Bootstrap CSS

    Bootstrap CSS همچنین راهی برای ایجاد آرد سوخاری بدون نیاز به افزودن CSS سفارشی ارائه می دهد. برای این کار از م componentلفه Breadcrumb مانند اینها استفاده کنید. در اینجا مثالی از مستندات Bootstrap 5 آورده شده است:

    به قلم Breadcrumbs در Bootstrap CSS مراجعه کنید توسط کریستینا پریکون (hubspot ) در CodePen

    این فقط اصول ناوبری پودر نان در Bootstrap است – به Bootstrap مراجعه کنید مستندات نان برای یادگیری همه جزئیات.

    طراحی برای کمک به کاربران در جستجوی سایت شما

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

    یادداشت سردبیر: این پست در ابتدا در سپتامبر 2018 منتشر شده و برای جامعیت به روز شده است.

    ux templates

    نوشته ها مرتبط

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *