Kinh nghiệm Usability – thiết kế form hiệu quả

Form là một yếu tố chúng ta thường gặp trên môi trường Internet, form có thể chỉ đơn giản là một ô đăng nhập, một form đăng ký mua hàng hoặc một đơn vay vốn ngân hàng phức tạp. Với sự cạnh tranh ngày càng gay gắt trên Internet và do đặc tính của người dùng thường ít kiên nhẫn hơn trước các tương tác trên website thì những người làm thương mại điện tử càng cần phải chú ý để giúp cho khách hàng của mình thuận tiện nhất trong quá trình mua hàng. Những kinh nghiệm tôi trình bày dưới đây sẽ phần nào giúp các bạn thiết kế form dễ dùng và thuận tiện hơn để phần nào đó tăng tỷ lệ conversion của bạn.

1. Nên thiết kế để title và field càng gần nhau càng tốt.
Khi vào một form người dùng chỉ chú ý đến title(tiêu đề) và field để trả lời, khoảng cách quá xa giữ title và field sẽ làm cho người dùng cảm thấy khó chịu vì nó làm mắt của họ phải dõi theo một khoảng cách dài để căn chỉnh sao cho không lệch dòng.

Để đưa title và field lại gần nhau bạn có thể căn phải đối với các title và căn trái với các field như vậy giữa các field và title luôn giữ một khoảng cách cố định và đủ gần để người dùng cảm thấy dễ chịu, tuy nhiên cách này có nhược điểm khi title là một câu hỏi quá dài thì việc đọc đoạn text căn phải sẽ gặp đôi chút khó khăn. Hoặc bạn cũng có thể dùng cách đưa title lên trên các field, cách này được áp dụng ở nhiều trang web nước ngoài nhưng ở Việt Nam thì không phổ biến lắm.


2. Lựa chọn cách thể hiện các field bắt buộc cho phù hợp
Field bắt buộc là những field dữ liệu mà người dùng bắt buộc phải nhập vào, khác với các field mà người dùng có thể nhập hoặc không. Có nhiều cách thể hiện các field này phổ biến là: dùng dấu sao, dùng chữ in đậm, …


Sau đây là lời khuyên của các chuyên gia khi thể hiện field bắt buộc:
– Nên sử dụng dấu * hoặc chữ khác màu với các field bắt buộc
– Dấu * để càng gần title càng tốt
– Không nên để dấu * ở đằng sau field
– Nếu tất cả các field đều là bắt buộc thì vẫn phải thể hiện dấu *


Trên đây là ví dụ form đăng ký thành viên của 3 website: textlink.vn, trananh.vn và lazada.vn chúng ta có thể thấy với sự đầu tư bài bản cách thiết kế form của lazada rất hoàn hảo làm cho người dùng dễ chịu hơn khi điền form. Hai site textlink.vn và trananh.vn chưa chú trọng lắm đền UX nên thiết kế của họ gặp đôi chút khó chịu cho người dùng

3. Nên phân chia các form theo các nhóm

Đối với những form quá dài thì chúng ta nên tách các field thành các nhóm nhỏ, bởi vì tâm lý của con người khi nhìn thấy một khối lượng công việc lớn sẽ cảm thấy nản, tuy nhiên nếu tách khối lượng đó thành những nhóm nhỏ hơn thì họ sẽ lại thấy bình thường. Vì vậy tách ra thành các nhóm field nhỏ sẽ tạo cảm giác dễ chịu hơn cho người dùng.

4. Dùng Radio box hay combo box cho các field lựa chọn

Trong một form khi yêu cầu người dùng lựa chọn những giá trị xác định chúng ta có 2 lựa chọn dùng Radio hay combo box:

Field giới tính yêu cầu người dùng lựa chọn một trong 2 giá trị: Nam hoặc Nữ, với 2 cách dùng như trên cách dùng Radio box sẽ có lợi hơn vì người dùng chỉ mất 1 click đã có thể lựa chọn, dùng combo box sẽ mất 2 click và nội dung lựa chọn chỉ hiển thị sau khi click vào combo box, điều này làm mất thêm 0.5 giây so với Radio box

Trong ví dụ khác khi yêu cầu người dùng lựa chọn tỉnh thành cư trú:

Nếu dùng combo box người dùng sẽ click vào, nhập chữ cái đầu tiên và lựa chọn tỉnh thành mình đang cư trú, nếu dùng Radio box thì người dùng buộc phải tìm đến đúng tỉnh thành của mình, việc này sẽ tương đối khó khăn và mất thời gian

Lời khuyên của các chuyên gia là khi số lượng giá trị lựa chọn <5 thì bạn nên dùn Radio box, còn lớn hơn thì dùng Combo box sẽ hiệu quả hơn

5. Lời kết
Có lẽ những vấn đề tôi trình bày trên đây nhiều bạn sẽ cho rằng đó chỉ là những thứ vụn vặt. Những thứ vĩ đại nhất cũng đều làm nên từ những chi tiết vụn vặt mà thôi, cả một chiếc ô tô phức tạp thì cũng đều phải tạo nên từ những con ốc vít. Nếu bạn chăm chút tỉ mỉ từng con ốc vít đó bạn sẽ tạo ra được một chiếc xe Mercedes còn bạn coi con ốc vít chỉ là một thứ vụn vặt không đáng quan tâm thì bạn sẽ chỉ tạo ra được một con Matiz mà thôi. Về cơ bản thì  Mercedes và Matiz đều là những chiếc oto, đều bốn bánh và đều chạy bon bon trên đường nhưng rõ ràng một con Mecedes thì giá trị gấp hàng chục lần con Matiz của bạn. Hi vọng rằng với những chia sẻ vừa rồi sẽ giúp các bạn cẩn thận hơn, khó tính hơn với chính mình trong Design và xây dựng sản phẩm không làm việc à uôm, dễ dãi theo kiểu Việt Nam nữa để chúng ta có những sản phẩm đẳng cấp như những chiếc Mecerdes :D.

Tài liệu tham khảo: Forms that Work: Designing Web Forms for Usability – Caroline Jarrett,  Gerry Gaffney

6 thoughts on “Kinh nghiệm Usability – thiết kế form hiệu quả

  1. Lê Thủy

    Hơi bị kết câu KẾT của anh rồi đó. Giá trị tạo nên sự khác biệt là những tiểu tiết mà người ta dễ bỏ qua nhất.

    Reply
  2. Duy Thanh Vo

    Thanks anh. Có điều em thắc mắc khác: vài trang dùng button thì căn phải so với form, số còn lại thì căn trái. Em nghĩ người thuận tay phải (dùng chuột tay phải) sẽ thích click vào nút căn phải hơn. Nhưng em lại thấy đa số website ở VN đặt button căn trái. Em vẫn đang tìm hiểu, hy vọng anh chia sẻ thêm.

    Cám ơn.

    Reply
  3. oceanlaw

    Thực sự mà nói sau khi đọc bài phân tích của bạn mình mới thấy tầm quan trọng khi thiết kế form liên hệ.

    Reply
  4. Toàn Nguyễn

    Anh Châu ơi, kinh nghiệm Web Usability của anh trong việc xây dựng Form này rất hay đấy. Phải tối ưu làm sao, người dùng thuận tiện nhất: mất ít thời gian nhất, mất ít sức nhất (giảm số lần click đi). Ngoài ra, trong form còn một số loại trường field nữa như là: Date, Scale, Grid nữa. Thanks anh đã chia sẻ.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *