0

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

بازدید 12


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

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

کیت تحقیق و آزمایش UX رایگان ما را بارگیری کنید

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

نمونه ای از پیمایش پودر نان در وب سایت پایگاه دانش hubsot

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

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

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

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

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

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

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

نمونه ای از پیمایش پودر نان در وب سایت DHL

3. مسیر ناوبری کامل را در پیمایش پودر نان بگنجانید.

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

نمونه ای از پیمایش پودر نان در وب سایت دانشگاه elon

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

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

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

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

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

نمونه ای از پیمایش پودر سوخاری در وب سایت nestle

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

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

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

نمونه ای از پیمایش پودر سوخاری در وب سایت مورد نظر

7. آن را تمیز و بدون نظافت نگه دارید.

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

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

نمونه ای از پیمایش پودر سوخاری در وب سایت eionet

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

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

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

نمونه ای از پیمایش آرد سوخاری در وب سایت حمام تختخواب و فراتر از آن

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

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

نمونه ای از پیمایش پودر نان در وب سایت apple iphone x

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

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

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

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

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

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

     
    

    <nav class="breadcrumb" aria-label="Breadcrumb" >
        <ul>
            <li><a href="#URL">Top-level page</a></li>
            <li><a href="#URL">Second-level page</a></li>
            <li><a href="#URL">Third-level page</a></li>
            <li>Current Page</li>
        </ul>
    </nav>

    توجه کنید که چگونه لیست نامرتب را نیز در HTML ضمیمه کرده ام



منبع

نظرات کاربران

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

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

*

code

  +  76  =  80