Breadcrumb là một công cụ hỗ trợ điều hướng phụ giúp người dùng dễ dàng hiểu mối quan hệ giữa vị trí của họ trên một trang (như trang sản phẩm) và các trang cấp cao hơn (ví dụ: trang danh mục). Thuật ngữ này được mượn từ câu chuyện của Hansel và Gretel, nơi những đứa trẻ đánh rơi một vệt vụn bánh mì để tìm đường trở lại.

Với breadcrumbs, nếu bạn đã đến một trang mà bạn không muốn truy cập, bạn có thể dễ dàng tìm đường trở lại hoặc quay lại một hoặc hai bước và bắt đầu lại.

Breadcrumb không phải là một phần tử chỉ dành riêng cho website. Microsoft đã giới thiệu Breadcrumbs trong Windows Vista và nó đã trở thành một tính năng kể từ đó trong mọi phiên bản Windows.

Windows breadcrumb

Các loại Breadcrumb

Breadcrumbs dựa trên vị trí hoặc thứ bậc

Breadcrumbs dựa trên vị trí giúp người dùng đi đến một danh mục rộng hơn (trang cấp cao hơn) từ trang mà họ đang truy cập. Hãy xem xét một người nào đó đang tìm kiếm một đôi giày sa mạc trên Google, họ tìm thấy kết quả tìm kiếm và đến một trong các trang sản phẩm của bạn. Họ không thích những gì họ nhìn thấy và muốn khám phá các tùy chọn khác. Làm cách nào để một người quay lại trang danh mục chính (Giày nam) hoặc trang danh mục phụ (Giày nam – Giày sa mạc)?

Với đường dẫn dựa trên phân cấp, người dùng có thể dễ dàng nhìn thấy họ đang ở đâu dọc theo kiến trúc website của bạn và dễ dàng di chuyển lên trang cấp cao hơn. Hãy xem Best Buy thực hiện điều đó như thế nào.

Location Based Breadcrumb - Example

Breadcrumb dựa trên đường dẫn và lịch sử

Chúng phục vụ cùng mục đích như nút quay lại của trình duyệt, cho phép người dùng quay lại một trong những trang trước đó mà họ đã truy cập. Điều này có thể hữu ích khi người dùng đã đến trang sản phẩm sau khi áp dụng nhiều bộ lọc trên trang danh mục. Với đường dẫn dựa trên lịch sử, người dùng có thể nhanh chóng chuyển đến một trong các trang trước đó trong hành trình của họ mà vẫn giữ nguyên tất cả các lựa chọn của họ.

Tuy nhiên, ứng dụng phổ biến nhất của đường dẫn dựa trên lịch sử là việc sử dụng liên kết ‘Quay lại kết quả’.

Breadcrumb dựa trên thuộc tính

Breadcrumb dựa trên thuộc tính chỉ đơn giản là hiển thị cho bạn các thuộc tính mà người dùng đã chọn trên một trang. Các đường dẫn như vậy tìm ứng dụng trên các trang danh mục Thương mại điện tử được cung cấp bởi hầu hết các nền tảng Thương mại điện tử, nơi người dùng có thể chọn các thuộc tính để lọc kết quả tìm kiếm.

Attribute Based Breadcrumb Example

Lợi ích khi sử dụng Breadcrumb

Ban đầu được khái niệm như một công cụ hỗ trợ điều hướng đơn giản, ngày nay Breadcrumbs đã ảnh hưởng đến nhiều khía cạnh của trải nghiệm người dùng trực tuyến.

Khuyến khích duyệt và giảm số trang không truy cập

Nếu người dùng đến trang sản phẩm mà họ không quan tâm, họ sẽ thoát hoặc quay lại trang danh mục để bắt đầu lại. Breadcrumbs khuyến khích người dùng bắt đầu lại và không bị trả lại. Trong một nghiên cứu được thực hiện bởi Hull, S.S. (2004), người ta thấy rằng những người dùng được hướng dẫn sử dụng Breadcrumbs đã hoàn thành công việc nhanh hơn nhiều so với những người dùng không sử dụng Breadcrumbs. Đối với người dùng sử dụng Internet hàng ngày (ngay cả mạng nội bộ như mạng của tổ chức), việc sử dụng Breadcrumbs có thể tăng đáng kể năng suất và tiết kiệm thời gian.

Cải thiện khả năng tìm thấy website

Peter Morville, một trong những người sáng lập ra kiến trúc Thông tin cho World Wide Web, đã phát triển mô hình tổ ong trải nghiệm người dùng minh họa bảy khía cạnh chính của trải nghiệm người dùng tuyệt vời. Bằng cách giúp người dùng dễ dàng điều hướng và tìm thấy những gì họ đang tìm kiếm, breadcrumbs giúp cải thiện khả năng tìm thấy của một website.

Peter Morville's User Experience Honeycomb

Breadcrumb có lợi cho SEO

Google đã thông báo rằng họ đang thay thế URL trong kết quả tìm kiếm của nó bằng tên website và đường dẫn điều hướng breadcrumb. Điều này đang xảy ra cho các thiết bị di động ngay bây giờ và có thể sẽ được triển khai cho cả máy tính để bàn trong những ngày tới. Google cho rằng việc sử dụng tên thế giới thực của trang web sẽ giúp cải thiện khả năng sử dụng và các liên kết đường dẫn sẽ hiển thị cho người dùng chính xác nơi họ sẽ được đưa đến khi nhấp vào kết quả tìm kiếm.

Quản trị viên web có thể sử dụng đánh dấu lược đồ cho Breadcrumbs để giao tiếp với công cụ tìm kiếm hiệu quả hơn. Breadcrumbs trở thành một cách bổ sung để bạn giải thích tốt hơn cho các công cụ tìm kiếm về nội dung trang của bạn và nhận được lợi ích SEO tổng thể bổ sung nhỏ đó. Chúng cũng hoạt động như các liên kết bổ sung trong kết quả tìm kiếm để mang lại cho bạn nhiều cơ hội nhấp qua hơn.

Cách sử dụng Breadcrumb hiệu quả

– Luôn hiển thị Toàn bộ Đường dẫn: Cung cấp cho người dùng ngữ cảnh. Một đường dẫn breadcrumb tốt hoạt động giống như đèn nháy giữ cho người dùng tập trung vào nhiệm vụ trong tầm tay.

– Bắt đầu với Trang chủ: Các đường nhỏ hoạt động tốt nhất khi chúng hiển thị hành trình từ đầu này đến đầu kia. Bao gồm trang chủ trong đường mòn hoạt động giống như một mỏ neo mạnh mẽ, mang lại cảm giác định hướng tốt cho người dùng.

Sử dụng “>” làm Dấu phân cách giữa các Cấp: Nó hoạt động vì nó đã luôn hoạt động. Dấu “>” nhanh chóng hiển thị mối quan hệ giữa các trang cấp cao hơn và các trang cấp thấp hơn. Jakob Nielsen ban đầu đã khuyến nghị sử dụng dấu hai chấm (:) trong thanh điều hướng breadcrumb. Sau khi người dùng thử nghiệm, anh ấy đã thay đổi đề xuất của mình thành sử dụng “>” vì nó dễ dàng thể hiện mối quan hệ giữa các trang cấp cao hơn và các trang cấp thấp hơn.

– Đặt Crumbs ở trên cùng: Các thanh điều hướng thường được đặt ở đầu website. Vì Breadcrumbs hoạt động như một công cụ hỗ trợ điều hướng phụ, nó nên được đặt phía trên nội dung. Nhóm Nielsen Norman đã tiến hành kiểm tra người dùng và nhận thấy rằng người dùng mong đợi breadcrumbs ở đầu trang. Vị trí tốt cho breadcrumbs là bên dưới thanh điều hướng chính và phía trên tiêu đề trang.

– Hiển thị một số Độ tương phản: Độ tương phản giúp đường dẫn nổi bật như một chức năng quan trọng. Vì chúng chiếm ít không gian hơn và chủ yếu chỉ dựa trên văn bản, nên độ tương phản trở thành một yếu tố quan trọng cho sự thành công của chúng.

– Sử dụng Loại nhỏ: Sử dụng loại nhỏ giúp thông báo cho người dùng tầm quan trọng tương đối của đường dẫn liên quan đến thanh điều hướng chính. Nó không bao giờ được nhầm lẫn với công cụ hỗ trợ điều hướng chính.

– In đậm mục cuối cùng: In đậm mục cuối cùng (trang hiện tại) làm cho nó nổi bật và cho người dùng biết “đây là nơi bạn hiện đang ở”.

– Không siêu liên kết ở mục cuối cùng của breadcrumb: Bởi vì, tại sao bạn lại siêu liên kết một văn bản dẫn đến cùng một trang? Nó gây nhầm lẫn cho người dùng.

– Không sử dụng Breadcrumbs trên trang chủ: Trang chủ là nơi bắt đầu hành trình của người dùng, việc hiển thị breadcrumbs trên trang chủ của bạn là vô nghĩa.

Sử dụng tiêu đề đầy đủ trong Breadcrumbs: Việc đưa tiêu đề trang đầy đủ vào breadcrumbs là rất hợp lý để người dùng biết chính xác nơi từng siêu liên kết dẫn đến. Nhưng vì tiêu đề trang dài hoặc trang lý do khác, một số thích cắt tiêu đề trang bằng cách sử dụng dấu ba chấm (xem hình ảnh bên dưới). Trong những trường hợp như vậy, tốt hơn hết bạn nên bỏ qua các cụm từ như “Bạn đang ở đây” để tạo khoảng trống cho các yếu tố quan trọng hơn chính là tiêu đề trang.

Quý khách quan tâm đến dịch vụ của 2T Media vui lòng liên hệ:

Hotline/zalo: 0937 64 65 64

Email: 2tmedia.net@gmail.com

Facebook: https://www.facebook.com/2TMEDIA.NET

***

Dịch vụ của chúng tôi:

Giới thiệu dịch vụ Seo tổng thể

Bảng giá dịch vụ seo tổng thể

Bảng giá dịch vụ Quản trị chăm sóc website toàn diện

Bảng giá dịch vụ Copy Sao chép Tin nhanh - Quét tin - Copy Write