เกริ่นนำ
การตอบแบบสอบถามเป็นงานหลักสำหรับบุคลากรทางการแพทย์ส่วนใหญ่ที่ใช้แอปสุขภาพบนอุปกรณ์เคลื่อนที่
การป้อนข้อมูลอาจเป็นเรื่องยากและเกิดข้อผิดพลาดได้ เป้าหมายของเราสำหรับไลบรารี Structured Data Capture (SDC) และหลักเกณฑ์ในการออกแบบคือการส่งเสริมให้คุณปรับปรุงประสบการณ์การป้อนข้อมูลและคุณภาพของข้อมูลที่บันทึกสำหรับผู้ใช้
ประเด็น 4 ประการในส่วนนี้ได้แก่
เลย์เอาต์และการนำทาง
การเลื่อนยาวและเลย์เอาต์ที่มีเลขหน้า
![การเปรียบเทียบแบบเลื่อนยาวและเลย์เอาต์ที่มีเลขหน้า การเลื่อนค้างมีคำถาม 3 ข้อในหน้าหนึ่ง ส่วนที่ใส่เลขหน้าจะมี 1 คำถาม](https://developers.google.cn/static/open-health-stack/design/images/data-capture/comparinglayouts.png?hl=th)
Android FHIR SDK มีตัวเลือกเลย์เอาต์ 2 แบบให้คุณเลือก ดังนี้
- เลื่อนยาว (ค่าเริ่มต้น)
- แบ่งหน้าแล้ว
แบบสอบถามแบบเลื่อนยาวจะแสดงคำถามทั้งหมดในหน้าเว็บ 1 หน้า และผู้ใช้ต้องเลื่อนไปยังคำถามแต่ละข้อด้วยการเลื่อนดู
แบบสอบถามที่มีเลขหน้าจะแสดงเนื้อหาในหน้าต่างๆ แยกกัน คำถามหรือช่องป้อนข้อมูลที่เกี่ยวข้องสามารถจัดกลุ่มไว้ด้วยกันได้ในหน้าเดียว ปุ่มย้อนกลับและปุ่มถัดไปจะตรึงอยู่ที่ด้านล่างของหน้าเพื่อไปยังหน้าต่างๆ
ดูวิธีใส่เลขหน้าแบบสอบถามใน GitHub
คุณควรเลือกเลย์เอาต์ใด
รูปแบบการจัดวางแต่ละตัวเลือกมีทั้งข้อดีและข้อเสีย ด้านล่างนี้คือแอตทริบิวต์บางส่วนของเลย์เอาต์แต่ละประเภทซึ่งควรเลือกใช้เมื่อเลือกว่าจะใช้เลย์เอาต์แบบใด
เลื่อนยาว | แบ่งหน้าแล้ว | |
---|---|---|
ความเร็วของการนำทาง | ไปยังส่วนต่างๆ ได้เร็วขึ้น | ไปยังส่วนต่างๆ ได้ช้าลง |
ความถูกต้องของการนำทาง | การนำทางที่แม่นยำยิ่งขึ้น | การนำทางที่แม่นยำยิ่งขึ้น |
โฟกัสที่คำถามใหม่หลังจากเปลี่ยนงาน | ยากต่อการจัดเรียงใหม่หลังจากการขัดจังหวะ | จัดระเบียบใหม่ได้ง่ายขึ้นหลังจากหยุดชะงัก |
ตอบแบบสอบถามดิจิทัลหลังจากการเข้าชม (สำเนาจากกระดาษ) | ใช้งานคัดลอกจากกระดาษได้ง่ายขึ้น | คัดลอกจากกระดาษได้ยากขึ้น |
หน้าจอขนาดเล็ก | แย่กว่าสำหรับหน้าจอขนาดเล็ก | เหมาะกับหน้าจอขนาดเล็ก |
การช่วยเหลือพิเศษ | แย่กว่าสำหรับการช่วยเหลือพิเศษ ไปยังส่วนต่างๆ ได้ยาก | ดีกว่าสำหรับการช่วยเหลือพิเศษ หน้าจอแยกที่สามารถจัดการด้วยโปรแกรมอ่านหน้าจอ การอ่านออกเสียงข้อความ และเทคโนโลยีอื่นๆ ได้ |
พื้นที่สําหรับวิธีการและคำอธิบาย | แย่กว่าในแง่ของคำแนะนำและวิธีการ | เหมาะกับคำแนะนำและวิธีการ |
เลื่อนยาว
![แบบสอบถามที่มีตัวเลขแสดงอยู่หน้าชื่อคำถาม](https://developers.google.cn/static/open-health-stack/design/images/data-capture/numberedquestionnaire.png?hl=th)
ใส่ลำดับเลขคำถามเพื่อให้ไปยังส่วนต่างๆ ในเลย์เอาต์แบบหน้าเดียวได้ง่ายขึ้น
![กำลังเปรียบเทียบขนาดแบบอักษรของชื่อคำถาม การเลื่อนยาวๆ คือ 16 พิกเซล แบ่งหน้าเป็น 28 พิกเซล](https://developers.google.cn/static/open-health-stack/design/images/data-capture/adjustfont.png?hl=th)
ทำให้ขนาดแบบอักษรของชื่อคำถามเล็กลงเมื่อใช้การเลื่อนยาวๆ เพื่อให้มองเห็นเนื้อหาบนหน้าจอได้มากขึ้น ตัวอย่างเช่น การเลื่อนยาวๆ คือ 16 พิกเซล แบ่งหน้าเป็น 28 พิกเซล
การใส่เลขหน้า
![คําถามที่มีเลขหน้าว่า "กลุ่มเป้าหมายอาศัยอยู่ในรัฐใด" พร้อมตัวเลือกในเมนูแบบเลื่อนลง](https://developers.google.cn/static/open-health-stack/design/images/data-capture/onequestion.png?hl=th)
แป้นพิมพ์ เมนูแบบเลื่อนลง และคอมโพเนนต์อื่นๆ ใช้พื้นที่ในหน้า ดังนั้นให้ตอบคำถาม 1 ข้อต่อหน้า
![ช่องที่อยู่ที่ใส่เลขหน้าซึ่งมองไม่เห็นช่องด้านล่างบนหน้าจอ](https://developers.google.cn/static/open-health-stack/design/images/data-capture/hidecontent.png?hl=th)
เนื้อหาควรแสดงอยู่ในครึ่งหน้าบน
![จัดกลุ่มข้อความหลายช่องเป็นคำถาม 1 ข้อ หัวข้อคำถามคือผู้ติดต่อสำรองที่มีชื่อ ความสัมพันธ์ และหมายเลขโทรศัพท์เป็นช่องป้อนข้อมูล](https://developers.google.cn/static/open-health-stack/design/images/data-capture/groupcontent.png?hl=th)
ตัวอย่างเช่น ช่องข้อความ 3 ช่องนี้ทั้งหมดเกี่ยวข้องกับข้อมูลผู้ติดต่อสำรอง ดังนั้นจึงมีการจัดกลุ่มเนื้อหาไว้ด้วยกันในหน้าเดียว
![คำถามที่ไม่เกี่ยวข้องในหน้าเดียวกัน คำถามแรกคือความคุ้มครองของประกัน และคำถามที่ 2 คือสภาวะสุขภาพก่อนหน้านี้](https://developers.google.cn/static/open-health-stack/design/images/data-capture/unrelatedgroup.png?hl=th)
หลีกเลี่ยงการจัดกลุ่มเนื้อหาที่ไม่เกี่ยวข้องไว้ในหน้าเดียวเพื่อป้องกันความสับสน
สัญญาณบอกสถานะความคืบหน้า
ตัวบ่งชี้ความคืบหน้าจะแสดงความคืบหน้าในแบบสอบถาม
ใส่สัญญาณบอกสถานะความคืบหน้าไว้ในแบบสอบถามแบบยาวเพื่อช่วยให้ผู้ใช้ไปยังส่วนต่างๆ และเห็นความคืบหน้าได้ สัญญาณบอกสถานะความคืบหน้าจะแสดงตําแหน่งภายในแบบสอบถามและจํานวนเวลาในการตอบแบบสอบถาม
![สัญญาณบอกสถานะความคืบหน้าที่ด้านบนใต้ชื่อแบบสอบถาม](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-scroll.png?hl=th)
ตำแหน่งอยู่ด้านบนเหนือคำถามและ Anchor เพื่อให้มองเห็นได้เสมอแม้ในขณะที่เลื่อน
![สัญญาณบอกสถานะความคืบหน้าที่ด้านล่าง เหนือปุ่มการนำทาง](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-paginated.png?hl=th)
วางไว้ที่ด้านล่างแทนได้ โดยให้อยู่เหนือปุ่มกลับและปุ่มถัดไป เลย์เอาต์นี้ให้คุณแสดงหน้าที่ผู้ใช้อยู่ได้ด้วย
ปุ่มนำทาง
ปุ่มการนำทาง (ย้อนกลับ ถัดไป) จะตรึงอยู่ที่ด้านล่างของแบบสอบถาม ในการเลื่อนได้ไม่รู้จบหรือในหน้าสุดท้ายของคำถามที่มีการใส่เลขหน้า ปุ่มถัดไปจะมีป้ายกำกับว่า "ส่ง"
รักษาปุ่มต่างๆ ไว้ในตำแหน่งที่สอดคล้องกัน และใช้ปุ่มที่ใช้งานอยู่ ซึ่งมีป้ายกำกับเป็นการกระทำ เช่น ย้อนกลับ และปุ่มถัดไป เสมอ
![ปุ่มนำทางทำงานอยู่ ปุ่มถัดไปที่มีสีเติมสีฟ้า](https://developers.google.cn/static/open-health-stack/design/images/data-capture/active-buttons.png?hl=th)
แสดงปุ่มที่ใช้งานเสมอ แม้ว่าแบบฟอร์มจะไม่สมบูรณ์ก็ตาม เมื่อแตะถัดไป จะแสดงกล่องโต้ตอบป๊อปอัปพร้อมวิธีการกรอกข้อมูลในช่องที่ขาดหายไปหรือข้อผิดพลาดในการตรวจสอบ
![ปุ่ม "ถัดไป" ไม่มีการใช้งาน ปุ่มถัดไปที่มีพื้นที่สีเทา](https://developers.google.cn/static/open-health-stack/design/images/data-capture/inactive-buttons.png?hl=th)
ปุ่มที่ไม่ใช้งานทำให้ผู้ใช้ไม่ทราบวิธีแก้ไขปัญหา
![ปุ่มถัดไปจะมีเฉพาะไอคอนลูกศรและไม่มีคําอธิบายข้อความ](https://developers.google.cn/static/open-health-stack/design/images/data-capture/icon-buttons.png?hl=th)
หลีกเลี่ยงปุ่มที่มีเฉพาะไอคอน ติดป้ายกำกับปุ่มโดยใช้การทำงานที่เป็นคำอธิบายเสมอ
คำถามและวิธีการ
![แบบสอบถามที่มีการใส่เลขหน้าพร้อมคำอธิบายประกอบแสดงองค์ประกอบคำถามและวิธีการ](https://developers.google.cn/static/open-health-stack/design/images/data-capture/question-banner.png?hl=th)
- ชื่อแบบสอบถาม
- สัญญาณบอกสถานะความคืบหน้า
- ส่วนหัวกลุ่ม
- ชื่อคำถาม
- คำแนะนำ
- ช่องป้อนข้อมูล
- รูปแบบรายการ
- ช่องที่ต้องกรอก
- ความช่วยเหลือ
ส่วนหัวกลุ่ม
ส่วนหัวของกลุ่มคือส่วนหัวของข้อความที่จะปรากฏเหนือชื่อคำถาม
ใช้ส่วนหัวของกลุ่มเพื่อจัดกลุ่มคำถามที่คล้ายกันไว้ด้วยกัน ใช้ส่วนหัวกลุ่มเมื่อเพิ่มข้อมูลที่เป็นประโยชน์เท่านั้น
![ส่วนหัวของกลุ่มคือประวัติผู้ป่วย](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-short.png?hl=th)
ใช้ชื่อสั้นๆ เพื่อจัดกลุ่มคำถามที่คล้ายกันไว้ด้วยกัน ตัวอย่าง: ระบบจะจัดกลุ่มคำถามทั้งหมดที่เกี่ยวข้องกับประวัติของผู้ป่วย
![ส่วนหัวกลุ่มเป็นข้อมูลส่วนบุคคลและข้อมูลไลฟ์สไตล์](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-long.png?hl=th)
หลีกเลี่ยงการใช้ชื่อที่ซับซ้อนหรือชื่อยาวที่ยาวเกิน 1 บรรทัด
ชื่อคำถาม
ชื่อคำถามจะอธิบายข้อมูลที่ขออย่างกระชับ ชื่อคำถามมีขนาดแบบอักษรที่ใหญ่ที่สุดในหน้านั้นเพื่อดึงดูดสายตาของผู้ใช้มาที่คำถาม
ทุกหน้าเว็บหรือคำถามควรมีชื่อคำถาม ตั้งชื่อคำถามสั้นๆ หรือเขียนวลีเป็นคำถาม
![หัวข้อคำถามคือวันเกิด](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-short.png?hl=th)
ชื่อย่อช่วยให้ผู้ใช้อ่านได้ง่ายขึ้น
![หัวข้อคำถามคือ วันเกิดของคุณคือเมื่อไหร่ คุณเกิดที่เมืองใด](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-long.png?hl=th)
หลีกเลี่ยงคำถามที่ยาวมากหรือซ้อนคำถาม 2 ข้อไว้ด้วยกัน
![ไม่มีชื่อคำถาม](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-none.png?hl=th)
ใส่ชื่อคำถามเสมอเพื่อให้ผู้ใช้ทราบว่าต้องป้อนข้อมูลใด
วิธีการ
วิธีการคือช่องข้อความที่ไม่บังคับซึ่งแสดงอยู่ใต้ชื่อคำถาม
ใช้ช่องinstructionsเพื่ออธิบายวิธีการที่เกี่ยวข้อง เช่น หากต้องตอบคำถาม สามารถเลือกได้กี่ข้อ (เลือกได้ 1 รายการหรือหลายรายการ) และสิ่งที่ผู้ใช้ควรทำหากกรอกข้อมูลไม่ครบถ้วนหรือตอบคำถามไม่ได้
![วิธีการ: เลือกหนึ่งรายการ คำถามที่ต้องตอบ](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-required.png?hl=th)
ใช้ช่องวิธีการเพื่อให้ทราบว่าต้องตอบคำถามหรือไม่และระบุจำนวนตัวเลือกที่ทำได้
![คำแนะนำ: หากไม่ทราบ DOB ที่แน่นอน ให้เลือกช่องทำเครื่องหมาย DOB ที่ไม่รู้จัก](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-edge.png?hl=th)
ใช้วิธีการแจ้งให้ผู้ใช้ทราบถึงสิ่งที่ต้องทำหากพบสถานการณ์ เช่น กรอกข้อมูลในช่องทั้งหมดไม่ได้
![คำแนะนำ: การติดต่อสำรองจะใช้ในกรณีที่เกิดเหตุการณ์ฉุกเฉินและอาจเป็นญาติพี่น้อง (เช่น คู่รัก แม่ พี่น้อง)](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-definitions.png?hl=th)
ใช้วิธีการให้บริบทหรือคำจำกัดความเพิ่มเติมสำหรับคำที่ใช้ในชื่อคำถาม
ข้อความป้ายกำกับ
ข้อความของป้ายกำกับจะแจ้งให้ผู้ใช้ทราบถึงข้อมูลที่ขอในช่องข้อความหรือเมนูแบบเลื่อนลง เมื่อเลือกช่องแล้ว ข้อความของป้ายกำกับจะย้ายจากตรงกลางช่องข้อความขึ้นไปด้านบน
ช่องช่องข้อความและเมนูแบบเลื่อนลงทุกช่องควรมีป้ายกำกับ ข้อความของป้ายกำกับ ควรสั้น ชัดเจน และมองเห็นได้ครบถ้วน
![ข้อความป้ายกำกับ: ชื่อ](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-short.png?hl=th)
ข้อความในป้ายกำกับควรสั้น ชัดเจน และมองเห็นได้ครบถ้วน
![ข้อความป้ายกำกับ: ป้อนชื่อลูกค้า](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-long.png?hl=th)
ข้อความในป้ายกำกับไม่ควรยาวเกินไป ถูกตัดให้สั้นลง หรือยาวหลายบรรทัด
![ไม่มีข้อความป้ายกำกับ](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-none.png?hl=th)
ติดป้ายกำกับที่ช่องข้อความเสมอเพื่อให้ผู้ใช้ทราบว่าต้องป้อนข้อมูลใด
รูปแบบข้อมูล
EntryFormat จะแสดงใต้ช่องข้อความเพื่อแจ้งให้ผู้ใช้ทราบว่าต้องป้อนข้อมูลรูปแบบที่เฉพาะเจาะจง ข้อความแสดงข้อผิดพลาดจะแสดงในช่อง EntryFormat และแทนที่คำแนะนำ EntryFormat ที่มีอยู่
ใช้ EntryFormat สำหรับวันที่ หมายเลขโทรศัพท์ หน่วย และจำนวนเต็ม
![รูปแบบวันที่: วว/ดด/ปปปป](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-do.png?hl=th)
แสดงรูปแบบวันที่ใต้ช่องและใส่วลีอธิบาย
![ไม่มีรูปแบบวันที่](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-none.png?hl=th)
การไม่แสดงรูปแบบข้อมูลอาจทำให้การป้อนข้อมูลไม่ถูกต้อง
![รูปแบบรายการจะแสดงอยู่ใต้ช่องข้อความอัตราการเต้นของหัวใจ: ช่วงปกติ: 60-100 bpm ใต้ช่องข้อความความอิ่มตัวของออกซิเจนในเลือด
รูปแบบข้อมูลแสดง: ช่วงปกติ: 95-100%](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-range.png?hl=th)
เมื่อป้อนช่วงทางการแพทย์ ให้แสดงตัวอย่างของช่วงปกติ ซึ่งจะช่วยให้ผู้ใช้พบข้อผิดพลาดหรือตัวเลขที่ไม่อยู่ในช่วง
ช่องที่ต้องกรอก
ช่องที่ต้องกรอกระบุว่าผู้ใช้ต้องกรอกข้อมูลในช่องนี้และถูกบล็อกไม่ให้ไปยังหน้าดังกล่าวจนกว่าจะกรอกข้อมูลในช่องเสร็จสิ้น
หากต้องการระบุว่าต้องกรอกช่องใดช่องหนึ่ง ให้แสดงเครื่องหมายดอกจัน (*) ท้ายชื่อคำถาม ใส่ "คำถามที่ต้องตอบ" ในช่องวิธีการ เนื่องจาก ผู้ชมอาจไม่เห็นความหมายของเครื่องหมายดอกจัน (*) หากไม่มีชื่อคำถาม ให้แสดงเครื่องหมายดอกจัน (*) ในข้อความป้ายกำกับ
![เครื่องหมายดอกจันหลังชื่อคำถามและคำถามที่ต้องตอบในคำแนะนำด้านล่าง](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-explanation.png?hl=th)
ต้องใส่เครื่องหมายดอกจัน (*) ในช่องนี้และมีคำสั่งที่เป็นลายลักษณ์อักษรระบุว่า "คำถามที่ต้องตอบ" หลายคนไม่คุ้นเคยกับความหมายของเครื่องหมายดอกจัน(*) และจะได้ประโยชน์จากคำอธิบายนี้
![เครื่องหมายดอกจันหลังชื่อคำถาม แต่ไม่มีคำอธิบายเป็นลายลักษณ์อักษรอธิบายว่าเครื่องหมายดอกจันหมายถึงอะไร](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-noexplanation.png?hl=th)
หลีกเลี่ยงการแสดงเฉพาะเครื่องหมายดอกจัน (*) โดยไม่มีคำอธิบายว่ามันหมายความว่าอย่างไร
![เครื่องหมายดอกจันหลังชื่อคำถามและคำถามที่ต้องตอบจะแสดงในคำแนะนำด้านล่าง](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-localize.png?hl=th)
ใช้คำศัพท์ที่ผู้ใช้คุ้นเคยมากที่สุด เช่น "บังคับ" อาจเป็นคําที่คุ้นหูมากกว่าและใช้ในบางประเทศแทน "ต้องระบุ"
![ไม่มีเครื่องหมายดอกจัน คำถามที่ไม่บังคับจะแสดงอยู่ในวิธีการ](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-optional.png?hl=th)
หากต้องตอบเป็นคำถามส่วนใหญ่ ให้ระบุว่าคำถามใดไม่บังคับ
![เครื่องหมายดอกจันหลังข้อความป้ายกำกับ แสดงคำถามที่ต้องตอบในฟิลด์รูปแบบรายการ](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-label.png?hl=th)
หากไม่มีชื่อคำถาม ให้แสดงเครื่องหมายดอกจันในข้อความของป้ายกำกับ
ความช่วยเหลือ
ไอคอนความช่วยเหลือจะแสดงอยู่ข้างชื่อคำถาม เมื่อแตะไอคอน ช่องข้อมูลความช่วยเหลือจะปรากฏขึ้นพร้อมข้อมูลเพิ่มเติม การแตะไอคอนอีกครั้ง จะเป็นการปิดกล่องข้อมูลความช่วยเหลือ
นี่เป็นองค์ประกอบเสริม ใช้เมื่อเป็นประโยชน์ในการแสดงข้อมูลเพิ่มเติม ที่ไม่จำเป็นต้องมองเห็นได้ตลอดเท่านั้น
![ความช่วยเหลือ: วัคซีนไข้หวัดใหญ่ตามฤดูกาลเรียกอีกอย่างว่า การสร้างภูมิคุ้มกันโรคไข้หวัดใหญ่](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-do.png?hl=th)
ใช้ความช่วยเหลือสำหรับข้อมูลที่ผู้ใช้อาจต้องการดูเพียงครั้งเดียวหรือให้ข้อมูลเพิ่มเติม
![ความช่วยเหลือ: เลือกมา 1 รายการ](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-dont.png?hl=th)
หลีกเลี่ยงการซ่อนวิธีการในช่องความช่วยเหลือที่ควรแสดงต่อ ทุกคน
การบันทึกข้อมูล
![คอมโพเนนต์การเก็บข้อมูล 8 รายการ ได้แก่ ช่องข้อความ เครื่องมือเลือกวันที่ เมนูแบบเลื่อนลง แถบเลื่อน ตัวเลือกเดียว ตัวเลือกบูลีน หลายตัวเลือก และทางเลือกแบบเปิด](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datacapture-banner.png?hl=th)
ควรใช้คอมโพเนนต์ใด
ประเภทการป้อนข้อมูล | ตัวเลือกบูลีน | ตัวเลือกเดียว | หลายตัวเลือก | เปิดตัวเลือก | เมนูแบบเลื่อนลง | เครื่องมือเลือกวันที่ | ช่องข้อความ | Slider | เติมคำอัตโนมัติ |
---|---|---|---|---|---|---|---|---|---|
เลือก "ใช่" หรือ "ไม่" | |||||||||
เลือก 1 ตัวเลือก | ข้อควรระวัง |
||||||||
เลือกหลายตัวเลือก | ข้อควรระวัง |
||||||||
ข้อความ | |||||||||
วันที่ | |||||||||
Numbers | ข้อควรระวัง |
ช่องข้อความ
ช่องข้อความจะระบุว่าผู้ใช้ป้อนข้อมูลได้
ใช้ช่องข้อความเมื่อมีคนจำเป็นต้องป้อนข้อความในแบบสอบถาม เช่น ชื่อ หมายเลขโทรศัพท์ หรือที่อยู่ จำกัดการป้อนข้อมูลที่ต้องใช้การป้อนข้อความ (แป้นพิมพ์) เมื่อใช้ตัวเลือกที่มีการป้อนข้อมูลไว้ล่วงหน้า (หลายตัวเลือกหรือตัวเลือกเดียว) แทน
ดูข้อมูลเพิ่มเติมเกี่ยวกับช่องข้อความใน material.io
![หัวข้อคำถาม: ลงทะเบียนบุคคลใหม่ ช่องข้อความ 1: ชื่อ ช่องข้อความ
2: หมายเลขโทรศัพท์](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-do.png?hl=th)
ใช้ช่องข้อความสำหรับการป้อนข้อมูลที่ต้องพิมพ์คำหรือตัวเลขที่ไม่ซ้ำกัน
![หัวข้อคำถาม: เหตุผลที่เข้ามาดู ช่องข้อความ: อธิบายเหตุผล](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-dont.png?hl=th)
หลีกเลี่ยงการใช้คำตอบแบบข้อความอิสระเมื่ออาจเป็นการเลือกหลายรายการ เมนูแบบเลื่อนลง หรือตัวเลือกแบบตัวเลือกเดียวแทน
ตัวเลือกเดียวและบูลีน
ตัวเลือกเดียวและตัวเลือกบูลีนเป็นการควบคุมการเลือกที่ปรากฏเป็นปุ่มตัวเลือกเมื่อระบบขอให้ผู้ใช้เลือกตัวเลือกเดียว
ใช้ boolean choice เมื่อมีตัวเลือกไบนารีเป็น "ใช่" หรือ "ไม่ใช่" หรือใช้คอมโพเนนต์ตัวเลือกเดียว หากมีตัวเลือกมากกว่า ~10 รายการในรายการ ให้ใช้เมนูแบบเลื่อนลงแทนตัวเลือกเดียว เมนูแบบเลื่อนลงจะแน่นขึ้นและ ไปยังส่วนต่างๆ ได้ง่ายขึ้นเมื่อมีตัวเลือกจำนวนมาก
![Question title: นี่เป็นการเข้าชมครั้งแรกของพวกเขาหรือไม่ ตัวเลือกการเลือกบูลีนคือ "ใช่" และ "ไม่"](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-boolean.png?hl=th)
ใช้ตัวเลือกบูลีนเมื่อตัวเลือกเป็น "ใช่" และ "ไม่ใช่"
![Question title: ระดับการศึกษาสูงสุดคือระดับใด
ตัวเลือกเดียวที่มีได้แก่ 1. ไม่ทราบ 2. ไม่ได้เรียน
3. โรงเรียนประถมศึกษา 4. โรงเรียนมัธยมศึกษา](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-single.png?hl=th)
ใช้ตัวเลือกเดียวเมื่อผู้ใช้เลือก 1 ตัวเลือกในรายการได้
![รายการแบบตัวเลือกเดียวจะแสดงรายชื่อรัฐที่ยาวมาก สถานะ 23-27
ปรากฏอยู่](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-dont.png?hl=th)
หลีกเลี่ยงการใช้ตัวเลือกเดียวสำหรับรายการที่ยาวมาก (10 รายการขึ้นไป) โปรดใช้เมนูแบบเลื่อนลงแทน
เครื่องมือเลือกวันที่
เครื่องมือเลือกวันที่ช่วยให้ผู้ใช้ป้อนวันที่ได้จากทั้งตัวเลือกวันที่ในปฏิทินและแป้นพิมพ์ เครื่องมือเลือกวันที่ของปฏิทินจะเปิดใช้งานเมื่อแตะไอคอนปฏิทิน
ใช้เครื่องมือเลือกวันที่ของปฏิทินเฉพาะกับวันที่ที่ใกล้เคียงกับวันนี้ เช่น รอบเดือนครั้งล่าสุดหรือการเข้าชมครั้งถัดไป หรือจัดลำดับความสำคัญของรายการแป้นพิมพ์ สำหรับวันต่างๆ เช่น วันเกิด
![วันเกิด ป้อนวันที่บนแป้นพิมพ์อยู่ ไอคอนปฏิทิน
ทางขวาของช่องข้อความ เลือกช่องทำเครื่องหมายเพื่อระบุว่าเป็นวันที่โดยประมาณ](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-do.png?hl=th)
สำหรับการป้อนวันที่ ให้เปิดใช้ทั้งรายการแป้นพิมพ์ (การแตะกล่องข้อความ) และ เครื่องมือเลือกวันที่ในปฏิทิน (ไอคอนการแตะ)
![มุมมองปฏิทินของเครื่องมือเลือกวันที่](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-dont.png?hl=th)
หลีกเลี่ยงการเปิดใช้เครื่องมือเลือกวันที่ในปฏิทินเป็นวิธีป้อนข้อมูลวันเกิดเพียงอย่างเดียว การนำทางไปที่เดือนและปีนั้นเป็นเรื่องยาก
เมนูแบบเลื่อนลง
เมนูแบบเลื่อนลงช่วยให้ผู้ใช้สามารถเลือกจากตัวเลือกต่างๆ ได้ เมื่อผู้ใช้เริ่มพิมพ์ ตัวเลือกจะกรองตามสิ่งที่ป้อน วิธีนี้จะช่วยให้ผู้ใช้ พบตัวเลือกที่ต้องการจากรายการขนาดใหญ่ได้อย่างรวดเร็ว
เมนูแบบเลื่อนลงเป็นทางเลือกที่ดีแทนตัวเลือกเดียวเมื่อรายการตัวเลือกมีความยาวมาก (มากกว่า 10 ตัวเลือก) เนื่องจากใช้พื้นที่น้อยกว่า
![เมนูแบบเลื่อนลงของสถานะ A-F](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-do.png?hl=th)
ใช้เมนูแบบเลื่อนลงเมื่อเลือกตัวเลือก 1 ตัวเลือกในรายการตัวเลือกที่ยาวมากๆ เช่น เลือกรัฐหรือเมือง
![เมนูแบบเลื่อนลงสำหรับอายุ ซึ่งแสดงหมายเลข 1 ถึง 6](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-dont.png?hl=th)
หลีกเลี่ยงการใช้เมนูแบบเลื่อนลงเมื่อพิมพ์เนื้อหาได้ง่ายขึ้น แทนที่จะต้องเลื่อนผ่านตัวเลือกทั้งหมด เช่น อายุ
หลายตัวเลือก
หลายตัวเลือกคือการควบคุมการเลือกที่ปรากฏเป็นช่องทำเครื่องหมายเมื่อผู้ใช้สร้างหลายส่วนจากรายการตัวเลือกได้
ใช้หลายตัวเลือกเมื่อผู้ใช้สามารถเลือกได้จากรายการตัวเลือกที่กำหนดไว้ล่วงหน้าเท่านั้น หากผู้ใช้เพิ่มคำตอบฟรีของตนเองได้ด้วย ให้ใช้คอมโพเนนต์ตัวเลือกแบบเปิดแทน ในช่องinstructions ให้เขียน "เลือกได้มากกว่า 1 ข้อ" เพื่อให้ผู้ใช้ทราบว่าสามารถเลือกหลายตัวเลือกได้
![Question: เหตุผลที่เข้ามาดูในวันนี้ แสดงช่องทำเครื่องหมาย 4 ช่องและตัวเลือกแสดงอยู่ โดยแต่ละรายการในแต่ละแถว](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-do.png?hl=th)
ลักษณะที่ปรากฏเริ่มต้นคือคอนเทนเนอร์รอบช่องทำเครื่องหมายเพื่อทำให้บริเวณที่แตะได้ชัดเจน
![Question title: เหตุผลของการเข้าชมในวันนี้ แสดงช่องทำเครื่องหมาย 6 ช่องและตัวเลือก โดยแสดง 2 ช่องในแต่ละแถว ข้อความบางส่วนถูกตัดสำหรับ 2 ตัวเลือก](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-dont.png?hl=th)
หลีกเลี่ยงการแสดงตัวเลือกหลายรายการต่อแถว เนื่องจากขนาดหน้าจอโทรศัพท์และขนาดข้อความมีความแตกต่างกัน ข้อความอาจถูกตัดออก
เปิดตัวเลือก
ตัวเลือกแบบเปิดคล้ายกับตัวเลือกแบบหลายตัวเลือก แต่เพิ่มความสามารถให้ผู้ใช้เลือกอื่นๆ และพิมพ์ข้อความตามอิสระได้
ใช้ตัวเลือกแบบเปิดเมื่อมีรายการตัวเลือกที่กำหนดไว้ล่วงหน้า แต่ผู้ใช้ก็เพิ่มตัวเลือกอื่นๆ ได้เช่นกัน ใช้ตัวเลือกแบบเปิดเมื่อทราบตัวเลือกส่วนใหญ่ แต่คุณคาดว่าผู้ใช้บางรายจะเลือกอื่นๆ เนื่องจากไม่มีตัวเลือกใดที่ใช้ได้
![เลือก "อื่นๆ" ไว้ ช่องข้อความสําหรับเพิ่มข้อความอิสระทํางานอยู่
แป้นพิมพ์ปรากฏขึ้น](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-do.png?hl=th)
ใช้เมื่อต้องมีการเก็บรวบรวมข้อมูลที่แม่นยำที่จำเป็น และไม่มีตัวเลือกที่กำหนดไว้ล่วงหน้า ตัวอย่าง: อาชีพ
![Question: มีคำถามเพิ่มเติมไหม มี 3 ตัวเลือก ได้แก่ ได้ ไม่ได้ และอื่นๆ เลือก "อื่นๆ" ไว้ ช่องข้อความสําหรับเพิ่มข้อความอิสระทํางานอยู่](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-dont.png?hl=th)
หลีกเลี่ยงการใช้หากคำตอบส่วนใหญ่นั้นจำเป็นต้องเลือกอื่นๆ ในกรณีนี้ ให้ใช้ช่องข้อความหรือช่องย่อหน้าแทน
Slider
แถบเลื่อนช่วยให้ผู้ใช้เลือกช่วงค่าได้ แถบเลื่อนใน Android FHIR SDK เป็นแถบเลื่อนแยก แถบเลื่อนแบบแยกกันช่วยให้ผู้ใช้เลือกค่าที่เจาะจงจากช่วงที่กำหนดไว้ล่วงหน้าได้ อาจมีการใช้เครื่องหมายถูกเพื่อระบุค่าที่มี หลีกเลี่ยงการใช้แถบเลื่อนเพื่อป้อนข้อมูลที่เป็นตัวเลข ให้ใช้ช่องข้อความหรือเมนูแบบเลื่อนลงแทน
ดูข้อมูลเพิ่มเติมเกี่ยวกับแถบเลื่อนใน material.io
![Question title: ลูกค้ามีบุตรกี่คน มีการเลือกแถบเลื่อนหมายเลข 4](https://developers.google.cn/static/open-health-stack/design/images/data-capture/slider-dont.png?hl=th)
หลีกเลี่ยงการใช้แถบเลื่อนสำหรับค่าที่เจาะจงเมื่อมีช่วงขนาดใหญ่ ใช้ช่องข้อความที่มีการป้อนข้อมูลด้วยแป้นพิมพ์แทน
การตรวจสอบข้อมูลและข้อผิดพลาด
การตรวจสอบข้อมูล
การตรวจสอบข้อมูลจะจำกัดประเภทข้อมูลหรือค่าที่สามารถป้อนในช่องข้อความ การตรวจสอบข้อมูลจะช่วยปรับปรุงคุณภาพของข้อมูลที่รวบรวม
ใช้ช่อง EntryFormat เพื่อแสดงข้อจำกัดด้านรูปแบบหรือค่า แสดงข้อความแสดงข้อผิดพลาดเกี่ยวกับการตรวจสอบข้อมูลที่มีความหมายโดยตรงได้ทันทีเพื่อให้ผู้ใช้แก้ไขข้อผิดพลาดได้
![ข้อความป้ายกำกับ: หมายเลขโทรศัพท์ รูปแบบรายการ: ตัวเลข 8 หลัก](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-show.png?hl=th)
แสดงข้อจำกัดในการตรวจสอบข้อมูลล่วงหน้าเพื่อให้ผู้ใช้ทราบวิธีป้อนข้อมูล
![ข้อความป้ายกำกับ: หมายเลขโทรศัพท์ รูปแบบรายการ: ไม่มี](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-hide.png?hl=th)
ผู้ใช้อาจพบข้อผิดพลาดโดยไม่ได้แสดงจำนวนหลัก และอาจใช้เวลาในการดำเนินการนานขึ้น
![วันที่ป้อนคือ 22/33/4444 ข้อความแสดงข้อผิดพลาด: รูปแบบวันที่ไม่ถูกต้อง ต้องอยู่ในรูปแบบ วว/ดด/ปปปป](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-timely.png?hl=th)
แสดงข้อผิดพลาดในการตรวจสอบข้อมูลที่สำคัญทันทีหลังจากกรอกข้อมูล ในช่องเสร็จแล้ว ข้อความแสดงข้อผิดพลาดจะแทนที่ข้อความรูปแบบรายการที่มีอยู่
![กล่องโต้ตอบ แก้ไขข้อผิดพลาดต่อไปนี้ 1. หมายเลขโทรศัพท์ 2. วันเกิด
ปุ่ม 1: ส่งเลย ปุ่ม 2: แก้ไขข้อผิดพลาด](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-dontwait.png?hl=th)
อย่ารอจนผู้ใช้กด "ส่ง" เพื่อแสดงข้อผิดพลาดในการตรวจสอบความถูกต้องเป็นครั้งแรก
ข้อผิดพลาด
ข้อความแสดงข้อผิดพลาดจะแจ้งเตือนผู้ใช้เมื่อมีปัญหาเกิดขึ้นและแจ้งวิธีแก้ไข
ใช้สี สัญลักษณ์ และข้อความในการสื่อสารข้อผิดพลาด
ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อความแสดงข้อผิดพลาดใน Material.io
![ข้อความแสดงข้อผิดพลาดคือ "คําถามที่จําเป็น โปรดเลือก 1 รายการ"](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-howtofix.png?hl=th)
อธิบายสาเหตุที่เกิดข้อผิดพลาด (คําถามที่จําเป็น) และวิธีแก้ไข (เลือก 1 ข้อ)
![ข้อความแสดงข้อผิดพลาดคือ "ข้อผิดพลาด"](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noexplanation.png?hl=th)
ข้อความแสดงข้อผิดพลาดที่บอกแค่ "ข้อผิดพลาด" จะไม่มีประโยชน์ต่อผู้ใช้ในการรู้วิธีแก้ไขข้อผิดพลาด
![วันเกิด วันที่ป้อนคือ 22/33/4444 ข้อความแสดงข้อผิดพลาดคือรูปแบบวันที่ไม่ถูกต้อง ต้องอยู่ในรูปแบบ วว/ดด/ปปปป](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noblame.png?hl=th)
ตัวอย่างเช่น "รูปแบบวันที่ไม่ถูกต้อง ต้องอยู่ในรูปแบบ วว/ดด/ปปปป"
![วันเกิด วันที่ป้อนคือ 22/33/4444 ข้อความแสดงข้อผิดพลาดคือ "คุณป้อนรูปแบบวันที่ไม่ถูกต้อง"](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-dontblame.png?hl=th)
หลีกเลี่ยงการกล่าวโทษผู้ใช้ด้วยข้อความแสดงข้อผิดพลาดที่มีคำว่า "คุณ" เช่น "คุณป้อนรูปแบบวันที่ผิด"
![ข้อความแสดงข้อผิดพลาดซึ่งมีไอคอนอยู่ด้านหน้าข้อความสีแดงซึ่งแสดง "คำถามที่ต้องตอบ" เลือกหนึ่งตัวเลือกขึ้นไป" คอนเทนเนอร์ช่องทำเครื่องหมายมีเส้นขอบสีแดง](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-combo.png?hl=th)
ใช้สี สัญลักษณ์ และข้อความเพื่อแจ้งให้ผู้ใช้ทราบว่ามีข้อผิดพลาด
![ไม่มีข้อความหรือไอคอนแสดงข้อผิดพลาด คอนเทนเนอร์ช่องทำเครื่องหมายมีเส้นกรอบสีแดง ซึ่งเป็นเพียงสัญญาณเดียวที่บ่งชี้ว่ามีข้อผิดพลาด](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-onlycolor.png?hl=th)
เพื่อรองรับความบกพร่องทางสายตาที่พบบ่อย เช่น ตาบอดสีเขียวอมแดง หลีกเลี่ยงการใช้สีเพียงอย่างเดียวในการสื่อสารข้อผิดพลาด
![คอนเทนเนอร์ช่องทำเครื่องหมายจะมีเส้นขอบสีแดงและไอคอนข้อผิดพลาด 1 ไอคอนแสดงอยู่ด้านหลังแต่ละคอนเทนเนอร์ คุณจะเห็นไอคอน 3 รายการ](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-icons.png?hl=th)
เพียงไอคอนเดียวก็เพียงพอแล้ว อย่าใช้ไอคอนมากเกินไปในการสื่อสารเกี่ยวกับข้อผิดพลาด