راهنمای نهایی برای پودر سوخاری رابط کاربری

احتمالاً با عبارت "breadcrumbs" آشنا هستید. با این حال، دقیقا به چه معناست؟

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

این مقاله به شما کمک می‌کند تا با نحوه بهبود تجربه کاربر با بردکرامب آشنا شوید.

راهنمای ناوبری چیست؟

هنگام بازدید از یک مکان جدید، ممکن است بدون ناوبری مناسب گم شوید. همچنین احتمال گم شدن کاربر در وب سایت زیاد است. در اینجا بردکرامب به عنوان مسیری عمل می کند که به کاربر کمک می کند تا به مکان مورد نظر برسد.

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

انواع راهنمای ناوبری در UI

ما می توانیم ناوبری UI را به سه دسته تقسیم کنیم.

• بر اساس موقعیت مکانی

آنها به کاربر در داخل رابط کمک می کنند تا مکان خود را برجسته کند. مانند:

صفحه اصلی > صفحه بخش > صفحه فرعی

این نمونه کاملی از بردکرامب های مبتنی بر مکان است که معمولاً در اکثر وب سایت های تجارت الکترونیکی قابل مشاهده است:

• مبتنی بر ویژگی

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

• مبتنی بر مسیر / مبتنی بر تاریخ

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

نکاتی برای تهیه پودر سوخاری های درجه یک :)

در زیر چند نکته برای طراحی UI با کیفیت بالا با استفاده از بردکرامب آورده شده است:

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

چگونه از پودر سوخاری برای تقویت UX استفاده کنیم؟

• از آن به عنوان یک ناوبری ثانویه استفاده کنید

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

• شروع یک دنباله بردکرامب را با پیوند به صفحه اصلی در نظر بگیرید

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

• مکان فعلی را غیرقابل کلیک جلوه دهید

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

• عناصر دنباله را جدا کنید

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

فواید استفاده از دنباله ناوبری

• افزایش یافت پذیری

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

• میزان کلیک کمتر

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

• استفاده موثر از فضای صفحه نمایش

می توانند جایگزین چندین لینک و دکمه در یک زمان شوند و در عین حال فشرده هستند. یک بلوک افقی باریک به فضای زیادی نیاز ندارد و رابط کاربری ساده و جذاب باقی می ماند.

• نرخ پرش پایین تر

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

• بهبود رتبه سایت شما

آیا می دانید که استفاده از دنباله ناوبری باعث بهبود رتبه سایت شما می شود؟ افزودن این نکات به ناوبری وب سایت شما به رشد کسب و کار شما کمک می کند. مخاطبان شما تجربه کاربری شما را دوست خواهند داشت و دوباره به سایت شما باز خواهند گشت.

• بدون سوء تعبیر

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

نمونه های برجسته از دنباله ناوبری (پودر سوخاری) UI

آدیداس

آدیداس در ابتدای هر مسیر از یک عنصر "back" استفاده می کند. این به کاربران امکان بازیابی آسان مراحل خود را می دهد. این نمونه ای از دنباله های مبتنی بر مسیر و ویژگی است.

والمارت

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

اچ پی

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

واتراستونز

واتراستونز تمام مسیرهای ممکن به یک کتاب خاص را نشان می دهد. این مدل کمی دست و پا گیرتر به نظر می رسند، اما گزینه های بیشتری را به کاربر نشان می دهند - نمونه ای عالی مبتنی بر ویژگی.

در نهایت

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

با در نظر گرفتن تمام مثال‌های بالا، هنگام ساخت وب‌سایت خود، از بهترین شیوه‌ها پیروی کنید. سایتی با ناوبری ضعیف باعث بازگشت کاربران می شود. نکات بالا را در نظر بگیرید و از پودر سوخاری برای بهبود UX خود استفاده کنید.

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

اگر به کیت‌های UI علاقه دارید و می‌خواهید با جدیدترین و هیجان‌انگیزترین منابع طراحی به‌روز باشید، ما شما را تحت پوشش قرار داده‌ایم! به کانال تلگرام ما، @ui8net_downloader بپیوندید، جایی که گنجینه ای از کیت های UI و دارایی های طراحی را پیدا خواهید کرد.

چرا؟

1. کیت های UI تازه: ما مرتباً به روزترین کیت های UI را از طراحان و توسعه دهندگان مختلف به اشتراک می گذاریم. طرح های پیشرفته را کشف کنید و برای پروژه بعدی خود الهام بگیرید.

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

3. پیشنهادات انحصاری: هر از چند گاهی، ما با ارائه دهندگان کیت UI شریک می شویم تا تخفیف ها و تبلیغات انحصاری را برای شما به ارمغان بیاوریم و اطمینان حاصل کنیم که بهترین معاملات را در مورد منابع طراحی برتر دریافت می کنید.

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

5. محتوای آموزشی: ما فقط کیت های UI را به اشتراک نمی گذاریم. ما همچنین بینش ها و نکات طراحی ارزشمندی را ارائه می دهیم تا به شما کمک کند مهارت های خود را ارتقا دهید و روند طراحی خود را ارتقا دهید.

چگونگی عضویت:

1. تلگرام را در دستگاه خود باز کنید.

2. "@ui8net_downloader" را در نوار جستجو جستجو کنید.

3. روی کانال در نتایج جستجو کلیک کنید.

4. روی دکمه "پیوستن" در پایین توضیحات کانال ضربه بزنید.

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