9 Mẹo Breadcrumb để Làm cho Trang web của Bạn Điều hướng Dễ dàng hơn [+ Examples]

Trong câu chuyện cổ tích Hansel và Gretel, hai đứa trẻ đánh rơi vụn bánh mì trong rừng để tìm đường về nhà. Ngày nay, có lẽ bạn không trải qua quá nhiều trải nghiệm lạc lối, nhưng tôi sẵn sàng cá rằng bạn đã cảm thấy mất phương hướng trên một trang web được thiết kế kém.

Trong thiết kế web, điều hướng breadcrumb là một cách để hiển thị cho người dùng của bạn vị trí của họ và cách họ đến đó. Giống như breadcrumbs của Hansel, nó giúp người dùng truy xuất lại đường dẫn của họ và xem họ đang ở đâu trong sơ đồ lớn hơn của trang web của bạn.

Tải xuống Bộ thử nghiệm & Nghiên cứu UX miễn phí của chúng tôi

Mặc dù bạn có thể tạo kiểu cho breadcrumbs theo bất kỳ cách nào bạn muốn, nhưng chúng có xu hướng trông giống nhau trên các trang web sử dụng chúng. Dưới đây là một ví dụ đơn giản về breadcrumbs từ Cơ sở kiến ​​thức HubSpot:

một ví dụ về điều hướng breadcrumb trên trang web cơ sở kiến ​​thức hubsot

Jakob Nielsen, người đồng sáng lập của Tập đoàn Nielsen Norman nổi tiếng, đã đề xuất điều hướng breadcrumb từ năm 1995 và nêu rõ điểm mạnh về tính hữu dụng và hiệu quả của chúng: “Tất cả những gì breadcrumbs làm là giúp người dùng di chuyển xung quanh trang web dễ dàng hơn, giả sử nội dung và cấu trúc tổng thể của nó có ý nghĩa. Đó là đóng góp đủ cho thứ chỉ chiếm một dòng trong thiết kế. “

Nếu trang web của doanh nghiệp của bạn có nhiều lớp, bạn có thể cân nhắc triển khai điều hướng breadcrumb để điều hướng trang web của bạn dễ dàng hơn. Tuy nhiên, giống như bất kỳ yếu tố thiết kế nào, có cách làm đúng và sai. Tại đây, chúng tôi sẽ khám phá chín mẹo và ví dụ để đảm bảo bạn đang tạo điều hướng đường dẫn hiệu quả nhất cho người dùng của mình.

Mẹo và Ví dụ về Điều hướng Breadcrumb

1. Chỉ sử dụng điều hướng breadcrumb nếu nó phù hợp với cấu trúc trang web của bạn.

Điều hướng Breadcrumb có cấu trúc tuyến tính, vì vậy bạn chỉ muốn sử dụng nó nếu nó phù hợp với hệ thống phân cấp trang web của bạn. Nếu bạn có các trang cấp thấp hơn có thể truy cập được từ các trang đích khác nhau, việc sử dụng điều hướng đường dẫn sẽ chỉ gây nhầm lẫn cho những người đọc tiếp tục truy cập các trang giống nhau từ các điểm xuất phát khác nhau. Ngoài ra, nếu trang web của bạn tương đối đơn giản, chỉ với một vài trang, bạn có thể không cần điều hướng đường dẫn.

2. Đừng làm cho điều hướng breadcrumb của bạn quá lớn.

Điều hướng breadcrumb của bạn là một công cụ phụ cho thanh điều hướng chính của bạn, vì vậy nó không được quá lớn hoặc nổi bật trên trang. Ví dụ: trên trang web của DHL, thanh điều hướng chính của họ lớn và dễ nhận biết, với các cột như “Chuyển phát nhanh” “Bưu kiện & Thương mại điện tử” “Hậu cần”, v.v. Điều hướng đường dẫn của họ là phần nhỏ hơn bên dưới có nội dung “DHL Global |> Logistics |> Vận tải hàng hóa “. Bạn không muốn người dùng nhầm điều hướng breadcrumb là thanh điều hướng chính.

một ví dụ về điều hướng breadcrumb trên trang web DHL

3. Bao gồm đường dẫn điều hướng đầy đủ trong điều hướng breadcrumb của bạn.

Tôi đã lên Google “Sinh viên không bằng cấp của Đại học Elon” để truy cập trang đích này, nhưng Elon rất thông minh khi đưa vào đường dẫn điều hướng đầy đủ, bao gồm “Trang chủ” và “Tuyển sinh”. Nếu bạn bỏ qua một số cấp độ nhất định, bạn sẽ khiến người dùng nhầm lẫn và đường dẫn breadcrumb sẽ không hữu ích. Ngay cả khi người dùng không bắt đầu trên trang chủ, bạn muốn cung cấp cho họ một cách dễ dàng để khám phá trang web của bạn ngay từ đầu.

một ví dụ về điều hướng breadcrumb trên trang web của trường đại học elon

4. Tiến độ từ cấp cao nhất đến cấp thấp nhất.

Điều quan trọng là điều hướng breadcrumb của bạn đọc từ trái sang phải, với liên kết gần nhất ở bên trái là trang chủ của bạn và liên kết gần nhất ở bên phải là trang hiện tại của người dùng. Một nghiên cứu của Nielsen Norman Group cho thấy người dùng dành 80% thời gian của họ để xem nửa bên trái của trang và 20% xem nửa bên phải, tạo nên một trường hợp mạnh mẽ cho thiết kế từ trái sang phải. Ngoài ra, liên kết gần bên trái nhất sẽ xuất hiện như phần đầu của chuỗi, vì vậy bạn muốn nó là trang cấp cao nhất của mình.

5. Giữ tiêu đề breadcrumb nhất quán với tiêu đề trang của bạn.

Để tránh nhầm lẫn, bạn sẽ muốn duy trì sự nhất quán với tiêu đề trang và đường dẫn của mình, đặc biệt nếu bạn đang nhắm mục tiêu các từ khóa nhất định trong các tiêu đề đó. Bạn cũng muốn liên kết rõ ràng các tiêu đề breadcrumb của mình với trang. Nếu tiêu đề breadcrumb không có liên kết, hãy làm rõ nó. Nestle gắn nhãn hiệu quả các tiêu đề breadcrumb để khớp với tiêu đề trang. Ví dụ: “Các khu vực tác động và cam kết” đọc tương tự trong điều hướng breadcrumb giống như trên trang.

Nestle cũng làm rất tốt việc phân biệt các liên kết với các liên kết không có liên kết với các màu khác nhau – các liên kết có màu xanh lam, trong khi các liên kết không phải là màu xám.

ví dụ về điều hướng breadcrumb trên trang web nestle

6. Thỏa sức sáng tạo với thiết kế.

Điều hướng breadcrumb truyền thống trông giống như sau: Trang chủ> Giới thiệu> Nghề nghiệp. Tuy nhiên, bạn không cần phải đi theo con đường truyền thống nếu bạn cảm thấy một thiết kế khác có thể thu hút người xem hơn hoặc trông đẹp hơn trên trang web của bạn.

Ví dụ: Target sử dụng điều hướng đường dẫn trong các trang sản phẩm của họ (vì ai sẽ không bị lạc trong phần giày ảo?), Nhưng sử dụng biểu tượng “https://blog.hubspot.com/” và văn bản màu đen và xám đơn giản. Trong trường hợp này, sự thay đổi thiết kế tinh tế có ý nghĩa đối với thẩm mỹ trang web của họ.

một ví dụ về điều hướng breadcrumb trên trang web mục tiêu

7. Giữ cho nó sạch sẽ và gọn gàng.

Điều hướng breadcrumb của bạn chỉ đơn giản là một trợ giúp cho người dùng và lý tưởng là không nên để ý trừ khi người dùng đang tìm kiếm nó. Vì lý do này, bạn không muốn làm lộn xộn điều hướng breadcrumb của mình với văn bản không cần thiết.

Ví dụ, Eionet có thể làm được nếu không có dòng chữ “Bạn đang ở đây”. Mặc dù có ý nghĩa hữu ích, nhưng văn bản làm lộn xộn trang. Với thiết kế phù hợp, điều hướng breadcrumb sẽ đủ đáng chú ý mà không cần giới thiệu.

một ví dụ về điều hướng breadcrumb trên trang web eionet

8. Xem xét loại điều hướng breadcrumb nào có ý nghĩa nhất đối với trang web của bạn.

Có một số loại breadcrumbs khác nhau mà bạn có thể sử dụng – dựa trên vị trí, dựa trên thuộc tính và dựa trên lịch sử. Đường dẫn dựa trên vị trí hiển thị cho người dùng biết họ đang ở đâu trong hệ thống phân cấp của trang web. Đường dẫn dựa trên thuộc tính cho người dùng biết trang của họ thuộc danh mục nào. Cuối cùng, đường dẫn dựa trên lịch sử hiển thị cho người dùng đường dẫn cụ thể mà họ đã đi để đến trang hiện tại.

Bed Bath & Beyond sử dụng điều hướng breadcrumb dựa trên thuộc tính để cho người dùng biết trang sản phẩm của họ thuộc danh mục nào, vì vậy người dùng có thể nhấp trở lại “Nhà bếp” hoặc “Thiết bị nhỏ” để xem xét các mặt hàng tương tự. Loại điều hướng breadcrumb này hiệu quả nhất đối với khách hàng của Bed Bath & Beyond. Khi bạn đang tạo điều hướng breadcrumb, hãy xem xét điều gì hữu ích nhất cho khách truy cập trang web của bạn.

một ví dụ về điều hướng breadcrumb trên trang web bồn tắm và hơn thế nữa

9. Biết khán giả của bạn.

Các phương pháp hay nhất trong điều hướng breadcrumb thúc giục các nhà thiết kế web đặt điều hướng ở đầu trang – nhưng Apple, một trong những công ty có giá trị nhất mọi thời đại, bất chấp logic này bằng cách đặt điều hướng breadcrumb ở cuối trang web của họ. Cuối cùng, điều quan trọng là bạn phải biết khán giả của mình. Khách hàng của Apple thường là những người am hiểu công nghệ và có thể sẽ tìm thấy điều hướng nếu họ cần. Xem xét nhu cầu của khách hàng và triển khai thử nghiệm A / B nếu bạn không chắc chắn.

một ví dụ về điều hướng breadcrumb trên trang web apple iphone x

Điều hướng Breadcrumb trong HTML và CSS

Đường dẫn không chỉ hữu ích – chúng còn dễ dàng thêm vào trang web của bạn với một chút mã HTML và CSS.

Hãy bắt đầu với HTML, chúng ta sẽ sử dụng HTML để tạo các liên kết. Cách dễ nhất để làm điều này là sắp xếp các liên kết của bạn trong một danh sách không có thứ tự (

    ), với mỗi mục danh sách (

  • ) bao gồm một liên kết trong chuỗi breadcrumb cho đến mục cuối cùng, biểu thị trang hiện tại.

    Đây là một mẫu HTML cho breadcrumbs mà bạn có thể sử dụng:

     
    

    Lưu ý cách tôi cũng đã bao gồm danh sách không có thứ tự trong HTML

Leave a Comment