Những người sử dụng ứng dụng hoặc trang web của bạn có một mục tiêu cụ thể. Thông thường, biểu mẫu là thứ đứng giữa người dùng và mục tiêu của họ. Biểu mẫu vẫn là một trong những loại tương tác quan trọng nhất đối với người dùng trên web và trong ứng dụng. Biểu mẫu thường được coi là bước cuối cùng trong hành trình hoàn thành mục tiêu của người dùng. Trong bài viết này, bạn sẽ tìm thấy các phương pháp hay nhất để thiết kế biểu mẫu đã được thu thập từ thử nghiệm khả năng sử dụng, thử nghiệm hiện trường, nghiên cứu trực quan và các khiếu nại thực tế từ người dùng.
Các thành phần của biểu mẫu
Biểu mẫu thường có năm thành phần điển hình sau:
- Cấu trúc (Structure): Nó bao gồm việc sắp xếp các lĩnh vực/trường (field), xuất hiện trên trang và kết nối hợp lý giữa nhiều trường.
- Các trường nhập liệu (Input field): Chúng bao gồm các trường văn bản, trường mật khẩu, hộp kiểm (Check boxes), nút chọn (radio buttons), thanh trượt và bất kỳ trường nào khác được thiết kế cho thông tin đầu vào của người dùng.
- Nhãn trường (Field labels): Chúng cho người dùng biết ý nghĩa của các trường nhập tương ứng.
- Các nút tác vụ (Action buttons): Khi người dùng nhấn nút, hành động sẽ được thực hiện (chẳng hạn như gửi dữ liệu).
- Phản hồi (Feedback): Người dùng có thể hiểu kết quả của đầu vào của mình thông qua feedback. Hầu hết các ứng dụng hoặc trang web đều sử dụng tin nhắn như một dạng phản hồi. Tin nhắn thông báo cho người dùng về kết quả, có thể là tích cực (cho biết rằng biểu mẫu đã được gửi thành công) hoặc tiêu cực (“Số bạn đã cung cấp không chính xác”).
Biểu mẫu cũng có thể có các thành phần sau:
- Hỗ trợ (Assistance): chỉ dẫn cách điền biểu mẫu.
- Xác thực (Validation): Kiểm tra tự động để đảm bảo dữ liệu của người dùng hợp lệ.
Cách thiết kế biểu mẫu thu hút
Cấu trúc biểu mẫu (Form Structure)
Thực tế, biểu mẫu là cuộc trò chuyện. Và giống như bất kỳ cuộc trò chuyện nào, nó phải được thể hiện bằng một giao tiếp logic giữa hai bên – người dùng và ứng dụng hoặc website của bạn.
- Chỉ hỏi những gì được yêu cầu
Đảm bảo chỉ hỏi những gì bạn thực sự cần. Mỗi trường bổ sung bạn thêm vào biểu mẫu sẽ ảnh hưởng đến tỷ lệ chuyển đổi của nó. Luôn xem xét lý do tại sao bạn yêu cầu thông tin nhất định từ người dùng và cách bạn sẽ sử dụng thông tin đó.
- Sắp xếp biểu mẫu một cách hợp lý
Thông tin chi tiết cần được hỏi một cách hợp lý từ góc nhìn của người dùng, không phải chỉ dừng ở tính logic ứng dụng hoặc cơ sở dữ liệu. Thông thường, không nên yêu cầu người dùng điền địa chỉ trước khi hỏi tên họ.
- Nhóm các thông tin liên quan
Hãy nhóm thông tin liên quan thành các khối hoặc tập hợp logic. Việc chuyển từ bộ câu hỏi này sang bộ câu hỏi tiếp theo sẽ giống một cuộc trò chuyện hơn. Ngoài ra, việc nhóm các trường liên quan lại với nhau cũng sẽ giúp người dùng hiểu rõ thông tin họ phải điền vào. So sánh cách hoạt động của nó trong biểu mẫu thông tin liên hệ bên dưới.
- Một cột hay nhiều cột
Khi nói đến thiết kế web, các nhà thiết kế thường thử nghiệm với bố cục trang web để truyền tải sự quan tâm trực quan cho khách truy cập trang web. Tuy nhiên, khi nói đến thiết kế biểu mẫu, tốt hơn hết bạn nên chống lại sự cám dỗ của bất kỳ bố cục nào có nhiều hơn một cột.
Một trong những vấn đề với việc sắp xếp các trường biểu mẫu thành nhiều cột là người dùng có thể sẽ diễn giải các trường không nhất quán. Nếu biểu mẫu có các trường liền kề theo chiều ngang, thì người dùng phải quét theo mẫu Z, làm mờ đường dẫn rõ ràng để hoàn thành. Nhưng nếu một biểu mẫu nằm trong một cột, thì đường dẫn đến hoàn thành là một đường thẳng xuống dưới trang.
Các trường nhập liệu (input field)
Các trường nhập liệu cho phép người dùng điền vào biểu mẫu của bạn. Tùy thuộc vào thông tin bạn yêu cầu, có nhiều loại trường khác nhau – trường văn bản (text fields) , trường mật khẩu (password fields) , danh sách thả xuống (dropdowns), hộp kiểm (check boxes), nút chọn 1 (radio buttons), bảng chọn ngày tháng (datapicker) và các loại khác.
- Số trường (Number Of Fields)
Cố gắng giảm thiểu số lượng trường càng nhiều càng tốt. Điều này làm cho biểu mẫu của bạn giảm tải, đặc biệt khi bạn yêu cầu nhiều thông tin từ người dùng của mình. Tuy nhiên đừng làm quá lên, không ai thích một biểu mẫu ba trường biến thành một cuộc thẩm vấn 30 trường.
- Bắt buộc hay Tùy chọn
Cố gắng tránh các trường tùy chọn trong biểu mẫu. Nhưng nếu bạn sử dụng chúng, ít nhất bạn nên phân biệt rõ ràng các trường nhập nào không được để trống bởi người dùng. Quy ước này là sử dụng dấu hoa thị (*) hoặc chữ ‘tùy chọn’ (đây là cách thích hợp hơn cho các biểu mẫu dài với nhiều trường bắt buộc).
- Đặt giá trị mặc định
Bạn nên tránh có một mặc định tĩnh trừ khi bạn tin rằng một phần lớn người dùng của bạn (ví dụ 90%) sẽ chọn giá trị đó. Đặc biệt nếu đó là trường bắt buộc. Tại sao? Bởi vì bạn có khả năng giới thiệu lỗi vì mọi người quét biểu mẫu nhanh chóng trực tuyến – đừng cho rằng họ sẽ dành thời gian phân tích tất cả các lựa chọn. Họ chỉ đơn giản là có thể bỏ qua một cái gì đó mà đã có một giá trị.
Nhưng các mặc định thông minh có thể giúp người dùng hoàn thành biểu mẫu nhanh hơn và chính xác hơn. Ví dụ: chọn trước quốc gia của người dùng dựa trên dữ liệu vị trí địa lý của họ. Nhưng bạn vẫn nên sử dụng những điều này một cách thận trọng, bởi vì người dùng có xu hướng không để ý đến các trường được chọn trước.
Nhãn (Labels)
Nhãn văn bản là một trong những cách chính để làm cho giao diện người dùng dễ truy cập hơn. Nhãn cho người dùng biết mục đích của trường trong khi họ điền nội dung của trường và nhãn cần phải giữ nguyên ngay cả sau khi người dùng đã hoàn thành trường.
- Số từ (Number of Word)
Nhãn không phải là văn bản trợ giúp. Bạn nên sử dụng nhãn cô đọng, mô tả ngắn gọn (một hoặc hai từ) để người dùng có thể nhanh chóng quét biểu mẫu của bạn. Phiên bản trước của mẫu đăng ký Amazon chứa rất nhiều từ dẫn đến tỷ lệ hoàn thành chậm.
- Viết thường hay Viết hoa
Nên là “Full N ame” hay “Full n ame”? Viết thường dễ dàng hơn 1 chút (và do đó nhanh hơn) để đọc hơn Viết hoa. Nhưng một điều chắc chắn – bạn không bao giờ nên viết hoa cả câu , vì viết hoa rất khó đọc và mất nhiều thời gian để quét bởi không có sự khác biệt về chiều cao giữa các chữ nữa.
- Căn chỉnh nhãn: Căn trái (Left) ; Căn phải (Right) hay Căn trên cùng (Top)
Bài viết năm 2006 về vị trí nhãn của Matteo Penzo ngụ ý rằng các biểu mẫu được hoàn thành nhanh hơn nếu các nhãn nằm trên đầu các trường. Chúng rất tốt nếu bạn muốn người dùng quét qua biểu mẫu nhanh nhất có thể.
Tuy nhiên nghiên cứu tiếp theo đã đề cập không tìm thấy sự khác biệt giữa các nhãn phía trên các trường và các nhãn căn chỉnh bên phải.
Các nút hành động
Khi được nhấp, các nút này sẽ kích hoạt một tác vụ như gửi biểu mẫu.
- Hành động chính và phụ
Thiếu sự phân biệt hình ảnh giữa các hành động chính và phụ có thể dễ dẫn đến thất bại. Việc giảm sự nổi bật trực quan của các hành động phụ sẽ giảm thiểu rủi ro cho các lỗi tiềm năng và hướng người dùng đến một kết quả thành công.
- Vị trí nút
Các biểu mẫu phức tạp thường cần một nút quay lại. Nếu nút đó nằm ngay bên dưới các trường nhập (như trong ảnh đầu tiên), người dùng có thể vô tình nhấp vào nó. Vì nút quay lại là một hành động phụ, nó nên được đặt ra khỏi tầm nhìn (biểu mẫu thứ hai có vị trí phù hợp cho các nút).
- Quy ước đặt tên
Tránh các từ chung chung như “Gửi” cho các hành động, bởi vì chúng tạo ấn tượng rằng bản thân biểu mẫu là chung chung. Thay vào đó, hãy nêu rõ hành động mà các nút thực hiện khi được nhấp vào, chẳng hạn như
“Tạo tài khoản MIỄN PHÍ” của tôi hoặc “Gửi cho tôi phiếu mua hàng hàng tuần”.
- Phản hồi trực quan
Thiết kế nút “Gửi” theo cách chỉ rõ biểu mẫu đang được xử lý sau hành động của người dùng. Điều này cung cấp phản hồi cho người dùng trong khi ngăn chặn việc gửi hai lần.
Khi nói đến thiết kế biểu mẫu, điều quan trọng cần nhớ là người dùng có thể miễn cưỡng điền vào biểu mẫu, vì vậy hãy làm cho quá trình này dễ dàng nhất có thể. Xin chào và hẹn gặp bạn trong bài viết tiếp theo. Nếu bạn có nhu cầu dịch vụ viết bài chuẩn SEO đăng web, hay muốn tìm đơn vị cung cấp dịch vụ SEO website uy tín, vui lòng liên hệ với chúng tôi nhé! Gọi ngay Hotline 094 456 1874 để được tư vấn thêm.
