# Phong Cách Thiết Kế Web Chọn nhu cầu trước khi xem. Nguồn: https://manhan.ai.vn/thiet-ke-web-chon-nhu-cau/ Ngày đăng: 2026-11-06 Chuyên mục: Phong cách thiết kế website **Thiết kế web chọn nhu cầu** đặt vài lựa chọn lớn ở đầu trang để khách chọn đúng hướng rồi mới xem nội dung. Phong cách **Chọn nhu cầu trước khi xem** hợp với doanh nghiệp phục vụ nhiều nhóm khách có yêu cầu khác nhau. Cách kiểm tra đơn giản nhất là đóng vai từng người khách và bấm thử. Dưới đây là ba người giả định trên ba trang khác nhau. Mẫu tham chiếu có trong [thư viện giao diện Mạnh An AI](https://manhan.ai.vn/#giao-dien). **Biên soạn:** Ban biên tập Mạnh An AI, dịch vụ thiết kế website của Công Ty TNHH Mạnh An Service, phục vụ khách hàng trên toàn quốc. **Cập nhật:** 06/11/2026. [![Mẫu website lọc nước với ba ô chọn loại không gian](https://manhan.ai.vn/wp-content/uploads/2026/10/phong-cach-thiet-ke-website-chon-nhu-cau-truoc-khi-xem.webp)](https://manhan.ai.vn/wp-content/uploads/2026/10/phong-cach-thiet-ke-website-chon-nhu-cau-truoc-khi-xem.webp) Mẫu minh họa thương hiệu Nguồn Sạch. Tên, địa danh, lời giới thiệu, mã QR và số điện thoại trong ảnh đều là nội dung minh họa. ## Mẫu Nguồn Sạch hỏi khách điều gì đầu tiên? Mẫu Nguồn Sạch mở đầu bằng câu hỏi lớn “Bạn cần giải pháp cho không gian nào?”, thay cho khẩu hiệu thương hiệu. Bên dưới là ba ô ảnh Nhà ở, Nhà hàng, Nhà xưởng. Ô Nhà ở có viền xanh ngọc và dấu kiểm. Ngay dưới là khối “Giải pháp lọc nước tổng cho Nhà ở”, kèm ảnh thiết bị có chú thích từng bộ phận. Các lời về sức khỏe và địa danh dự án trong ảnh chỉ là minh họa. Ảnh tĩnh cũng không cho biết các khối sau có đổi theo lựa chọn hay không. ## Người khách thứ nhất biết rõ mình thuộc nhóm nào Khách biết rõ nhóm của mình chỉ cần thấy đúng tên nhóm rồi bấm. Hãy thử xem ô lựa chọn có dùng đúng từ của họ không. Sau đó xem nội dung sau khi bấm có khớp với tên ô không. ### Chị chủ tiệm tạp hóa mở dịch vụ ngân hàng số [![Thiết kế web chọn nhu cầu cho dịch vụ ngân hàng số giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-chon-nhu-cau-ngan-hang-so-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-chon-nhu-cau-ngan-hang-so-chi-tiet.webp) Giao diện minh họa dịch vụ giả định Ví Nhà: câu hỏi lớn, bốn ô lựa chọn, ô Hộ kinh doanh đang chọn và khối nội dung tương ứng. Không phải ngân hàng có thật. Giả sử một chị chủ tiệm tạp hóa vào trang Ví Nhà. Câu hỏi “Bạn dùng tài khoản để làm gì?” đi cùng bốn ô Cá nhân, Hộ kinh doanh, Doanh nghiệp nhỏ, Du học sinh. Chị bấm Hộ kinh doanh, vì đó đúng là từ chị vẫn dùng. Khối bên dưới đổi thành “Tài khoản cho hộ kinh doanh”. Khối này gồm nhận tiền bán hàng, sổ thu chi, mã nhận tiền, xuất sao kê. Đây là các việc của một tiệm nhỏ, nên chị biết mình đi đúng đường. Với lĩnh vực tài chính, thông tin thật phải do đơn vị được phép cung cấp xác nhận. ## Người khách thứ hai chọn giúp người khác Khách chọn giúp người khác thường không tự thấy mình trong các ô, nên tên ô phải đủ rõ từ góc nhìn của họ. Ô đặt theo người học dễ hiểu hơn ô đặt theo tên chương trình. ### Một người mẹ tìm lớp, rồi đổi ý học cho mình [![Trang trung tâm tiếng Anh giả định cho chọn theo người học](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-chon-nhu-cau-trung-tam-tieng-anh-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-chon-nhu-cau-trung-tam-tieng-anh-chi-tiet.webp) Giao diện minh họa trung tâm giả định Cầu Tiếng: câu hỏi Ai sẽ học tiếng Anh, ba thẻ người học, khối Lớp cho người đi làm, bảng ngày trong tuần và bốn bước. Không phải trung tâm có thật. Ở trang Cầu Tiếng, câu hỏi là “Ai sẽ học tiếng Anh?”, với ba thẻ Trẻ em, Học sinh, Người đi làm. Một người mẹ đi tìm lớp cho con có thể lướt qua cả ba rất nhanh. Tiếp đó chị bấm thẻ Người đi làm vì nhớ ra mình cũng cần học. Mũi tên từ thẻ này chỉ xuống khối “Lớp cho người đi làm”, giúp chị nhận ra nội dung tương ứng với lựa chọn. Có một điểm nên sửa: bảng lịch chỉ ghi tên các ngày, chưa cho biết lớp diễn ra khi nào. Trang thật phải có giờ học thật. ## Người khách thứ ba không thuộc lựa chọn nào Người khách này là phép thử quan trọng nhất của kiểu trang rẽ nhánh. Nếu không có lối thoát, họ sẽ rời đi dù doanh nghiệp vẫn phục vụ được. Vì vậy, hãy kiểm tra xem trang có lối liên hệ cho người không thấy lựa chọn phù hợp hay không. ### Một người có căn gác cần dọn và không thấy ô nào đúng [![Trang dịch vụ vệ sinh giả định với bốn ô chọn nơi cần làm](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-chon-nhu-cau-dich-vu-ve-sinh-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-chon-nhu-cau-dich-vu-ve-sinh-chi-tiet.webp) Giao diện minh họa dịch vụ giả định Sáng Nhà: bốn ô chọn nơi, dải cho nơi khác, khối Vệ sinh văn phòng, dụng cụ và bốn bước. Không phải doanh nghiệp có thật. Trang Sáng Nhà có bốn ô Căn hộ, Văn phòng, Cửa hàng, Sau xây dựng. Người có căn gác cần dọn không thấy ô nào đúng. Ngay dưới là dải “Nơi khác? Gửi ảnh qua số 0987.654.321”, và đó là lối thoát của họ. Mẫu Nguồn Sạch không có dải tương tự. Vì thế, khách cần lọc nước cho văn phòng có thể không biết nên chọn ô nào. Ví Nhà và Cầu Tiếng cũng có dòng phụ cho trường hợp này, chỉ khác cách viết. ## Sau khi thử ba người, nên sửa những gì? Ba lần thử một trang thiết kế web chọn nhu cầu cho thấy tên ô có gần cách khách tự gọi mình không. Dùng bảng này để rà soát các lựa chọn trước khi làm trang thật. | Điểm cần soát | Nên làm | Nên tránh | | --- | --- | --- | | Số lựa chọn | Ít, nhìn một lần là đọc hết | Một hàng dài phải cuộn ngang | | Tên ô | Từ khách hay dùng | Tên gói nội bộ | | Trạng thái đang chọn | Viền đậm và dấu kiểm | Chỉ đổi màu nhạt | | Nội dung sau khi chọn | Đổi thật và nhắc lại tên nhóm | Giống nhau ở mọi ô | | Trường hợp còn lại | Có một lối hỏi trực tiếp | Không có lối nào | Trạng thái đang chọn không nên chỉ dựa vào màu. Tiêu chí [không dùng màu làm dấu hiệu duy nhất của WCAG](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) nói rõ điều này, nên hãy thêm dấu kiểm. Ô lựa chọn cũng nên là nút hoặc liên kết thật, bấm được bằng bàn phím. ## Nội dung sau lựa chọn có bị ẩn với công cụ tìm kiếm không? Có thể, nếu nội dung chỉ được tải sau khi bấm. Có thể tạo trang riêng cho từng nhóm hoặc đặt nội dung sẵn trong HTML. Sau đó, hãy kiểm tra cách công cụ tìm kiếm đọc trang. Trang riêng còn có lợi khác: khách gửi được đúng đường dẫn cho người nhà, và mỗi nhóm có tiêu đề, mô tả riêng khi được tìm thấy. Nếu dùng chung một trang, hãy kiểm tra trình bày khi JavaScript chưa chạy xong. Ô đầu tiên nên được mở sẵn, để trang không trống ở lần tải đầu. ## Trên điện thoại và khi nào không nên dùng? Trên điện thoại, các ô nên xếp thành một hoặc hai cột, ảnh thấp lại để người đọc thấy đủ lựa chọn. Sau khi chọn, trang cuộn tới đúng khối vừa đổi, vì khách có thể không thấy nó đổi ở phía dưới. Đừng dùng kiểu này khi khách chỉ thuộc một nhóm, vì bước chọn trở thành một cửa thừa. Khi muốn dồn sự chú ý vào một lời mời, [bố cục căn giữa tập trung](https://manhan.ai.vn/thiet-ke-web-can-giua-tap-trung/) sẽ thẳng hơn. Nếu trọng tâm là cảm giác dễ chạm, hãy xem [phong cách bo tròn thân thiện](https://manhan.ai.vn/thiet-ke-web-bo-tron-than-thien/). Khi chỉ cần giúp khách tìm thông tin, [giao diện đơn giản, dễ tìm](https://manhan.ai.vn/thiet-ke-web-don-gian-de-tim-thong-tin/) nhẹ hơn. ## 12 ngành khác nên hỏi khách câu gì? Thiết kế web chọn nhu cầu hợp với 12 ngành khác dưới đây. Ở các ngành này, một câu hỏi đầu trang có thể chia khách thành vài nhóm rõ ràng. - **Nha khoa:** Bạn đang gặp vấn đề gì về răng? - **Bảo hiểm:** Bạn muốn bảo vệ điều gì? - **Thiết bị lọc nước:** Bạn lắp ở đâu? - **Nội thất:** Bạn đang làm phòng nào? - **Du lịch:** Bạn đi cùng ai? - **Kế toán:** Doanh nghiệp của bạn thuộc loại nào? - **Phần mềm:** Bạn làm ở bộ phận nào? - **Vận chuyển:** Bạn cần gửi loại hàng gì? - **Trường dạy nghề:** Bạn muốn làm nghề gì? - **Sửa chữa điện lạnh:** Thiết bị nào đang lỗi? - **Tổ chức sự kiện:** Bạn chuẩn bị dịp gì? - **Thú y:** Thú cưng của bạn là loài gì? ## Câu hỏi thường gặp về thiết kế web chọn nhu cầu Dưới đây là ba câu hỏi nên cân nhắc khi phục vụ nhiều nhóm khách. **Nên có bao nhiêu lựa chọn ở đầu trang?** Không có con số bắt buộc. Các ảnh mẫu dùng ba hoặc bốn ô. Nếu khách phải đọc lâu mới chọn được, hãy gộp các nhóm gần nhau. **Khách chọn nhầm thì sao?** Hãy giữ các lựa chọn luôn nhìn thấy hoặc có đường quay lại rõ ràng. Khách đổi ý chỉ cần một lần bấm, không phải tải lại từ đầu. **Có nên ghi nhớ lựa chọn cho lần ghé sau không?** Có thể, nếu khách dễ thay đổi được. Hãy hiện rõ nhóm đang chọn, vì người dùng chung máy có thể cần một nhóm khác. ## Thử với ba người khách của bạn từ đâu? Hãy viết tên ba khách gần đây vào giấy, rồi tự hỏi mỗi người sẽ bấm ô nào. Người nào phân vân chính là chỗ cần sửa tên ô hoặc thêm lối hỏi trực tiếp. Sau đó, bạn có thể xem [cách Mạnh An AI làm website từng bước](https://manhan.ai.vn/quy-trinh-thiet-ke-website/) và [bảng giá các gói thiết kế](https://manhan.ai.vn/bao-gia-thiet-ke-website/). Mạnh An AI phục vụ khách hàng trên toàn quốc; bạn có thể [gửi các nhóm khách để trao đổi](https://manhan.ai.vn/lien-he-thiet-ke-website/). ### 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](tel:0835431678) **Email:** [info@manhan.vn](mailto:info@manhan.vn)