Thiết kế điều hướng dạng lưới — duyệt danh mục bằng hình ảnh cho khám phá sản phẩm trực quan

Điều hướng dạng lưới thực sự là gì

Điều hướng dạng lưới thay thế cột liên kết văn bản truyền thống bằng lưới hai hoặc ba cột gồm các ô hình ảnh — mỗi ô đại diện cho một danh mục, với nhãn và đôi khi có mô tả ngắn bên dưới. Hãy nghĩ đến lưới Instagram, nhưng mỗi ô vuông là một điểm đến điều hướng thay vì một bài đăng. Sự khác biệt về cấu trúc nghe có vẻ đơn giản, nhưng sự khác biệt về hành vi đối với khách truy cập lại rất đáng kể.

Trong danh sách điều hướng chỉ có văn bản, mỗi danh mục được biểu thị bằng chữ. Khách truy cập đọc chữ, diễn giải, quyết định xem danh mục có liên quan không, rồi nhấp hoặc chuyển sang mục tiếp theo. Trong lưới hình ảnh, mỗi danh mục được biểu thị bằng hình ảnh trực quan — một căn bếp chứa đầy bộ gốm sứ cụ thể, phòng khách ven biển màu xanh và trắng, bộ ảnh flat-lay đầm hè theo bảng màu mùa này. Mắt người dùng đã đặt vào ô hình ảnh thu hút trước khi họ đọc xong nhãn. Hình ảnh đã sàng lọc trước lượt nhấp.

Điều này quan trọng nhất với các cửa hàng mà sản phẩm truyền đạt sức hấp dẫn bằng hình ảnh nhanh hơn ngôn từ. Thời trang, nội thất, thực phẩm và đồ uống, làm đẹp, dụng cụ ngoài trời — bất kỳ danh mục nào mà việc trình bày sản phẩm thuyết phục hơn mô tả đều là ứng viên cho điều hướng dạng lưới.

Lợi thế khám phá mà điều hướng văn bản không thể sánh kịp

Điều hướng dạng lưới hiển thị chiều rộng của danh mục hàng hóa bằng hình ảnh, đồng thời và tức thì. Một khách truy cập nhìn vào lưới 3x3 gồm các ô danh mục thấy ngay chín thế giới sản phẩm riêng biệt — trước khi thực hiện bất kỳ lượt nhấp nào. Một khách truy cập nhìn vào danh sách văn bản thấy chín tên danh mục cần phải diễn giải trước khi có thể hình thành bất kỳ phản ứng cảm xúc nào.

Hãy xem xét một cửa hàng nội thất với danh mục "Coastal" (Ven biển). Liên kết văn bản ghi "Coastal" chỉ cho khách truy cập biết tên phong cách mà họ có thể có hoặc không có hình ảnh rõ ràng trong đầu. Một ô hình ảnh phòng ngủ nắng vàng với đồ gỗ trắng tẩy, chăn ga màu cát và muối biển, cùng vật treo đan trên tường sẽ trả lời câu hỏi "đây có phải dành cho tôi không?" trong chưa đầy một giây — mà khách truy cập không cần phải chiếu sở thích cá nhân lên nhãn phong cách. Hình ảnh truyền đạt những gì văn bản chỉ gần đúng.

Lợi thế khám phá này nhân lên ở cấp độ danh mục hàng hóa. Cửa hàng dùng điều hướng văn bản yêu cầu khách truy cập đã biết trước họ muốn gì theo tên gọi. Cửa hàng dùng điều hướng dạng lưới có thể hiển thị các danh mục mà khách truy cập chưa biết mình đang tìm — vì một ô hình ảnh có thể thu hút ánh mắt ngay cả khi nhãn không thu hút được sự chú ý.

Cách khách truy cập quét lưới khác với danh sách

Sự khác biệt trong hành vi quét giữa điều hướng văn bản và điều hướng lưới hình ảnh không phải là vấn đề mức độ — mà là sự khác biệt về bản chất. Danh sách văn bản được quét tuyến tính: mắt bắt đầu từ trên cùng, di chuyển xuống, đọc từng mục theo trình tự, hoặc tìm thấy điều gì đó liên quan hoặc đọc hết danh sách. Tải nhận thức là nhất quán và tuần tự. Các mục ở cuối danh sách văn bản bị bất lợi về mặt cấu trúc vì ít khách truy cập đến được chúng hơn.

Lưới hình ảnh được quét theo không gian. Mắt không bắt đầu từ góc trên bên trái và di chuyển có hệ thống đến góc dưới bên phải. Nó nhảy vào bất cứ điều gì thu hút sự chú ý trước tiên — một màu sắc, một bố cục, một sản phẩm gây ấn tượng. Khách truy cập bị thu hút bởi tông màu ấm sẽ dừng mắt ở ô có tông màu ấm, bất kể nó ở hàng trên hay hàng dưới. Lưới loại bỏ sự thiên lệch về vị trí vốn gây bất lợi cho các danh mục đặt ở cuối danh sách văn bản.

Hành vi quét không gian này cũng có nghĩa là điều hướng dạng lưới tự sắp xếp theo mức độ tương đồng. Khách truy cập phản ứng với thẩm mỹ tối giản, trung tính sẽ tập trung vào các ô đó. Khách truy cập phản ứng với màu sắc và họa tiết đậm nét sẽ tìm thấy các ô đó trước. Lưới cho phép các khách truy cập khác nhau có trải nghiệm điều hướng khác nhau trong cùng một giao diện — mỗi người đi theo bản năng trực quan của mình thay vì một thứ tự đọc chung.

Các mẫu triển khai điều hướng dạng lưới

Điều hướng dạng lưới có thể được triển khai ở nhiều cấp độ phạm vi, tùy thuộc vào mục tiêu thiết kế và ràng buộc kỹ thuật của cửa hàng:

Lưới overlay toàn màn hình. Khi khách truy cập mở menu, toàn bộ vùng nhìn lấp đầy bằng lưới các ô danh mục — thường là 3x3 hoặc 4x3. Mẫu này cho mỗi danh mục không gian hiển thị tối đa và tạo ra một khoảnh khắc thương hiệu mạnh mẽ. Nó phù hợp nhất với các cửa hàng có cấu trúc danh mục tương đối phẳng và ảnh hero chắc chắn cho mỗi danh mục. Phổ biến nhất ở các thương hiệu thời trang và nội thất cao cấp, nơi bản thân điều hướng được coi là một phần của trải nghiệm thương hiệu.

Bảng lưới Mega Menu. Mega Menu mở ra để hiển thị bảng chứa lưới các ô hình ảnh bên cạnh hoặc thay thế danh sách liên kết văn bản. Đây là triển khai thu gọn hơn, duy trì hành vi Mega Menu quen thuộc trong khi thêm độ phong phú về mặt hình ảnh. Bảng lưới có thể chiếm một cột trong bố cục Mega Menu, để lại không gian cho nội dung nổi bật, khuyến mãi hoặc điều hướng phụ bên cạnh. Tính năng cột hình ảnh của Mega Menu trong Navi+ hỗ trợ trực tiếp mẫu này — mỗi cột trong Mega Menu có thể bao gồm hình ảnh với nhãn và liên kết danh mục con, tạo thành một hàng các mục danh mục trực quan trải dài toàn bộ chiều rộng bảng.

Lưới menu trượt. Trong các mẫu điều hướng ưu tiên di động hoặc đơn giản hóa, menu trượt ra thay thế danh sách văn bản tiêu chuẩn bằng lưới hình ảnh 2 cột. Đây là mẫu điều hướng dạng lưới phổ biến nhất trên di động, nơi danh sách văn bản tiêu chuẩn có chức năng nhưng kém hấp dẫn về mặt hình ảnh. Lưới 2 cột các ô danh mục biến đổi menu trượt từ bảng tiện ích thành danh mục hình ảnh có thể duyệt — và tăng diện tích bề mặt của các danh mục mà khách truy cập sẽ cân nhắc trước khi chọn một danh mục.

Khi nào điều hướng dạng lưới tăng CTR — và khi nào không

Điều hướng dạng lưới thường tăng CTR trang danh mục cho các danh mục hình ảnh mạnh lên 20–40% so với điều hướng chỉ dùng văn bản. Khoảng đó có ý nghĩa, nhưng nó đi kèm với một điều kiện quan trọng: hình ảnh phải chất lượng tốt.

Điều hướng dạng lưới thất bại khi hình ảnh danh mục là ảnh stock. Một cửa hàng nội thất điền lưới bằng ảnh stock của các căn phòng không liên quan đến sản phẩm thực tế trong cửa hàng tạo ra trải nghiệm điều hướng nơi hình ảnh gây hiểu lầm — khách truy cập nhấp vào với kỳ vọng tìm thấy những gì hình ảnh gợi ý, rồi tìm thấy điều gì đó hoàn toàn khác. Sự không khớp đó làm tổn hại lòng tin và tăng tỷ lệ thoát. Ảnh stock trong điều hướng dạng lưới hoạt động kém hơn điều hướng văn bản, không phải tốt hơn, vì nó tạo ra kỳ vọng mà danh mục hàng hóa không thể đáp ứng.

Điều hướng dạng lưới yêu cầu hình ảnh xác thực, cụ thể cho mỗi danh mục. Hình ảnh phải hiển thị các sản phẩm thực sự có sẵn trong danh mục đó, trong một bối cảnh phản ánh thẩm mỹ thương hiệu thực tế. Khách truy cập nhấp vào ô "Bàn ăn ngoài trời" sẽ đến trang danh mục trông giống như những gì ô hình ảnh cho thấy — cùng tông màu, cùng phong cách, cùng sản phẩm hoặc sản phẩm tương đương. Khi ô hình ảnh và trang danh mục liên tục về mặt thị giác, điều hướng dạng lưới xây dựng lòng tin. Khi chúng không liên tục, nó làm suy yếu lòng tin.

Các cửa hàng không có ảnh chụp danh mục chắc chắn sẽ phục vụ tốt hơn bằng Mega Menu văn bản có cấu trúc tốt hơn là điều hướng dạng lưới chứa đầy hình ảnh không đại diện trung thực cho danh mục hàng hóa. Con đường nâng cấp là xây dựng thư viện ảnh trước, sau đó triển khai điều hướng dạng lưới.

Yêu cầu hình ảnh cho điều hướng dạng lưới

Ba yêu cầu quyết định liệu một hình ảnh danh mục có hoạt động tốt trong bối cảnh điều hướng dạng lưới hay không:

Tính đặc thù. Hình ảnh phải hiển thị sản phẩm hoặc bối cảnh đại diện cho hàng tồn kho thực tế của danh mục — không phải mô hình lifestyle, không phải kết cấu trừu tượng, không phải cảnh khơi gợi có thể thuộc về bất kỳ thương hiệu nào. Ô hình ảnh cho "Đồ gốm sứ bàn ăn" phải hiển thị các sản phẩm gốm sứ thực sự có sẵn trong cửa hàng. Khách truy cập nhấp vào ô đó đang ngầm kỳ vọng tìm thấy những gì ô hình ảnh cho thấy.

Tỷ lệ khung hình nhất quán. Điều hướng dạng lưới yêu cầu tất cả các ô chia sẻ cùng tỷ lệ khung hình — thường là hình vuông (1:1) cho lưới đồng nhất hoặc ngang (4:3 hoặc 3:2) cho lưới có không gian hình ảnh thở nhiều hơn. Hình ảnh được cắt không nhất quán, hoặc có trọng lượng bố cục khác nhau giữa các ô, làm cho lưới trở nên lộn xộn. Sự mạch lạc thị giác của lưới là một phần trong sự rõ ràng điều hướng của nó — khách truy cập sử dụng tính đều đặn của lưới để xử lý các ô nhanh chóng.

Tải nhanh. Mỗi ô trong điều hướng dạng lưới tải một hình ảnh. Lưới 3x3 tải chín hình ảnh cùng lúc khi menu mở. Hình ảnh không được tối ưu hóa sẽ trì hoãn hiển thị lưới một cách rõ ràng — các ô sẽ xuất hiện dưới dạng chỗ giữ chỗ màu xám trước khi hình ảnh tải xong, làm gián đoạn hành vi quét không gian vốn là điều làm cho điều hướng dạng lưới hiệu quả. Hình ảnh danh mục cho điều hướng dạng lưới nên ở định dạng WebP và dưới 100KB mỗi ô. Ở kích thước tệp đó, lưới 9 ô tải dưới 900KB tổng cộng — chấp nhận được trên mọi kết nối.

Cột hình ảnh Mega Menu của Navi+ như một điều hướng dạng lưới một phần

Tính năng cột hình ảnh của Mega Menu trong Navi+ triển khai một dạng điều hướng dạng lưới trong cấu trúc bảng Mega Menu. Mỗi cột trong bảng Mega Menu có thể bao gồm hình ảnh danh mục ở trên cùng, một nhãn và danh sách liên kết danh mục con bên dưới — tạo ra sự kết hợp hình ảnh và văn bản nắm bắt hầu hết lợi ích khám phá của điều hướng dạng lưới trong khi vẫn giữ hệ thống phân cấp của các liên kết danh mục con mà các danh mục hàng hóa sâu yêu cầu.

Khi một Mega Menu có ba hoặc bốn cột, mỗi cột có hình ảnh ở trên cùng, hàng trên cùng của bảng trở thành lưới hình ảnh trực quan của các danh mục. Khách truy cập quét những hình ảnh đó trước, chọn cột phù hợp với ý định của họ, rồi sử dụng các liên kết danh mục con bên dưới để điều hướng trong danh mục đó. Hình ảnh thực hiện công việc điều hướng cấp đầu tiên; các liên kết văn bản thực hiện công việc tinh chỉnh. Mẫu hai tầng này phù hợp tốt với các cửa hàng có danh mục hàng hóa sâu, nơi lưới hình ảnh đầy đủ sẽ yêu cầu quá nhiều ô để có thể quét được.

Các cột hình ảnh trong Mega Menu của Navi+ có thể được cập nhật thông qua giao diện quản trị — không cần sự tham gia của nhà phát triển và không cần chỉnh sửa theme. Hình ảnh danh mục có thể được thay thế theo mùa, cập nhật cho các chương trình khuyến mãi, hoặc thay đổi để phản ánh sản phẩm mới ra mắt trong một phiên cấu hình duy nhất.

Mẫu điều hướng	Sức hút khám phá	Phụ thuộc chất lượng hình ảnh	Khả năng sử dụng trên di động
Điều hướng danh sách văn bản	Thấp — danh mục phải được đọc và diễn giải	Không — hoạt động mà không cần hình ảnh	Trung bình — có chức năng nhưng kém hấp dẫn về mặt hình ảnh
Mega Menu cột hình ảnh (Navi+)	Cao — hình ảnh neo đậu mỗi cột về mặt hình ảnh	Trung bình — một hình ảnh mỗi danh mục, cắt xén dễ chịu	Trung bình — bảng Mega Menu thu gọn thành danh sách di động
Điều hướng lưới hình ảnh đầy đủ	Cao nhất — quét không gian, tất cả danh mục hiển thị cùng lúc	Cao — yêu cầu hình ảnh xác thực, nhất quán cho mọi ô	Cao — lưới ô 2 cột gốc với các mẫu tương tác di động