Đường dẫn là một tính năng điều hướng trang web hiển thị vị trí hiện tại của người dùng trong cấu trúc phân cấp của trang web. Thường được trình bày dưới dạng một chuỗi các liên kết có thể nhấp vào, Breadcrumbs giúp người dùng hiểu vị trí của họ và dễ dàng điều hướng quay lại các trang cấp cao hơn. Thành phần giao diện người dùng có giá trị này nâng cao trải nghiệm người dùng và giảm tỷ lệ thoát, khiến nó trở thành một thành phần thiết yếu cho các trang web hiện đại.
Lịch sử về nguồn gốc của Breadcrumbs và lần đầu tiên đề cập đến nó
Khái niệm Breadcrumbs lần đầu tiên được giới thiệu bởi nhà khoa học máy tính Ben Shneiderman vào năm 1987 như một phần của hệ thống HOMER (Lịch sử khám phá và truy xuất bản ghi nhớ văn phòng) của ông. Thuật ngữ “Mẩu bánh mì” có nguồn gốc từ câu chuyện cổ tích cổ điển Hansel và Gretel, trong đó các nhân vật chính thả vụn bánh mì để đánh dấu đường đi xuyên qua khu rừng. Tương tự, Breadcrumbs trong điều hướng web cho phép người dùng truy lại các bước của họ thông qua một trang web, giúp họ không bị lạc.
Thông tin chi tiết về Breadcrumbs. Mở rộng chủ đề Breadcrumbs.
Breadcrumbs hoạt động như một công cụ hỗ trợ điều hướng thứ cấp, bổ sung cho menu chính và chức năng tìm kiếm. Chúng cung cấp bối cảnh, định hướng và một phương tiện hiệu quả để quay trở lại hệ thống phân cấp trang web. Bằng cách hiển thị một vệt trang rõ ràng, Breadcrumbs mang lại một số lợi ích:
-
Người dùng thân thiện: Breadcrumbs đơn giản hóa việc điều hướng, đặc biệt là trong các trang web lớn và phức tạp, cải thiện sự hài lòng và mức độ tương tác của người dùng.
-
Giảm tỷ lệ thoát: Người dùng có nhiều khả năng khám phá sâu hơn vào trang web khi họ biết rằng họ có thể dễ dàng quay lại các cấp độ trước đó.
-
Lợi ích của SEO: Breadcrumbs góp phần tối ưu hóa công cụ tìm kiếm tốt hơn bằng cách tạo ra các liên kết phân cấp, rõ ràng giữa các trang.
-
Khả năng tiếp cận: Breadcrumb rất hữu ích cho những người dùng dựa vào trình đọc màn hình, hỗ trợ họ hiểu cấu trúc trang web.
-
Tính nhất quán: Breadcrumbs nhất quán trên một trang web sẽ cải thiện khả năng dự đoán và khả năng sử dụng.
Cấu trúc bên trong của Breadcrumbs. Cách thức hoạt động của Breadcrumbs.
Breadcrumbs thường được triển khai bằng HTML và CSS. Chúng có thể được mã hóa cứng vào trang web hoặc được tạo động thông qua hệ thống quản lý nội dung (CMS). Cấu trúc của Breadcrumbs được tổ chức theo thứ bậc, phản ánh kiến trúc thông tin của trang web. Đường dẫn thường bắt đầu từ trang chủ và tiến dần qua từng cấp độ tiếp theo, kết thúc ở trang hiện tại.
Cấu trúc bên trong thường là danh sách các liên kết, mỗi liên kết đại diện cho một trang hoặc danh mục cụ thể. Dưới đây là ví dụ về cấu trúc HTML cho đường dẫn Breadcrumb đơn giản:
html<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/category/">Category</a></li>
<li class="breadcrumb-item"><a href="/category/subcategory/">Subcategory</a></li>
<li class="breadcrumb-item active" aria-current="page">Current Page</li>
</ol>
</nav>
Các kiểu CSS có thể được áp dụng để nâng cao khả năng trình bày trực quan của Breadcrumbs, khiến chúng hấp dẫn hơn và phù hợp hơn với thiết kế của trang web.
Phân tích các tính năng chính của Breadcrumbs
Breadcrumbs đi kèm với một số tính năng cần thiết giúp nâng cao chức năng và khả năng sử dụng của chúng:
-
Các liên kết có thể nhấp vào: Mỗi phần tử trong đường dẫn Breadcrumb là một liên kết có thể nhấp vào, cho phép người dùng điều hướng đến một trang cụ thể.
-
Chỉ báo trang đang hoạt động: Phần tử cuối cùng trong đường dẫn, đại diện cho trang hiện tại, thường được tạo kiểu khác nhau để biểu thị trạng thái hoạt động của nó.
-
Đại diện phân cấp: Breadcrumbs thể hiện cấu trúc phân cấp của trang web, giúp người dùng hiểu vị trí của họ trong trang web.
-
Liên kết trang chủ: Đường dẫn thường bắt đầu bằng liên kết đến trang chủ, cho phép người dùng bắt đầu điều hướng từ cấp cao nhất.
-
Điều hướng lùi: Người dùng có thể di chuyển ngược qua trang web bằng cách nhấp vào các liên kết trong đường dẫn Breadcrumb.
Các loại Breadcrumb
Breadcrumbs có nhiều loại, mỗi loại cung cấp các chức năng riêng biệt. Các loại Breadcrumbs phổ biến bao gồm:
Kiểu | Sự miêu tả |
---|---|
Dựa trên địa điểm | Hiển thị vị trí của người dùng trong hệ thống phân cấp trang web, thường được sử dụng trong các trang web thương mại điện tử. |
Dựa trên thuộc tính | Hiển thị các thuộc tính hoặc bộ lọc được áp dụng cho danh mục sản phẩm hoặc kết quả tìm kiếm. |
Dựa trên đường dẫn | Trình bày đường dẫn hoặc URL thực tế của trang, hữu ích cho bối cảnh kỹ thuật. |
Dựa trên lịch sử | Ghi lại lịch sử điều hướng của người dùng và cho phép họ truy lại các bước của mình. |
Breadcrumbs động | Được tạo dựa trên tương tác của người dùng, thích ứng với hành vi duyệt web của người dùng. |
Các cách sử dụng Breadcrumbs:
-
Các website thương mại điện tử: Breadcrumbs cung cấp cho người dùng đường dẫn rõ ràng từ trang chủ đến sản phẩm họ quan tâm, đơn giản hóa quy trình mua hàng.
-
Điều hướng blog: Trong blog và trang web tin tức, Breadcrumbs giúp người dùng chuyển từ một bài viết cụ thể trở lại danh mục hoặc trang chủ.
-
Menu đa cấp: Breadcrumbs có thể đóng vai trò như một công cụ hỗ trợ điều hướng bổ sung cho các menu thả xuống nhiều cấp độ, giúp người dùng điều hướng quay lại dễ dàng hơn.
-
Quá tải đường dẫn: Nếu một trang web có quá nhiều cấp độ lồng nhau, đường dẫn Breadcrumb có thể trở nên quá dài và lộn xộn. Việc triển khai Breadcrumbs động chỉ hiển thị các cấp phù hợp nhất có thể giải quyết được vấn đề này.
-
Khả năng đáp ứng của thiết bị di động: Trên màn hình nhỏ hơn, việc hiển thị toàn bộ đường dẫn Breadcrumb có thể chiếm quá nhiều không gian. Sử dụng các kỹ thuật thiết kế đáp ứng, như thu gọn Breadcrumbs vào một menu, có thể giải quyết vấn đề này.
-
Đặt tên không nhất quán: Việc đặt tên danh mục không chính xác hoặc không nhất quán có thể gây nhầm lẫn cho người dùng. Đảm bảo nhãn mang tính mô tả và nhất quán cho từng liên kết giúp người dùng hiểu rõ hơn về vị trí của họ.
Các đặc điểm chính và so sánh khác với các thuật ngữ tương tự dưới dạng bảng và danh sách
đặc trưng | vụn bánh mì | Chức năng điều hướng | Sơ đồ trang web |
---|---|---|---|
Mục đích | Hiển thị vị trí của người dùng trong hệ thống phân cấp trang web. | Trình bày danh sách các liên kết để điều hướng trang web. | Cung cấp một cái nhìn tổng quan về cấu trúc của trang web. |
Chiều sâu | Thường biểu diễn một đường dẫn tuyến tính với một số mức giới hạn. | Có thể hiển thị nhiều cấp độ phân cấp của trang web. | Hiển thị toàn bộ cấu trúc của trang web. |
Bài thuyết trình | Thường được hiển thị theo chiều ngang. | Có thể theo chiều dọc, chiều ngang hoặc kết hợp. | Thường được hiển thị dưới dạng một trang duy nhất. |
Vị trí trên trang web | Thường được đặt gần đầu trang. | Thường được tìm thấy trong tiêu đề hoặc thanh bên. | Thường được liên kết từ chân trang hoặc thanh bên. |
Sự tương tác | Mỗi phần tử đều có thể nhấp vào và tạo điều kiện thuận lợi cho việc điều hướng lùi. | Nhấp vào các mục menu sẽ dẫn đến các trang tương ứng. | Nhấp vào các phần thường đưa người dùng đến các trang cụ thể. |
Khi công nghệ tiến bộ, vai trò của Breadcrumbs có thể phát triển để phù hợp với mô hình giao diện người dùng và hành vi duyệt web mới. Dưới đây là một số phát triển tiềm năng trong tương lai:
-
Breadcrumbs nhận biết ngữ cảnh: Breadcrumbs thích ứng dựa trên hành vi, bối cảnh và sở thích của người dùng có thể cải thiện hơn nữa khả năng điều hướng của người dùng.
-
Tích hợp với AI: Việc tích hợp trí tuệ nhân tạo có thể cho phép Breadcrumbs dự đoán ý định của người dùng và đề xuất các đường dẫn phù hợp.
-
Điều hướng dựa trên giọng nói và cử chỉ: Khi các tương tác dựa trên giọng nói và cử chỉ trở nên phổ biến hơn, Breadcrumbs có thể cần phải điều chỉnh để phù hợp với các phương thức nhập này một cách hiệu quả.
Cách sử dụng hoặc liên kết máy chủ proxy với Breadcrumbs
Máy chủ proxy có thể được liên kết với Breadcrumbs trong bối cảnh quét web và trích xuất dữ liệu. Các nhà cung cấp máy chủ proxy như OneProxy có thể đưa ra các giải pháp để vượt qua các cơ chế chống quét và truy cập các trang web trong khi vẫn duy trì tính ẩn danh. Breadcrumbs có thể được sử dụng cùng với máy chủ proxy để đảm bảo điều hướng liền mạch trong quá trình quét web, cho phép người dùng truy xuất lại các bước của họ một cách chính xác.
Liên kết liên quan
Để biết thêm thông tin về Breadcrumbs, bạn có thể khám phá các tài nguyên sau: