Menu điều hướng là yếu tố quan trọng nhưng nhiều website có menu thiết kế phức tạp khiến người dùng khó tìm thông tin cần thiết
SEO website và tối ưu trải nghiệm người dùng thường bắt đầu từ một chi tiết nhỏ nhưng dễ bị bỏ qua: menu điều hướng — thứ đầu tiên khách ghé thăm chạm vào. Vậy mà không ít trang lại giấu link quan trọng sau ba, bốn tầng menu con. Chúng tôi từng nhận một dự án sửa giao diện cho một cửa hàng thời trang online. Menu chính của họ có tới mười hai mục. Mỗi mục lại xổ ra thêm năm, sáu mục con bên dưới. Khách vào trang chủ, nhìn menu là rối mắt ngay. Họ lướt qua vài giây rồi thoát, chưa kịp tìm ra mục “Sản phẩm mới” nằm khuất ở đâu đó bên trong.
Nói dễ hiểu, menu điều hướng website là dàn link dẫn khách đi khắp trang — trang chủ, sản phẩm, tin tức, liên hệ. Nó giống bảng chỉ đường trong một tòa nhà lớn. Bảng chỉ đường rối thì khách lạc ngay từ sảnh, chưa kịp lên tầng đã quay ra cửa.
Vì sao khách bỏ đi chỉ sau vài giây
Khi khách không tìm thấy thứ họ cần trong vài giây, tỷ lệ rời trang sẽ tăng lên. Dân trong nghề gọi đó là bounce rate — nói đơn giản là phần trăm người vào trang rồi thoát ngay, không bấm thêm gì. Chúng tôi từng đo trên một website tin tức. Sau khi rút gọn menu từ mười lăm mục xuống còn bảy mục, thời gian khách ở lại trang tăng thêm gần một phút rưỡi. Con số đó nghe nhỏ. Nhưng với một trang sống nhờ lượt xem quảng cáo thì khác biệt hẳn. Đây chính là ví dụ rõ cho việc tối ưu trải nghiệm người dùng tác động trực tiếp đến hiệu quả SEO website.
Với các cửa hàng bán hàng trực tuyến, chuyện còn nghiêm trọng hơn. Khách đang định mua mà không lần ra được danh mục sản phẩm thì họ bỏ giỏ hàng giữa chừng. Phần lớn không quay lại lần hai. Một menu điều hướng gọn gàng giúp khách đi từ trang chủ tới trang thanh toán chỉ trong vài cú bấm. Khách không phải đoán mò mới tìm ra đường.
Đó là lý do chúng tôi luôn đưa việc rà lại menu điều hướng website vào bước đầu tiên khi audit một trang. Bước này làm trước cả nội dung hay tốc độ tải.
Những nguyên tắc cơ bản khi thiết kế menu điều hướng website
Trước khi bàn sâu, cần hiểu vì sao phải có nguyên tắc rõ ràng, thay vì sắp xếp tùy hứng. Một menu ngẫu hứng có thể đẹp trên bản vẽ. Nhưng khách dùng thật lại không nghĩ theo cách người thiết kế nghĩ. Nắm rõ nguyên tắc này giúp bạn vừa giữ chân khách vừa hỗ trợ tốt cho SEO website.
Ưu tiên đúng thứ tự, đúng cách khách quét mắt
Nguyên tắc đầu tiên: xếp mục theo thứ tự quan trọng, đọc từ trái qua phải. Mắt người dùng thường quét màn hình theo hình chữ F — nhìn ngang trên cùng trước, rồi mới xuống dưới. Vì vậy mục khách cần bấm nhiều nhất, ví dụ “Sản phẩm” hay “Dịch vụ”, nên đặt sát bên trái, ngay sau logo. Mục ít quan trọng hơn như “Giới thiệu” hay “Tuyển dụng” đẩy về phía cuối, thậm chí gom vào menu phụ ở chân trang.
Giới hạn số mục, đừng tham
Nguyên tắc thứ hai: giới hạn số mục chính, đừng tham. Khoa học hành vi gọi hiện tượng này là quá tải lựa chọn. Hiểu đơn giản, não người xử lý tốt nhất khi có khoảng năm đến bảy lựa chọn cùng lúc. Nhiều hơn thì bắt đầu lưỡng lự, chần chừ. Chúng tôi thường tư vấn khách giữ menu chính trong khoảng năm đến bảy mục, không quá tám. Mục nào không đủ quan trọng để đứng độc lập thì gom lại thành mục con.
Nguyên tắc này càng rõ với các trang bán hàng online. Mỗi mục menu thêm vào cửa hàng là một cơ hội khiến khách phân tâm khỏi việc thanh toán. Khi tư vấn thiết kế web bán hàng cho khách, chúng tôi luôn ưu tiên gói gọn menu quanh vài nhóm sản phẩm chính. Phần còn lại đẩy xuống bộ lọc bên trong trang danh mục.
Ví dụ thực tế và cách đặt tên mục
Có lần chúng tôi làm lại menu cho một trang giáo dục trực tuyến. Menu gốc xếp cả chục mục ngang hàng: khóa học, giảng viên, blog, sự kiện, học bổng, và nhiều mục khác nữa. Không ai biết nên bấm vào đâu trước. Chúng tôi gom lại còn năm mục chính: Khóa học, Giảng viên, Học bổng, Blog, Liên hệ. Những mục còn lại chuyển xuống chân trang. Chỉ riêng thay đổi này, tỷ lệ khách bấm vào trang khóa học tăng rõ rệt ngay tháng kế tiếp.
Nguyên tắc cuối nằm ở cách đặt tên mục. Đừng dùng từ mơ hồ kiểu “Giải pháp” hay “Nền tảng” nếu khách không đoán được bên trong có gì. Tên mục càng cụ thể, khách càng tự tin bấm vào. Đây cũng là chỗ áp dụng luôn 7 tiêu chuẩn thiết kế website chuyên nghiệp. Chúng tôi vẫn dùng bộ tiêu chuẩn đó để rà mọi dự án, không riêng gì menu.
Cách tối ưu menu điều hướng để nâng cao trải nghiệm người dùng trên desktop và di động
Vì sao desktop và di động cần cách làm khác nhau
Máy tính và điện thoại có màn hình khác nhau hoàn toàn. Một menu điều hướng website đẹp trên desktop có thể vỡ trận trên điện thoại nếu không tính kỹ. Đây là chỗ nhiều web tự thiết kế hay vấp, vì chỉ test trên máy tính của chính mình rồi công bố luôn.
Trên điện thoại, màn hình hẹp không đủ chỗ hiển thị hết các mục cùng lúc. Giải pháp phổ biến là menu dạng thu gọn — icon ba gạch ngang. Dân thiết kế hay gọi đó là “menu hamburger”, vì hình dáng giống miếng bánh kẹp. Bấm vào đó, menu mới xổ ra toàn màn hình hoặc trượt từ cạnh vào.
Công cụ giúp việc này nhanh hơn
Về mặt kỹ thuật, phần lớn website dùng sẵn thư viện dựng giao diện để làm nhanh hơn. Không cần code tay từ đầu. Ví dụ bộ khung Bootstrap quen thuộc trong giới lập trình web có sẵn thành phần navbar. Nó tự chuyển từ dạng ngang sang menu thu gọn khi màn hình nhỏ lại. Ví dụ dễ hình dung, Bootstrap giống một hộp đồ nghề có sẵn. Thợ không phải tiện từng con ốc, chỉ việc lắp ráp đúng kích cỡ cần dùng.
Việc chúng tôi luôn kiểm tra trước khi bàn giao
Khi làm menu di động, có mấy điểm chúng tôi luôn rà lại trước khi bàn giao cho khách:
- Vùng bấm đủ lớn, tối thiểu khoảng 44×44 điểm ảnh, để ngón tay to vẫn trúng đúng mục cần chọn.
- Menu con hiện rõ ràng khi mở, không đè chồng lên nội dung khiến khách không đóng lại được.
- Icon tìm kiếm và giỏ hàng đặt gần icon menu, vì đó là hai thứ khách di động bấm nhiều nhất.
Trên desktop, nhiều trang chọn menu dính — tức là menu luôn hiện ở đầu trang dù khách cuộn xuống bao xa. Cách này hợp với trang có nội dung dài, ví dụ trang tin tức hay blog. Khách không phải cuộn ngược lên để chuyển mục. Với trang có danh mục sản phẩm đồ sộ, có thể cân nhắc mega menu. Menu dạng này xổ thành nhiều cột, mỗi cột một nhóm sản phẩm. Khách nhìn được nhiều lựa chọn cùng lúc, không phải bấm qua từng tầng.
Dù chọn kiểu nào, nguyên tắc cuối vẫn là mục quan trọng phải nằm trong tầm bấm dễ nhất. Điều đó đúng bất kể khách vào từ máy nào.
Menu rõ ràng: nền tảng của SEO website và tối ưu trải nghiệm người dùng
Chúng tôi luôn nói với khách hàng mới: đừng sửa website bằng cách đổi màu hay thêm hiệu ứng trước. Hãy nhìn lại menu điều hướng website trước tiên. Một menu điều hướng hợp lý là yếu tố không thể thiếu khi làm SEO website và tối ưu trải nghiệm người dùng. Nó quyết định khách có đủ kiên nhẫn ở lại tìm thông tin, hay bỏ đi ngay từ những giây đầu. Rà lại menu không tốn nhiều công, nhưng hiệu quả mang lại còn rõ hơn nhiều khoản đầu tư tốn kém khác.
Nếu bạn đang phụ trách một trang thuộc ngành có menu đặc thù phức tạp, việc rà lại menu càng đáng làm sớm. Ví dụ rõ nhất là các trang theo nguyên tắc thiết kế giao diện cho ngành nhà hàng. Nơi đó phải xếp cùng lúc menu món ăn, đặt bàn và chi nhánh. Không cần làm lại toàn bộ giao diện. Chỉ cần sắp lại thứ tự, cắt bớt mục thừa, khách sẽ thấy dễ tìm hơn ngay lần ghé kế tiếp.