Khi Di Động Chính Là Thương Hiệu
Trên phạm vi toàn ngành, di động chiếm khoảng 60–75% lưu lượng truy cập thương mại điện tử. Đối với các thương hiệu có tệp khách hàng trẻ tuổi, chủ yếu tương tác qua mạng xã hội, hoặc mua sắm trong các phiên ngắn thay vì duyệt web lâu dài trên máy tính, tỷ lệ lưu lượng di động có thể đạt 85–90% hoặc cao hơn. Với những cửa hàng này, trải nghiệm điều hướng trên di động không phải là sự điều chỉnh của trải nghiệm "thực" — đó chính là toàn bộ trải nghiệm. Tuyệt đại đa số ấn tượng về thương hiệu diễn ra trên màn hình 6 inch, điều hướng bằng ngón tay cái, trong các phiên trung bình dưới 4 phút.
Triết lý thiết kế mà hầu hết các cửa hàng áp dụng — thiết kế cho desktop, điều chỉnh cho di động — tạo ra điều hướng di động nhỏ hơn và bị hạn chế hơn phiên bản desktop, thường với cùng logic cấu trúc nhưng ít phần tử hiển thị hơn. Thiết kế mobile-first đảo ngược điều này: bắt đầu từ những hạn chế và đặc điểm của màn hình di động, thiết kế trải nghiệm tốt nhất có thể cho ngữ cảnh đó, rồi mới xem xét cách biểu đạt thông tin tương tự trên màn hình lớn hơn nơi không gian ít bị giới hạn. Hai cách tiếp cận này tạo ra các kiến trúc điều hướng khác biệt có ý nghĩa, và đối với các thương hiệu có lượng khách hàng chủ yếu trên di động, cách tiếp cận mobile-first tạo ra kết quả chuyển đổi di động tốt hơn một cách rõ rệt.
"88% lưu lượng của chúng tôi là di động — chúng tôi biết điều này vì theo dõi hàng tuần. Nhiều năm qua chúng tôi thiết kế website trên máy tính rồi 'làm cho nó hoạt động' trên di động. Khi chúng tôi đảo ngược quy trình — thiết kế mọi thứ cho điện thoại trước, rồi để phiên bản desktop là phiên bản rộng hơn của đó — mọi thứ đều tốt hơn. Đặc biệt là điều hướng. Chúng tôi ngừng cố nhét menu desktop vào màn hình di động và chỉ xây dựng menu di động mà chúng tôi thực sự muốn. Desktop bây giờ cũng ổn, nhưng đó không phải là nơi tập trung công sức."
— Một khách hàng Navi+, thương hiệu thời trang gốc từ mạng xã hội
Điều Hướng Mobile-First Trông Như Thế Nào
Kiến trúc điều hướng mobile-first bắt đầu từ các giả định khác so với điều hướng được điều chỉnh từ desktop:
Tab Bar là điều hướng chính, không phải phụ. Trong điều hướng di động được điều chỉnh từ desktop, menu hamburger là chính — tất cả danh mục nằm trong hamburger. Tab Bar, nếu có, là phụ — một lớp điều hướng bổ sung. Điều hướng mobile-first đảo ngược điều này: Tab Bar là chính, chứa năm điểm đến điều hướng quan trọng nhất, và Slide Menu là phụ — một lớp điều hướng toàn diện cho việc duyệt sâu hơn. Điều hướng chính luôn hiển thị ngay lập tức; điều hướng toàn diện chỉ cách một lần chạm. Sự đảo ngược này phản ánh cách các ứng dụng di động native xử lý điều hướng, và nó tạo ra cải tiến hiệu suất tương tự trong ngữ cảnh web.
Điều hướng được thiết kế theo tầm với của ngón tay cái. Trên thiết bị di động, vùng tiếp cận tự nhiên của ngón tay cái bao phủ hai phần ba phía dưới màn hình. Đỉnh màn hình — nơi header và menu hamburger tồn tại — là phần khó tiếp cận nhất của điện thoại khi điều hướng bằng một tay. Tab Bar ở dưới cùng màn hình tận dụng vùng tiếp cận tự nhiên của ngón tay cái. Slide Menu mở từ trái hoặc phải (vị trí thông thường) đều dễ tiếp cận. Điều hướng được thiết kế theo công thái học ngón tay cái tạo ra ít lỗi điều hướng hơn và tương tác điều hướng nhanh hơn.
Văn bản tối giản, khả năng quét tối đa. Nhãn điều hướng trên di động được đọc trong vài trăm mili giây. Người dùng không đọc — họ quét. Nhãn điều hướng có thể hiểu ngay (ngắn gọn, rõ ràng, phù hợp với danh mục) phục vụ người dùng di động tốt hơn các nhãn dài hơn, mô tả chi tiết hơn đòi hỏi phải đọc. Đây là sự đánh đổi khác so với điều hướng desktop, nơi nhãn dài hơn một chút ít tốn kém hơn vì người dùng có nhiều không gian màn hình hơn và thường ở vị trí xem thoải mái hơn.
Điều hướng độc lập với cuộn trang. Điều hướng sticky ở đỉnh màn hình desktop hoạt động tốt vì đỉnh màn hình luôn có thể truy cập trên desktop. Trên di động, điều hướng header sticky trở nên không thể tiếp cận khi người dùng đã cuộn xuống trang sản phẩm dài — header ở đỉnh màn hình, trong khi ngón tay cái ở dưới cùng. Tab Bar hoàn toàn độc lập với cuộn trang theo thiết kế: nó nằm ở dưới cùng màn hình bất kể vị trí cuộn, luôn có thể truy cập, luôn hiển thị. Khả năng tiếp cận liên tục này là tính năng giải thích trực tiếp nhất lợi thế hiệu suất của Tab Bar so với điều hướng chỉ dùng header trên di động.
| Kiểu điều hướng | Trải nghiệm Desktop | Trải nghiệm Mobile-First |
|---|---|---|
| Vị trí điều hướng chính | Header trên cùng (tự nhiên cho chuột) | Tab Bar dưới cùng (tự nhiên cho ngón cái) |
| Điều hướng toàn diện | Mega Menu dropdown | Slide Menu toàn màn hình (dễ đọc/điều hướng hơn) |
| Khả năng tiếp cận khi cuộn | Header luôn hiển thị (sticky) | Tab Bar luôn ở dưới (liên tục) |
| Độ dài nhãn | Vừa phải — không gian cho phép mô tả | Ngắn gọn — tối ưu quét, rõ ràng |
Mobile-First Như Một Cam Kết Thương Hiệu
Đối với các thương hiệu có lượng khách hàng chủ yếu trên di động, cam kết với thiết kế điều hướng mobile-first là một cam kết thương hiệu không kém gì một quyết định UX. Nó nói rằng: chúng tôi biết khách hàng của mình ở đâu, và chúng tôi đã xây dựng dành riêng cho họ thay vì xây dựng cho người dùng desktop lý thuyết chiếm 12% lưu lượng truy cập. Trải nghiệm điều hướng kết quả — nhanh hơn, công thái học hơn, nhất quán thương hiệu hơn — cũng là sự thể hiện tốt hơn của thương hiệu vì nó được thiết kế có chủ đích thay vì được điều chỉnh từ một ngữ cảnh khác. Navi+ được xây dựng cho triết lý mobile-first này: Tab Bar và Slide Menu không phải là sự điều chỉnh của các mẫu điều hướng desktop, chúng là các thành phần điều hướng di động được xây dựng có mục đích và hoạt động tốt ở mọi kích thước màn hình.
Dùng thử miễn phí — không cần code, không cần lập trình viên
Cài đặt trong vài phút trên Shopify, WordPress hoặc bất kỳ website nào.