Điều hướng chia đôi bảng — thiết kế cho store phục vụ hai đối tượng khách hàng riêng biệt

Điều hướng chia đôi bảng là gì

Hầu hết các điều hướng đều đi theo một cây phân cấp thống nhất: một bộ danh mục cấp cao nhất, một menu, một đường dẫn vào store cho mọi khách truy cập. Điều hướng chia đôi bảng phá vỡ giả định đó. Thay vì một điểm vào duy nhất, nó trình bày hai (hoặc nhiều hơn) đường dẫn bắt đầu riêng biệt ở cấp cao nhất — mỗi đường được thiết kế cho một đối tượng khác nhau với nhu cầu khác nhau.

Các mẫu hình này rất dễ nhận ra: "Cho Gia đình" và "Cho Doanh nghiệp." "Nữ" và "Nam." "Mua sắm" và "Học hỏi." "Chuyên nghiệp" và "Tiêu dùng." Mỗi đường dẫn dẫn vào một hệ thống điều hướng được tối ưu hóa cho sản phẩm, ngôn ngữ và ưu tiên của đối tượng đó. Khách truy cập chọn đường dẫn của mình ngay từ đầu, và mọi thứ phía sau đều được tổ chức xung quanh lựa chọn đó.

Đây không phải là sự khác biệt bề ngoài so với điều hướng tiêu chuẩn. Đây là một quyết định cấu trúc về cách tổ chức store — và nó mang lại hậu quả thực sự đối với trải nghiệm của các loại khách truy cập khác nhau.

Khi nào store thực sự cần điều hướng chia đôi

Điều hướng chia đôi bảng xứng đáng với sự phức tạp của nó khi store thực sự phục vụ hai đối tượng có nhu cầu điều hướng về cơ bản khác nhau — không chỉ hơi khác, mà là không tương thích. Phép kiểm tra rất đơn giản: nếu bạn hình dung Đối tượng A duyệt điều hướng tiêu chuẩn, có bao nhiêu thứ họ thấy là nhiễu không liên quan? Nếu câu trả lời là "hầu hết," store đó là ứng viên cho việc chia tách.

Các trường hợp sử dụng mà điều hướng chia tách hoạt động hiệu quả nhất:

B2B và B2C trong cùng một store. Người mua doanh nghiệp cần giá theo số lượng, quản lý tài khoản, tùy chọn hóa đơn và thông số kỹ thuật. Người mua tiêu dùng cần cảm hứng, hướng dẫn kích cỡ, tùy chọn quà tặng và thanh toán đơn giản. Ép một trong hai nhóm đi qua điều hướng của nhóm kia tạo ra ma sát và hiểu nhầm về đối tượng mà store phục vụ.

Thời trang phân theo giới tính. Dòng thời trang nữ và nam với hệ thống cỡ, danh mục sản phẩm và quan điểm biên tập riêng biệt. Khi sự giao thoa giữa hai dòng là tối thiểu, điểm vào chia tách cho phép mỗi đối tượng tiếp cận điều hướng phù hợp của họ ngay lập tức thay vì phải lọc qua một cây phân cấp kết hợp.

Dòng sản phẩm chuyên nghiệp và tiêu dùng. Một thương hiệu máy ảnh bán cả thiết bị điện ảnh chuyên nghiệp lẫn thiết bị chụp ảnh dành cho người tiêu dùng. Một thương hiệu chăm sóc da với dòng chuyên nghiệp lâm sàng và dòng bán lẻ tiêu dùng. Các sản phẩm có thể chia sẻ nhận diện thương hiệu nhưng phục vụ người mua với tiêu chí quyết định hoàn toàn khác nhau.

Nội dung giáo dục và sản phẩm. Một số store kết hợp danh mục sản phẩm với phần nội dung hoặc học tập đáng kể — khóa học, chứng chỉ, hướng dẫn — đại diện cho một điểm đến thực sự khác với logic điều hướng riêng của nó. "Mua sắm" và "Học hỏi" là hai đường dẫn chia tách cấp cao nhất phục vụ tốt cho mẫu hình này.

Khi điều hướng chia tách không hiệu quả

Mẫu hình chia đôi bảng thất bại theo những cách có thể dự đoán được. Sai lầm phổ biến nhất là chia tách điều hướng khi không có sự phân chia đối tượng thực sự — khi store phục vụ một đối tượng chính với sự biến thể nhỏ.

Nếu phân tích cho thấy 80% hoặc nhiều hơn khách truy cập thuộc về một phân khúc, điều hướng chia tách áp đặt một lựa chọn lên đa số mà làm tăng ma sát mà không mang lại lợi ích. Một khách hàng luôn mua thời trang nữ không cần phải chọn "Nữ" mỗi khi họ ghé thăm — lựa chọn đó nên được ghi nhớ hoặc việc chia tách nên được bỏ bớt để ưu tiên quyền truy cập thứ cấp nổi bật vào danh mục thiểu số.

Chế độ thất bại khác là chia tách khi nhu cầu của hai đối tượng có sự chồng lấp đáng kể. Nếu cả Phân khúc A và Phân khúc B đều thường xuyên duyệt các danh mục cấp cao nhất giống nhau, việc chia họ vào các cây điều hướng riêng biệt khiến mỗi đối tượng mất quyền truy cập vào các sản phẩm liên quan đã được xếp vào đường dẫn kia. Kết quả không phải là tổ chức tốt hơn — mà là hàng tồn kho vô hình.

Các mẫu triển khai

Bộ chọn đối tượng toàn màn hình. Khi lần đầu ghé thăm (hoặc trên trang chủ), khách truy cập được hiển thị lời nhắc toàn màn hình hoặc bảng lớn để chọn đường dẫn của họ: hai bảng khác biệt về hình ảnh, mỗi bảng đại diện cho một đối tượng, mỗi bảng dẫn đến trải nghiệm điều hướng được cá nhân hóa. Mẫu hình này truyền đạt việc chia tách một cách rõ ràng nhất và hoạt động tốt khi hai đối tượng là các nhóm lối sống thực sự khác biệt. Rủi ro là khách truy cập quay lại thấy nó gián đoạn trừ khi lựa chọn được ghi nhớ qua cookie hoặc trạng thái phiên.

Thanh Tab với hai tab đối tượng. Thanh Tab nằm ở đầu hệ thống điều hướng, với hai tab ("Cho Gia đình" / "Cho Doanh nghiệp," hoặc "Nữ" / "Nam") chuyển đổi toàn bộ hệ thống menu giữa hai cây điều hướng đối tượng. Trạng thái tab đang hoạt động làm rõ khách truy cập đang đi theo đường dẫn nào, và việc chuyển đổi chỉ cần một lần nhấn. Đây là sự chia tách liên tục ít ma sát nhất — nó không gián đoạn, nhưng làm cho cấu trúc luôn rõ ràng.

Mega Menu với hai phần khác biệt. Thay vì chia tách đối tượng hoàn toàn, bản thân Mega Menu được chia thành hai nửa khác biệt về hình ảnh — mỗi nửa được tổ chức xung quanh các danh mục chính của một đối tượng. Màu sắc, độ đậm của chữ hoặc đường phân cách báo hiệu ranh giới. Cách tiếp cận này hoạt động khi sự chồng lấp giữa các đối tượng ở mức vừa phải và điều hướng chéo nên dễ dàng: khách truy cập thường mua ở phía tiêu dùng có thể thấy phía chuyên nghiệp mà không cần chuyển đổi chế độ điều hướng.

Menu trượt với tiêu đề bộ chọn phân khúc. Trên di động, Menu trượt mở ra với một nút chuyển đổi phân khúc ở đầu — hai nút đại diện cho hai đường dẫn đối tượng — trước khi hiển thị các liên kết danh mục liên quan bên dưới. Lựa chọn phân khúc thu gọn một tập hợp liên kết và mở rộng tập hợp kia. Điều này giữ cho menu di động có thể quét mà không kết hợp danh mục của cả hai đối tượng vào một danh sách cồng kềnh.

Rủi ro UX: Chọn sai đường dẫn

Điều hướng chia đôi bảng đưa ra một chế độ thất bại mà điều hướng một cây phân cấp tránh được: khách truy cập tự nhận dạng sai và đi vào đường dẫn sai. Một chủ doanh nghiệp nhỏ coi mình là người mua "gia đình," không phải "doanh nghiệp," chọn đường dẫn tiêu dùng — và không bao giờ tìm thấy giá số lượng lớn hay điều khoản thương mại đáng lẽ đã chuyển đổi họ.

Biện pháp giảm thiểu có hai mặt. Thứ nhất, gắn nhãn các đường dẫn bằng ngôn ngữ mô tả hành vi bao quát thay vì nhãn nhận dạng. "Mua sắm cho một dự án?" và "Mua sắm cho nhà bạn?" hoạt động tốt hơn "Chuyên nghiệp" và "Tiêu dùng" vì nó đáp ứng khách truy cập đúng nơi ý định của họ là, không phải nơi họ tự phân loại mình. Thứ hai, làm cho điều hướng chéo dễ dàng và hiển thị. Liên kết "Chuyển sang Doanh nghiệp" liên tục ở chân trang hoặc thanh bên của cây điều hướng doanh nghiệp cho phép khách truy cập bị định tuyến sai có thể điều chỉnh lại mà không cần quay lại trang chủ.

Kiểm tra vấn đề sai đường dẫn bằng phân tích: đo tỷ lệ mà khách truy cập điều hướng từ các trang sâu của một đường dẫn đến điểm vào của đường dẫn kia. Tỷ lệ điều hướng chéo này cao cho thấy một phần đáng kể khách truy cập đang tự nhận dạng sai ban đầu hoặc thực sự duyệt cả hai phần — cả hai trường hợp đều đáng được giải quyết trong thiết kế điều hướng.

Phân biệt hình ảnh giữa các bảng

Ngôn ngữ hình ảnh của hai bảng nên làm việc vượt ra ngoài trang trí. Màu sắc, thang chữ và hình ảnh nên làm rõ ngay lập tức bảng nào thuộc về đối tượng nào — để khách truy cập đã đến phần sai nhận ra nhanh chóng, và khách truy cập ở phần đúng cảm thấy được xác nhận trong lựa chọn của họ.

Sự phân biệt hiệu quả sử dụng một biến số chủ đạo: một điểm nhấn màu khác cho mỗi phần (phần doanh nghiệp dùng bảng màu xanh hải quân/xám đá; phần tiêu dùng dùng tông đất ấm), hoặc trọng lượng chữ khác nhau (phần chuyên nghiệp dùng chữ chặt hơn, cảm giác kỹ thuật hơn; phần tiêu dùng dùng kiểu dáng biên tập rộng hơn), hoặc phong cách hình ảnh khác nhau (phần chuyên nghiệp hiển thị sản phẩm trong bối cảnh lâm sàng, định hướng thông số kỹ thuật; phần tiêu dùng hiển thị ảnh lifestyle).

Tránh phân biệt bằng quá nhiều biến số đồng thời khiến hai phần trông như hai thương hiệu khác nhau thay vì hai điểm truy cập vào một store thống nhất. Mục tiêu là sự phân biệt mà không có sự ngắt kết nối.

Đo lường xem việc chia tách có hiệu quả không

Điều hướng chia đôi bảng không được sử dụng đối xứng là tín hiệu đáng chú ý. Nếu một đường dẫn nhận được 90% lưu lượng điều hướng và đường kia nhận được 10%, có hai cách giải thích có thể: đối tượng của store thực sự là 90/10, trong trường hợp đó việc chia tách làm tăng độ phức tạp với lợi ích tối thiểu; hoặc nhãn chia tách đang thất bại trong việc thu hút đối tượng thiểu số, trong trường hợp đó nhãn cần được sửa đổi.

Các điểm kiểm tra phân tích hữu ích: tỷ lệ vào đường dẫn (mức độ thường xuyên mỗi tab đối tượng hoặc bộ chọn được chọn), tỷ lệ thoát theo đường dẫn (liệu một đường dẫn có liên tục mất khách truy cập nhanh hơn đường kia không), và tỷ lệ chuyển đổi theo đường dẫn (liệu một đối tượng có chuyển đổi ở mức thấp đáng kể hơn, cho thấy đường dẫn đang thất bại trong việc phục vụ họ không). Việc chia tách nên cải thiện các chỉ số của cả hai nhóm đối tượng so với một điều hướng thống nhất duy nhất — nếu không, hãy xem xét lại liệu việc chia tách có xứng đáng không.

Thanh Tab và Mega Menu của Navi+ cho phân khúc đối tượng

Navi+ hỗ trợ điều hướng chia tách đối tượng thông qua sự kết hợp giữa các thành phần Thanh Tab và Mega Menu. Thanh Tab có thể được cấu hình với hai tab đối tượng, mỗi tab tải một tập hợp liên kết điều hướng Mega Menu, ảnh danh mục và mặt hàng nổi bật riêng — vì vậy chuyển đổi tab đang hoạt động sẽ chuyển đổi toàn bộ cây điều hướng, không chỉ nhãn.

Mỗi đường dẫn đối tượng có thể mang ảnh danh mục riêng, curation sản phẩm nổi bật và cấu trúc liên kết trong cùng khung bảng Mega Menu. Khách truy cập trên di động thấy Menu trượt với nút chuyển đổi phân khúc ở đầu phản chiếu logic Thanh Tab. Sự phân biệt hình ảnh giữa các đường dẫn — điểm nhấn màu sắc, hình ảnh, nội dung nổi bật — có thể cấu hình theo từng đường dẫn, vì vậy hai bảng có thể cảm thấy khác biệt trong khi vẫn là một phần của hệ thống điều hướng thống nhất.

Phương pháp điều hướng	Khám phá cho Phân khúc A	Khám phá cho Phân khúc B	Độ phức tạp điều hướng
Điều hướng thống nhất duy nhất	Hỗn hợp — tùy chọn liên quan và không liên quan hiển thị cùng nhau	Hỗn hợp — tùy chọn liên quan và không liên quan hiển thị cùng nhau	Thấp — một cây phân cấp cho tất cả khách truy cập
Điều hướng chia đôi bảng (Navi+)	Cao — chỉ thấy danh mục liên quan của họ	Cao — chỉ thấy danh mục liên quan của họ	Cao hơn — yêu cầu chọn đúng đường dẫn ngay từ đầu

Sự đánh đổi là rõ ràng: điều hướng chia đôi bảng cải thiện khả năng khám phá cho cả hai phân khúc bằng cách giảm nhiễu, nhưng nó đưa ra độ phức tạp ở giai đoạn chọn đường dẫn. Sự đánh đổi đó xứng đáng thực hiện khi các đối tượng thực sự khác biệt. Nó không đáng thực hiện khi chi phí độ phức tạp nhiều hơn lợi ích khám phá — điều này luôn xảy ra khi việc chia tách là nhân tạo hoặc khi một phân khúc chiếm ưu thế.