Design form thế nào cho tốt
design
30
UX
16
UI
25
Form
2
White

Vu Nhat Minh viết ngày 23/01/2017

Form là thành phần quan trọng nhất khi design flow đăng ký của 1 web hay 1 app, dù là view gồm nhiều bước hay chỉ là một màn hình đơn điệu. Bài này sẽ liệt kê những điều nên và không nên khi design form thông qua các lỗi thường thấy của designer.
general
Tuy vậy hãy nhớ đây chỉ là các luật cho trường hợp tổng quát, và sẽ luôn tồn tại những ngoại lệ tùy theo câu chuyện muốn kể về sản phẩm.

Form chỉ nên có 1 cột

Label để ở bên trên input

Nhóm label lại với input tương ứng

Không dùng label viết hoa toàn bộ

Hiển thị toàn bộ lựa chọn nếu số lựa chọn < 6

Không dùng placeholder làm label

Đặt checkbox và radio thẳng hàng dọc

Viết nút CTA (Call To Action) rõ nghĩa

Viết nội dung lỗi rõ ràng trên dòng tương ứng

Chỉ chạy validation sau khi người dùng điền xong input (trừ khi tác vụ validation đấy giúp ích trong quá trình type)

Không ẩn đoạn gợi ý

Phân biệt rõ action loại 1 và action loại 2

Để độ dài của input tương ứng với nội dung

Không dùng ký hiệu cho input bắt buộc, và ghi rõ input nào là có thể bỏ đi được

Nhóm các thông tin liên quan lại với nhau

Suy nghĩ về từng đầu mục thông tin

Hãy cố gắng giảm số trường hết mức có thể. Mỗi khi thêm 1 trường, hãy dừng lại và suy nghĩ thật kỹ xem bạn có thể lấy thông tin đó từ trường khác đã có sẵn hay không? có cần thiết phải lấy bây giờ không? và liệu có thể bỏ hẳn đi hay không? Hiện nay chúng ta có thể lấy data tự động bằng nhiều cách. Giảm trường đi là cách giảm stress hữu hiệu nhất cho user.

Thông minh và hài hước

Tất cả mọi user đều khó tính và sốt ruột khi điền form đăng ký. Hãy cố gắng tạo cảm giác như đang trò chuyện, tận dụng khiếu hài hước tạo cảm giác thân thiện và đem lại những khoảng khắc thú vị. Nếu bạn làm được những điều này thì brand của sản phẩm sẽ được gắn liền với ấn tượng tốt và tỉ lệ hoàn thành flow đăng ký sẽ tăng đến mức mà bạn không ngờ tới đấy!

Tham khảo

Bài viết gốc của Andrew Coyle tại Medium.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Vu Nhat Minh

54 bài viết.
818 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
126 30
Nếu bạn thường vào trang mua sắm của amazon, chắc sẽ chẳng lạ gì với menu Shop by Department. Tốc độ hiển thị nội dung của menu là tức thì so với d...
Vu Nhat Minh viết 3 năm trước
126 30
White
100 4
Lời người dịch Người dịch là một developer , sau khi tìm đọc được bài viết này bằng bản gốc tiếng Anh đã cảm thấy như được "khai sáng" về khả năng...
Vu Nhat Minh viết hơn 3 năm trước
100 4
White
65 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết 3 năm trước
65 5
Bài viết liên quan
White
65 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết 3 năm trước
65 5
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
54 bài viết.
818 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!