Breadcrumbs là một phần quan trọng của hầu hết mọi trang web tốt. Những công cụ hỗ trợ điều hướng nhỏ này không chỉ cho mọi người biết họ đang ở đâu trên trang web của bạn mà còn giúp Google tìm ra cách trang web của bạn được cấu trúc . Đó là lý do tại sao việc thêm những gợi ý nhỏ hữu ích này rất có ý nghĩa. Chúng ta hãy xem cách hoạt động của điều hướng breadcrumb.
Breadcrumb là gì?
Breadcrumbs 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.
Breadcrumbs không phải là một phần tử chỉ dành riêng cho trang web. 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
Nhu cầu về Breadcrumbs của chúng ta có một lý do tiến hóa
Peter Pirolli đã tìm thấy những điểm tương đồng thú vị giữa cách động vật kiếm thức ăn và cách con người tìm kiếm thông tin có lợi . Vốn dĩ, tất cả chúng ta đều sống theo quy tắc heuristic – không dành nhiều năng lượng để theo đuổi thức ăn hơn những gì thức ăn sẽ cung cấp. Hãy xem xét cách chúng ta tìm kiếm thông tin trên internet: chúng ta tìm kiếm một thứ gì đó, công cụ tìm kiếm đưa ra nhiều kết quả.
Chúng tôi quét các liên kết và trừ khi chúng tôi cảm nhận được các dấu hiệu (tiêu đề SEO, meta, v.v.) rằng một liên kết sẽ cung cấp cho chúng tôi thông tin mà chúng tôi đang theo dõi, chúng tôi sẽ không nhấp qua. Nó không khác gì một con thú săn mồi ở Savannah; con thú sẽ chỉ tính phí khi dấu vết mùi hương đủ mạnh để chứng minh năng lượng phải bỏ ra để truy đuổi.
Trên một trang web, khi có nhiều đường dẫn hướng, tốt nhất là người dùng có thể xác định rõ ràng đường dẫn đến những gì họ muốn. Nếu không có nó, họ có thể bỏ cuộc và bỏ cuộc.
Các loại đường dẫn trong thiết kế trang web
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 chuyển đến danh mục rộng hơn (trang cấp cao hơn) từ trang 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 để 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 trang web 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.
Đường dẫn hoặc đường dẫn dựa trên Lịch sử
Chúng phục vụ cùng một 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 đó 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ả’
Đường dẫn dựa trên thuộc tính
Đường dẫn 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. Đườ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ử 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.
5 Lợi ích của việc sử dụng Breadcrumbs
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.
1. Khuyến khích duyệt và giảm số trang không truy cập
Nếu người dùng truy cập 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, SS (2004) [1] , 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ác tác vụ nhanh hơn nhiều so với những người dùng không sử dụng Breadcrumbs. Đối với những 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.
2. Cải thiện khả năng tìm thấy trang web của bạn
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 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 trang web.
3. Breadcrumbs mang lại lợi ích cho SEO
Google đã thông báo [2] rằng họ sẽ thay thế URL trong kết quả tìm kiếm của nó bằng tên trang web 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ật 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 [3] để 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 bổ sung. 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.
- Tham khảo: DỊCH VỤ SEO WEBSITE
4. Bởi vì không có lý do chính đáng để không sử dụng chúng
Jakob Nielsen nói rằng ông đã khuyến nghị dùng vụn bánh mì từ năm 1995 [4] . Những lý do rất đơn giản.
Breadcrumbs không bao giờ gây ra vấn đề trong thử nghiệm người dùng. Người dùng chú ý đến breadcrumbs chỉ 30% thời gian; khi họ làm, nó sẽ hữu ích và ngay cả khi họ không, nó không gây hại gì.
Chúng chiếm rất ít không gian trên trang, vì vậy bất động sản không thể là lý do khiến bạn quyết định không sử dụng breadcrumbs.
Breadcrumbs vẫn khá ổn định về diện mạo của nó trong nhiều năm. Sự quen thuộc lâu dài như vậy làm cho nó có thể nhận ra ngay lập tức và do đó, hữu ích.
5. Breadcrumbs Giúp Giảm Lo lắng cho Người dùng
Breadcrumbs có thể làm giảm sự lo lắng của người dùng về những gì sẽ xảy ra bằng cách hiển thị cho họ toàn bộ đường đi của một quá trình. Ví dụ, thiết lập một tài khoản trên VWO có một vài bước. Bằng cách sử dụng breadcrumbs, chúng tôi có thể cho người dùng biết chính xác có bao nhiêu bước liên quan đến quy trình và cho phép họ quay lại bất kỳ bước nào trước đó tại bất kỳ thời điểm nào.
Điều này cung cấp cho người dùng một ý tưởng về cam kết (thời gian và nỗ lực) cần thiết từ họ để thiết lập quy trình. Một khi ai đó bắt đầu một nỗ lực, những dấu hiệu trực quan như vậy có thể đóng vai trò như một động lực mạnh mẽ để kết thúc quá trình.
Có rất nhiều tranh luận về việc nên gọi chức năng này là điều hướng ‘thanh tiến trình’ hay ‘đường dẫn’. Nhưng sự thông thái phổ biến cho rằng nếu đường mòn cho phép người dùng điều hướng trở lại bước trước đó, thì nó cũng tốt như một đường dẫn.
10 Thực tiễn được Đề xuất để Sử dụng Breadcrumbs
Thông thường, breadcrumbs xuất hiện trong một đường ngang hiển thị đường dẫn từ trang cấp cao nhất (trang chủ) đến trang hiện tại mà người dùng đang truy cập. Dưới đây là danh sách 10 phương pháp hay nhất mà một số được đề xuất bởi những người như Steve Krug, tác giả cuốn sách ‘Don’t Make Me Think’ và một Chúa thiết kế web theo đúng nghĩa của ông ấy.
- 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ụ trước mắt.
- 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ẽ, tạo cảm giác định hướng mạnh mẽ 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 [6] (:) 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 trang web. Bởi 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 các bài kiểm tra người dùng và nhận thấy rằng người dùng mong đợi breadcrumbs ở trên cùng [7] của 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, độ 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 đang ở’.
- Không siêu liên kết Mục cuối cùng:
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, không có ý nghĩa gì khi hiển thị breadcrumbs trên trang chủ của bạn.
- Sử dụng Tiêu đề trang toàn phần 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 mỗi 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.
- URL trang nên phản chiếu đường mòn bánh mì :
URL trang cho biết kiến trúc trang web. Điều quan trọng là phải đảm bảo tính nhất quán giữa URL và Breadcrumbs vì nếu không, người dùng có thể nhận được thông báo không nhất quán từ cả hai phần tử này.
Khi nào bạn không nên sử dụng Breadcrumbs?
Đây là một khó khăn, vì Breadcrumbs hầu hết đều vô hại. Nhưng có một báo trước. Nếu trang web của bạn chỉ chứa một vài trang, không có nhiều cấp độ phân cấp, breadcrumbs có thể không hữu ích. Bao gồm breadcrumbs trong những trường hợp này là không cần thiết và có thể gây nhầm lẫn cho người đọc.
Tôi thực sự nhìn bên dưới tầng rừng, Breadcrumbs không phải là hoàn hảo. Sự cố với điều hướng Breadcrumbs
Ngay cả khi đã tồn tại hơn một thập kỷ, Breadcrumbs vẫn không được coi là một phương pháp hay nhất. Có nhiều lý do cho nó:
1. Mọi người vẫn không chắc liệu nó có đáng để nỗ lực hay không: Nó không phải là một chức năng tạo hoặc phá vỡ. Không tranh cãi ở đó.
2. Có niềm tin rằng breadcrumbs là ‘cần thiết’ chỉ khi kiến trúc thông tin của bạn bị xáo trộn. Nếu người dùng có thể dễ dàng điều hướng trang web của bạn, họ sẽ biết họ đang ở đâu mà không cần bạn chỉ cho họ. Về cơ bản, trường phái tư tưởng này tin rằng breadcrumbs là một lựa chọn dự phòng khi kiến trúc của bạn bị lộn xộn. Vì vậy, họ hỏi: nếu bạn định dành thời gian và công sức, tại sao không tốt hơn hệ thống phân cấp thông tin của bạn hơn là đầu tư vào Breadcrumbs?
Vấn đề với Breadcrumbs dựa trên lịch sử
Để tự động tạo breadcrumb dựa trên lịch sử, bạn phải truy cập cookie của trình duyệt. Điều đó đòi hỏi thêm mã hóa và nỗ lực. Nỗ lực thêm sẽ có ý nghĩa nếu lợi ích lớn hơn nỗ lực. Nhưng nó không?
Không có lợi ích SEO : Vì breadcrumbs phải dựa trên lịch sử người dùng, các bot của công cụ tìm kiếm sẽ không bao giờ nhìn thấy nó và không có lợi ích SEO
Không hữu ích cho tất cả : Nhiều người dùng tiếp cận trực tiếp các trang sâu bên trong trang web thông qua các công cụ tìm kiếm; đối với dân gian như vậy, một dấu vết dựa trên lịch sử không có lợi.
Lỗi phức hợp : Đối với những người truy cập một trang thông qua quá trình thử và sai, sẽ là vô nghĩa nếu có lịch sử điều hướng phụ tối ưu dưới dạng đường dẫn.
Tuy nhiên, cần lưu ý rằng điểm cuối cùng bắt nguồn từ kiến trúc thông tin bị lỗi của toàn bộ trang web. Nếu người dùng không thể dễ dàng xác định đường dẫn dễ dàng nhất đến một trang, thì việc đầu tư vào việc tối ưu hóa kiến trúc của trang web có thể là một lựa chọn tốt hơn là loay hoay với breadcrumbs.
Vấn đề với Breadcrumbs Dựa trên Điều hướng
Đối với các trang web đa phân cấp như hầu hết các trang web Thương mại điện tử thời đại mới, hệ thống phân cấp sẽ phẳng hơn và mỗi lựa chọn sản phẩm có thể thuộc nhiều danh mục. Ví dụ: đối với một người nào đó đang tìm mua một túi đậu, đường mòn vụn bánh mì có thể trông giống như
Trang chủ > Nội thất > Phòng khách > Ghế > Ghế đơn > Túi đậu ‘The Dude Abides’
hoặc là
Trang chủ > Nội thất > Phòng khách > Ghế > Đơn giản > Túi đậu ‘The Dude Abides’
Bạn sẽ chọn hiển thị cái gì?
Hãy xem xét trang sản phẩm đầu tiên .
Đối với trang sản phẩm, một cách hợp lý là gọi loại breadcrumb thích hợp nhất để hiển thị. Đường dẫn hướng dễ nhất hoặc được sử dụng nhiều nhất là một đối thủ tốt.
Nếu trang danh mục của bạn cho phép người dùng chọn thuộc tính sản phẩm, sẽ hữu ích khi có đường dẫn điều hướng thích hợp nhất và liên kết ‘quay lại kết quả’ (đường dẫn lịch sử) trên trang sản phẩm của bạn. Đưa ra lựa chọn là một điều khó khăn.
Đối với những người dùng đã xem qua đó, truy cập vào trang sản phẩm, không hoàn toàn hài lòng với lựa chọn của họ và muốn xem một sản phẩm khác phù hợp với thuộc tính, nút quay lại của trình duyệt có thể gây ra lo lắng. Điều này là do người dùng không thể chắc chắn liệu trình duyệt có nhớ các lựa chọn thuộc tính của họ hay không. Tùy chọn ‘Quay lại kết quả’ có thể làm yên tâm và giữ khách truy cập trong kênh chuyển đổi.
Quay lại kết quả | Trang chủ > Nội thất > Phòng khách > Túi đậu > Túi đậu ‘The Dude Abides’
Bây giờ chúng ta hãy nói về trang danh mục .
Đối với trang danh mục, nếu bạn đang cho người dùng lựa chọn các thuộc tính sản phẩm như ‘thương hiệu’ hoặc ‘kích thước’, thì một cách khác để sử dụng breadcrumbs là hiển thị cả đường dẫn điều hướng chuẩn và các thuộc tính cùng nhau, nhưng được phân biệt hợp lý.
Trang chủ > Nội thất > Ghế | Ghế đơn
Breadcrumbs: Trạng thái thứ cấp, Giá trị chính
Breadcrumbs đã tồn tại hơn một thập kỷ. Nhưng họ chưa bao giờ tìm thấy nhiều sự chú ý do trạng thái vĩnh viễn là ‘thanh điều hướng phụ’. Bất chấp trạng thái của nó, Breadcrumbs có thể là một yếu tố mạnh mẽ để cải thiện trải nghiệm người dùng và tạo sự tương tác. Từ quan điểm kinh doanh, nó giúp ích trong cả việc mua lại (nghĩ đến SEO) và chuyển đổi (giảm bớt điều hướng trên trang web).
Để đưa vấn đề về nhà, hãy để tôi trích dẫn một số số liệu từ một nghiên cứu cách đây hai năm của Baymard . Sau một nghiên cứu về điểm chuẩn liên quan đến 40 trang web Thương mại điện tử, 68% có cách sử dụng điều hướng Breadcrumb dưới mức tối ưu. 23% không có phần tử Breadcrumb nào cả.
Một số người coi Breadcrumbs là một yếu tố thiết kế cổ xưa không có nhu cầu hoặc ưu tiên trong thế giới ngày nay, trong khi đối với những người khác, nó là một viên ngọc quý chiếm ít bất động sản và tốn ít công sức nhưng đóng góp to lớn vào trải nghiệm người dùng tổng thể.
Vậy bạn có nên có Breadcrumbs trên trang Thương mại điện tử của mình không? Nhìn vào người dùng của bạn để biết câu trả lời, họ có được lợi không? Tôi nghĩ đó là câu hỏi duy nhất đáng để hỏi, thực sự.
Nguồn tham khảo bài viết: https://vwo.com/blog/why-use-breadcrumbs/
