58 thủ thuật thiết kế form
58 th thu t thi t k formủ ậ ế ế
D i đây là 58 th thu t v thi t k form thông quaướ ủ ậ ề ế ế vi c xem xét vô s ệ ố
m u thi t k , và nghiên c u vi c đã đ u t m nh c a các công tyẫ ế ế ứ ệ ầ ư ạ ủ vào t i ố
u hóa form.ư
Tr c khi b c vào sâu h n, chúng ta nên bi tướ ướ ơ ế r ng dù h u h t các th ằ ầ ế ủ
thu tậ này đã d a vàoự các thử nghi mệ v m t th ng kê qua cácề ặ ố website,
nh ng th thu tữ ủ ậ này không nên coi là luôn đúng. Các form th ng có tính ườ
ng c nh cao và ph thu c vào nhi u h n là ch thi t k c a nó đ chuy nữ ả ụ ộ ề ơ ỉ ế ế ủ ể ể
đ i t t.ổ ố
C u trúc và thi t k form chungấ ế ế
1) Bi u m uể ẫ nhi u b c t t h n bi u m u m t b c.ề ướ ố ơ ể ẫ ộ ướ
Chia các form ra hai ho c ba b c luôn làm tăng s l ngặ ướ ố ượ form thu
về đ c hoàn thành nhi u h n. Qua vi c th nghi mượ ề ơ ệ ử ệ ph ng pháp này ươ
trên t t c lo i formấ ả ạ cho khách hàng ti m năng, t form đăng ký h i th o ề ừ ộ ả
t i các form yêu c u gi a các doanh nghi pớ ầ ữ ệ trên website, chúng ta th y ấ
r ng form nhi u b c th c hi n t t h n so v i cácằ ề ướ ự ệ ố ơ ớ form m t b c thông ộ ướ
th ng.ườ
Có ba lí do vì sao form nhi u b c ho t đ ng t t:ề ướ ạ ộ ố
1. Form nhi u b c nhìn không đáng s b ngề ướ ợ ằ so v i m t formớ ộ dài v i ớ
quá nhi u tr ngề ườ câu h i.ỏ
2. Khi yêu c uầ các thông tin nh y c m (email, s đi n tho i) b c ạ ả ố ệ ạ ở ướ
cu i trong form, ng i dùng s nhi u kh năng đi n vào chúng ố ườ ẽ ề ả ề
h nơ vì n u khôngế ti n trình đi n form các b c tr c đó s b m t ế ề ở ướ ướ ẽ ị ấ
h t (đây là nh n th c đ c bi t đ n là "chi phí chìm").ế ậ ứ ượ ế ế
3. Khi nhìn vào b ng ti n trình, ng i dùng có đ ng l c nhi u h n đ ả ế ườ ộ ự ề ơ ể
hoàn thành form. Đi u nàyề d a trên nh n th c đ c bi t đ n là "hi uự ậ ứ ượ ế ế ệ
ng ti n b u đãi".ứ ế ộ ư
2) B đi nh ng tr ngỏ ữ ườ form không c n thi t.ầ ế
Expedia - công ty công ngh du l ch toàn c u c a M -ệ ị ầ ủ ỹ m t 12 tri u Dollar ấ ệ
m i năm do yêu c u khách hàng ph iỗ ầ ả đi n thêm vàoề m t câu h i (tên công ộ ỏ
ty) trong m u đ t vé máy bay c a h . Công ty Ph n m m Marketo cũng ẫ ặ ủ ọ ầ ề
nh n ra r ng m t s tr ngậ ằ ộ ố ườ form không quan tr ng c a h làm tăng chi phíọ ủ ọ
thu hút m i khách hàng ti m năng lênỗ ề kho ngả 25%.
M i m t tr ngỗ ộ ườ form thêm vào làm cho chúng ta m t đi s l ngấ ố ượ khách
hàng ti m năng - vì v y, hãy xem xét xem m i câu h i trong form đóề ậ ỗ ỏ có làm
m t d n đi cácấ ầ khách hàng ti m năng hay không?ề
3) S d ng logic đi u ki n đ rút ng n form.ử ụ ề ệ ể ắ
Logic đi u ki n (hay còn g i là "logic nhánh") là formề ệ ọ ch hi n th m i m tỉ ể ị ỗ ộ
câu h i sau khi ng i dùng đã tr l i câu h i tr c đó.ỏ ườ ả ờ ỏ ướ
K thu t nàyỹ ậ gi m điả đ dài trung bình c a form, đ ng th i cũng gi m t ộ ủ ồ ờ ả ỷ
l h y b đi nệ ủ ỏ ề form b ng cách không hi n th các câu h iằ ể ị ỏ không liên quan
đ n m t s ng i dùng nh t đ nh.ế ộ ố ườ ấ ị
M t trong nh ng khách hàng c a Leadformlyộ ữ ủ s d ng tính năng này đ t oử ụ ể ạ
form yêu c u duy nh t cho vi c truy n thôngầ ấ ệ ề webite c a h . S d ng logicủ ọ ử ụ
đi u ki n, khách truy c p c a h có th bi t chính xác d ch v h đang tìmề ệ ậ ủ ọ ể ế ị ụ ọ
ki m ch b ng cách nh p vào m t lo t các bi u t ng icon.ế ỉ ằ ấ ộ ạ ể ượ
4) Đ t label trên cùng góc trái là t t nh t cho vi c đ c và hoàn thành ặ ở ố ấ ệ ọ
form.
Label đây là câu h i đ t trên nh ng ch c n đi n.ở ỏ ặ ở ữ ỗ ầ ề Các nhà nghiên c u ứ
Tr i nghi m Ng i dùng (UX)ả ệ ườ t i Google nh n th y r ngạ ậ ấ ằ vi c căn ch nh ệ ỉ
các label ở trên cùng góc bên trái giúp tăng th i gian hoàn thành form. ờ
Đây là do b iở c n ít hình nh tr c quanầ ả ự h n. Tuy nhiên, v n có gi i pháp ơ ẫ ả
thay th đ c ch p nh n cho các label đ t trên cùng. Gi i pháp này s ế ượ ấ ậ ặ ở ả ẽ
đ c nh c t i s 16.ượ ắ ớ ở ố
5) Tránh đ t các câu h i c nh nhau.ặ ỏ ở ạ
Các nghiên c u v c ch con m t cho th yứ ề ử ỉ ắ ấ b c c m t c t đ n gi n t t ố ụ ộ ộ ơ ả ố
h n b c c nhi u c t v i các câu h i đ c đ t c nh nhau. Tr ng h p ơ ố ụ ề ộ ớ ỏ ượ ặ ạ ườ ợ
ngo i l duy nh t cho quy t c này là khi yêu c u formạ ệ ấ ắ ầ v ngày, tháng, ề
năm ho c th i gian (gi và phút).ặ ờ ờ
6) Cho m i ng i lí do đ đi n vàoọ ườ ể ề form đó.
T ng t ng r ng chúng taưở ượ ằ có m t form r tộ ấ dài và sẽ ph i m t m t ti ng ả ấ ộ ế
đ hoàn thành nó. S không ai mu n hoàn thànhể ẽ ố nó, ph i không?ả
Sẽ có thể n u nh chúng taế ư t ng choặ ng i đi nườ ề m t chi cộ ế xe Ferrari sau
khi họ hoàn thành form đó. H a h n t ng m t chi c xe Ferrari s cho m i ứ ẹ ặ ộ ế ẽ ọ
ng i đ ng l c đ thúc đ y, dù tr i nghi m có lâuườ ộ ự ể ẩ ả ệ và kém th nào.ế
M t ví d đ n gi n làộ ụ ơ ả BettingExpert đã ki mế thêm 31,54% s l n đăng ký ố ầ
b ng cách thay đ i tiêu đ form và nút g i formằ ổ ề ử đ cho m i ng i th y vì ể ọ ườ ấ
sao m i ng i nên đăng kýọ ườ
7) Nhóm các tr ngườ liên quan thành các ph n ho c các b c.ầ ặ ướ
N u form có nhi u h n 6 tr ng, nên xem xét vi c nhóm các câu h i thành ế ề ơ ườ ệ ỏ
các ph n ho c các b c h p lý.ầ ặ ướ ợ
Các lo i câu h i và tr ngạ ỏ ườ
8) Ch n lo i tr ng có th làm gi m l n nọ ạ ườ ể ả ầ ấ c n thi t đ hoàn thành.ầ ế ể
Khi Microsoft thay đ i giao di n menuổ ệ ch n t t máy tính t danh sáchọ ắ ừ nút
n iconấ có th n vào đ c sang menu dropdown, h nh n th y r ng ít ể ấ ượ ọ ậ ấ ằ
khách hàng t t máy tính c a h h n ch vì h ph i n thêm 2 l n n a.ắ ủ ọ ơ ỉ ọ ả ấ ầ ữ
Khi l a ch n lo i tr ng câu h i đ s d ng, h y c g ng t i u hóa vi cự ọ ạ ườ ỏ ể ử ụ ấ ố ắ ố ư ệ
ít nh n nút nh t có th .ấ ấ ể
9) S d ng m c đ nh thông minh.ử ụ ặ ị
Khi yêu c u khách hàng đi n thông tin v qu c gia ho c s đi n tho i, nênầ ề ề ố ặ ố ệ ạ
đ xu tề ấ m c đ nh qu c gia ho c s máy l cho h d a trên đ a ch IP c a ặ ị ố ặ ố ẻ ọ ự ị ỉ ủ
ng i ng i dùng đó.ườ ườ
10) Bi t khi nào s d ng th radio, checkbox và dropdown.ế ử ụ ẻ
Theo nguyên t c chung, th radio nên dùng khi có nhi u l a ch n và ch ắ ẻ ề ự ọ ỉ
đ c ch n m t l a ch n.ượ ọ ộ ự ọ
Th checkbox ch nên dùng khi có th ch n nhi u h n m t tùy ch n.ẻ ỉ ể ọ ề ơ ộ ọ
N u có th , hãy dùng th checkbox và th radio nhi u h nế ể ẻ ẻ ề ơ thay vì th ẻ
dropdown vì nó s ít ph c t p h n. Thông th ng, ch s d ng th ẽ ứ ạ ơ ườ ỉ ử ụ ẻ
dropdown khi có nhi u h n 6 l a ch n.ề ơ ự ọ
11) Th radio nên đ t theo chi u d c.ẻ ặ ề ọ
Th radio (và th checkbox) khi đ t theo chi u d c x lý nhanh h n so v i ẻ ẻ ặ ề ọ ử ơ ớ
đ t theo chi u ngang.ặ ề
12) Không nên chia các tr ng ra khi yêu c u đi n s đi n tho i hay ườ ầ ề ố ệ ạ
ngày sinh.
Các tr ng này khi b chia ra làmườ ị ng i dùng b t ti n h nườ ấ ệ ơ khi ph i di ả
chuy n và nhi u thêm. Thay vì th , t t h n làể ề ế ố ơ nên đ vào m t tr ng v i ể ộ ườ ớ
format ch d n rõ ràng.ỉ ẫ
Khi chia tr ng, dù có giúp ng i dùng t chuy n sang tr ng ti p theo ườ ườ ự ể ườ ế
sau khi khách hàng đi n xong tr ng tr c đó, vi c chia tr ng làm áp đ t ề ườ ướ ệ ườ ặ
vi c xác th c nghiêm ng t h n, làm phát huy ng c l i tác d ng. Ví d , ệ ự ặ ơ ượ ạ ụ ụ ở
hình trên, vi c chia tr ng này làm gây khó hi uệ ườ ể trong vi c đi n s đi n ệ ề ố ệ
tho i cho nh ng ng i dùng ng i ngoài n c M .ạ ữ ườ ườ ở ướ ỹ
13) Gi i thích rõ ràng lý doả yêu c uầ thông tin nh y c m.ạ ả
M i ng i th ng c m th y lo ng i v quy n riêng t và b o m t thông ọ ườ ườ ả ấ ạ ề ề ư ả ậ
tin c a mình. Khi b t bu c ph i yêu c u h v thông tin nh y c m, ủ ắ ộ ả ầ ọ ề ạ ả
luôn ph i gi i thích lý do vì saoả ả c n thông tin c a h b ng cách chú thích ầ ủ ọ ằ
thông tin đó d i tr ng c a nó.ở ướ ườ ủ
14) Khi yêu c u v đ a ch , s d ng tra c uầ ề ị ỉ ử ụ ứ mã vùng (post code/zip
code) đ gi m m cể ả ụ nh p tr ng.ậ ườ
Khi yêu c u ng i dùng nh p đ a ch vào, cách t t nh t là h i h v s ầ ườ ậ ị ỉ ố ấ ỏ ọ ề ố
nhà và mã vùng c a h , t đó s d ng d ch v tra c u đ g i ý đ a ch .ủ ọ ừ ử ụ ị ụ ứ ể ợ ị ỉ
15) S d ng placeholder chính xác.ử ụ
Placeholder có th hi u là ph n ch m trong đo n m u ta c n đi n. ể ể ầ ữ ờ ở ạ ẫ ầ ề
Nh chúngư ta nhìn th y d i thì placeholder có ghi là "Your name", "Yourấ ở ướ
e-mail address", "Subject", "Mesage".
có thể bạn quan tâm
HỢP ĐỒNG LẮP RÁP THIẾT BỊ KHOA HỌC KỸ THUẬT
3
542
252
Mẫu hợp đồng
3
(New)
Những thủ thuật hay cho thiết bị Android
7
656
162
Tài liệu CNTT khác
7
(New)
Cách chọn laptop để sử dụng thiết kế đồ họa và kỹ thuật
6
980
258
Cơ sở dữ liệu
6
(New)
Luận văn: Lập trình kinh tế kỹ thuật và thiết kế thi công dây chuyền l...
116
761
355
Thạc sĩ cao học
116
(New)
LẬP LUẬN KINH TẾ KỸ THUẬT VÀ THUYẾT MINH DÂY CHUYỀN CÔNG NGHỆ, THIẾT K...
116
1.648
914
Kỹ thuật
116
(New)
Luận văn tốt nghiệp: Thiết lập những giải pháp và các yếu tố ảnh hưởng...
44
888
299
Kinh tế quản lý
44
(New)
Tổng hợp thủ thuật sử dụng ứng dụng ghi chú Evernote trên thiết bị di...
11
1.027
271
Tài liệu CNTT khác
11
(New)
Luận văn: nghiên cứu, tìm hiểu, đánh giá các nguyên lý, chiến lược và...
79
859
311
Thạc sĩ cao học
79
(New)
thông tin tài liệu
Dưới đây là 58 thủ thuật về thiết kế form thông qua việc xem xét vô số mẫu thiết kế, và nghiên cứu việc đã đầu tư mạnh của các công ty vào tối ưu hóa form.
Mở rộng để xem thêm
từ khóa liên quan
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
×
