Những nghiên cứu về việc di chuyển của mắt khi thiết kế mẫu form chỉ ra những gì mắt sẽ tập trung vào khi chúng ta đối diện với một màn hình đầy thông tin. Nghiên cứu cũng cho thấy designer ngoài việc thiết kế đẹp còn cần phù hợp với thói quen sử dụng của người dùng (usability).

 

 

Hướng dẫn #5 – Đừng sử dụng dấu hoa thị, hãy dùng các ô trống mang tính chất lựa chọn rõ ràng

Luôn luôn có sự tranh cãi giữa việc có sử dụng dấu hoa thị hay không khi muốn nhấn mạnh các ô mang tính chất bắt buộc, hay là việc sử dụng từ ‘optional’ khi muốn ngược lại.

 

Cả eBay và Hotmail sử dụng dấu hoa thị cho các ô bắt buộc, trong khi Googlemail không có bất kỳ hướng dẫn nào, điều này có nghĩa là tất cả các ô đều bắt buộc phải đc điền vào. Yahoo đặc biệt hơn khi sử dụng chữ in nghiêng để chỉ các ô lựa chọn, ví dụ như “e-mail dự phòng.

 

”Không ai trong số các thí sinh để ý đến các ô mang tính chất chọn lựa của Yahoo bởi vì chữ in nghiêng không làm mình nổi bật hơn so với các nhãn khác. Dữ liệu cũng cho thấy rằng không có thí sinh nào chú ý đến dấu hoa thị và dấu hiệu được đặt trên đầu trang (xem Figure 5, cho thấy không có sự cố định mắt nào cả).

 

Các thí sinh có xu hướng điền vào tất cả các ô. Một số họ đề cập đến việc họ chỉ để ý thêm một chút đến các dấu hoa thị và các ký hiệu tuỳ ý không bắt buộc khi họ không muốn cung cấp thông tin rõ ràng về một vấn đề gì hoặc khi họ nghĩ rằng câu hỏi là không cần thiết.

 

“Tôi không để ý tới nó (có dấu hoa thị hay không) khi tôi nghĩ câu hỏi là không quan trọng.

 

 

 

Figure 5: Bản đồ nhiệt khi nhìn vào Hotmail cho thấy thí sinh không hề có bất kỳ sự chú ý nào đối với các dấu hoa thị hướng dẫn (cho ô được yêu cầu)

 

Người ta điền form đa phần đều điền hết mọi ô. Nếu có thể, hãy hỏi người dùng thông tin nào thật sự cần thiết. Nếu chỉ vì mục đích tiếp thị hoặc một vài lý do nào khác mà các ô mang tính lựa chọn được thêm vào, chúng tôi đề nghị bạn nên đánh dấu những ô tuỳ ý này rõ ràng thay vì chỉ ra đâu là những ô bắt buộc.

 

Từ kinh nghiệm đi trước trong việc quan sát hàng trăm ngàn cuộc kiểm tra, chúng tôi thấy rằng không phải bất kỳ thí sinh nào cũng hiểu được ý nghĩa của dấu hoa thị.

 

Cho nên, chúng tôi khuyên bạn nên đặt dòng chữ “tuỳ ý” bên trong textbox và dùng font chữ màu xám, xem Figure 6. Trong trường hợp này, người dùng không thể nào bỏ qua được và không cần phải di chuyển mắt nhiều hơn để đọc chúng. Chúng tôi vẫn đang thử mẫu thiết kế này với người sử dụng.

 

Ghi chú nhanh:

 

Chỉ yêu cầu những thông tin cần thiết. Nếu như các ô “tuỳ ý” cần được sử dụng, hãy ghi rõ ràng thay vì sử dụng dấu hoa thị cho các ô mang tính bắt buộc.

 

 

 

Figure 6: Đặt cụm từ “tuỳ ý” vào trong textbox để chỉ rõ những ô mang tính chất lựa chọn.

 

Hướng dẫn #6 – Sử dụng ô trống đơn dành cho chuỗi dãy số hoặc mã vùng.

Trong các cuộc kiểm tra người dùng chúng tôi đã thực hiện trong vòng vài năm qua, chúng tôi thấy rằng các thí sinh thường dễ bị lúng túng và không chắc chắn cách điền vào những ô trống có bao gồm chữ số, ví dụ như mã vùng hoặc số điện thoại.

 

eBay có hai ô trống dành cho số điện thoại, bao gồm một mã quốc tế. Mặc dù có một thí dụ được đưa ra ở bên dưới ô trống, nhưng nó cũng không hẳn rõ ràng lắm khi điền số điện thoại vào trong ô. Như được đưa ra ở trong bản đồ nhiệt độ dành cho eBay ở Figure 7, các điểm màu đỏ hay “điểm nóng” cho biết người dùng nhìn nhiều nhất vào ô “số điện thoại”.

 

“Bạn cảm thấy điền số điện thoại vào ô trống như thế nào?”

“Không thoải mái cho lắm.”

 

 

 

Figure 7: Bản đồ nhiệt độ của eBay cho thấy thí sinh nhìn nhiều nhất vào các ô điền thông tin số điện thoại.

 

Có một số cách để né điều này. Một trong những nguyên tắc vàng của chúng tôi – đơn giản là tốt hơn. Một field đơn độc thường có tác dụng hơn là hai hoặc nhiều field.

 

Một điều quan trọng khác bạn cần chú ý là hệ thống xác nhận thông tin tốt thí dụ như việc phân tích các thông tin dạng chuỗi để xác định người sử dụng đã điền thông tin hợp lý hay chưa. Người dùng đã phần không chắc chắn họ có nên để một khoảng trống trong phần mã vùng hay không.

 

Một bản thiết kế tốt nên chấp nhận cả 2 điều kiện, có hoặc không có khoảng trống. Nếu không thì, đơn giản là một message thông báo lỗi không hợp chuỗi sẽ xuất hiện.

 

Số điện thoại cũng là một loại thông tin đòi hỏi phải khéo léo. Các mã vùng quốc tế có thể được viết là ‘00’ hoặc ‘+’. Sự hướng dẫn rõ ràng nên dùng format nào cần được đưa ra. Hơn nữa, cá nhân nhớ được số điện thoại của mình theo từng cách riêng.

 

Ví dụ, đối với một số điện thoại ở Anh, 07812345678, người ta chỉ nhớ theo format 3-4-4 (078 1234 5678) hoặc là 5-3-3 (07812 345 678). Các ô trống được đưa ra để điền thông tin theo 2 dạng format trên là tốt nhất.

 

Ghi chú nhanh:

 

Sử dụng một field duy nhất cho dãy số và mã vùng, cho phép nhập dữ liệu theo nhiều cách. Nếu không, sử dụng một hệ thống xác nhận thông tin hợp lý và xuất thông báo lỗi nếu như thông tin bị nhập sai.

 

Hướng dẫn #7 – Tránh chồng chất nhiều ô cùng lúc. Nếu cần, hãy đảm bảo thông điệp quan trọng phải được làm nổi bật (làm rõ).

Khi người dùng điền vào một mẫu form, họ thường muốn tập trung vào nhiệm vụ của mình, điền xong nhanh chóng và tiếp tục với nhiệm vụ chính của họ – mua một món hàng nào đó hoặc đăng ký một dịch vụ.

 

Việc đặt ra bất kỳ thông tin thêm nào không quan trọng yêu cầu người sử dụng phải đọc nó, có thể làm họ chậm lại trong việc điền form và điều này cần được tránh.

 

Tuy nhiên, nếu như có một thông điệp quan trọng cần đường chuyển tải đến cho người sử dụng, nó cần phải được làm nổi bật (highlight – tô bóng) và nhìn bắt mắt hơn để người dùng chú ý và không bỏ qua nó.

 

Như được trình bày trong Figure 8a, thí sinh hiếm khi nhìn vào khu vực thông tin nằm ở đầu trang Hotmail. Họ bỏ qua phần này hoàn toàn và điền thẳng vào phần form ở bên dưới.

 

Tuy nhiên, đối với trang eBay, thí sinh không chỉ đọc đoạn thông điệp ở trên đầu form, mà còn đọc message box ở bên cột tay phải (xem Figure 8b). Cả hai thông điệp này đều thu được sự chú ý của thí sinh bởi vì nó được tô bóng lên đặt trong một cái box và được sắp xếp xuyên suốt và song song cùng với mẫu form.

 

Ghi chú nhanh:

 

Để người dùng tập trung nhiệm vụ của họ và tránh sự phân tâm. Nếu một thông điệp mang tính chất quan trọng và người sử dụng nên đọc nó, hãy đảm bảo nó được làm nổi bật để thu đượ sự chú ý của người dùng.

 

 

 

Figure 8: (a) Bản đồ nhiệt độ cho Hotmail và (b) cho eBay cho thấy thí sinh thích đọc thông điệp được làm nổi bật và đặt bên trong hoặc song song với form.

 

Hướng dẫn #8 – Thận trọng khi thêm vào phần phản hồi trực tuyến.

Yahoo thường cung cấp phản hồi tức thì mỗi lần người dùng điền vào một ô bằng cách show một loạt các ô tick ở mỗi cuối ô. Mỗi cái tick thường biến mất sau vài giây (trong Figure 9). Đại đa số các thí sinh góp ý rằng họ không hề chú ý đến nó. Tuy nhiên, họ bị trộn lẫn giữa các lựa chọn khi đánh dấu tick theo cách này.

 

Một số họ đưa ra các góp ý tích cực, trong khi một số khác nghĩ rằng chúng làm họ phân tâm.

 

“Dấu tick hữu dụng đấy. Chúng giảm những thứ rắc rối khi phải kiểm tra lại những gì tôi đã nhập vào trong ô.”

 

Phản hồi trực tuyến thường được sử dụng để trình bày thông tin cần được truyền tải khẩn cấp và yêu cầu người sử dụng phải chú ý ngay lập tức đến nó.

 

Ghi chú nhanh:

 

Sử dụng phản hồi trực tuyến cẩn thận và thích đáng.

 

 

 

(Chú thích trong khung đen) [Dấu tick xuất hiện vài giây khi nhập đúng thông tin; Thông điệp báo lỗi hiện lên khi nhập thông tin bị sai hoặc không cung cấp thông tin]

Figure 9: Ảnh chụp nhanh của Yahoo, cung cấp phản hồi trực tuyến (dấu tick hoặc hộp thông báo lỗi) ở mỗi cuối ô.

 

Hướng dẫn #9 – Để tips nằm ở một bên (nếu có thể) của ô liên quan.

eBay và Googlemail đều có Hướng dẫn nằm bên dưới ô, trong khi Yahoo thì có hướng dẫn trực tuyến động (tick hoặc error messages) nằm ở cuối mỗi ô. Hotmail, ngược lại, có hướng dẫn rõ ràng và nằm ở một bên (động).

 

Nói chung, thí sinh ưa chuộng hướng dẫn nằm ở cuối ô hơn là nằm ở bên dưới ô.

 

“Tôi thích chúng nằm ở cuối hơn, như thế dễ đọc.”

 

Hướng dẫn nằm ở dưới ô thường dễ làm xáo trộn khi đọc nhất là khi chúng được ghi bằng font chữ màu đen, ví dụ như của Googlemail.

 

“Nhìn cứ như có một đống chữ viết tay dính lại với nhau, rất lộn xộn.”

 

Yahoo và Hotmail đều có hướng dẫn nằm ở cuối ô. Tuy nhiên, điều thú vị ở đây là thí sinh lại đọc hướng dẫn của trang Hotmail nhiều hơn của Yahoo (so sánh giữa bản đồ nhiệt độ dành cho Yahoo và Hotmail trong Figure 10).

 

Hotmail có một layout gọn gàng hơn khi các ô có cùng kích cỡ và được căn lề, theo cả chiều dọc và chiều ngang. Ngược lại thì, Yahoo có một sự pha trộn nhiều hơn giữa các ô lớn nhỏ khác nhau và có hộp sổ (combo box) với kích cỡ khác nhau, và chúng không được căn lề. Cho nên khi hướng dẫn xuất hiện ở cuối mỗi ô, người sử dụng thường dễ dàng bỏ qua hoặc đọc sót.

 

 

 

(chú thích khung đen)[Hướng dẫn xuất hiện ở một bên khi đang để nháy chuột vào ô textbox; Thí sinh đọc hướng dẫn trên trang Hotmail nhiều hơn trên trang Yahoo]

Figure 10: Bản đồ nhiệt độ cho thấy thí sinh chú ý nhiều hơn vào hướng dẫn trực tuyến của Hotmail (nằm ở cuối mỗi ô) so với hướng dẫn trực tuyến của Yahoo

 

 

Hơn nữa, khi cung cấp hướng dẫn cho mỗi ô, việc đảm bảo chúng nằm trong cùng ô tương ứng về nội dung là rất cần thiết.

 

Ví dụ, eBay cung cấp hướng dẫn cách chọn một password an toàn (yêu cầu nhiều hơn 6 chữ số hoặc ký tự). Tuy nhiên, nó lại được đặt nằm dưới textbox “nhập lại password của bạn”. Thay vào đó, nó nên được show khi người sử dụng lần đầu tiên nhập password vào trong ô, cùng với ô “Tạo password của bạn” (xem Figure 11)

 

Ghi chú nhanh:

 

Nếu có thể, hãy đặt tips nằm kế bên ô có liên quan và đảm bảo các ô được căn lề cẩn thận hợp lý.

 

 

 

Figure 11: Tips của Ebay về phần password nên được đặt nằm ở dưới ô “Tạo password của bạn” thay vì dưới ô “Nhập lại password của bạn”

 

Hướng dẫn #10 – Nói cho người sử dụng biết còn bao nhiêu bước nếu như đây là form bao gồm nhiều trang

 

Chúng tôi cảm thấy việc lăn chuột để di chuyển đến nơi cần đến dễ dàng hơn việc xây dựng thêm nhiều trang nhỏ trong cùng một form. Mặc dù tất cả form chúng tôi kiểm tra trong cuộc nghiên cứu về sự di chuyển của mắt này đều có các ô cùng nằm trên một trang, các thí sinh góp ý đặc biệt rằng họ muốn biết là còn bao nhiêu bước và họ sẽ phải điền gì tiếp theo khi phải điền vào mẫu form có nhiều trang.

 

Ghi chú nhanh:

 

Cung cấp cho người dùng một đoạn nhỏ thông báo quá trình điền form của họ đang ở bước nào và cho họ thấy họ cần phải làm gì để hoàn tất quá trình đăng ký hoặc quá trình mua hàng.

 

Một số hướng dẫn khác:

Chúng tôi có 4 nguyên tắc vàng chưa đề cập đến ở trên:

 

– Luôn nhắc nhở người sử dụng họ muốn điều gì trước tiên, sau đó hãy hỏi họ muốn tin tưởng vào hình thức nào (ví dụ như yêu cầu của các quảng cáo (xin hãy điền vào các phần dưới đây)

 

– Sử dụng cookie (log ngắn hạn) để nhớ thông tin người sử dụng (không phải password) để họ có thể tiết kiệm thời gian không cần phải điền đi điền lại một mẩu thông tin.

 

– Không bao giờ sử dụng các câu dạng phức hoặc quá pháp lý để làm người dùng lúng túng, ví dụ như khi hỏi người sử dụng có đồng ý nhận newsletter hằng tháng không. Người dùng không thích những công ty nào cố tình lừa họ hoặc khiến họ bối rối khi tiết lộ thông tin cá nhân.

 

Tổng kết:

Người sử dụng không thích bị đánh lừa bằng thị giác khi điền mẫu form. Họ thường muốn điền nó xong nhanh chừng nào tốt chừng đó. Cho nên điều thiết yếu đặt ra là mẫu form cần được thiết kế gọn gàng và hợp lý.

 

Người sử dụng không ngại phải điền một form dài nhưng dễ hiểu và chặt chẽ hơn là phải điền một cái form ngắn, dễ gây náo loạn thị giác và phức tạp.

 

 

nguyenducluan dịch từ cxpartners

Comments

comments