Tâm Lý UX Cho Bảng Giá Và Nút CTA: 10 Ứng Dụng Tăng Chuyển Đổi

Tâm lý UX cho bảng giá và CTA gồm những ứng dụng nào?

Tâm lý UX cho bảng giá và CTA gồm mười ứng dụng: Hick's law cho số gói, Von Restorff cho điểm nổi, Fitts's law cho vùng chạm, Miller cho cách chia khối, bằng chứng sát nút, form ngắn, CTA dính đáy trên di động, nhãn nút nói rõ kết quả, dòng chữ nhỏ giảm rủi ro và hiệu ứng chim mồi.

Mỗi quy luật mô tả xu hướng đo trên nhóm người, không phải công thức chắc ăn cho mọi trang. Vì vậy mỗi thay đổi trên bảng giá cần được đo: lượt xem bảng giá, lượt bấm nút, lượt gửi form, theo cách chia micro events và macro events trong GA4.

Nền chung về tối ưu tỷ lệ chuyển đổi và cách kết hợp CRO và SEO có ở hai bài riêng. Ở đây chỉ bàn bảng giá và nút bấm. Bảng chấm UX và chuyển đổi có trọng số theo SQA-200™, mẫu bảng giá điền sẵn và quy trình đặt CTA theo từng bậc DLN nằm trong bản tài liệu chuyên sâu đi kèm.

Quy luật tâm lý cho bạn giả thuyết. Số liệu trên chính trang của bạn mới cho bạn kết luận.

Hick's law: Bảng giá nên có bao nhiêu gói là vừa?

Bảng giá nên có ít gói, thường 2 tới 4, mỗi gói khác nhau ở một điểm người đọc nhìn ra ngay. Hick's law nói càng nhiều lựa chọn thì càng mất thời gian quyết định. Mức 2 tới 4 gói là cách làm của tôi, rút từ quy luật đó. Nghiên cứu gốc không đặt con số nào cho bảng giá.

NN/g tóm tắt: "Hick's Law (or the Hick–Hyman Law) says that the more choices you present to your users, the longer it takes them to reach a decision." (Hick's Law: Designing Long Menu Lists). Một bài khác của NN/g ghi: "having fewer options makes it easier for people to make a selection." (Simplicity Wins over Abundance of Choice).

Ba gói, mỗi gói khác nhau trên một trục người đọc hiểu ngay: học nền tảng, làm kèm trên website, học trọn khung offline. Phân tích SEO và GEO là sản phẩm riêng, nên đứng thành một dòng dưới bảng, không chen thành gói thứ tư. Bảng đầy đủ nằm ở trang học phí học SEO.

Hick's law cũng không bảo xóa bớt lựa chọn bằng mọi giá. NN/g ghi menu dài vẫn dễ dùng nếu được chia nhóm có nghĩa. Với bảng giá, lỗi hay gặp là năm sáu gói chỉ khác nhau một hai dòng nhỏ, buộc người đọc tự dò điểm khác. Định nghĩa và giới hạn của luật có ở bài Hick's Law.

Đếm số gói rồi hỏi: người đọc có nói được điểm khác của từng gói trong một câu không? Không nói được thì gộp bớt.

Von Restorff: Làm nổi một gói thế nào cho đúng?

Làm nổi đúng là chỉ cho một gói khác biệt rõ về màu nút, viền hoặc nhãn, và ghi lý do nổi bằng chữ. Hiệu ứng Von Restorff, còn gọi hiệu ứng cô lập, mô tả việc thứ khác biệt trong một nhóm giống nhau được chú ý và nhớ hơn. Mọi thứ cùng nổi thì không còn gì nổi.

Bốn điều kiện của một điểm nổi đạt

• Một điểm mỗi màn hình: một gói nổi, một nút chính. Hai nút cùng màu đậm cạnh nhau làm người đọc phải dừng lại so.
• Khác ở một thuộc tính: đổi màu nền nút hoặc thêm viền là đủ. Đổi cùng lúc màu, cỡ chữ, hiệu ứng động làm gói đó trông như quảng cáo.
• Lý do nổi bằng chữ: nhãn nói gói đó khác ở đâu, như làm trên website thật, để người đọc hiểu vì sao nó được làm nổi.
• Nhãn kiểm được: chỉ ghi phổ biến nhất khi số liệu bán cho thấy điều đó.

Hedwig von Restorff công bố hiệu ứng này năm 1933 khi nghiên cứu trí nhớ với danh sách các mục. Việc đem nó vào bảng giá là suy ra từ quy luật, cần đo lại trên trang của bạn. Định nghĩa đầy đủ có ở bài Von Restorff Effect.

Che màu đi và chỉ đọc nhãn. Người đọc vẫn biết gói nổi khác gì thì điểm nổi đó đạt.

Fitts's law: Nút CTA cần lớn và gần cỡ nào?

Nút CTA trên di động cần vùng chạm tối thiểu khoảng 48 x 48 pixel và cách nút khác khoảng 8 pixel, theo web.dev. Fitts's law giải thích lý do: thời gian chạm trúng một mục tiêu phụ thuộc kích thước và khoảng cách tới nó. Nút lớn hơn, gần ngón tay hơn thì bấm nhanh và ít trượt hơn.

Trang Accessible tap targets của web.dev ghi: "A minimum recommended touch target size is around 48 device independent pixels on a site with a properly set mobile viewport." Tài liệu Lighthouse tap targets ghi: "Tap targets that are 48 px by 48 px never fail the audit." Bản nháp gốc ghi 44px. Hai tài liệu của Google đều dùng mốc 48.

NN/g tóm tắt luật Fitts: "The movement time to a target depends on the size of the target and the distance to the target." (Fitts's Law and Its Applications in UX). Hai cách áp vào nút CTA: tăng vùng bấm bằng padding dù chữ nhỏ, và đặt nút chính ở chỗ ngón cái với tới dễ. Nút có cả chữ lẫn biểu tượng có vùng bấm lớn hơn nút chỉ có biểu tượng. Cách đo vùng chạm có ở bài tap target.

.nut-cta {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 20px;
}
.nut-cta + .nut-phu {
  margin-left: 8px;
}

Bật Lighthouse trên trang giá. Mục tap targets không đạt thì sửa nút trước khi bàn tới màu nút.

Miller: Chia thông tin trong gói thành khối ra sao?

Thông tin mỗi gói nên gom thành vài khối có tên, như học phí, thời lượng, đầu ra, hỗ trợ sau khóa, xếp cùng thứ tự ở mọi gói để người đọc so từng khối. Miller năm 1956 ghi trí nhớ ngắn hạn giữ khoảng 7 khối, cộng trừ 2. NN/g ghi các nhà nghiên cứu khác đề xuất con số từ ba tới sáu.

Bài How Chunking Helps Content Processing của NN/g ghi: "Other researchers have suggested that the right number could be anywhere from three to six." Bản nháp gốc ghi "Miller 3-5 mục". Đó không phải điều Miller viết. Tên bài gốc của Miller là The Magical Number Seven, Plus or Minus Two.

NN/g cũng cảnh báo việc hiểu sai con số 7: "there are no usability gains to be made by limiting the number of menu items to seven." Điều cần giữ là cách gom. Bài Short-Term Memory and Web Usability khuyên: "Make it easy to compare products, highlighting the salient differences". Bảng giá đạt khi người đọc so được khối đầu ra của gói này với khối đầu ra của gói kia mà không phải nhớ.

Cùng tên khối, cùng thứ tự, ở mọi gói. Người đọc so hàng ngang, không phải đọc lại từng gói.

Bằng chứng nên đặt ở đâu so với nút CTA của bạn?

Bằng chứng nên đặt ngay trên hoặc cạnh nút CTA, trong cùng khung nhìn, để người đọc thấy lý do tin đúng lúc định bấm. Bằng chứng phải kiểm được: tài liệu công bố, mã định danh, đầu ra cụ thể, đánh giá thật có tên. Con số không nguồn làm mất lòng tin nhanh hơn việc không đặt gì.

NN/g mô tả social proof: "People are guided by other people's behavior". Cùng bài Social Proof in the User Experience cảnh báo: "The most significant risk with using social proof is the perception that too few people approve of the piece of content, service, or product." Bằng chứng yếu đặt sát nút có thể làm hại.

Bản nháp gốc đặt dòng "Đã đồng hành gỡ nghẽn cho +50 website, đánh giá 5.0/5.0" cạnh nút. Không có dữ liệu nào đứng sau hai con số đó, nên dòng đó bị bỏ. Với đánh giá gắn dữ liệu cấu trúc, chính sách structured data của Google ghi: "Don't mark up irrelevant or misleading content, such as fake reviews". Cách chọn dấu hiệu tin cậy có ở bài trust signals.

Mỗi bằng chứng cạnh nút phải trả lời được câu hỏi: kiểm ở đâu? Không trả lời được thì gỡ xuống.

Form đăng ký nên giữ lại những trường nào?

Form đăng ký nên giữ lại những trường bạn thật sự dùng ở bước kế tiếp, thường là tên và một cách liên lạc. web.dev ghi: "Don't ask for data you don't need." NN/g khuyên bỏ trường lấy được bằng cách khác, hỏi sau được, hoặc bỏ hẳn được. Giữ ba trường là cách làm của tôi, không phải chuẩn.

Năm chi tiết kỹ thuật cho form theo web.dev

1. Một ô cho họ tên: web.dev khuyên hỏi tên bằng một ô, trừ khi có lý do rõ để tách.
2. Đúng kiểu ô: type="email" cho email, type="tel" cho số điện thoại, để bàn phím di động hiện đúng loại.
3. Có autocomplete: gắn giá trị như name, email, tel để trình duyệt điền sẵn, theo tài liệu autocomplete của MDN.
4. Nhãn thật cho mỗi ô: không dùng placeholder thay nhãn, vì chữ gợi ý biến mất khi người dùng bắt đầu gõ.
5. Khóa nút sau khi bấm: tránh gửi trùng khi người dùng bấm nhiều lần lúc mạng chậm.

<form method="post" action="/dang-ky">
  <label for="ten">Họ tên</label>
  <input id="ten" name="ten" autocomplete="name" required>
  <label for="sdt">Số điện thoại hoặc Zalo</label>
  <input id="sdt" name="sdt" type="tel" autocomplete="tel" required>
  <button type="submit">Đặt lịch học SEO</button>
</form>

Trang Payment and address form best practices ghi: "users are more likely to abandon forms that look long, that are complex, and without a sense of direction." Bài Website Forms Usability: Top 10 Recommendations của NN/g viết: "Every time you cut a field or question from a form, you increase its conversion rate". Đó là nhận định của NN/g, mức tăng trên form của bạn cần tự đo.

Đo bằng GA4: sự kiện khuyến nghị generate_lead được Google mô tả là "This event measures when a lead has been generated (for example, through a form)." theo danh sách sự kiện khuyến nghị. Thuộc tính autocomplete có đủ giá trị ở MDN.

Với mỗi trường, hỏi: bước kế tiếp có dùng nó không? Không dùng thì xóa trước khi bàn tới màu nút.

CTA dính đáy màn hình di động làm thế nào cho đúng?

CTA dính đáy đúng là một thanh thấp ở cuối màn hình, chứa một nút chính, không che nội dung và không bật lên che cả trang. Google khuyên dùng banner chiếm một phần nhỏ màn hình thay cho lớp phủ toàn trang. Thanh dính chiếm chỗ của nội dung, nên càng thấp càng tốt, miễn nút vẫn đủ vùng chạm.

Năm điều kiện cho thanh CTA dính đáy

1. Thấp: cao vừa một nút 48 px cộng khoảng đệm, không chiếm cả phần tư màn hình.
2. Một nút chính: thêm một lựa chọn phụ là tối đa, như gọi hoặc nhắn tin.
3. Chừa vùng an toàn: cộng safe-area-inset-bottom vào khoảng đệm để nút không bị thanh hệ thống của điện thoại che.
4. Không chồng lớp khác: không đè lên thanh cookie, nút chat hay banner khác ở cùng chỗ.
5. Hiện đúng lúc: hiện sau khi người đọc đã qua phần giá, không hiện ngay ở trang định nghĩa.

Trang Avoid intrusive interstitials and dialogs của Google khuyên "use banners that take up only a small fraction of the screen" và ghi "Don't obscure the entire page with interstitials." NN/g nhắc cùng ý cho thanh dính: "Sticky headers inherently take up space on the screen that could be used for content" (Sticky Headers: 5 Ways to Make Them Better).

Biến env(safe-area-inset-bottom) của CSS cho biết khoảng an toàn ở đáy màn hình. MDN có ví dụ chân trang dùng position: sticky cộng khoảng đệm theo biến này, để nút không bị che trên thiết bị có thanh hệ thống ở đáy.

.thanh-cta {
  position: sticky;
  bottom: 0;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
}

Thời điểm hiện thanh đi theo Bản đồ DLN: người đọc ở bậc Orient chưa cần nút đăng ký. Thanh dính hợp với trang ở bậc Rate và Act, khi người đọc đã xem giá và đang tìm chỗ bấm.

Cuộn trang giá trên điện thoại thật. Thanh dính che mất chữ ở bất kỳ đoạn nào thì thu thấp lại.

Nhãn nút CTA nên nói lợi ích hay hành động?

Nhãn nút CTA nên nói rõ điều xảy ra sau khi bấm, gồm hành động và thứ người đọc nhận được. web.dev khuyên mỗi nút gửi mang nhãn nói đúng việc nó làm và bước kế tiếp. NN/g ghi nút Get Started chung chung hút lượt bấm nhưng làm người dùng hiểu sai điều sẽ xảy ra.

Trang Payment and address form best practices của web.dev ghi: "Give each form submit button a value that says what it does." Ví dụ của họ: "label the submit button on your delivery address form Proceed to Payment rather than Continue".

Bài "Get Started" Stops Users của NN/g mở đầu: "A generic Get Started call-to-action attracts clicks, but also misleads users". Nhãn hứa một thứ mà trang đích đưa thứ khác làm người đọc mất lòng tin. Cách viết nhãn theo lợi ích có ở bài CTA copywriting.

Đọc riêng nhãn nút. Người đọc đoán đúng trang kế tiếp có gì thì nhãn đạt.

Dòng chữ nhỏ cạnh nút giảm rủi ro thế nào?

Dòng chữ nhỏ ngay dưới nút giảm rủi ro bằng cách trả lời nỗi lo cuối cùng trước khi bấm: mất bao nhiêu, có bị ràng buộc không, bước kế là gì. Nó chỉ có tác dụng khi nói đúng chính sách thật. Một lời hứa không giữ được đặt dưới nút sẽ làm mất lòng tin ngay ở bước quan trọng nhất.

Dòng chữ nhỏ không chứa lời hứa kết quả, như lên top trong 30 ngày, vì không ai giữ được lời đó. Nó cũng không đặt hạn chót giả. Chính sách khấu trừ ở trên ghi đúng như trang gốc: đăng ký Mentor sau đó được trừ đủ, trang không ghi hạn ngày nên dòng chữ nhỏ cũng không thêm hạn.

Đây là cách làm của tôi, không có tài liệu chính thức nào đặt luật cho dòng chữ nhỏ. Cách kiểm đơn giản: đọc dòng chữ nhỏ cho một người chưa biết sản phẩm, rồi hỏi họ còn lo điều gì trước khi bấm.

Dòng chữ nhỏ trả lời nỗi lo, không tạo nỗi lo mới. Chỉ ghi điều trang gốc ghi.

Hiệu ứng chim mồi dùng sao cho trung thực?

Hiệu ứng chim mồi chỉ trung thực khi mọi gói trong bảng là gói thật, có người cần thật và đầu ra riêng. Huber, Payne và Puto mô tả năm 1982: thêm một lựa chọn kém hơn hẳn một gói ở mọi mặt làm gói đó được chọn nhiều hơn. Dựng gói giả chỉ để đẩy khách sang gói đắt là ép khách.

Ví dụ minh họa với số để trống: gói A [giá] 6 buổi, gói B [giá] 12 buổi kèm làm trên website, gói C [giá gần B] 10 buổi không kèm website. Gói C kém gói B ở mọi mặt, nên gói B trông hời hơn. Nếu C là gói thật, có người cần đúng 10 buổi đó, bảng vẫn trung thực. Nếu C dựng ra để không ai mua, đó là thủ thuật ép.

Bản nháp gốc gợi ý dùng chim mồi để gói Mentor 15 triệu trông hời. Tôi không làm vậy: ba khóa trên danhnolan.com là ba sản phẩm thật, khác nhau ở hình thức học và đầu ra, và học phí từng khóa ghi đúng như trang của khóa. Người chọn khóa rẻ nhất vẫn nhận đủ 6 buổi như đã ghi.

Hỏi về từng gói: nếu có người chọn đúng gói này, họ có hài lòng không? Có thì bảng giá trung thực.

Chủ website hay hỏi gì về tâm lý UX trên bảng giá?

Chủ website hay hỏi bốn câu khi áp tâm lý UX lên bảng giá và CTA: có nên ẩn giá không, nút nên màu gì, làm sao biết thay đổi có hiệu quả, và dùng tâm lý có phải là thao túng người đọc không. Câu trả lời ngắn cho từng câu nằm ngay bên dưới.

Có nên ẩn giá để khách phải liên hệ không?

Tôi ghi giá công khai cho mọi khóa trên danhnolan.com. Người đọc ở bậc Rate cần con số để so, ẩn giá đẩy họ sang trang khác có giá. Dịch vụ báo giá theo phạm vi thì ghi giá khởi điểm, kèm yếu tố làm giá thay đổi. Đây là cách làm của tôi, không phải luật chính thức.

Nút CTA nên màu gì để tăng chuyển đổi?

Không có màu nào thắng ở mọi trang. Điều quyết định là nút khác biệt với phần còn lại của trang, theo hiệu ứng Von Restorff, và chữ trên nút đủ tương phản để đọc được. Chọn một màu cho mọi nút chính trên site, không dùng màu đó cho thứ khác. Đổi màu rồi đo lượt bấm trên chính trang của bạn.

Làm sao biết thay đổi bảng giá có hiệu quả?

Đo ba sự kiện trong GA4: xem bảng giá, bấm nút CTA, gửi form. Sự kiện gửi form nên dùng tên khuyến nghị generate_lead của Google. So tỷ lệ bấm trên lượt xem bảng giá trước và sau khi đổi, trong cùng độ dài thời gian. Mỗi lần chỉ đổi một thứ, để biết thứ nào tạo ra khác biệt.

Dùng tâm lý UX có phải là thao túng không?

Ranh giới nằm ở thông tin. Giúp người đọc quyết định nhanh hơn bằng thông tin thật, như ít gói, nút dễ bấm, chính sách rõ, là thiết kế tốt. Đẩy họ quyết định bằng thông tin giả, như gói dựng để không ai mua, hạn chót giả, đánh giá bịa, là thao túng.

Học thiết kế bảng giá và CTA chuyển đổi ở đâu?

Bạn học thiết kế bảng giá và CTA trên chính website của bạn trong Mentor SEO 1 kèm 1: 12 buổi trong 4 tuần, học phí 15.000.000đ, đầu ra có 01 trang chủ lực. Trước đó, bạn tự chấm trụ UX và chuyển đổi bằng chẩn đoán SQA-200™, công cụ miễn phí 15 câu.

Phần chuyển người đọc thành khách hàng tiềm năng nằm trong trụ Lead-Ready của khung tôi dùng. Khóa Học SEO Cơ Bản cho phần nền, Khóa học SEO Master học trọn khung. Sau Mentor còn 30 ngày rà bài, 3 buổi xem dữ liệu và 6 tháng hỏi đáp, đủ để bạn đo bảng giá mới trước và sau khi sửa.

Muốn bắt đầu, bạn vào trang Đăng ký học SEO hoặc nhắn Zalo 03 9999 5885 cho Danh Nolan. Muốn có bản phân tích trước thì đặt Phân tích SEO và GEO. Nền chung về SEO và CRO có ở bài riêng.

Tự chấm trụ UX và chuyển đổi trước. Biết trang giá đang hỏng ở đâu rồi mới chọn cách học.

Nguồn chính thức nào nói về vùng chạm, form và CTA?

Các dữ kiện về vùng chạm, form và nút bấm lấy từ web.dev, Chrome for Developers, Google Search Central và MDN, các nhận định UX lấy từ Nielsen Norman Group, đọc lại ngày 03/10/2026. Phần nào không có trong các nguồn đó đã được ghi là cách làm của Danh Nolan.

Mười bảy nguồn nên đọc trước khi sửa bảng giá

• web.dev: Accessible tap targets
• Chrome for Developers: Tap targets are not sized appropriately
• web.dev: Payment and address form best practices
• MDN: autocomplete HTML attribute
• MDN: env() CSS function
• Google Search Central: Avoid intrusive interstitials and dialogs
• Google Search Central: General structured data guidelines
• Google Analytics: Recommended events
• Nielsen Norman Group: Hick's Law: Designing Long Menu Lists
• Nielsen Norman Group: Simplicity Wins over Abundance of Choice
• Nielsen Norman Group: Fitts's Law and Its Applications in UX
• Nielsen Norman Group: How Chunking Helps Content Processing
• Nielsen Norman Group: Short-Term Memory and Web Usability
• Nielsen Norman Group: Website Forms Usability: Top 10 Recommendations
• Nielsen Norman Group: "Get Started" Stops Users
• Nielsen Norman Group: Social Proof in the User Experience
• Nielsen Norman Group: Sticky Headers: 5 Ways to Make Them Better

Nghiên cứu gốc được nhắc tên: Hick 1952, Fitts 1954, Miller 1956 trên Psychological Review, von Restorff 1933, Huber, Payne và Puto 1982 trên Journal of Consumer Research.

Quy luật UX ít đổi, tài liệu kỹ thuật đổi thường hơn. Đọc lại ngưỡng vùng chạm và form trước mỗi lần thiết kế lại trang giá.