Giới thiệu
Hoàn thành bảng câu hỏi là một nhiệm vụ cốt lõi đối với hầu hết nhân viên chăm sóc sức khoẻ sử dụng ứng dụng sức khoẻ trên thiết bị di động.
Việc nhập dữ liệu có thể khó khăn và xảy ra lỗi. Mục tiêu của chúng tôi với thư viện Thu thập dữ liệu có cấu trúc (SDC) và nguyên tắc thiết kế là giúp bạn cải thiện trải nghiệm người dùng khi nhập dữ liệu và chất lượng của dữ liệu đã thu thập.
Phần này trình bày 4 chủ đề:
Bố cục và điều hướng
Bố cục phân trang và cuộn dài
![So sánh bố cục cuộn dài và bố cục phân trang. Cuộn và kéo dài có 3 câu hỏi trên một trang, trong khi phần phân trang có một câu hỏi.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/comparinglayouts.png?hl=vi)
SDK FHIR của Android có 2 tuỳ chọn bố cục để bạn lựa chọn:
- Cuộn dài (mặc định)
- Được đánh số trang
Bảng câu hỏi cuộn dài hiển thị tất cả các câu hỏi trên một trang và người dùng chuyển đến từng câu hỏi bằng cách cuộn.
Bảng câu hỏi được phân trang sẽ hiển thị nội dung trên các trang riêng biệt. Các câu hỏi hoặc trường nhập dữ liệu liên quan có thể được nhóm lại với nhau trên một trang. Nút quay lại và nút tiếp theo được neo vào cuối trang để di chuyển giữa các trang.
Tìm hiểu cách phân trang bảng câu hỏi trên GitHub
Bạn nên chọn bố cục nào?
Mỗi lựa chọn bố cục đều có ưu và nhược điểm riêng. Dưới đây là một số thuộc tính của từng loại bố cục để bạn xem xét khi lựa chọn bố cục sẽ sử dụng.
Cuộn lâu | Được đánh số trang | |
---|---|---|
Tốc độ di chuyển | Điều hướng nhanh hơn | Điều hướng chậm hơn |
Điều hướng chính xác | Điều hướng kém chính xác hơn | Điều hướng chính xác hơn |
Tập trung vào câu hỏi sau khi chuyển nhiệm vụ | Khó điều chỉnh lại sau khi bị gián đoạn | Dễ dàng xác định lại hướng dẫn sau khi bị gián đoạn |
Hoàn thành bảng câu hỏi kỹ thuật số sau khi truy cập (sao chép từ giấy) | Sao chép từ giấy dễ dàng hơn | Khó sao chép từ giấy hơn |
Màn hình nhỏ | Tệ đối với màn hình nhỏ | Phù hợp hơn với màn hình nhỏ |
Hỗ trợ tiếp cận | Tệ hơn về khả năng hỗ trợ tiếp cận. Khó điều hướng. | Cải thiện khả năng hỗ trợ tiếp cận. Các màn hình rời rạc có thể được xử lý bằng trình đọc màn hình, tính năng chuyển văn bản sang lời nói và các công nghệ khác. |
Không gian để xem hướng dẫn và nội dung giải thích | Không cần hướng dẫn và hướng dẫn | Tốt hơn để có hướng dẫn và hướng dẫn |
Cuộn lâu
![Bảng câu hỏi có các con số ở trước tiêu đề câu hỏi.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/numberedquestionnaire.png?hl=vi)
Đánh số các câu hỏi để dễ thao tác hơn theo một bố cục trang duy nhất.
![So sánh kích thước phông chữ của tiêu đề câu hỏi. Cuộn dài là 16px. Được phân trang là 28 px.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/adjustfont.png?hl=vi)
Thu nhỏ kích thước phông chữ của tiêu đề câu hỏi khi sử dụng thanh cuộn dài để nhiều nội dung hơn hiển thị trên màn hình. Ví dụ: Cuộn dài là 16px. Được phân trang là 28 px.
Phân trang
![Câu hỏi được phân trang "Họ sống ở tiểu bang nào?" kèm theo các lựa chọn trong trình đơn thả xuống.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/onequestion.png?hl=vi)
Bàn phím, trình đơn thả xuống và các thành phần khác chiếm không gian trên trang, vì vậy, hãy đặt một câu hỏi trên mỗi trang.
![Trường địa chỉ được phân trang, trong đó trường dưới cùng không hiển thị trên màn hình.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/hidecontent.png?hl=vi)
Nội dung phải hiển thị trong màn hình đầu tiên.
![Nhiều trường văn bản được nhóm lại thành một câu hỏi. Tiêu đề câu hỏi là
người liên hệ thay thế, với tên, mối quan hệ và số điện thoại
làm các trường nhập dữ liệu.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/groupcontent.png?hl=vi)
Ví dụ: Ba trường văn bản này đều liên quan đến thông tin thay thế của người liên hệ, nên được nhóm cùng nhau trên một trang.
![Các câu hỏi không liên quan trên cùng một trang. Câu hỏi đầu tiên là về phạm vi bảo hiểm và câu hỏi thứ hai là các tình trạng sức khoẻ trước đây.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/unrelatedgroup.png?hl=vi)
Tránh nhóm nội dung không liên quan vào một trang để tránh gây nhầm lẫn.
Chỉ báo tiến trình
Chỉ báo tiến trình cho biết tiến trình đạt được trong một bảng câu hỏi.
Đưa chỉ báo tiến trình vào các bảng câu hỏi dài để giúp người dùng di chuyển và xem tiến trình. Chỉ báo tiến trình cho biết vị trí trong bảng câu hỏi và thời gian còn lại để hoàn thành.
![Chỉ báo tiến trình nằm ở trên cùng, bên dưới tiêu đề của bảng câu hỏi.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-scroll.png?hl=vi)
Vị trí ở trên cùng phía trên câu hỏi và điểm liên kết để luôn hiển thị ngay cả khi cuộn.
![Chỉ báo tiến trình nằm ở dưới cùng, phía trên các nút điều hướng.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-paginated.png?hl=vi)
Có thể đặt ở dưới cùng, phía trên nút quay lại và nút tiếp theo. Với bố cục này, bạn cũng có thể hiển thị trang mà người dùng đang truy cập.
Nút điều hướng
Các nút điều hướng (quay lại, tiếp theo) được neo ở cuối bảng câu hỏi. Trong thao tác cuộn vô hạn hoặc trên trang cuối cùng của một câu hỏi được phân trang, nút tiếp theo sẽ có nhãn là Gửi.
Giữ các nút ở một vị trí nhất quán và luôn sử dụng các nút đang hoạt động được gắn nhãn theo thao tác của các nút đó, chẳng hạn như quay lại và tiếp theo.
![Các nút điều hướng đang hoạt động. Nút tiếp theo có màu xanh dương.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/active-buttons.png?hl=vi)
Luôn cho thấy các nút đang hoạt động, ngay cả khi biểu mẫu chưa hoàn chỉnh. Khi nhấn vào tiếp theo, một hộp thoại bật lên sẽ xuất hiện kèm theo hướng dẫn cách hoàn thành các trường bị thiếu hoặc lỗi xác thực.
![Nút Tiếp theo không hoạt động. Nút tiếp theo có màu xám.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/inactive-buttons.png?hl=vi)
Các nút không hoạt động khiến người dùng khó biết cách khắc phục vấn đề.
![Nút tiếp theo chỉ có biểu tượng mũi tên và không có nội dung mô tả bằng văn bản.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/icon-buttons.png?hl=vi)
Tránh các nút chỉ dành cho biểu tượng. Luôn gắn nhãn cho các nút bằng một hành động mô tả.
Câu hỏi và hướng dẫn
![Bảng câu hỏi có chú thích hiển thị các thành phần câu hỏi và hướng dẫn.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/question-banner.png?hl=vi)
- Tiêu đề bảng câu hỏi.
- Chỉ báo tiến trình.
- Tiêu đề nhóm.
- Tiêu đề câu hỏi.
- Hướng dẫn.
- Trường nhập.
- Định dạng mục nhập.
- Các trường bắt buộc.
- Trợ giúp.
Tiêu đề nhóm
Tiêu đề nhóm là tiêu đề văn bản xuất hiện phía trên tiêu đề câu hỏi.
Sử dụng tiêu đề nhóm để nhóm các câu hỏi tương tự lại với nhau. Chỉ dùng tiêu đề nhóm khi có thêm thông tin hữu ích.
![Tiêu đề nhóm là Lịch sử bệnh nhân.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-short.png?hl=vi)
Sử dụng một tiêu đề ngắn để nhóm các câu hỏi tương tự với nhau. Ví dụ: tất cả các câu hỏi liên quan đến tiền sử bệnh đều được nhóm lại.
![Tiêu đề nhóm là thông tin cá nhân và thông tin về lối sống.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-long.png?hl=vi)
Tránh sử dụng các tiêu đề phức tạp hoặc tiêu đề dài quá một dòng.
Tiêu đề câu hỏi
Tiêu đề câu hỏi mô tả ngắn gọn những thông tin mà ứng dụng yêu cầu. Tiêu đề câu hỏi có cỡ chữ lớn nhất trên trang để thu hút sự chú ý của người dùng vào câu hỏi.
Mỗi trang hoặc câu hỏi phải có một tiêu đề câu hỏi. Giữ tiêu đề câu hỏi ngắn hoặc diễn đạt dưới dạng câu hỏi.
![Tiêu đề câu hỏi là ngày sinh.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-short.png?hl=vi)
Tiêu đề ngắn giúp người dùng dễ đọc hơn.
![Tiêu đề câu hỏi là Ngày sinh của bạn là gì? Bạn sinh ra ở thành phố nào?](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-long.png?hl=vi)
Tránh đặt câu hỏi quá dài hoặc lồng hai câu hỏi với nhau.
![Không có tiêu đề câu hỏi.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-none.png?hl=vi)
Luôn đặt tiêu đề câu hỏi để giúp người dùng dễ dàng biết họ cần nhập thông tin gì.
Hướng dẫn
Hướng dẫn là trường văn bản không bắt buộc xuất hiện bên dưới tiêu đề câu hỏi.
Sử dụng trường instructions để giải thích các hướng dẫn liên quan, chẳng hạn như liệu câu hỏi có bắt buộc hay không, số lượt chọn (một hoặc nhiều) và người dùng nên làm gì nếu không thể hoàn thành tất cả thông tin hoặc trả lời câu hỏi.
![Hướng dẫn: Chọn một. Câu hỏi bắt buộc.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-required.png?hl=vi)
Sử dụng trường hướng dẫn để cho biết liệu một câu hỏi có bắt buộc hay không và số lượt lựa chọn là bao nhiêu.
![Hướng dẫn: Nếu DOB chính xác không xác định, hãy chọn hộp đánh dấu DOB không xác định.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-edge.png?hl=vi)
Sử dụng hướng dẫn để cho người dùng biết việc cần làm nếu gặp tình huống như họ không thể điền hết các trường.
![Hướng dẫn: Thông tin liên hệ thay thế sẽ được dùng trong trường hợp khẩn cấp và có thể là người thân (ví dụ: người thân, mẹ, anh chị em ruột).](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-definitions.png?hl=vi)
Sử dụng hướng dẫn để cung cấp ngữ cảnh hoặc định nghĩa bổ sung cho các thuật ngữ dùng trong tiêu đề câu hỏi.
Nội dung nhãn
Văn bản nhãn thông báo cho người dùng về thông tin cần thiết cho trường văn bản hoặc trình đơn thả xuống. Khi trường được chọn, văn bản nhãn sẽ di chuyển từ giữa trường văn bản lên trên cùng.
Mỗi trường văn bản và hộp trình đơn thả xuống đều phải có nhãn. Văn bản nhãn phải ngắn gọn, rõ ràng và hiển thị đầy đủ.
![Văn bản nhãn: Tên.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-short.png?hl=vi)
Văn bản nhãn phải ngắn gọn, rõ ràng và hiển thị đầy đủ.
![Văn bản nhãn: nhập tên khách hàng.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-long.png?hl=vi)
Văn bản nhãn không được quá dài, bị cắt ngắn hoặc chiếm nhiều dòng.
![Không có văn bản nhãn.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-none.png?hl=vi)
Luôn gắn nhãn cho trường văn bản để người dùng biết cần nhập thông tin nào.
Định dạng mục nhập
EntryFormat hiển thị bên dưới trường văn bản để thông báo cho người dùng về dữ liệu định dạng cụ thể cần nhập. Thông báo lỗi sẽ hiển thị trong trường EntryFormat và thay thế các hướng dẫn EntryFormat hiện có.
Sử dụng EntryFormat cho ngày, số điện thoại, đơn vị và số nguyên.
![Định dạng ngày: dd/mm/yyyy.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-do.png?hl=vi)
Hiển thị định dạng ngày bên dưới trường và thêm một cụm từ mô tả.
![Không có định dạng ngày.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-none.png?hl=vi)
Việc không hiển thị định dạng dữ liệu có thể khiến dữ liệu được nhập không chính xác.
![Bên dưới trường văn bản Nhịp tim, định dạng Mục nhập sẽ hiển thị: Phạm vi bình thường: 60 – 100 nhịp/phút. Bên dưới trường văn bản Độ bão hoà oxy trong máu,
Định dạng mục nhập sẽ hiển thị: Phạm vi bình thường: 95-100%.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-range.png?hl=vi)
Khi nhập phạm vi y tế, hãy cung cấp ví dụ về phạm vi bình thường. Việc này có thể giúp người dùng phát hiện lỗi hoặc số nằm ngoài phạm vi.
Các trường bắt buộc
Các trường bắt buộc cho biết rằng người dùng phải hoàn tất trường này và bị chặn tiến hành cho đến khi trường hoàn tất.
Để cho biết rằng một trường là bắt buộc, hãy hiển thị dấu hoa thị (*) ở cuối tiêu đề câu hỏi. Hãy đưa "câu hỏi bắt buộc" vào trường hướng dẫn vì không phải ai cũng có thể thấy rõ dấu hoa thị (*). Nếu không có tiêu đề câu hỏi, hãy hiển thị dấu hoa thị (*) trong văn bản nhãn.
![Dấu hoa thị sau tiêu đề câu hỏi và câu hỏi bắt buộc trong hướng dẫn bên dưới.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-explanation.png?hl=vi)
Hiển thị trường bắt buộc có dấu hoa thị (*) và bao gồm cả hướng dẫn bằng văn bản cho biết "câu hỏi bắt buộc". Nhiều người không quen với ý nghĩa của dấu hoa thị(*) sẽ giúp ích cho việc giải thích.
![Dấu hoa thị sau tiêu đề câu hỏi, nhưng không có nội dung mô tả bằng văn bản giải thích ý nghĩa của dấu hoa thị.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-noexplanation.png?hl=vi)
Tránh chỉ hiển thị dấu hoa thị (*) mà không mô tả ý nghĩa bằng văn bản.
![Dấu hoa thị sau tiêu đề câu hỏi và câu hỏi bắt buộc được hiển thị trong hướng dẫn bên dưới.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-localize.png?hl=vi)
Sử dụng các thuật ngữ quen thuộc nhất với người dùng của bạn. Ví dụ: "Bắt buộc" có thể là thuật ngữ quen thuộc hơn và được sử dụng thay cho "Bắt buộc" ở một số quốc gia.
![Không có dấu hoa thị. Câu hỏi không bắt buộc xuất hiện trong phần hướng dẫn.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-optional.png?hl=vi)
Nếu bắt buộc phải có hầu hết các câu hỏi, hãy nêu rõ những câu hỏi không bắt buộc.
![Dấu hoa thị sau văn bản nhãn. Câu hỏi bắt buộc xuất hiện trong trường Định dạng mục nhập.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-label.png?hl=vi)
Nếu không có tiêu đề câu hỏi, hãy hiển thị dấu hoa thị trong văn bản nhãn.
Trợ giúp
Biểu tượng trợ giúp sẽ xuất hiện bên cạnh tiêu đề câu hỏi. Khi người dùng nhấn vào biểu tượng này, một hộp thông tin trợ giúp sẽ xuất hiện cùng với thông tin bổ sung. Thao tác nhấn lại vào biểu tượng này sẽ đóng hộp thông tin trợ giúp.
Đây là thành phần tùy chọn. Chỉ sử dụng khi hữu ích để hiển thị thông tin bổ sung không cần thiết phải luôn hiển thị.
![Trợ giúp: Vắc-xin cúm mùa còn được gọi là tiêm chủng cúm.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-do.png?hl=vi)
Dùng thông tin trợ giúp đối với thông tin mà người dùng có thể chỉ cần xem một lần hoặc cung cấp thêm thông tin.
![Trợ giúp: Chọn một.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-dont.png?hl=vi)
Tránh ẩn hướng dẫn trong hộp Trợ giúp mà tất cả mọi người đều có thể thấy.
Thu thập dữ liệu
![Tám thành phần thu thập dữ liệu; trường văn bản, bộ chọn ngày, trình đơn thả xuống, thanh trượt, một lựa chọn, một lựa chọn boolean, trắc nghiệm và một lựa chọn mở.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datacapture-banner.png?hl=vi)
Khi nào nên sử dụng thành phần nào?
Loại mục nhập dữ liệu | Lựa chọn Boolean | Một lựa chọn | Trắc nghiệm nhiều lựa chọn | Mở lựa chọn | Trình đơn thả xuống | Bộ chọn ngày | Trường văn bản | Thanh trượt | Tự động hoàn tất |
---|---|---|---|---|---|---|---|---|---|
Chọn Có hoặc Không | |||||||||
Chọn một tùy chọn | Thận trọng |
||||||||
Chọn nhiều lựa chọn | Thận trọng |
||||||||
Văn bản | |||||||||
Ngày | |||||||||
Numbers | Thận trọng |
Trường văn bản
Trường văn bản cho biết người dùng có thể nhập thông tin.
Sử dụng trường văn bản khi người dùng cần nhập văn bản vào bảng câu hỏi, chẳng hạn như tên, số điện thoại hoặc địa chỉ. Giới hạn mục dữ liệu yêu cầu mục nhập văn bản (bàn phím) khi có thể sử dụng một lựa chọn đã điền sẵn (trắc nghiệm hoặc một lựa chọn).
Tìm hiểu thêm về các trường văn bản trên material.io
![Tiêu đề câu hỏi: đăng ký cho người mới. Trường văn bản 1: tên. Trường văn bản 2: số điện thoại.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-do.png?hl=vi)
Sử dụng trường văn bản để nhập dữ liệu yêu cầu bạn phải nhập các từ hoặc số riêng biệt.
![Tiêu đề câu hỏi: lý do ghé thăm? Trường văn bản: mô tả lý do](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-dont.png?hl=vi)
Tránh sử dụng câu trả lời dạng văn bản tự do khi đó có thể là lựa chọn nhiều đáp án, trình đơn thả xuống hoặc lựa chọn một câu trả lời.
Một lựa chọn và một lựa chọn boolean
Một lựa chọn và lựa chọn boolean là một tuỳ chọn điều khiển lựa chọn xuất hiện dưới dạng nút chọn khi người dùng được yêu cầu chọn một lựa chọn trong số các tuỳ chọn.
Sử dụng boolean choice khi có một lựa chọn nhị phân là "Có" hoặc "Không". Nếu không, hãy sử dụng thành phần một lựa chọn. Nếu có hơn ~10 lựa chọn trong danh sách, hãy sử dụng trình đơn thả xuống thay vì một lựa chọn. Trình đơn thả xuống dày đặc và dễ điều hướng hơn khi có nhiều tuỳ chọn.
![Tiêu đề câu hỏi: Đây có phải là lần đầu tiên họ truy cập không? Các tuỳ chọn lựa chọn Boolean là có và không.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-boolean.png?hl=vi)
Sử dụng lựa chọn Boolean khi các tuỳ chọn là "có" và "không".
![Tiêu đề câu hỏi: Trình độ học vấn cao nhất đạt được là gì?
Có một lựa chọn là: 1. Không biết 2. Không học vấn
3. trường tiểu học 4. trường trung học cơ sở.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-single.png?hl=vi)
Sử dụng một lựa chọn khi người dùng có thể chọn một lựa chọn trong danh sách.
![Danh sách một lựa chọn cho thấy một danh sách rất dài các trạng thái. Các trạng thái từ 23-27 đều xuất hiện.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-dont.png?hl=vi)
Tránh chọn một lựa chọn cho danh sách quá dài (10 danh sách trở lên). Thay vào đó, hãy sử dụng trình đơn thả xuống.
Bộ chọn ngày
Bộ chọn ngày cho phép người dùng nhập ngày thông qua cả bộ chọn ngày trên lịch và bàn phím. Bộ chọn ngày trên lịch được kích hoạt khi người dùng nhấn vào biểu tượng lịch.
Chỉ sử dụng bộ chọn ngày trên lịch cho những ngày gần với ngày hôm nay, chẳng hạn như kỳ kinh nguyệt gần nhất hoặc lần khám tiếp theo. Nếu không, hãy ưu tiên nhập bằng bàn phím đối với các ngày như ngày sinh.
![Ngày sinh. Mục nhập ngày bằng bàn phím đang hoạt động. Biểu tượng Lịch ở bên phải
của hộp trường văn bản. Hộp đánh dấu được đánh dấu cho biết ngày đó là ngày gần đúng.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-do.png?hl=vi)
Để nhập ngày, hãy bật cả mục nhập bằng bàn phím (nhấn vào hộp văn bản) và bộ chọn ngày trên lịch (biểu tượng nhấn vào).
![Chế độ xem lịch của bộ chọn ngày.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-dont.png?hl=vi)
Tránh bật bộ chọn ngày trên lịch làm phương thức nhập duy nhất cho ngày sinh. Khó chuyển sang tháng và năm.
Trình đơn thả xuống
Trình đơn trình đơn thả xuống cho phép người dùng lựa chọn trong nhiều tuỳ chọn. Khi người dùng bắt đầu nhập, các tuỳ chọn sẽ lọc dựa trên nội dung được nhập. Điều này có thể giúp người dùng nhanh chóng tìm thấy tuỳ chọn phù hợp trong một danh sách lớn.
Trình đơn trình đơn thả xuống là một lựa chọn thay thế tuyệt vời cho một lựa chọn khi danh sách các tuỳ chọn quá dài (hơn 10 tuỳ chọn) vì chúng chiếm ít không gian hơn.
![Trình đơn thả xuống để xem các trạng thái liệt kê của tiểu bang từ A đến F.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-do.png?hl=vi)
Dùng trình đơn thả xuống khi chọn một lựa chọn trong một danh sách rất dài các lựa chọn, chẳng hạn như chọn một tiểu bang hoặc thành phố.
![Trình đơn thả xuống cho độ tuổi, liệt kê các số từ 1 đến 6.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-dont.png?hl=vi)
Tránh sử dụng trình đơn thả xuống vì sẽ dễ nhập nội dung hơn thay vì cuộn qua tất cả các tùy chọn, chẳng hạn như độ tuổi.
Trắc nghiệm nhiều lựa chọn
Trắc nghiệm là một chế độ kiểm soát lựa chọn xuất hiện dưới dạng hộp đánh dấu khi người dùng có thể tạo nhiều phần trong một danh sách tuỳ chọn.
Sử dụng trắc nghiệm khi người dùng chỉ có thể chọn trong danh sách các tuỳ chọn đã xác định trước. Nếu người dùng cũng có thể thêm câu trả lời miễn phí của riêng mình, hãy sử dụng thành phần lựa chọn mở. Trong trường instructions, hãy ghi "Chọn tất cả các lựa chọn phù hợp" để người dùng biết rằng họ có thể chọn nhiều tuỳ chọn.
![Tiêu đề câu hỏi: Lý do cho lượt truy cập hôm nay là gì? 4 hộp đánh dấu và tuỳ chọn được hiển thị, mỗi hộp đánh dấu một hàng.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-do.png?hl=vi)
Giao diện mặc định là một vùng chứa xung quanh các hộp đánh dấu để làm rõ vùng có thể nhấn.
![Tiêu đề câu hỏi: lý do truy cập vào hôm nay là gì. 6 hộp đánh dấu và các lựa chọn xuất hiện, mỗi hàng 2 hộp. Một số văn bản bị cắt bớt cho 2 trong số các phương án.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-dont.png?hl=vi)
Tránh hiển thị nhiều lựa chọn trên mỗi hàng, do sự thay đổi về kích thước màn hình điện thoại và kích thước văn bản, văn bản có thể bị cắt bớt.
Mở lựa chọn
Lựa chọn mở tương tự như trắc nghiệm, nhưng người dùng có thể chọn Khác và nhập văn bản tự do.
Sử dụng lựa chọn mở khi có một danh sách các tuỳ chọn được đặt sẵn, nhưng người dùng cũng có thể thêm các tuỳ chọn bổ sung. Sử dụng lựa chọn mở khi hầu hết các tuỳ chọn đã được xác định, nhưng bạn thấy trước một số người dùng sẽ chọn Khác vì không có tuỳ chọn nào được cung cấp.
![Đã chọn mục khác. Trường văn bản để thêm văn bản tự do đang hoạt động.
Bàn phím đang hiển thị.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-do.png?hl=vi)
Sử dụng khi cần thu thập dữ liệu chính xác và không có lựa chọn nào được xác định sẵn. Ví dụ: nghề nghiệp.
![Tiêu đề câu hỏi: Bạn có muốn thêm vấn đề nào nữa không? Ba lựa chọn: Có, Không và Khác. Đã chọn mục khác. Trường văn bản để thêm văn bản tự do đang hoạt động.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-dont.png?hl=vi)
Tránh sử dụng nếu phần lớn các câu trả lời yêu cầu chọn Khác. Trong trường hợp đó, hãy sử dụng trường văn bản hoặc trường đoạn.
Thanh trượt
Thanh trượt cho phép người dùng lựa chọn trong một phạm vi các giá trị. Thanh trượt trong SDK FHIR của Android là một thanh trượt riêng biệt. Thanh trượt riêng biệt cho phép người dùng chọn một giá trị cụ thể trong một phạm vi được xác định trước. Bạn có thể dùng các dấu kiểm để cho biết các giá trị có sẵn. Tránh sử dụng thanh trượt để nhập dữ liệu số. Thay vào đó, hãy sử dụng trường văn bản hoặc trình đơn thả xuống.
Tìm hiểu thêm về thanh trượt trên material.io
![Tiêu đề câu hỏi: khách hàng có bao nhiêu trẻ em? Bạn sẽ chọn một thanh trượt có số bốn.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/slider-dont.png?hl=vi)
Tránh sử dụng thanh trượt cho các giá trị cụ thể khi có một phạm vi lớn. Thay vào đó, hãy sử dụng các trường văn bản có mục nhập bằng bàn phím.
Xác thực dữ liệu và lỗi
Xác thực dữ liệu
Tính năng xác thực dữ liệu ràng buộc loại dữ liệu hoặc các giá trị có thể nhập vào trường văn bản. Việc xác thực dữ liệu có thể cải thiện chất lượng của dữ liệu được thu thập.
Sử dụng trường EntryFormat để hiển thị các quy định hạn chế về định dạng hoặc giá trị. Hiển thị trực tiếp các thông báo lỗi xác thực dữ liệu có ý nghĩa để người dùng có thể sửa lỗi.
![Văn bản nhãn: số điện thoại. Định dạng mục nhập: 8 chữ số.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-show.png?hl=vi)
Hiển thị trước các hạn chế xác thực dữ liệu để người dùng biết cách nhập dữ liệu.
![Văn bản nhãn: số điện thoại. Định dạng mục nhập: không có.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-hide.png?hl=vi)
Nếu không hiển thị số lượng chữ số cần thiết, người dùng có thể gặp lỗi và quá trình này sẽ mất nhiều thời gian hơn để hoàn tất.
![Ngày nhập là 22/33/4444. Thông báo lỗi: Định dạng ngày không chính xác. Định dạng
phải là: dd/mm/yyyy.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-timely.png?hl=vi)
Hiển thị các lỗi xác thực dữ liệu có ý nghĩa ngay sau khi điền xong trường. Thông báo lỗi sẽ thay thế văn bản định dạng mục nhập hiện tại.
![Hộp thoại. Hãy khắc phục các lỗi sau. 1. số điện thoại. 2. ngày sinh.
Nút 1: Vẫn gửi. Nút 2: sửa lỗi.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-dontwait.png?hl=vi)
Đừng đợi cho đến khi người dùng nhấn "gửi" để hiển thị lỗi xác thực lần đầu.
Lỗi
Thông báo lỗi sẽ cảnh báo người dùng khi xảy ra sự cố và hướng dẫn cách khắc phục sự cố.
Sử dụng màu sắc, biểu tượng và văn bản để thông báo lỗi.
Tìm hiểu thêm về các thông báo lỗi trên material.io
![Thông báo lỗi là "Câu hỏi bắt buộc. Vui lòng chọn một đáp án.'](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-howtofix.png?hl=vi)
Giải thích lý do có lỗi (câu hỏi bắt buộc) và những việc bạn có thể làm để khắc phục lỗi (chọn một câu trả lời).
![Thông báo lỗi có nội dung 'Error'.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noexplanation.png?hl=vi)
Một thông báo lỗi chỉ cho biết "lỗi" sẽ không hữu ích để người dùng biết cách khắc phục lỗi.
![Ngày sinh. Ngày nhập là 22/33/4444. Thông báo lỗi có định dạng ngày không chính xác. Định dạng phải là: dd/mm/yyyy.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noblame.png?hl=vi)
Ví dụ: "Định dạng ngày không chính xác. Định dạng phải là dd/mm/yyyy".
![Ngày sinh. Ngày nhập là 22/33/4444. Thông báo lỗi là "Bạn đã nhập sai định dạng ngày".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-dontblame.png?hl=vi)
Tránh đổ lỗi cho người dùng bằng thông báo lỗi có từ "bạn" Ví dụ: "Bạn đã nhập sai định dạng ngày".
![Thông báo lỗi có biểu tượng ở phía trước văn bản màu đỏ hiển thị "Câu hỏi bắt buộc". Chọn một hoặc nhiều tuỳ chọn.' Vùng chứa hộp đánh dấu có
đường viền màu đỏ.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-combo.png?hl=vi)
Sử dụng màu sắc, biểu tượng và văn bản để thông báo cho người dùng rằng đã xảy ra lỗi.
![Không có thông báo lỗi hoặc biểu tượng nào. Vùng chứa hộp đánh dấu có một đường viền màu đỏ,
là chỉ báo duy nhất cho biết có lỗi.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-onlycolor.png?hl=vi)
Để hỗ trợ các trường hợp khiếm thị thông thường như mù màu đỏ/xanh lục, hãy tránh chỉ dựa vào màu sắc để truyền đạt lỗi.
![Vùng chứa hộp đánh dấu có đường viền màu đỏ và một biểu tượng lỗi hiển thị phía sau mỗi vùng chứa. 3 biểu tượng đang hiển thị.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-icons.png?hl=vi)
Thông thường chỉ cần một biểu tượng là đủ. Đừng lạm dụng việc sử dụng biểu tượng để thông báo về lỗi.