Logo
    Form - Nguyên tắc thiết kế hướng người dùng

    Form - Nguyên tắc thiết kế hướng người dùng

    Form là gì?

    Form hay web form là 1 nhân tố HTML để khách xem web có thể nhập thông tin mà chủ website mong muốn thu thập, ví dụ: tên, email, số điện thoại… Sau khi bấm nút gửi, thông tin này sẽ được gửi đến server để xử lý.

    Các thành tố của form

    Web form được cấu thành từ các nhân tố khác nhau và được thể hiện khác nhau trên form. Form có thể chứa các thành tố: text, nút radio, checkbox, dropdown, và nút cho phép tải lên tài liệu (hình ảnh, pdf…)

    Form hoạt động như thế nào?

    • Người dùng xem 1 trang web chứa form
    • Trình duyệt hiển thị form
    • Người dùng nhập thông tin vào form và nhấn gửi đi.
    • Trình duyệt gửi thông tin này đến server.
    • Đoạn mã xử lý form chạy trên server sẽ xử lý thông tin này.

    Các lưu ý khi thiết kế form

    1. Tổ chức form hợp lý và CHỈ HỎI những thông tin cần thiết

    
    Enter your caption

    Form là cuộc đối thoại.

    Và nó cần được tổ chức câu hỏi hợp lý giữa bạn và khách hàng. Vì thế, ngôn ngữ dùng cho form cần được sử dụng phù hợp với khách hàng — chứ không phải phù hợp với dữ liệu máy tính.

    Luôn hỏi tại sao bạn cần thông tin này và giải thích với khách hàng.

    Ví dụ, bạn đang trong bước đầu tiếp cận khách hàng, hãy chỉ hỏi những gì bạn cần để liên lạc được với họ. Đó có thể là tên, email, hay điện thoại (tùy trường hợp). Đừng hỏi họ địa chỉ vì thật sự không cần thiết.

    Hoặc thay vì tách Họ và Tên là 2 field, hãy gom lại Họ tên thành 1 field duy nhất.

    Tiết giảm các field cần điền thông tin sẽ giúp:

    • tiết kiệm thời gian hoàn thành form cho khách
    • và tăng tỷ lệ form được điền.

    2. Điền sẵn càng nhiều càng tốt

    
    Ví dụ: bạn có thể dễ dàng điền field Quốc gia từ địa chỉ IP của khách hàng.

    Giúp khách hàng tiết kiệm càng nhiều thời gian và công sức càng tốt để liên lạc với bạn — điền sẵn tất cả các field bạn cần nếu được với sự hỗ trợ của công nghệ.

    3. Sử dụng tính năng autofocus

    
    Enter your caption

    4. Thiết kế form trên 1 cột

    
    Enter your caption

    Mắt người có xu hướng tự nhiên là quét từ trên xuống dưới. Vì thế, thiết kế form trên layout 1 cột thuận theo tự nhiên và thực sự giúp tăng tỉ lệ hoàn thành form lên đáng kể.

    5. Chia các field thành nhóm

    
    Enter your caption

    Khi bạn cần khách hàng điền 1 form dài gồm nhiều field, cân nhắc chia nhóm theo ngữ cảnh.

    Bên phải hình tuân theo best practice này,  bằng cách gom nhóm các field để tạo cho người dùng cảm giác trật tự.

    6. Sử dụng điều kiện ràng buộc

    
    Enter your caption

    Giúp hạn chế tỉ lệ điền sai thông tin (và SPAM nữa). Các ràng buộc cơ bản như sau:

    • Chỉ cho phép điền số (điện thoại, số thẻ tín dụng, số CVV, ngày hết hạn thẻ)
    • Chỉ cho phép điền chữ (tên, tên trên thẻ,…)
    • Email phải có ký tự @ 

    7. Sử dụng ràng buộc thị giác

    
    Enter your caption

    Các field không nhất thiết phải bằng nhau mà thay đổi kích thước theo nội dung cần nhập.

    Bên cạnh đó, điều này tạo ra các điểm neo giúp mắt quét nhanh hơn là 1 dọc các field với chiều rộng bằng nhau.

    8. Thông báo lỗi rõ ràng và có chỉ dẫn cách sửa

    
    Enter your caption

    Có lỗi xảy ra!

    Vâng, quả là 1 thông báo đầy “súc tích” với khách hàng. Và họ không biết lỗi gì, ở đâu để sửa lại cho đúng.

    Đây là lỗi rất hay gặp, vì đa số website sử dụng nền tảng Wordpress đều dùng các plug-in được viết bằng tiếng Anh.

    P.S. Nhớ Việt hóa thông điệp báo lỗi nha.

    9. Sử dụng tính năng xác nhận inline (inline validation), phản hồi ngay lập tức sau khi khách hàng điền thông tin.

    Inline validation là phiên bản tốt nhất cho đến thời điểm hiện tại, theo nghiên cứu bởi Luke Wrobleski. Không quá khó hiểu, bởi con người cần phản hồi nhanh chóng để quyết định bước tiếp theo nên làm gì.

    
    Enter your caption

    2 lợi ích của việc dùng inline validation và phản hồi tức thì:

    • Người dùng, ngay lập tức, biết mình sai — và nên sửa như thế nào cho đúng
    • Người dùng, ngay lập tức, biết mình đúng — tạo cảm giác an tâm, phấn khích để tiếp tục hoàn thành form.

    Cụ thể, cũng theo nghiên cứu từ Luke Wroblewski, việc dùng inline validation và phản hồi tức thì giúp cho:

    • tăng 22% lượt gửi form thành công
    • giảm 22% lượt mắc lỗi
    • tăng 31% sự hài lòng
    • giảm 42% thời gian cần để hoàn thành form

    10. Đặt label bên ngoài field, kết hợp với placeholder nếu cần thiết

    Nguyên tắc chính ở đây là không ẩn form label khi người dùng click vào ô điền form, để tránh việc người dùng có thể quên mất field đó cần điền gì. Như hình bên dưới.

    
    Enter your caption
    
    Enter your caption

    Giải pháp tốt nhất là đặt nhãn bên ngoài, phía trái của field cần điền.

    Trên di động, với kích thước giới hạn, nhãn có thể được đặt trên field. Tuy cách này có thể tạo ra 1 form hơi dài, nhưng vẫn tốt hơn là bỏ nhãn đi khiến tăng nguy cơ là người dùng quên mất mình đang cần điền nội dung gì.

    Nếu bạn thiết kế cho điện thoại di động và bạn bị giới hạn bởi kích thước màn hình, bạn có thể đặt nhãn trên đầu trường. Vâng, cách tiếp cận này sẽ gây ra một hình thức khá dài. Hãy nhớ rằng, luôn luôn tốt hơn để làm cho hình thức cao hơn rộng hơn do cuộn dọc dẫn đến tải ít nhận thức hơn trên bộ não của chúng ta.

    Giải pháp thẩm mỹ hơn là đặt nhãn bên trong field và nó sẽ trượt lên phía góc bên trái phía trên khi form ở tình trạng focus như hình bên dưới dây.

    
    Enter your caption

    11. Đánh dấu các trường tùy chọn thay vì bắt buộc.

    
    Enter your caption

    Thay vì đánh dấu * huyền thoại cho các trường bắt buộc, lời khuyên tốt hơn là đánh dấu không bắt buộc cho các field không bắt buộc.

    Tại sao nên chọn cách này?

    Hãy kéo lên trên xem nguyên tắc thứ 1 Chỉ-hỏi-những-gì-cần — vì thế, những field không bắt buộc thường sẽ rất ít so với field bắt buộc, đúng không nào?

    12. Đừng che mật khẩu

    Nghe hơi lạ, nhưng điều này thực sự đem lại cho người dùng trải nghiệm tốt hơn.

    Nielsen Norman Group tổng kết rằng trải nghiệm người dùng sẽ giảm sút đi nhiều khi họ nhập mật khẩu và nhận được 1 dãy các chấm tròn. Che mật khẩu không giúp tăng cường tính bảo mật, mà ngược lại, gây thiệt hại cho doanh nghiệp bởi sự đăng nhập thất bại của người dùng.

    
    Enter your caption

    (Image Source)

    Source:

    1. https://uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92
    2. http://babich.biz/10-rules-for-efficient-form-design/
    3. https://uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92
    Copyright 2020, Dew. All rights reserved.