در حال بارگزاری ...

راهنمای کامل استفاده از Breadcrumbs در طراحی وب

توسط الهام غایب
آخرین به روز رسانی چهارشنبه 27 شهریور 1398

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


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

بردکرامب (Breadcrumb) چیست؟

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

Breadcrumbها همیشه مفید هستند چون کاربر را تشویق می‌کنند تا نگاه عمیق‌تری به سایت داشته باشند. فروشگاه‌های تجارت الکترونیک در استفاده از بردکرامب مشهور هستند چون می‌توانند اغلب ۳ یا ۴ دسته بندی داشته باشند. آمازون بزرگ‌ترین فروشگاه تجارت الکترونیک است و می‌توانید بردکرامب‌های مفصلی را در آن بیابید:

استفاده از Breadcrumbs در طراحی وب

اگر شما چندین زیرمجموعه برای یک وب سایت سلسله مراتبی داشته باشید در این صورت بردکرامب عملا انتخاب هوشمندانه‌ای است. بردکرامب‌ها فضای زیادی نگرفته اما مشارکت کاربر را در وب سایت شما بالا می‌برند. حتی می‌توانید shema code به بردکرامب‌های خود برای تکه داده‌های انتخاب شده از سوی گوگل، اضافه کنید. عموما این کدها نقش زیادی در SERP ندارند اما می‌توانید ویژگی‌های چشمگیر بردکرامب را از گوگل به دست آورید:

استفاده از Breadcrumbs در طراحی وب

در واقع بیشتر وب سایت‌های گوگل در جای لازم از Breadcrumb استفاده می‌کنند. برای مثال، صفحه webmasters support آن را در نظر بگیرید که صدها منبع برای صاحبان وب سایت ارائه می‌دهد. این همه دستورالعمل می‌تواند عملی فرساینده باشند. شما چطور سازماندهی آن‌ها را ساده‌تر می‌کنید؟ با سلسله مراتب محتوایی شفاف. بردکرامب‌ها فقط بخشی از طراحی این سلسله مراتب برای ایجاد بهترین تجربه کاربری هستند:

استفاده از Breadcrumbs در طراحی وب

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

بردکرامب در آرایش وبلاگ

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

استفاده از Breadcrumbs در طراحی وب

مثال بالا از Ubuntu Handbook یک نمونه عالی برای شبیه سازی یک تنظیمات ساده است که فقط دارای یک لینک به صفحه اصلی، یک دسته بندی داخلی و پیج فعلی است. برخی از وبلاگ‌ها بسیار پیچیده‌تر از این هستند اما این نشان می‌دهند که وقتی بردکرامب در تنظیمات درستی قرار بگیرد، چقدر خوب کار می‌کند. علاوه بر این، کابران می‌توانند به سرعت به دیگر مقالات how-to دسترسی داشته باشند. اما یکی از طراحی‌های بردکرامب وبلاگی شامل آرایش TutsPlus است که المان‌های بردکرامب را به هدر صفحه اصلی اضافه می‌کند:

استفاده از Breadcrumbs در طراحی وب

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

طراحی بردکرامب برای تجارت آنلاین

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

استفاده از Breadcrumbs در طراحی وب

وب سایت Wayfair یک طراحی عالی است و راهبری بردکرامب آن هم فوق‌العاده است. اگر شما در سایت گردش کنید متوجه می‌شوید محصولات زیادی وجود دارد که در زیر مجموعه های ۵ یا ۶ سطحی قرار گرفته‌اند. برای این نوع فروشگاه تجارت انلاین یک راهبری بردکرامب واقعا ضروری است. چون به کاربر اجازه می دهد وارد سطوح مختلف دسته بندی شود. مشابه همین طراحی را می‌توانید در وب سایت Walmart هم مشاهده کنید البته راهبری بردکرامب در آن بسیار کوچک‌تر و خلاصه‌تر است:

استفاده از Breadcrumbs در طراحی وب

مطالعه بیشتر در لیداوب:

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

نمونه های رایگان طراحی وب بردکرامب

به جای طراحی UI بردکرامب خود، چرا همان UI موجود را تغییر استایل ندهید؟ هزاران PSD رایگان و آنلاین وجود دارد که دارای بردکرامب‌های فوق‌العاده‌ای هستند. گاهی لینک‌های plaintext هم خوب هستند اما اگر می‌خواهید بردکرامب حرفه‌ای‌تری داشته باشید، از نمونه‌های رایگان موجود استفاده کنید.

بردکرامب فرآیند خرید

استفاده از Breadcrumbs در طراحی وب

 مطالعه بیشتر در لیداوب:

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

بردکرامب های قدیمی

استفاده از Breadcrumbs در طراحی وب

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

راهبری ساده

استفاده از Breadcrumbs در طراحی وب

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

گرادینت های آبی روشن

استفاده از Breadcrumbs در طراحی وب

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

بردکرامب های Swift

استفاده از Breadcrumbs در طراحی وب

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

پلاگین ها و تکه کدهای رایگان بردکرامب

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

بردکرامب NavXT

استفاده از Breadcrumbs در طراحی وب

با در نظر گرفتن مجموعه بزرگ پلاگین‌های وردپرس، جای تعجبی وجود ندارد که بتوانید یک پلاگین بردکرامب عالی در میان آن‌ها پیدا کنید. بردکرامب NavXT کاملا رایگان بوده و آسان‌ترین راه برای افزودن بردکرامب به هر صفحه‌ای است. این پلاگین از کد Schema.org برای ایجاد بردکرامب‌های منطبق بر سئو استفاده می‌کند.

بردکرامب WP

استفاده از Breadcrumbs در طراحی وب

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

مطالعه مقالات بیشتر در لیداوب:

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

دیدگاه ها

دیدگاه ها : 0


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
ثبت امتیاز
1 (2 رای)

   لطفا صبر کنید ...