Thiết kế web ưu đãi đặt giá, nhãn giảm, điều kiện và nút đặt hàng ở những chỗ khách thấy ngay, để khách hiểu đợt khuyến mãi và biết phải làm gì tiếp theo. Phong cách Ưu đãi rõ, dễ đặt hàng hợp với cửa hàng bán theo đợt, có nhiều mặt hàng và giá thay đổi theo thời gian.
Giao diện khuyến mãi dễ làm khách hào hứng, nhưng cũng dễ làm khách nghi ngờ. Vì vậy, hãy rà một đợt khuyến mãi từ lúc chuẩn bị đến sau khi kết thúc, rồi hỏi một câu ở mỗi chặng: khách có tự kiểm tra được điều trang đang nói không? Mẫu tham chiếu nằm trong thư viện giao diện Mạnh An AI.
Mẫu gốc nói gì về một đợt ưu đãi, và chưa nói gì?
Nhận xét sau dựa trên ảnh tĩnh, chưa phải đo hành vi mua thật. Ảnh cũng không cho biết giỏ hàng hay bản điện thoại hoạt động ra sao.
Phần làm rõ của mẫu khá nhiều. Ô “Khuyến mãi” màu cam đứng cuối thanh menu xanh. Banner có nút “Xem ưu đãi hôm nay”, ngay dưới là dải cam gom ba ưu đãi. Bốn thẻ sản phẩm có nhãn giảm đỏ, giá đỏ lớn, giá cũ gạch ngang và nút cam. Gần cuối trang, bốn bước mua hàng cho khách biết đường đi.
Những thông tin mẫu còn thiếu cũng cần được lưu ý. Dải cam ghi “Giảm đến 40%” nhưng nhãn cao nhất trên bốn thẻ là -32%, nên khách có thể tự hỏi mức 40% nằm ở món nào. “Khi mua combo” chưa nói combo gồm gì. Trang cũng không có ngày bắt đầu, ngày kết thúc. Đó là những việc cần bổ sung khi dùng thiết kế web ưu đãi cho một cửa hàng thật.
Trước đợt: chốt điều kiện, rồi mới thiết kế
Một đợt ưu đãi nên bắt đầu bằng ghi chú nội bộ, không phải bằng banner. Cần trả lời các câu hỏi dưới đây trước khi bắt đầu.
- Thời gian: đợt bắt đầu và kết thúc lúc nào, theo ngày cụ thể?
- Phạm vi: áp dụng cho món nào, nhóm nào, món nào không áp dụng?
- Mức giảm: tính trên giá nào, và giá đó khách từng mua được ở đâu, khi nào?
- Số lượng: có giới hạn không? Nếu có, ai cập nhật khi gần hết?
- Quà tặng, combo: mua gì thì được gì, hết quà thì xử lý thế nào?
- Sau mua: giao hàng, đổi trả, bảo hành của hàng khuyến mãi có khác hàng thường không?
Các câu trả lời này quyết định bố cục. Đợt có một điều kiện có thể chỉ cần một dòng dưới tiêu đề. Đợt có nhiều nhóm hàng nên có một dải riêng, hoặc một trang điều kiện liên kết từ banner. Trước khi đăng, bạn cũng nên hỏi người phụ trách pháp lý hoặc cơ quan quản lý địa phương về quy định khuyến mãi áp dụng cho mặt hàng của mình, vì bài này chỉ bàn về trình bày.
Mỹ phẩm theo đợt: đưa ngày và điều kiện lên đầu trang
Giao diện Lam Ngọc là tên giả định, được tạo riêng để minh họa, không phải dự án đã bàn giao. Banner chia đôi, chữ “Đợt ưu đãi mùa dịu nhẹ” bên trái, các lọ mỹ phẩm không nhãn hiệu trên bệ đá bên phải. Ngay dưới tiêu đề là dòng “Từ 10/11 đến 20/11. Áp dụng cho sản phẩm có nhãn”. Thanh nền màu san hô bên dưới ghi “Điều kiện đợt này”, thay cho lời kêu gọi chung ở mẫu gốc.
Bốn thẻ sản phẩm có nhãn -15% và -20%, giá, nút “Thêm vào giỏ”; dải hỗ trợ có cả mục “Xem hạn dùng”, chi tiết đáng giữ với hàng giảm giá. Với mỹ phẩm, nên mô tả cách dùng và đặc điểm sản phẩm, tránh khẳng định có tác dụng điều trị.
Đang chạy: mỗi con số phải trả lời được câu hỏi của khách
Khi đợt đã mở, phần lớn việc của thiết kế web ưu đãi là giữ cho lời trên banner khớp với thẻ sản phẩm và trang đặt hàng. Hãy rà theo thứ tự khách đi: banner, thẻ, giỏ.
Ở banner, tránh mức “giảm đến” khi món đạt mức đó khó tìm. Ở thẻ, tính lại nhãn từ hai mức giá. Nhãn lệch giá rất dễ lọt khi nhiều người cùng nhập liệu. Trong giỏ hàng, giá cần khớp với giá trên thẻ sản phẩm, còn phí giao hàng nên hiển thị trước khi khách xác nhận đơn.
Về màu, WCAG 1.4.1 nói màu không nên là cách duy nhất để truyền thông tin. Món đang giảm vì vậy cần nhãn có chữ, không chỉ thẻ đổi màu.
Cảnh báo 1: đồng hồ đếm ngược giả
Đồng hồ giả thường có một dấu hiệu dễ thử: tải lại trang hoặc quay lại hôm sau, thời gian lại chạy từ đầu. Người mua phát hiện điều đó có thể không còn tin các thông tin khác trên trang, kể cả thông tin đúng.
Chỉ nên có đồng hồ khi đợt thật sự kết thúc vào một thời điểm cố định, cùng một mốc cho mọi khách, và trang thật sự đổi giá khi hết giờ. Nếu không chắc làm được cả ba, hãy ghi ngày kết thúc bằng chữ. Câu “sắp hết hàng” cũng cần cùng một phép thử: có ai đang cập nhật con số đó không?
Cảnh báo 2: giá gốc thổi cao
Giá gạch ngang chỉ có nghĩa khi khách đã thật sự mua được ở mức đó. Nâng giá ngay trước đợt để nhãn giảm trông lớn hơn là cách tự tạo rủi ro, vì khách có thể so với lần mua trước.
- Lưu lịch sử giá bán thực tế và thời gian áp dụng để có căn cứ cho giá gạch ngang.
- Sản phẩm mới chưa từng bán thì không nên có giá gạch ngang, có thể ghi “giá mở bán”.
- Nếu không chứng minh được giá cũ, chỉ hiện giá hiện tại và điều kiện.
Nội thất thanh lý: nói thẳng tình trạng hàng
Giao diện Nhà Gỗ An là tên giả định, được tạo để minh họa cách mở đầu khác. Một khối xanh rừng giữ tiêu đề “Thanh lý hàng trưng bày” bên trái, ảnh phòng trưng bày gỗ ấm chiếm phần còn lại, nút vàng “Xem hàng còn lại” đi kèm nút viền “Cách kiểm tra hàng”.
Khu “Hàng thanh lý” có một thẻ lớn và bốn thẻ nhỏ. Điều đáng học là nhãn phụ: “Hàng trưng bày”, “Trầy nhẹ ở chân”, “Còn 1 món”, kèm nút “Hỏi món này” thay vì mua ngay. Với hàng cồng kềnh, khách thường cần hỏi trước khi quyết định. Khi làm thật, “Còn 1 món” phải được cập nhật ngay khi món đã bán.
Sau đợt: trang không nên giả vờ là đợt vẫn còn
Đây là chặng của thiết kế web ưu đãi hay bị bỏ quên nhất. Banner cũ còn nguyên sau ngày kết thúc khiến khách không biết nên tin ngày hay tin giá. Khi đợt khép lại, bạn có thể làm lần lượt:
- Gỡ banner, dải ưu đãi, nhãn giảm và trở về giá thường đúng thời điểm đã ghi.
- Giữ trang đợt ở trạng thái “đã kết thúc” kèm liên kết sang hàng đang bán, vì khách có thể mở lại từ tin nhắn cũ.
- Giữ lại điều kiện đợt, để đơn đã đặt còn đối chiếu được khi đổi trả hoặc bảo hành.
- Ghi lại điều khách hỏi nhiều nhất, để đưa vào điều kiện của đợt sau.
Cũng nên tránh nối đợt này sang đợt khác liên tục với cùng một mức giảm. Khi đó, “giá đợt” thực chất đã là giá thường, và giá gạch ngang mất căn cứ.
Sách giảm giá: chia theo nhóm cho dễ nhớ
Giao diện Trang Mới là tên giả định, được tạo để minh họa kiểu mở đầu thứ ba: ghép nhiều ô thay cho một ảnh lớn. Ô xanh đậm giữ tiêu đề “Tủ sách giảm giá tháng này”, ô ảnh có sách và đèn đọc, cùng hai ô nhỏ “Văn học giảm 20%” và “Thiếu nhi giảm 20%”. Bên dưới là dải ngày “Từ 01/11 đến 30/11”, năm bìa sách tự vẽ, ô theo lứa tuổi, khối “Combo đọc cùng con” và ba bước mua.
Cách này hợp với hàng rẻ, nhiều đầu mục, vì khách nhớ một quy tắc theo nhóm thay vì từng mức giá. Ngày, tên sách và giá trong ảnh đều giả định. Năm thẻ cùng một giá trông gọn, còn cửa hàng thật sẽ có nhiều mức giá, nên cần thử lại với dữ liệu thật.
Danh sách rà soát trước khi đăng đợt ưu đãi
Mở trang bằng điện thoại, kiểm tra quy trình đặt hàng đến bước cuối rồi đánh dấu từng dòng. Thiếu dòng nào, nên hoãn đăng để bổ sung dòng đó.
- Ngày bắt đầu và kết thúc giống nhau ở banner, trang đợt và tin nhắn quảng bá.
- Mức “giảm đến” có món thật đạt mức đó, và khách tìm được món ấy.
- Nhãn phần trăm khớp với hai mức giá trên từng thẻ.
- Giá gạch ngang có căn cứ đã lưu lại.
- Đồng hồ và câu “sắp hết” phản ánh dữ liệu thật, hoặc không có.
- Điều kiện đọc được mà không cần phóng to, không nằm trong ảnh.
- Giá trên thẻ khớp với giá trong giỏ; phí giao hàng hiện trước bước cuối.
- Trên điện thoại, thứ tự là ưu đãi, điều kiện, sản phẩm, rồi lời mời tư vấn ở chỗ thuận tiện.
- Nút chính dễ nhận ra, tương phản đủ mức 3:1 theo WCAG 1.4.11.
- Đã có người nhận việc gỡ ưu đãi vào đúng ngày kết thúc.
12 ngành khác, chia theo kiểu đợt
Ngoài ba ví dụ trên, dưới đây là 12 ngành có thể áp dụng thiết kế web ưu đãi. Mỗi kiểu đợt cần một thông tin khác nhau.
Đợt định kỳ, khách quay lại nhiều lần: cần lịch rõ để khách biết lần sau.
- Siêu thị điện máy: nói rõ giá đã gồm lắp đặt hay chưa.
- Tạp hóa, thực phẩm đóng gói: ghi hạn dùng của hàng đang giảm.
- Đồ chơi trẻ em: kèm độ tuổi phù hợp ngay trên thẻ.
Đợt xả hàng, số lượng giới hạn: cần tồn kho thật và tình trạng hàng.
- Thời trang: hiện cỡ còn lại trước khi khách bấm vào.
- Giày dép: nói rõ quy định đổi cỡ của hàng xả.
- Thiết bị văn phòng cũ: ghi tình trạng và thời hạn bảo hành của từng món.
Đợt theo mùa, có ngày chốt tự nhiên: cần hạn đặt để kịp nhận hàng.
- Quà Tết: ghi ngày cuối đặt theo khu vực giao.
- Hoa tươi: nói rõ mẫu có thể thay đổi theo mùa hoa.
- Đồ dùng học tập: gom sẵn bộ theo cấp học.
Đợt theo mốc, đặt trước hoặc mở bán: cần các bước và cách đặt cọc rõ.
- Đồ gia dụng: so sánh các gói combo bằng danh sách món trong từng gói.
- Vé sự kiện: nêu số đợt mở bán và quy định hoàn vé.
- Khóa học trực tuyến: ghi ngày khai giảng và điều kiện hoàn học phí.
Khi nào thiết kế web ưu đãi không phù hợp?
Hãy thận trọng nếu doanh nghiệp không bán theo đợt. Một phòng khám hay văn phòng tư vấn dùng nhãn giảm và nút cam có thể tạo cảm giác thúc ép với dịch vụ cần cân nhắc; lúc đó giao diện đơn giản, dễ tìm thông tin thường phù hợp hơn, vì ưu tiên giúp khách tìm thông tin thay vì thúc mua.
Nếu bạn chỉ có vài sản phẩm và một thông điệp ngắn, nhiều dải ưu đãi là thừa. Phong cách tương phản mạnh mẽ dựa vào một câu lớn và một nút, nên gọn hơn nhiều. Còn khi thương hiệu hướng đến khách trẻ và muốn tạo thiện cảm trước khi nói giá, hướng tươi sáng, trẻ trung dùng màu để tạo cảm xúc, không phải để chỉ vào giá.
Một trường hợp nữa: nếu chưa có ai cập nhật giá và tồn kho hằng ngày, kiểu giao diện này có thể sớm sai dữ liệu. Nên chờ đến khi có người phụ trách, hoặc bắt đầu với số ít sản phẩm.
Câu hỏi thường gặp về thiết kế web ưu đãi
Có nên luôn hiện giá gạch ngang không?
Không. Chỉ nên hiện khi đó là mức giá khách thật sự đã mua được trước đợt và bạn còn lưu căn cứ. Không có căn cứ thì chỉ cần giá hiện tại và điều kiện.
Điều kiện ưu đãi nên đặt ở đâu trên trang?
Điều kiện chính nên nằm gần tiêu đề hoặc ở dải ngay dưới banner, bằng chữ thật. Chi tiết dài có thể để ở một trang riêng và liên kết tới bằng nhãn rõ nghĩa, như “Xem điều kiện đợt này”.
Người không biết kỹ thuật có tự cập nhật đợt ưu đãi trên WordPress được không?
Thường là được nếu website được dựng với các ô nhập ngày, nhãn và giá riêng. Nên thống nhất trước ai cập nhật và cập nhật khi nào.
Việc nên làm trước khi đặt lịch thiết kế
Hãy chọn một đợt sắp tới của bạn và viết ra sáu câu trả lời ở phần “Trước đợt”. Nếu trả lời trọn vẹn được, thiết kế web ưu đãi có thể là hướng phù hợp. Nếu chưa, việc đầu tiên là chốt chính sách, chưa phải chọn giao diện.
Sau đó, bạn có thể xem các bước Mạnh An AI thiết kế và bàn giao website và bảng giá thiết kế website AI để chọn phạm vi. Mạnh An AI phục vụ khách hàng trên toàn quốc; bạn có thể gửi danh sách điều kiện của đợt để trao đổi trước khi bắt đầu.
Thông tin đơn vị
Đơn vị: Công Ty TNHH Mạnh An Service
Dịch vụ: Mạnh An AI – Thiết kế website
Phạm vi phục vụ: Khách hàng trên toàn quốc
Địa chỉ văn phòng: Thanh Dương 2, Phường Đông Tiến, Thanh Hóa
Điện thoại: 083.5431.678
Email: info@manhan.vn
