Breadcrumb Navigation Các thực tiễn và ví dụ tốt nhất

Điều hướng Breadcrumb thường bị bỏ qua trong quá trình thiết kế và phát triển. Một số người có thể thấy nó là không cần thiết trong khi những người khác có thể cảm thấy nó quá rắc rối cho giá trị của nó. Thực tế của vấn đề là, điều hướng bánh mì sẽ làm tăng đáng kể khả năng sử dụng của một trang web.

Breadcrumbs cung cấp cho người dùng một phương pháp điều hướng thay thế, cho phép họ xem vị trí của họ trong phân cấp của trang web và sẽ giảm số bước cần thiết để điều hướng đến cấp cao hơn trong trang web.

Được phác thảo ở đây là các loại điều hướng bánh mì khác nhau đang được sử dụng ngày nay, tại sao chúng quan trọng và cách chúng nên được thực hiện trực tuyến tốt nhất. Cũng bao gồm ở đây để bạn tham khảo là hơn 30 ví dụ về cách mà vụn bánh mì đang được sử dụng trực tuyến ngày hôm nay.

Hãy nhớ rằng, mặc dù có khả năng điều hướng bánh mì sẽ không tạo ra hoặc phá vỡ một trang web, nó sẽ mang lại lợi ích gia tăng cho người dùng của bạn bằng cách tăng khả năng sử dụng và chức năng tổng thể của trang web.

Các loại bánh mì

Con đường

Đường dẫn bánh mì dựa trên đường dẫn chỉ ra các bước hoặc đường dẫn, người dùng đã thực hiện để đến trang hiện tại của trang web. Hơn nữa, người dùng sẽ thấy các liên kết đến các trang mà họ đã truy cập trước đó để truy cập trang hiện tại. Trong số ba loại điều hướng bánh mì, điều hướng bánh mì dựa trên đường dẫn ít phổ biến nhất trên mạng. Lý do là, điều hướng bánh mì dựa trên đường dẫn cung cấp chức năng tương tự như “Phía trước” và “Trở lại” các nút trên trình duyệt. Đối với hầu hết các trang web Điều hướng bánh mì dựa trên vị trí và dựa trên thuộc tính cung cấp chức năng tốt hơn.

Vị trí

Các mẩu bánh mì dựa trên vị trí chỉ ra cho người dùng nơi trang hiện tại đứng trong hệ thống phân cấp của trang web. Loại điều hướng bánh mì này thường thấy nhất trên các trang web có nhiều hơn hai cấp độ sâu hoặc nội dung. Khi di chuyển xa hơn vào một trang web, người dùng được cung cấp các liên kết đến các trang hoặc danh mục, hoạt động như một “cha mẹ” hoặc tăng cấp từ trang họ hiện đang xem. Ví dụ: người dùng có thể ở trên “Nói” trang, tuy nhiên, “Chúng ta làm gì” trang là cha mẹ của “Nói” trang trong khi “Nhà” trang là cha mẹ của “Chúng ta làm gì” trang.

Công ty TNHH Clearleft

Thuộc tính

Các mẩu bánh mì dựa trên thuộc tính chỉ ra cho người dùng các thuộc tính hoặc danh mục được gán cho trang hiện tại trong một trang web. Thường thấy trên các trang web thương mại điện tử, các sản phẩm có thể không chỉ thuộc một danh mục mà còn thuộc một số thuộc tính nhất định. Ví dụ, một chiếc xe có thể được phân loại là một chiếc SUV sau đó có các thuộc tính là màu đen và được phát hành vào năm 2010.

Ô tô.com

Tại sao nên sử dụng Breadcrumbs?

• Khả năng sử dụng tuyệt vời

  Breadcrumbs cung cấp một phương tiện bổ sung để người dùng có thể dễ dàng điều hướng một trang web. Nếu người dùng truy cập vào một trang nội bộ trên trang web của bạn từ một mẩu bánh mì nguồn khác sẽ cho phép người dùng thấy chính xác vị trí của họ trong phân cấp của trang web. Người dùng cũng có cơ hội để chuyển lên cấp độ cao hơn của trang web tại bất kỳ thời điểm nào mà không gặp rắc rối nào.

• Dễ dàng quay lại

  Điều hướng chính không được thiết kế để theo sau là bánh mì vụn. Vì quay lui là cực kỳ phổ biến trực tuyến cung cấp thêm một chút trợ giúp có thể đi một chặng đường dài.

• Loại bỏ các nhấp chuột bổ sung

  Breadcrumbs cho phép người dùng chuyển từ cấp độ của trang web sang cấp độ tiếp theo mà không phải sử dụng “phía trước” hoặc là “lạc hậu” các nút trên trình duyệt. Ngoài ra, vụn bánh mì loại bỏ nhu cầu người dùng liên tục dùng đến điều hướng chính.

• Hiển thị phân cấp người dùng

  Điều hướng chính của một trang web sẽ không phản ánh thứ bậc của mỗi trang trong trang web. Cung cấp cho người dùng mẩu bánh mì sẽ cho phép họ xem cấu trúc phân cấp của một trang trong trang web.

• Làm hài lòng

  Không chỉ làm vụn bánh mì cung cấp cho người dùng khả năng sử dụng bổ sung, họ còn làm như vậy mà không chiếm nhiều diện tích hoặc không gian trên trang. Breadcrumbs dễ dàng thực hiện trong thiết kế trực quan của trang web của bạn và mang lại lợi ích lớn cho người dùng.

• Cung cấp trợ giúp bổ sung

  Hoàn toàn có khả năng một số người dùng có thể không hiểu cách thức điều hướng chính của trang web hoạt động và trong một số trường hợp, người dùng thậm chí có thể không biết những gì họ đang tìm kiếm. Cung cấp cho người dùng mẩu bánh mì sẽ cho phép họ xem tiến trình và cấu trúc tổng thể của trang web, do đó cho phép họ điều hướng trang web tốt hơn.

• Tỷ lệ thoát thấp hơn

  Thông thường, vụn bánh mì sẽ cung cấp một điều hướng chi tiết hơn so với điều hướng chính. Khi làm như vậy, người dùng sẽ được cung cấp thêm tùy chọn về cách điều hướng một trang web. Cho họ cơ hội dễ dàng theo dõi lại một vài cấp độ trong trang web sẽ làm giảm tỷ lệ thoát của bạn.

• Tạo hứng thú

  Khi người dùng truy cập vào một trang nội bộ của tỷ lệ cược trang web thì họ đã ở trên một trang quan tâm. Breadcrumbs có thể cung cấp các liên kết đến các trang bổ sung và thông tin mà người dùng cũng quan tâm mà không bắt đầu từ hình vuông.

Thực hành tốt nhất Breadcrumb

• Sử dụng Breadcrumbs ở đầu trang

  Vị trí phổ biến nhất và theo bản năng cho mẩu bánh mì nằm trong đầu trang. Điều này cho phép người dùng tìm thấy mẩu bánh mì một cách không phức tạp và sử dụng chúng cho phù hợp.

• Sử dụng Breadcrumbs một cách nhất quán

  Nếu bạn quyết định sử dụng mẩu bánh mì, hãy đảm bảo rằng bạn sử dụng chúng trên toàn bộ trang web của bạn. Cung cấp cho người dùng mẩu bánh mì trên một số trang và không phải những trang khác sẽ chỉ gây nhầm lẫn và làm họ thất vọng. (Một ví dụ điển hình của việc này là Amazon khi họ loại bỏ mẩu bánh mì khỏi các trang sản phẩm riêng lẻ.)

• Bánh mì vụn nên xuống cấp

  Breadcrumbs phải luôn bắt đầu với trang chủ và xuống cấp cho trang hiện tại. Để làm như vậy, mẩu bánh mì của bạn cần phải đi từ cấp cao nhất đến cấp thấp nhất từng bước một.

• Cách điệu Breadcrumbs một cách thích hợp

  Bạn muốn bánh mì của bạn được nhìn thấy tuy nhiên bạn không muốn chúng là tâm điểm. Bạn cũng muốn làm rõ rằng mẩu bánh mì của bạn không phải là một phần của nội dung chính cho một trang, chỉ hỗ trợ thêm cho nó. Tìm một phương tiện hạnh phúc nơi mà mẩu bánh mì của bạn đáng chú ý tuy nhiên không hống hách.

• Phân loại trang rõ ràng

  Nếu bạn có các trang thuộc hai hoặc nhiều danh mục, bạn có thể không muốn sử dụng mẩu bánh mì trên trang web của mình. Cố gắng đặt một trang dưới hai hoặc nhiều danh mục có thể sẽ chỉ tạo ra các mẩu bánh mì không rõ ràng và đánh đố người dùng. Đảm bảo trang web của bạn có một hệ thống phân cấp có tổ chức và được hiển thị tương ứng thông qua mẩu bánh mì của bạn.

• Rõ ràng tách từng cấp

  Đảm bảo người dùng có thể phân biệt sự khác biệt giữa từng cấp độ bánh mì. Dấu tách phổ biến nhất giữa các cấp là ký tự 'lớn hơn' (>). Các dấu tách tốt khác bao gồm trích dẫn góc kép bên phải (»), dấu gạch chéo (/) và mũi tên (→). Nếu sử dụng một ký tự văn bản đơn giản, chỉ sử dụng một ký tự. (»Hấp dẫn và hiệu quả hơn >>)

• Độc thân ra trang hiện tại

  Sử dụng một kiểu khác trên mục cuối cùng của danh sách Breadcrumb để xác định rằng đó là trang hiện đang được xem. Bạn có thể thực hiện điều này bằng cách làm cho các mục Dũng cảm, thay đổi màu sắc của nó, hoặc nhấn mạnh nó.

• Không biến trang hiện tại thành một liên kết

  Không cần thiết phải tạo mục cuối cùng của danh sách mẩu bánh mì vì đây là trang hiện tại đang được xem. Tạo một liên kết ở đây sẽ chỉ gây nhầm lẫn cho người dùng, đặc biệt là khi họ nhấp vào liên kết đó và không được đưa đến một trang mới.

• Không sử dụng Breadcrumbs làm tiêu đề trang

  Sử dụng mục cuối cùng của danh sách mẩu bánh mì làm tiêu đề của trang hiện tại là không hiệu quả. Nếu bạn chọn sử dụng mẩu bánh mì, hãy làm như vậy với việc thêm tiêu đề trang.

• Breadcrumbs không thay thế điều hướng chính

  Breadcrumbs chỉ được sử dụng làm hỗ trợ cho điều hướng chính, không bao giờ thay thế điều hướng chính hoàn toàn. Bạn phải luôn cung cấp cho người dùng một điều hướng chính mà từ đó họ có thể điều hướng một trang web trước khi sử dụng điều hướng bánh mì.

Những ví dụ tuyệt vời về Breadcrumbs

Vitra Direct

Xe đạp leo núi

Bất hợp pháp

Trang web

Mia và Maggie

Intridea

Thiết kế bởi con người

Roxy

Blik

Trang web

Mục tiêu

Walmart

1-800-Hoa

BestBuy

Amazon.com

Chuồng & Cao quý

Kết thúc của đất

táo

Google

Đuổi theo

AbsolutePunk.net

Littman Bros.

Người giám hộ

KHU 17

Wufoo

Nữ hướng đạo của Trung Tennessee

Tập thể Glasgow

Con đầu lòng

Chuông Canada

Grooveshark

Phá hoại

về tác giả - Shay Howe là một nhà thiết kế giao diện người dùng và web chuyên nghiệp hiện đang sống ở Chicago, IL. Anh ấy viết về thiết kế web trong blog riêng của mình tại letcounthedays và rất thích nghe bạn nói trên Twitter. Xin vui lòng nói với anh ấy xin chào!