Thiết kế web đơn giản theo Phong cách Đơn giản, dễ tìm thông tin đưa dịch vụ, giá, cách đặt và liên hệ lên những chỗ khách nhìn thấy trước. Hướng này hợp với dịch vụ gia đình và doanh nghiệp nhỏ, khi khách đã biết dịch vụ mình cần và muốn xem giá hoặc liên hệ.
Ảnh mẫu trong thư viện phong cách của Mạnh An AI gợi ra câu hỏi khó nhất: khi nào nên ghi giá lên trang, khi nào không.
Thiết kế web đơn giản giúp khách tìm thấy gì, nhanh đến đâu?
Ảnh mẫu cho thấy các vị trí có thể giúp khách tìm câu trả lời; cần kiểm tra website thật để biết họ phải thao tác bao nhiêu lần. Ảnh mẫu là trang chủ của một đơn vị điện lạnh giả định, và bốn câu hỏi cơ bản đều có sẵn lối đi từ đầu trang.
| Có làm đúng việc tôi cần không? | Tiêu đề banner nêu ngành. Bốn thẻ “Bạn cần hỗ trợ gì?” bắt đầu ở khoảng một phần tư trang. |
|---|---|
| Giá bao nhiêu? | Ba lối: mục “Bảng giá” trên menu, nút viền trong banner và khối bảng giá ở khoảng 40% chiều cao trang. |
| Đặt thế nào? | Nút “Yêu cầu hỗ trợ” nằm cạnh bảng giá. Quy trình bốn bước đánh số ở khoảng ba phần tư trang. |
| Liên hệ ở đâu? | Bốn chỗ: ô đường dây nóng trên đầu trang, nút gọi trong banner, dải liên hệ gần cuối trang và chân trang. |
Theo nhận định của ban biên tập, thiết kế web đơn giản không có nghĩa là ít nội dung. Ảnh mẫu thực ra khá dày khối. Cái đơn giản nằm ở đường đi: các khối được chia để khách dễ tìm dịch vụ, giá và cách liên hệ.
Đọc ảnh mẫu theo từng khối
Đầu trang: menu nói bằng câu hỏi của khách
Logo bên trái, ô đường dây nóng viền cam bên phải. Menu có “Bảng giá”, “Khu vực phục vụ”, “Hỏi đáp”, không có “Giới thiệu” hay “Dự án”.
Trước khi đặt tên menu, hãy liệt kê những câu khách hay hỏi qua điện thoại. Câu nào lặp lại nhiều thì nên thành một mục.
Banner: một câu hỏi, một lời đáp, hai nút
Tiêu đề không chân rất đậm, căn trái, hai dòng hai màu. Dưới đó là dòng phụ, ba dấu tích, rồi nút cam “Gọi tư vấn” cạnh nút viền “Xem bảng giá”. Ảnh thợ đang sửa máy chiếm nửa phải.
Hai nút tạo hai lựa chọn: gọi tư vấn hoặc xem bảng giá. Người đang gặp sự cố sẽ gọi ngay, còn người đang so sánh muốn xem giá trước.
Bảng giá: khối quyết định của cả trang
Bảng thật gồm ba cột dịch vụ, đơn vị tính, giá tham khảo; giá ghi theo khoảng. Bên phải là ba dấu tích và một nút cam lớn, ngoài cùng là đánh giá của khách.
Vị trí này gom giá, hành động và lý do tin vào một hàng ngang, nên khách xem xong bấm được luôn. Dòng ghi chú về giá lại quá nhỏ, trong khi điều kiện làm giá thay đổi chính là điều khách cần đọc.
Các bước, câu hỏi và dải liên hệ
Bốn bước đánh số nằm cạnh năm dòng câu hỏi đóng mở có dấu cộng. Sau đó là dải nền xanh nhạt với nút gọi lớn và nút chat, rồi chân trang xanh than.
Đặt câu hỏi cạnh các bước là cách gọn để gỡ lo lắng ngay trước lúc liên hệ. Đường đi từ tìm dịch vụ, xem giá đến gửi yêu cầu nên ngắn, mỗi bước chỉ cần một câu dễ hiểu.
Chỗ ảnh mẫu chưa thật đơn giản
“Bạn cần hỗ trợ gì?” và “Dịch vụ nổi bật” đều là bốn thẻ ảnh về những dịch vụ gần giống nhau. Nếu ít dịch vụ, bạn nên nhập hai khối này để kéo bảng giá lên cao hơn.
Có nên công khai giá trên website?
Nên công khai khi giá đủ ổn định để ghi theo đơn vị hoặc theo khoảng. Thiết kế web đơn giản dựa nhiều vào bảng giá, nên hãy trả lời câu này trước khi chọn giao diện. Những trường hợp sau không phù hợp để ghi giá như ảnh mẫu:
- Giá phụ thuộc khảo sát: thi công nội thất hay cải tạo nhà khó có con số đúng cho mọi công trình.
- Giá đổi theo ngày: hàng theo tỷ giá hoặc nguyên liệu biến động cần người cập nhật thường xuyên.
- Báo giá theo hợp đồng: dịch vụ cho doanh nghiệp thường tính theo khối lượng và điều khoản, nên một con số chung dễ thiếu chính xác.
- Ngành có quy định riêng: y tế, dược, tài chính nên kiểm tra quy định quảng cáo của ngành trước khi đưa giá hay ưu đãi lên trang.
- Sản phẩm bán bằng cảm nhận: khách cần thấy thành phẩm trước khi nghĩ đến giá, nên Phong cách Hiện đại, nhiều hình ảnh sẽ dẫn dắt tốt hơn.
Khi chưa ghi được con số, hãy công khai đơn vị, các yếu tố làm giá thay đổi và mức khởi điểm kèm điều kiện. Nếu cách tính cũng không nói ra được, bạn nên chọn phong cách khác thay vì tập trung vào bảng giá.
Sau khi khách đã tìm thấy thông tin, phong cách xanh trắng tin cậy có thể giúp họ yên tâm hơn trước khi gọi.
Nếu chỉ cần khách đọc vài ý chính theo một thứ tự, hãy xem thiết kế web tối giản với cách bỏ và giữ theo từng khối.
Khi trang đã dễ tìm mà khách vẫn chưa nắm ý chính, phong cách tiêu đề lớn, thông điệp rõ có thể là bước tiếp theo.
Muốn đi từ câu hỏi của khách thay vì từ dịch vụ, bạn có thể tham khảo thiết kế web cô đọng.
Nếu khách cần tìm một món trong rất nhiều món, phong cách danh mục ngăn nắp sẽ sát nhu cầu hơn.
Phong cách này không phù hợp khi nào?
Nên cân nhắc hướng khác khi khách cần xem hồ sơ năng lực, dự án dài hạn hoặc danh mục sản phẩm có nhiều bộ lọc. Một trang tập trung vào giá và nút gọi sẽ chưa trả lời đủ những nhu cầu đó.
- Thương hiệu cần kể câu chuyện và tạo cảm xúc: nên dành thêm diện tích cho hình ảnh, chất liệu và câu chuyện thay vì đặt bảng giá làm trọng tâm.
- Doanh nghiệp bán giải pháp phức tạp: cần giải thích bài toán, phạm vi công việc và ví dụ ứng dụng trước khi mời liên hệ.
- Cửa hàng có nhiều biến thể sản phẩm: nên ưu tiên tìm kiếm, bộ lọc và trang chi tiết thay cho một trang dịch vụ gọn.
Vì sao chọn phong cách này thay vì ba phong cách gần giống?
Câu trả lời nằm ở điều khách muốn biết đầu tiên khi vào trang. Nếu đó là giá và cách gọi, thiết kế web đơn giản theo hướng này là lựa chọn hợp lý. Ảnh mẫu của Phong cách Lưới thẻ gọn gàng, Phong cách Trắng thoáng, tinh gọn và Phong cách Chuyên nghiệp, rõ ràng trả lời những câu hỏi khác:
| Đơn giản, dễ tìm thông tin | Khách hỏi “giá bao nhiêu, gọi ai?”. Tiêu đề không chân rất đậm, hai nút trong banner, bảng giá ba cột, không có khối dự án. |
|---|---|
| Lưới thẻ gọn gàng | Khách hỏi “có những gì để chọn?”. Banner ghép với bốn ô ảnh, giá “từ” nằm trên từng thẻ, thêm năm thẻ dự án, một nút chính. |
| Trắng thoáng, tinh gọn | Khách hỏi “thương hiệu này có đáng tìm hiểu không?”. Tiêu đề có chân, một nút đỏ dạng viên thuốc, ảnh sản phẩm lớn, không có bảng giá. |
| Chuyên nghiệp, rõ ràng | Khách hỏi “có đủ năng lực không?”. Ảnh nhà xưởng toàn khổ tông tối, một nút báo giá, hàng số liệu, các khối dự án và sản phẩm. |
So với Lưới thẻ gọn gàng, điểm khác không nằm ở việc có thẻ hay không, vì ảnh mẫu của bài này cũng có thẻ ảnh. Khác biệt là giá được gom vào một bảng để so theo hàng, thay vì rải trên từng thẻ. Nếu rất nhiều hạng mục đều cần ảnh, lưới thẻ sẽ dễ duyệt hơn.
Giao diện trắng thoáng thì ngược lại về mật độ: khoảng trắng rộng, ảnh lớn, tạo ấn tượng về thương hiệu. Tuy nhiên, người đang cần gọi thợ gấp sẽ không có sẵn bảng giá để xem.
Với phong cách chuyên nghiệp, rõ ràng, trang chứng minh năng lực bằng số liệu và công trình, hợp với khách doanh nghiệp đang đánh giá đối tác. Thiết kế web đơn giản bỏ phần đó để nhường chỗ cho giá, các bước và câu hỏi.
Ngành nào hợp với website dễ tìm thông tin?
Thiết kế web đơn giản hợp với những ngành mà khách đã biết việc cần làm. Mỗi ngành cần đẩy một khối khác lên trước, nên đừng giữ nguyên thứ tự của ảnh mẫu.
- Điện lạnh: ngành trong ảnh mẫu; khách hay gọi lúc máy hỏng, nên số điện thoại và giá theo loại máy đứng đầu.
- Sửa điện nước: việc nhỏ và gấp; bảng giá chia theo hạng mục, nói rõ phí đi lại nếu có.
- Rửa xe, bảo dưỡng ô tô: giá đổi theo cỡ xe, nên cột loại xe trả lời được ngay.
- Chuyển nhà: giá theo quãng đường và khối lượng; thay bảng cố định bằng cách tính và gói theo cỡ xe.
- Phòng khám thú y: chủ vật nuôi hay hỏi giá tiêm phòng; dải liên hệ nên nêu rõ giờ làm việc.
- Tiệm in: giá theo số lượng rất hợp với dạng bảng, các bước gửi tệp đặt ngay bên dưới.
- Trung tâm ngoại ngữ nhỏ: phụ huynh tìm trước học phí, lịch khai giảng và cách đăng ký học thử.
- Gội đầu dưỡng sinh: thực đơn theo thời lượng là một bảng giá tự nhiên, nút đặt lịch đi liền sau.
- Lắp camera gia đình: khách khó tự chọn thiết bị, nên bảng theo số mắt camera dễ hiểu hơn theo mã hàng.
- Làm hồ sơ visa: điều kiện khác nhau theo nước đến; phí dịch vụ nên tách khỏi lệ phí nộp cho cơ quan cấp.
Ba bản minh họa: cùng phong cách, khác cách vào trang
Ba giao diện sau được dựng riêng để minh họa cho bài. Nha khoa Hòa Nhã, Nhà Gọn và Sổ Sáng là tên tự đặt, giá trong ảnh chỉ là ví dụ, không phải dự án đã bàn giao. Cùng là thiết kế web đơn giản, ba bản giữ hai nút, bảng giá và các bước đánh số, nhưng khác nhau ở thứ khách nhìn thấy đầu tiên.
Nha khoa: bảng giá nằm sát nút đặt lịch
Bản này gần ảnh mẫu nhất: chữ bên trái, ảnh bác sĩ trong phòng khám bên phải. Khách thường muốn biết giá và cách đặt lịch trước khi đến, nên bảng giá và nút đặt lịch nằm chung một hàng. Bên dưới là bốn thẻ dịch vụ, bốn bước đến khám và năm câu hỏi thường gặp. Khi làm thật, nên ghi rõ giá tham khảo và tránh cam kết hiệu quả điều trị.
Vệ sinh nhà: bốn ô chọn dịch vụ thay cho ảnh banner
Khách chỉ còn phải chọn đúng loại dịch vụ. Banner vì thế bỏ ảnh, dùng nền xanh lá phẳng và đặt bốn ô chọn ngay dưới tiêu đề. Các ô chỉ có biểu tượng và chữ, giá vẫn nằm trong bảng bốn dòng, nên giao diện không biến thành lưới thẻ ảnh. Ảnh phòng khách thu nhỏ đứng cạnh ba bước đặt lịch, sau đó là bốn thẻ mô tả việc làm trong một buổi dọn.
Kế toán: ảnh chỉ là phụ, bảng ba gói làm trọng tâm
Hộ kinh doanh và doanh nghiệp nhỏ chọn kế toán theo phạm vi công việc và mức phí, nên ảnh sổ sách chỉ còn là ảnh phụ bên phải banner. Bảng ba gói thành khối lớn nhất trang, ngay dưới là hai cột việc có làm và việc không làm. Khi làm thật, hãy ghi đúng phạm vi của từng gói và đừng hứa giảm thuế.
Chuẩn bị gì trước khi làm thiết kế web đơn giản?
Phong cách này ít phụ thuộc vào bộ ảnh, nhưng rất phụ thuộc vào dữ kiện. Năm việc dưới đây nên xong trước khi dựng trang, và có thể đối chiếu với các bước làm việc của Mạnh An AI để biết phần nào cần gửi sớm.
- Viết bảng giá bằng chữ và chỉ định người giữ: mỗi hàng gồm dịch vụ, đơn vị, mức giá, thêm một dòng điều kiện đủ lớn để đọc. Ghi rõ ai sửa và bao lâu xem lại một lần.
- Chia nội dung theo câu hỏi thật: lấy câu hỏi từ tin nhắn và cuộc gọi của khách, đặt câu trả lời ngắn lên đầu rồi mới giải thích thêm.
- Chốt thông điệp trước khi chọn chữ: mỗi phần cần một ý chính, rồi mới chọn kiểu chữ và cỡ tiêu đề. Giữa các nhóm thông tin nên để khoảng cách đủ thoáng, để khách đọc thoải mái và thấy ngay bước tiếp theo.
- Giữ lối liên hệ ở một chỗ cố định: tiêu chí 3.2.6 của WCAG 2.2 yêu cầu cơ chế trợ giúp lặp lại trên nhiều trang phải giữ cùng thứ tự so với nội dung khác.
- Chỉ giữ cam kết làm được: thời gian có mặt, bảo hành, đánh giá của khách trong ảnh mẫu đều là ví dụ. Website thật chỉ nêu điều doanh nghiệp giữ được và khách đã đồng ý công khai.
Để thử, hãy đưa bản nháp cho một người chưa biết doanh nghiệp, hỏi bốn câu ở đầu bài và xem họ phải bấm mấy lần. Nếu khách chưa tìm được câu trả lời dễ dàng, hãy thử đổi vị trí khối hoặc cách liên kết.
Nếu khách cần chọn giữa nhiều nhóm dịch vụ có ảnh và phạm vi riêng, hãy đối chiếu giao diện lưới thẻ để chọn và so sánh dịch vụ. Thẻ giúp nhận diện từng lựa chọn, còn bảng phù hợp hơn khi cần đối chiếu giá và thuộc tính theo hàng.
Câu hỏi thường gặp về thiết kế web đơn giản
Thiết kế web đơn giản có phải là website ít tính năng không?
Không hẳn. Ảnh mẫu trong bài có nhiều khối. “Đơn giản” ở đây là khách tìm được dịch vụ, giá, cách đặt và liên hệ theo đường ngắn nhất.
Chưa chốt được giá thì có dùng thiết kế web đơn giản được không?
Được, nếu công khai được khoảng giá hoặc cách tính. Nếu không nói được cả cách tính, nên chọn phong cách lấy dịch vụ hoặc năng lực làm trọng tâm.
Doanh nghiệp có nhiều dịch vụ thì trình bày thế nào?
Trang chủ nên gom thành khoảng bốn nhóm, mỗi nhóm dẫn tới một trang có bảng giá riêng. Nếu hạng mục quá nhiều và khách cần duyệt bằng ảnh, Lưới thẻ gọn gàng sẽ hợp hơn.
Chốt lại: giá rõ thì mới nên đơn giản
Thiết kế web đơn giản phát huy khi khách đã biết mình cần gì và doanh nghiệp nói được giá hoặc cách tính giá. Nếu còn phân vân, hãy xem thêm các hướng giao diện khác.
Mạnh An AI nhận làm website cho khách trên toàn quốc. Trước khi liên hệ, hãy tham khảo mức phí các gói làm website để dự trù ngân sách.
Khi đã có bảng giá nháp, trao đổi với Mạnh An AI để cùng sắp lại đường đi cho khách.
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
MSDN: 2802484983, cấp ngày 05/10/2017 tại Sở Kế Hoạch Và Đầu Tư Tỉnh Thanh Hóa
