it-swarm-vi.tech

Cách tốt nhất để làm nổi bật trường Bắt buộc trên biểu mẫu web trước khi gửi là gì?

Điều này có vẻ chủ quan, và nó là; một khách hàng của tôi muốn tôi làm nổi bật các trường bắt buộc trên biểu mẫu web trong ứng dụng của họ bằng dấu hoa thị màu đỏ và tôi đang tìm kiếm một giải pháp thay thế vì các dấu sao màu đỏ thường có nghĩa là có lỗi với tôi.

Làm cách nào để cho người dùng biết trường nào được yêu cầu? (Một câu trả lời, xin vui lòng.)

CẬP NHẬT : Điều này là để chỉ ra trường nào là bắt buộc trước khi xác thực/đăng lại xảy ra.

46
Ryan Shripat

Vì 95% tất cả các trường được yêu cầu tại techinsurance.com, quyết định của tôi chỉ đơn giản là sử dụng chữ đậm để chỉ ra rằng một trường là bắt buộc và viết Word (tùy chọn) bên cạnh các trường tùy chọn để giảm sự lộn xộn.

ví dụ.

Tên

Họ

Số điện thoại doanh nghiệp

Số điện thoại di động (tùy chọn)

Và có lẽ cũng quan trọng là chính các thông báo lỗi. Tôi đã làm cho chúng rõ ràng nhất có thể ...

trường bắt buộc ...

alt text

có lỗi ...

alt text

Những quyết định này được đưa ra sau nhiều năm có một trang web với các dấu sao đỏ bán truyền thống để chỉ ra một trường bắt buộc. Những dấu sao này làm việc hầu hết thời gian. Vấn đề là khi có lỗi xác nhận. Một số trang của chúng tôi có thể khá dài và các lỗi xác thực màu đỏ sẽ không đủ nổi bật trên trang khi nó đã bị lộn xộn với các dấu sao màu đỏ. Tôi biết điều này bởi vì đôi khi mọi người sẽ thất vọng đủ để gọi cho chúng tôi về nó. Nhưng tất cả các dấu hiệu cho thấy thiết kế mới (ở trên) đã khắc phục vấn đề.

57
Steve Wortham

Tôi cảm thấy rằng cách tốt nhất để làm điều này thực sự là đánh vần từ "bắt buộc" sau trường nhập liệu. Tình cảm này cũng được phản ánh trong Thiết kế biểu mẫu web của Luke Classicalblewski: http://www.lukew.com/ff/entry.asp?725

Mặc dù liên kết ví dụ nói về các trường tùy chọn thay vì các trường bắt buộc, tôi tin rằng hiệu trưởng vẫn như cũ - người dùng thích viết nó cho họ thay vì bao gồm các chỉ số trực quan.

Ngoài ra, một cái gì đó để xem xét có thể chỉ ra các trường là các tùy chọn thay vì các trường được yêu cầu. Đối với tôi, cái nào là ngoại lệ là cái cần được lưu ý. Ví dụ: nếu bạn có 10 trường và 8 trường trong số đó là bắt buộc, thay vì viết "Bắt buộc" cho 8 trường, hãy viết "Tùy chọn" cho 2 trường hợp ngoại lệ. Nhưng nếu chỉ có 2 là bắt buộc, hãy viết "Bắt buộc" bởi 2 người đó, vì chúng là ngoại lệ.

9
RussellUresti

Câu hỏi này có thể có nhiều vấn đề hơn bạn có thể tưởng tượng đầu tiên.

Ví dụ: một số áp phích đã đề xuất sử dụng dấu hoa thị để biểu thị "bắt buộc", vấn đề với điều này là một số trang web thực sự sử dụng ngược lại và đặt dấu hoa thị bên cạnh các trường không bắt buộc. Người dùng không biết rõ dấu hoa thị là trường "bắt buộc" hay trường tùy chọn bằng cách liếc nhìn và phải điều tra thêm, phá vỡ dòng chảy của họ, làm họ thất vọng về quy trình biểu mẫu và trong một số trường hợp có thể dẫn đến việc từ bỏ biểu mẫu cùng với nhau.

RussellUresti trả lời nhắc lại nghiên cứu của Luke Christopherblewski trong "Thiết kế mẫu web" để viết "bắt buộc" bên cạnh các trường bắt buộc cũng là (theo kinh nghiệm 10 năm của tôi), cách tiếp cận mang lại thông lượng cao nhất trên các biểu mẫu và dẫn đến ít nhầm lẫn nhất.

Liên quan và một cái gì đó khác để xem xét, nếu một trường biểu mẫu là tùy chọn, bạn có thể tự sử dụng logic để nhận câu trả lời mà không cần hỏi người dùng không?

Ví dụ: nếu bạn cần biết người dùng là Nam hay Nữ, bạn có thể suy ra câu trả lời trong một số trường hợp theo tiêu đề họ chọn cho tên của họ (miss, mrs, v.v ... có nghĩa là nữ) và xóa câu hỏi khỏi người dùng.

Một điểm khác cần xem xét là đối với những thứ như trường địa chỉ, nếu bạn có thể hỏi mã bưu điện và thực hiện tra cứu mã bưu điện, chỉ hiển thị các trường địa chỉ nếu người dùng chọn nhập địa chỉ theo cách thủ công hoặc nếu tra cứu mã bưu điện không thành công, bạn có thể tránh được rất nhiều dữ liệu tùy chọn điều đó có thể làm cho biểu mẫu trông dài hơn thực tế và khiến người dùng rời đi.

Theo kinh nghiệm của tôi rất nhiều thời gian nếu một trường là tùy chọn, có một trường hợp lớn để loại bỏ hoàn toàn trường đó. Rõ ràng điều này không thực tế mọi lúc, nhưng một số trường hợp có thể và sẽ giúp làm giảm sự lộn xộn thị giác, cho bất kỳ cách tiếp cận nào bạn quyết định thực hiện.

4
Vincent Pickering

Một giải pháp khác là chia biểu mẫu thành hai phần, đặt tất cả các trường bắt buộc lại với nhau, sau đó dán nhãn cho toàn bộ phần "Bắt buộc".

3
Chase Seibert

Cách tốt nhất mà tôi đã tìm thấy là đặt một dấu sao bên trong và căn phải.

Example of UX

3
Nijikokun

Đây chắc chắn là vị trí sai để đăng bài này, nhưng đừng bỏ qua một định nghĩa mở rộng về "tính bắt buộc" - nghĩa là khi yêu cầu của một yếu tố là điều kiện sử dụng (lựa chọn, điền, v.v.) của một yếu tố khác.

Ví dụ, trường A là tùy chọn. Tuy nhiên, nếu trường A thực sự được điền bởi người dùng cuối, thì trường B là bắt buộc.

Làm thế nào chúng ta sẽ chú thích hoặc nhóm các trường phần tử để chỉ ra điều đó? Chúng ta có nên không?

Tái bút Hãy nhớ rằng màu sắc một mình là một kênh không đáng tin cậy để truyền tải thông tin. Một số người trong chúng ta không thể dễ dàng phân biệt giữa màu đỏ và màu xanh lá cây, và màu đỏ có thể truyền đạt những điều khác nhau đến những người thuộc các nền văn hóa khác nhau.

3
CSSian

Dấu hoa thị màu đỏ thường được sử dụng theo yêu cầu, vì vậy khách hàng của bạn thực sự không sai. Nếu bạn chọn một màu khác, chẳng hạn như màu cam hoặc một cái gì đó phù hợp với thiết kế trang web, điều đó sẽ ổn.

2
James Buckley

Tôi một phần với triết lý dấu hoa thị đơn giản.

Trên một ghi chú liên quan, đây là một bài đăng tôi đã viết một lúc trước với một ví dụ về việc tạo các dấu lỗi tùy chỉnh cho các trường được yêu cầu và không được điền. Nó khá đặc thù về công nghệ (Rails, Formtastic, jQuery), nhưng khái niệm này có thể dễ dàng thích nghi.

http://thestrake.com/post/459205965/show-n-tell-friday-custom-form-error-markers

1
blackant

Đầu tiên, vì tôi cho rằng bạn là chuyên gia về UX, khách hàng của bạn không nên nói cho bạn biết cách giải quyết các vấn đề về UX, họ sẽ tìm đến bạn với vấn đề cần giải quyết chứ không phải giải pháp.

Nghĩ về nó từ quan điểm của người dùng, chúng ta không thể cho rằng người dùng biết dấu hoa thị nghĩa là gì. Khi nghi ngờ, hãy đánh vần rõ ràng nhất có thể bằng ngôn ngữ viết. Tôi đã thấy dấu hoa thị được sử dụng ngày càng ít trên web và nó thường được theo sau bởi một lời giải thích ở cuối trang khi được sử dụng. Một lời giải thích đơn giản hơn là chỉ sử dụng 'Bắt ​​buộc'. Trình đọc màn hình cũng sẽ chọn cái này và nó sẽ làm cho trang web của bạn dễ truy cập hơn.

Bạn cũng đã nghĩ về việc áp dụng các nguyên tắc công bố tiến bộ trong kịch bản này? Các trường không được yêu cầu thậm chí có trên màn hình - chúng có thể bị ẩn hoặc hiển thị cho người dùng ở giai đoạn sau không? Theo cách này, có quá ít thông tin và tất cả các trường cần thiết được trình bày, do đó loại bỏ nhu cầu về 'yêu cầu' hoàn toàn. Một số thông tin khác về tâm lý học đằng sau lời giải thích này: https://www.nngroup.com/articles/proTHERive-disclenses/

0
lg365

Tôi đã thấy các bảng tính khả dụng có thể ra lệnh đối diện - rằng tất cả các trường là bắt buộc, trừ khi được đánh dấu bằng văn bản (optional). Nếu các trường bắt buộc không được điền vào sau khi cố gắng thực hiện, chúng phải được đánh dấu bằng một văn bản giải thích điều gì sai.

0
awe

Giống như hầu hết các chủ đề về khả năng sử dụng, nó thực sự phụ thuộc - chủ yếu vào số lượng trường được bao gồm trong biểu mẫu của bạn và tần suất của các trường bắt buộc trong biểu mẫu của bạn

Tôi thường thích một dấu sao màu đỏ đơn giản liền kề với mỗi trường bắt buộc và sau đó là chú thích "* - trường bắt buộc".

Ngoài ra, tôi muốn làm nổi bật viền trường màu đỏ nếu trường vẫn trống hoặc không hợp lệ sau một sự kiện onBlur(). Làm nổi bật tương tự nếu người dùng cố gắng gửi biểu mẫu mà không điền vào tất cả các trường bắt buộc. Làm nổi bật viền biến mất trên một sự kiện javascript onFocus().

0
wnathanlee