12 mẹo hữu ích giúp tối ưu hóa web form

Dưới đây là 12 mẹo giúp bạn làm tốt các form mẫu một cách nhanh chóng để tối ưu hóa hiết kế website.

Form thông tin là thành phần khó có thể thiếu của bất kỳ thiết kế website chuyên nghiệp nào. Nó có thể đảm nhận nhiệm vụ là một contact form, checkout form hoặc chỉ đơn giản là lấy thông tin khảo sát...Dù thế nào đi nữa, bạn cũng cần giúp khác hàng điều đúng, đủ vào các form đó theo một cách thuận tiện nhất cho họ.  

Thiết kế các form thông tin trước hết cần phải nắm bắt được tâm lý của người dùng và kiểm tra nhiều lần thiết kế của mình để tìm ra đâu là điểm chưa hợp lý cho người dùng và cần cải thiện để mang lại trải nghiệm tốt nhất cho họ. 

Dưới đây là 12 mẹo giúp bạn làm tốt các form mẫu một cách nhanh chóng để tối ưu hóa hiết kế website.

Sử dụng xác thực từng dòng

Nếu người dùng điều sai thông tin vào form, hãy thông báo ngay cho họ biết vấn đề ở đâu như cách làm của website Autoglass. 

nyl1ubx thiet ke web form

 Điều này cho phép khách hàng nhanh chóng hiểu và khắc phục vấn đề. 

Nhãn của các mục rõ ràng

Định dạng giúp người dùng hiểu và điền thông tin cần phải rõ ràng, chẳng hạn như độ dài của mật khẩu và yêu cầu có thêm phần số.  Bạn có thể xem ví dụ của ASOS khi yêu cầu khách điền các mục.

gcwjyqt thiet ke web form

Sử dụng caption ngay bên cạnh mục

Một số website đặt nhãn trên đỉnh của muc nhưng nó khiến cho form trông có vẻ dài ra. Thay vì điều đó, bạn có thể để caption của các mục ngay bên cạnh theo chiều ngang. 

cic9q5b thiet ke web form

Thêm vào đó, bạn có thể đưa tên các mục vào trong một hộp gọn gàng. 

Thêm thông tin sản phẩm

Thêm một mục tóm tắc ngay bên cạnh form sẽ mang đến sự gợi nhớ nhanh về hàng hóa và giá cả, giúp tránh việc khách phải rời form để kiểm tra lại thông tin hàng hóa. 

u5sfovg thiet ke web form

Tạo thông báo lỗi dễ hiểu

Đừng chỉ dùng mỗi thông báo lỗi thông thường, hãy báo lỗi ngay bên cạnh chỗ có vấn đề theo cách ngắn gọn, súc tích nhất. 

upepesm thiet ke web form

Một ví dụ tuyệt vời từ Peugeot: 

k9dewbb thiet ke web form

Sử dụng cookie để nhớ password của khách hàng 

Mọi người phải nhớ quá nhiều mật khẩu của quá nhiều thứ, sẽ không có gì tiện lợi hơn là khi vào lại một website nào đó để lặp lại việc mua hàng hoặc đăng ký là mật khẩu đã được lưu sẵn. 

byi8dpy thiet ke web form

Dự đoán và đối phó với các lỗi thường gặp

Kê cả đã có những hướng dẫn rõ ràng, mọi người vẫn có khả năng gặp sai lầm khi điền form. Bạn hoàn toàn có thể dự đoán trước một số lôi thông thường và cảnh báo trước để tiết kiệm thời gian cho khách.Hãy xem ví dụ của Apple.com: 

apple postcode thiet ke web form

Tương tự như thế với Play.com, họ không tạo các cảnh báo lỗi mà thay vào đó họ chỉ thực hiện checkout:

play com thiet ke web form

Không xóa sạch các mục sau khi người dùng điền sai

Điều gì xảy ra khi khách hàng điền sai thông tin và ấn nút xác nhận, thay vì cho khách hàng biết chỗ nào có vấn đề để quay lại sửa thì toàn bộ thông tin đã điền bị xóa sạch. Điều này tuy không phổ biến nhưng tuyệt đối nên tránh bởi nó gây một sự khó chịu rất lớn cho người dùng. 

Tạo form ngắn

Web form dài khiến khách hàng tiềm năng của bạn không hài lòng, do đó bạn cần đảm bảo chỉ hỏi những thông tin ngắn gọn và gần thiết nhất. 

Confused.com đã quán triệt tốt điều này. 

hnxmk2i thiet ke web form

Tạo sự vui nhộn

Mặc dù có nhiều sự tranh cãi về phong cách trình bày nghiêm túc hay vui nhộn của các form đăng ký, xong hãy xem ví dụ từ svn2ftp, chẳng phải nó tạo sự hào hứng cho người xem hơn? 

xqe5kav thiet ke web form

Tương tự như thế, Jarad Johnson có contact form như một tấm bưu thiếp xinh đẹp.

p26zal2 thiet ke web form

Sử dụng định dạng đúng cho mỗi mục

Website của ASOS có ô chọn giới tính để hiển thị form phù hợp với từng khách hàng.

gpwdass 1 thiet ke web form

Ngoài ra hãy xem cách họ phân biệt khách hàng đã đăng ký và khách mới để đưa ra các f-rom đăng ký phù hợp. 

en3y1hv thiet ke web form

Cho phép nhận feedback sau khi đăng ký

Hãy khiến khách hàng yên tâm là họ đã hoàn thành quá trình điền form bằng cách hiện thông báo.  

azf8chu thiet ke web form

 

Tác giả bài viết: Phùng Thanh Hằng
Có: 0/0 đã cho sao
tiếc gì 1 click để cho sao

Bạn đã xem chưa?

[Blog thiết kế] Số 01(14/9/2020): Intel thay logo, Lightweight trình duyệt web siêu nhẹ

[Blog thiết kế] Số 01(14/9/2020): Intel thay logo, Lightweight trình duyệt web siêu nhẹ

Hàng tuần, nhiều nội dung thú vị về thiết kế ở mọi ngóc ngách trên thế giới được Ngôi Sao Số tổng hợp gởi đến chị em thiết kế.

[9/2020] Nghiên cứu quan trọng cần biết cho các nhà thiết kế web

[9/2020] Nghiên cứu quan trọng cần biết cho các nhà thiết kế web

Ở Việt Nam chúng ta đa phần phán theo cảm tính. Nhưng hãy tập tin vào số liệu, vì nó như xác xuất thống kê giúp bạn đong đếm chính xác các vấn đề của bạn. Những dữ liệu quý giá này không phải ai cũng có thể làm và biết. Cùng khám phá với Ngôi Sao Số nhé.

5 mẹo để thiết kế trang web một trang hiệu quả

5 mẹo để thiết kế trang web một trang hiệu quả

Web one-page hay còn gọi là trang web chỉ có một trang, hoặc các trang landing page chỉ để giới thiệu một chương trình khuyến mãi ... làm thế nào để nó hiệu quả? Cùng xem bài viết nhé

Quay lại trang Blog
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây