← Tất cả cẩm nang

Kiến thức cơ bản về navigation cho cửa hàng online đầu tiên: 5 yếu tố cốt lõi

Danh sách kiểm tra navigation cho chủ cửa hàng mới (test 10 phút)

Danh sách từng bước để kiểm tra navigation cửa hàng đầu tiên trên mobile và desktop—trước khi bỏ tiền vào quảng cáo.

Bạn sắp bỏ $500 vào quảng cáo Facebook để đưa lưu lượng truy cập tới cửa hàng Shopify mới. Trước khi bạn làm vậy, đây là một câu hỏi: bạn đã thực sự kiểm tra xem một khách hàng lần đầu có thể tìm thấy và mua một sản phẩm mà không bị lạc chưa?

Hầu hết chủ cửa hàng mới bỏ qua bước này. Họ đã tự mình xây dựng cửa hàng, nên họ biết mọi thứ ở đâu. Họ nhấp vào các menu một vài lần, nghĩ “trông được”, rồi ra mắt. Nhưng bạn là người tệ nhất để kiểm tra cửa hàng của chính mình—bạn đã biết cách bố trí. Một người lạ thì không.

Cuộc kiểm tra 10 phút này sẽ lộ ra các vấn đề về navigation mà âm thầm giết chết tỷ lệ chuyển đổi của bạn. Lấy điện thoại của bạn, mở cửa hàng trong cửa sổ trình duyệt riêng tư, và hoàn thành từng điểm kiểm tra dưới đây. Không cần công cụ phân tích, không cần mã, không cần nhà phát triển—chỉ là bạn và đôi mắt tươi mới.

Đọc nhanh
  • Kiểm tra navigation trước khi bỏ tiền vào quảng cáo giúp bạn tiết kiệm tiền và tránh lưu lượng truy cập bị lãng phí
  • Cuộc kiểm tra này bao gồm 5 lĩnh vực: khả năng tìm kiếm, usability trên mobile, tốc độ, khả năng truy cập, và tín hiệu tin tưởng
  • Mỗi điểm kiểm tra mất chưa tới 2 phút và không cần kỹ năng kỹ thuật
  • Sửa các vấn đề có tác động lớn nhất trước—bạn không cần điểm hoàn hảo để ra mắt
  • Chạy lại cuộc kiểm tra này hàng tháng khi danh mục và lưu lượng truy cập của bạn tăng

Trước khi bắt đầu: thiết lập bài test

Để có kết quả trung thực, mô phỏng trải nghiệm của khách hàng lần đầu:

  1. Sử dụng cửa sổ trình duyệt riêng tư/ẩn danh. Điều này ngăn dữ liệu được lưu trong bộ nhớ cache, mật khẩu đã lưu, hoặc lịch sử duyệt web làm lệch kết quả của bài test.
  2. Test trên điện thoại thực tế của bạn. Chrome DevTools’ mobile emulator hữu ích cho phát triển, nhưng nó không sao chép lại các điều kiện trong thế giới thực: sự khó khăn của việc sử dụng một tay, giới hạn về độ tiếp cận của ngón cái, ánh sáng phản chiếu trên màn hình, hoặc kết nối di động chậm.
  3. Có một mục tiêu trong đầu. Đừng chỉ “duyệt xung quanh.” Giả vờ rằng bạn muốn mua một sản phẩm cụ thể. Chọn sản phẩm bán chạy nhất của bạn (hoặc sẽ bán chạy nhất) và cố gắng tìm nó từ trang chủ.
  4. Tính giờ cho bản thân. Sử dụng ứng dụng bấm giờ. Nếu bất kỳ tác vụ nào mất hơn 15 giây, có vấn đề.

Nếu có thể, cũng hãy nhờ một người bạn hoặc thành viên gia đình—người chưa bao giờ thấy cửa hàng của bạn—thực hiện cùng một bài test trong khi bạn quan sát. Đừng hướng dẫn họ. Chỉ quan sát xem họ nhấn ở đâu, nơi họ do dự, và nơi họ bị mắc kẹt.

Phần 1: Khả năng tìm kiếm (3 phút)

Khả năng tìm kiếm là câu hỏi cốt lõi: một khách hàng có thể đi từ trang chủ tới trang sản phẩm mà không bị nhầm lẫn không?

Điểm kiểm tra 1.1: Bạn có thể truy cập bất kỳ sản phẩm nào trong 3 lần nhấn hoặc ít hơn không?

Bắt đầu từ trang chủ, điều hướng tới một sản phẩm. Đếm số lần nhấn (hoặc nhấp chuột trên desktop):

  • 1 lần nhấn: Trang chủ → Trang sản phẩm (lý tưởng cho danh mục nhỏ hoặc sản phẩm nổi bật)
  • 2 lần nhấn: Trang chủ → Bộ sưu tập → Trang sản phẩm (tiêu chuẩn và chấp nhận được)
  • 3 lần nhấn: Trang chủ → Danh mục → Danh mục phụ → Trang sản phẩm (chấp nhận được cho danh mục lớn)
  • 4+ lần nhấn: Quá sâu. Làm phẳng cấu trúc của bạn hoặc hiển thị các sản phẩm phổ biến sớm hơn.

Nếu mất 4 hoặc hơn lần nhấn trên mobile, cấu trúc menu của bạn cần được cải thiện. Mỗi lần nhấn bổ sung là một điểm nơi khách hàng bỏ cuộc.

Điểm kiểm tra 1.2: Danh mục của bạn có được đặt tên bằng ngôn ngữ của khách hàng không?

Đọc các mục menu của bạn to tiếng. Một khách hàng lần đầu có hiểu điều gì mà mỗi danh mục chứa đựng không?

Dấu hiệu cảnh báo:

  • Mã nội bộ hoặc viết tắt (“SS26 Collection” thay vì “Summer 2026”)
  • Nhãn chung chung (“Products”, “Shop All”, “Misc”)
  • Các danh mục chồng chéo nơi một sản phẩm có thể sống một cách hợp lý ở hai nơi (“Casual Wear” vs “Everyday Basics”)

Sửa nhanh: chọn 5 sản phẩm ngẫu nhiên. Với mỗi sản phẩm, dự đoán danh mục menu nào mà một người lạ sẽ tìm kiếm. Nếu dự đoán của bạn cảm thấy không chắc chắn, nhãn cần phải được cải thiện.

Điểm kiểm tra 1.3: Tìm kiếm của bạn có hoạt động không?

Nhập tên của một trong các sản phẩm của bạn vào thanh tìm kiếm. Nó có xuất hiện không? Bây giờ hãy thử:

  • Một cách đánh vần sai phổ biến của tên sản phẩm đó
  • Một thuật ngữ chung (“blue shirt” thay vì tiêu đề sản phẩm chính xác)
  • Một vật liệu hoặc thuộc tính (“cotton”, “waterproof”, “under $50”)

Nếu tìm kiếm không trả về kết quả cho một truy vấn hợp lý, khách hàng sẽ cho rằng bạn không bán những gì họ đang tìm kiếm. Tìm kiếm mặc định của Shopify xử lý các kết quả khớp chính xác nhưng gặp khó khăn với các lỗi chính tả và các từ đồng nghĩa—lưu ý điều này như một khu vực cải thiện trong tương lai.

Phần 2: Usability trên mobile (3 phút)

Hơn 60% lưu lượng truy cập của bạn có thể sẽ đến từ các thiết bị di động. Các điểm kiểm tra này kiểm tra xem navigation của bạn có thực sự hoạt động trên điện thoại không.

Điểm kiểm tra 2.1: Bạn có thể nhấn mọi mục menu mà không bị nhấn sai không?

Mở menu mobile của bạn và cố gắng nhấn từng mục. Hãy chú ý:

  • Kích thước mục tiêu nhấn: Bạn có thể nhấn mỗi mục một cách sạch sẽ bằng ngón cái của bạn không, hay bạn luôn nhấn vào sai thứ? Apple’s Human Interface Guidelines khuyến nghị mục tiêu nhấn tối thiểu 44x44 pixel.
  • Khoảng cách giữa các mục: Các mục menu quá gần nhau sẽ gây ra các lần nhấn nhầm. Phải có không gian nhìn thấy rõ giữa mỗi phần tử có thể nhấp.
  • Hành vi accordion: Nếu các danh mục của bạn có các danh mục phụ, việc nhấn vào danh mục cha sẽ mở rộng các con hay nó sẽ điều hướng ra khỏi menu hoàn toàn? Lý tưởng nhất là một biểu tượng chevron hoặc “+” mở rộng các danh mục phụ, trong khi nhấn vào tên danh mục sẽ đưa bạn tới bộ sưu tập.

Điểm kiểm tra 2.2: Giỏ hàng có luôn có thể truy cập được không?

Mà không cần mở menu, bạn có thể nhìn thấy biểu tượng giỏ hàng không? Cuộn xuống trang chủ—biểu tượng giỏ hàng có ở lại nhìn thấy (sticky header) hay biến mất không?

Nếu giỏ hàng biến mất khi cuộn, khách hàng quyết định thanh toán trong khi duyệt xem giữa trang sẽ phải cuộn lên hết cách lên trên cùng. Sticky header hoặc thanh tab ở dưới cùng với tab giỏ hàng giải quyết điều này.

Cũng kiểm tra: biểu tượng giỏ hàng có hiển thị badge với số lượng mục không? Thêm thứ gì đó vào giỏ hàng của bạn và xác minh. Badge này cung cấp phản hồi cần thiết—mà không có nó, khách hàng không chắc chắn hành động “Add to Cart” của họ có thành công không.

Điểm kiểm tra 2.3: Menu có hoạt động ở chế độ nằm ngang không?

Xoay điện thoại của bạn ngang. Menu có còn hoạt động không? Một số chủ đề bị hỏng ở hướng ngang—các mục menu chồng chéo, biểu tượng hamburger biến mất, hoặc menu trở thành có thể cuộn theo những cách không mong đợi.

Điều này có vẻ như một trường hợp đặc biệt, nhưng người dùng tablet và khách hàng duyệt xem ở chế độ ngang sẽ gặp phải nó. Một kiểm tra nhanh bây giờ ngăn chặn các khiếu nại sau này.

Điểm kiểm tra Vượt qua Không vượt qua Sửa nhanh
Sản phẩm có thể truy cập trong 3 lần nhấn Đường dẫn rõ ràng từ trang chủ Cần 4+ lần nhấn Làm phẳng danh mục hoặc nổi bật các mục phổ biến
Nhãn thân thiện với khách hàng Tên rõ ràng, cụ thể Jargon, viết tắt Đổi tên bằng ngôn ngữ khách hàng
Tìm kiếm trả về kết quả Tìm thấy sản phẩm một cách đáng tin cậy Không có kết quả cho các truy vấn rõ ràng Cải thiện thẻ và mô tả sản phẩm
Mục tiêu nhấn là 44px+ Dễ nhấn một cách sạch sẽ Nhấn sai thường xuyên Tăng khoảng cách mục menu trong cài đặt chủ đề
Giỏ hàng luôn nhìn thấy được Sticky header hoặc thanh tab Biến mất khi cuộn Bật sticky header trong cài đặt chủ đề
Giỏ hàng hiển thị số lượng mục Badge cập nhật khi thêm Không có phản hồi Kiểm tra cài đặt chủ đề hoặc ứng dụng giỏ hàng

Phần 3: Tốc độ (2 phút)

Navigation mất quá lâu để tải là navigation không tồn tại. Khách hàng sẽ không chờ đợi.

Điểm kiểm tra 3.1: Menu của bạn có xuất hiện trong vòng 2 giây không?

Trên điện thoại của bạn, với kết nối di động bình thường (không phải WiFi), nhấn vào biểu tượng hamburger hoặc điều hướng tới trang chủ của bạn. Toàn bộ menu có render trong vòng 2 giây không?

Nếu menu tải chậm, hãy kiểm tra:

  • Ảnh hero lớn đẩy menu xuống trong khi tải
  • Quá nhiều mục menu được tải một lúc (mega menu với 50+ danh mục phụ có thể nặng)
  • Script của bên thứ ba mà chặn rendering (widget chat, pop-up, công cụ phân tích)

Điểm kiểm tra 3.2: Trang có dịch chuyển khi menu tải không?

Quan sát cẩn thận khi trang chủ của bạn tải. Header có nhảy xung quanh không? Các phần tử có thay đổi vị trí không? Điều này được gọi là Cumulative Layout Shift (CLS), và nó là một trong những Core Web Vitals của Google.

Một menu gây ra layout shift gây mất định hướng. Khách hàng có thể nhấn vào sai thứ vì mục tiêu di chuyển ngay khi họ nhấn vào.

Bạn có thể đo CLS chính thức bằng cách sử dụng Google’s PageSpeed Insights (miễn phí, tại pagespeed.web.dev), nhưng một kiểm tra trực quan là đủ bây giờ: nếu có gì nhảy, nó cần phải được sửa.

Điểm kiểm tra 3.3: Chạy một bài kiểm tra PageSpeed nhanh

Mở pagespeed.web.dev trên desktop của bạn, nhập URL cửa hàng của bạn, và chạy bài kiểm tra cho cả mobile và desktop. Tập trung vào ba con số:

  • LCP (Largest Contentful Paint): Dưới 2.5 giây là tốt. Trên 4 giây là kém.
  • INP (Interaction to Next Paint): Dưới 200ms là tốt. Điều này đo độ nhanh chóng mà trang phản ứng với các nhấn.
  • CLS (Cumulative Layout Shift): Dưới 0.1 là tốt.

Đừng hoảng sợ nếu điểm số của bạn không hoàn hảo. Cho cuộc kiểm tra này, chỉ cần lưu ý những chỉ số nào ở vùng đỏ hoặc cam—đó là những điều ưu tiên sửa của bạn.

Phần 4: Kiến thức cơ bản về khả năng truy cập (1 phút)

Khả năng truy cập không chỉ là về tuân thủ—nó là về làm cho cửa hàng của bạn có thể sử dụng được cho mọi người, bao gồm các khách hàng có suy giảm thị lực, khó khăn vận động, hoặc những người duyệt xem dưới ánh sáng mặt trời rực rỡ.

Điểm kiểm tra 4.1: Bạn có thể đọc tất cả văn bản menu dễ dàng không?

Giữ điện thoại của bạn ở độ dài cánh tay. Bạn vẫn có thể đọc mọi mục menu không? Nếu bất kỳ văn bản nào quá nhỏ, độ tương phản quá thấp, hoặc trộn lẫn vào nền, hãy sửa nó.

Kiểm tra độ tương phản: văn bản menu phải có tỷ lệ tương phản ít nhất 4.5:1 so với nền của nó. Sử dụng WebAIM’s Contrast Checker (webaim.org/resources/contrastchecker) để xác minh.

Điểm kiểm tra 4.2: Bạn có thể điều hướng chỉ bằng bàn phím không? (Chỉ desktop)

Trên desktop, để chuột của bạn sang một bên. Chỉ sử dụng phím Tab, bạn có thể di chuyển qua các mục menu không? Việc nhấn Enter có mở một danh mục không? Bạn có thể truy cập tìm kiếm, giỏ hàng, và tài khoản không?

Nhiều khách hàng sử dụng điều hướng bàn phím—bao gồm những người sử dụng trình đọc màn hình, những người có suy giảm vận động, và những người dùng nâng cao thích sử dụng phím tắt. Nếu Tab skipping không hoạt động, chủ đề của bạn có thể cần cải thiện nhãn ARIA.

Phần 5: Tin tưởng và rõ ràng (1 phút)

Navigation không chỉ là về tìm sản phẩm. Nó cũng truyền đạt tính hợp pháp và chuyên nghiệp.

Điểm kiểm tra 5.1: Các trang “About” và “Contact” có khả năng tìm kiếm không?

Khách hàng mới—đặc biệt là những người đến từ quảng cáo—thường xuyên kiểm tra trang About hoặc Contact của bạn để xác minh cửa hàng hợp pháp. Các trang này phải có thể truy cập từ menu chính hoặc footer trong một lần nhấp.

Nếu bạn đã ẩn “About Us” đằng sau ba lớp của menu footer, khách hàng muốn đảm bảo sẽ không tìm thấy nó.

Điểm kiểm tra 5.2: Khách hàng có thể tìm thấy các chính sách vận chuyển và trả hàng không?

“Free shipping over $50” và “30-day returns” là những người xây dựng niềm tin làm giảm lo lắng khi mua hàng. Những cái này nên ở trong:

  • Thanh thông báo hàng đầu (hiển thị trên mọi trang)
  • Điều hướng footer
  • Hoặc cả hai

Kiểm tra rằng các trang chính sách này tồn tại, được liên kết từ footer, và tải đúng cách.

Điểm kiểm tra 5.3: Bộ chọn ngôn ngữ có nhìn thấy được không? (Nếu có)

Nếu bạn phục vụ nhiều thị trường hoặc ngôn ngữ, hãy đảm bảo bộ chọn ngôn ngữ/tiền tệ dễ tìm—thường là trong header hoặc footer. Một khách hàng đáp xuống phiên bản ngôn ngữ sai và không thể chuyển sẽ rời ngay lập tức.

Sau cuộc kiểm traXếp hạng các phát hiện của bạn theo tác động. Sửa độ hiển thị của giỏ hàng và tìm kiếm bị hỏng trước—những cái này có ảnh hưởng trực tiếp đến doanh thu. Rõ ràng về nhãn và cải thiện tốc độ có thể theo sau. Bạn không cần sửa mọi thứ hôm nay; những cải thiện hàng tuần nhất quán tăng nhanh.

Tính điểm của cuộc kiểm tra của bạn

Tặng cho bản thân một điểm cho mỗi điểm kiểm tra bạn vượt qua. Đây là cách diễn giải điểm số:

  • 11-12 điểm: Navigation của bạn là chắc chắn. Tập trung vào tối ưu hóa, không phải sửa lại hoàn toàn.
  • 8-10 điểm: Nền tảng tốt với một vài khoảng trống. Ưu tiên các điểm kiểm tra không vượt qua theo tác động doanh thu (truy cập giỏ hàng > rõ ràng về nhãn > điều hướng bàn phím).
  • 5-7 điểm: Các vấn đề đáng kể có thể đang làm mất doanh số của bạn. Giải quyết Phần 1 (khả năng tìm kiếm) và Phần 2 (mobile) không vượt qua trước tiên.
  • Dưới 5: Navigation cần công việc nghiêm trọng trước khi bạn bỏ tiền vào quảng cáo. Mỗi đô la bạn bỏ tiền để lái lưu lượng truy cập tới một cửa hàng confusing được sử dụng một phần.

Khi nào chạy lại cuộc kiểm tra này

Navigation không phải là một tác vụ thiết lập và quên đi. Chạy lại danh sách kiểm tra này:

  • Trước chiến dịch quảng cáo đầu tiên của bạn (không thể thương lượng)
  • Sau khi thêm 10+ sản phẩm mới (sản phẩm mới có thể cần danh mục mới)
  • Sau khi thay đổi chủ đề (mỗi chủ đề Shopify xử lý navigation khác nhau—Dawn, Refresh, và Sense mỗi cái có cấu trúc menu và cài đặt riêng)
  • Hàng tháng trong 6 tháng đầu (danh mục và hành vi khách hàng của bạn sẽ phát triển)
  • Hàng quý sau đó (trừ khi phân tích cho thấy sự sụt giảm đột ngột trong mức độ tương tác)

Công cụ làm cho điều này dễ dàng hơn

Đối với các điểm kiểm tra thủ công ở trên, bạn không cần bất kỳ công cụ nào ngoài điện thoại và trình duyệt. Nhưng nếu bạn muốn đi sâu hơn:

  • Google PageSpeed Insights (miễn phí): Kiểm tra tốc độ và CLS chính thức
  • WebAIM Contrast Checker (miễn phí): Xác minh khả năng đọc văn bản
  • Hotjar hoặc Microsoft Clarity (bản miễn phí): Ghi lại phiên cho thấy chính xác nơi khách hàng bị mắc kẹt
  • Navi+ Menu Builder: Nếu cuộc kiểm tra của bạn lộ ra rằng menu tích hợp của chủ đề thiếu tùy chỉnh mobile (không có tab bar, không có sticky cart, hỗ trợ icon hạn chế), Navi+ cho phép bạn định cấu hình navigation mobile và desktop riêng biệt mà không cần thay đổi mã

Chạy cuộc kiểm tra 10 phút này trước khi ra mắt quảng cáo là một trong những hoạt động có ROI cao nhất mà bạn có thể làm như một chủ cửa hàng mới. Các sửa chữa thường đơn giản—đổi tên một danh mục, bật sticky header, làm cho biểu tượng giỏ hàng nhìn thấy—nhưng tác động của họ đối với chuyển đổi là lớn.

This article is part of the larger guide on Kiến thức cơ bản về navigation cho cửa hàng online đầu tiên: 5 yếu tố cốt lõi.

Chia sẻ Facebook X

Bắt đầu với Navi+ AI Menu Builder

Chọn nền tảng của bạn — miễn phí cài đặt, hoạt động trong vài phút.