บทนำ
การตอบแบบสอบถามเป็นงานหลักสำหรับบุคลากรสาธารณสุขส่วนใหญ่ที่ใช้แอปสุขภาพบนอุปกรณ์เคลื่อนที่
การป้อนข้อมูลอาจเป็นเรื่องยากและอาจเกิดข้อผิดพลาดได้ เป้าหมายของเราในการใช้ไลบรารีการจับภาพ Structured Data (SDC) และ หลักเกณฑ์การออกแบบคือการช่วยให้คุณปรับปรุงประสบการณ์ของผู้ใช้ในการป้อนข้อมูล และคุณภาพของข้อมูลที่จับภาพได้
ธีมทั้ง 4 ที่ครอบคลุมในส่วนนี้มีดังนี้
เลย์เอาต์และการนำทาง
เลย์เอาต์แบบเลื่อนยาวและแบบแบ่งหน้า
Android FHIR SDK มีตัวเลือกเลย์เอาต์ 2 แบบให้คุณเลือก
- การเลื่อนยาว (ค่าเริ่มต้น)
- แบ่งหน้า
แบบสอบถามการเลื่อนยาวจะแสดงคำถามทั้งหมดในหน้าเดียว และผู้ใช้จะไปยังคำถามแต่ละข้อได้โดยการเลื่อน
แบบสอบถามแบ่งหน้าจะแสดงเนื้อหาในหน้าต่างๆ คำถามหรือช่องป้อนข้อมูลที่เกี่ยวข้องสามารถจัดกลุ่มไว้ด้วยกันในหน้าเดียวได้ ปุ่มย้อนกลับและถัดไป จะอยู่ที่ด้านล่างของหน้าเพื่อไปยังหน้าต่างๆ
ดูวิธีสร้างแบบสอบถามแบบแบ่งหน้าใน GitHub
คุณควรเลือกเลย์เอาต์ใด
ตัวเลือกเลย์เอาต์แต่ละแบบมีทั้งข้อดีและข้อเสีย ด้านล่างนี้คือคุณลักษณะบางอย่างของเลย์เอาต์แต่ละประเภทที่ควรพิจารณาเมื่อคุณเลือกเลย์เอาต์ที่จะใช้
| การเลื่อนยาว | แบ่งหน้า | |
|---|---|---|
| ความเร็วในการไปยังส่วนต่างๆ | ไปยังส่วนต่างๆ ได้เร็วขึ้น | การไปยังส่วนต่างๆ ช้าลง |
| ความแม่นยำของการนำทาง | การนำทางที่แม่นยำน้อยกว่า | การนำทางที่แม่นยำยิ่งขึ้น |
| ปรับโฟกัสที่คำถามอีกครั้งหลังจากเปลี่ยนงาน | ปรับทิศทางใหม่ได้ยากหลังจากถูกขัดจังหวะ | ปรับทิศทางได้ง่ายขึ้นหลังจากถูกขัดจังหวะ |
| การตอบแบบสอบถามดิจิทัลหลังการเข้าชม (คัดลอกจากแบบสอบถามที่เป็นกระดาษ) | ง่ายขึ้นเมื่อคัดลอกจากกระดาษ | ยากกว่าเมื่อคัดลอกจากกระดาษ |
| หน้าจอขนาดเล็ก | แย่กว่าสำหรับหน้าจอขนาดเล็ก | เหมาะสำหรับหน้าจอขนาดเล็ก |
| การช่วยเหลือพิเศษ | การช่วยเหลือพิเศษแย่ลง ไปยังส่วนต่างๆ ได้ยาก | ดีกว่าสำหรับการช่วยเหลือพิเศษ หน้าจอแยกที่โปรแกรมอ่านหน้าจอ การอ่านออกเสียงข้อความ และเทคโนโลยีอื่นๆ จัดการได้ |
| พื้นที่สำหรับวิธีการและคำอธิบาย | แย่ลงสำหรับคำแนะนำและวิธีการ | เหมาะสำหรับการให้คำแนะนำและวิธีการ |
การเลื่อนยาว
ใส่หมายเลขคำถามเพื่อให้ไปยังส่วนต่างๆ ได้ง่ายขึ้นในเลย์เอาต์หน้าเดียว
ลดขนาดแบบอักษรของชื่อคำถามเมื่อใช้การเลื่อนแบบยาว เพื่อให้ เนื้อหาปรากฏบนหน้าจอมากขึ้น ตัวอย่าง: การเลื่อนยาวคือ 16 พิกเซล Paginated คือ 28px
การใส่เลขหน้า
แป้นพิมพ์ เมนูแบบเลื่อนลง และคอมโพเนนต์อื่นๆ ใช้พื้นที่ในหน้าเว็บ ดังนั้น ให้ตั้งเป้าหมายเป็น 1 คำถามต่อหน้า
เนื้อหาควรแสดงเหนือครึ่งหน้าล่าง
ตัวอย่าง: ช่องข้อความทั้ง 3 ช่องนี้เกี่ยวข้องกับข้อมูลบุคคลติดต่อสำรอง จึงจัดกลุ่มไว้ด้วยกันในหน้าเดียว
หลีกเลี่ยงการจัดกลุ่มเนื้อหาที่ไม่เกี่ยวข้องไว้ในหน้าเดียวกันเพื่อไม่ให้เกิดความสับสน
ตัวบอกสถานะความคืบหน้า
ตัวบ่งชี้ความคืบหน้าจะแสดงความคืบหน้าภายในแบบสอบถาม
ใส่ตัวบ่งชี้ความคืบหน้าในแบบสอบถามขนาดยาวเพื่อช่วยให้ผู้ใช้ไปยังส่วนต่างๆ และ ดูความคืบหน้าได้ ตัวบ่งบอกความคืบหน้าจะแสดงตำแหน่งภายในแบบสอบถามและ จำนวนที่เหลือที่ต้องตอบ
วางไว้ที่ด้านบนเหนือคำถามและยึดไว้เพื่อให้มองเห็นได้เสมอแม้ในขณะที่เลื่อน
วางไว้ที่ด้านล่างแทนได้ เหนือปุ่มย้อนกลับและปุ่มถัดไป เลย์เอาต์นี้ยังช่วยให้คุณแสดงหน้าเว็บที่ผู้ใช้อยู่ได้ด้วย
ปุ่มนำทาง
ปุ่มนำทาง (กลับ ถัดไป) จะอยู่ที่ด้านล่างของ แบบสอบถาม ในแบบสอบถามที่เลื่อนได้ไม่รู้จบหรือในหน้าสุดท้ายของแบบสอบถามที่มีการแบ่งหน้า ปุ่มถัดไปจะมีป้ายกำกับว่า "ส่ง"
วางปุ่มในตำแหน่งที่สอดคล้องกันและใช้ปุ่มที่ใช้งานอยู่เสมอซึ่ง ติดป้ายกำกับด้วยการดำเนินการของปุ่ม เช่น ย้อนกลับและถัดไป
แสดงปุ่มที่ใช้งานอยู่เสมอ แม้ว่าแบบฟอร์มจะยังไม่สมบูรณ์ เมื่อแตะ ถัดไป ให้แสดงกล่องโต้ตอบป๊อปอัปพร้อมวิธีการกรอกข้อมูลในช่องที่ขาดหายไป หรือข้อผิดพลาดในการตรวจสอบ
ปุ่มที่ไม่ได้ใช้งานทำให้ผู้ใช้ทราบได้ยากว่าจะแก้ไขปัญหาอย่างไร
หลีกเลี่ยงการใช้ปุ่มที่มีเฉพาะไอคอน ติดป้ายกำกับปุ่มด้วยการดำเนินการที่สื่อความหมายเสมอ
คำถามและวิธีการ
- ชื่อแบบสอบถาม
- ตัวบ่งชี้ความคืบหน้า
- ส่วนหัวของกลุ่ม
- ชื่อคำถาม
- วิธีการ
- ช่องป้อนข้อมูล
- รูปแบบรายการ
- ฟิลด์ที่จำเป็น
- ความช่วยเหลือ
ส่วนหัวของกลุ่ม
ส่วนหัวของกลุ่มคือส่วนหัวที่เป็นข้อความซึ่งจะแสดงเหนือชื่อคำถาม
ใช้ส่วนหัวของกลุ่มเพื่อจัดกลุ่มคำถามที่คล้ายกันไว้ด้วยกัน ใช้ส่วนหัวของกลุ่มเมื่อเพิ่มข้อมูลที่เป็นประโยชน์เท่านั้น
ใช้ชื่อย่อเพื่อจัดกลุ่มคำถามที่คล้ายกันไว้ด้วยกัน ตัวอย่าง: ระบบจะจัดกลุ่มคำถามทั้งหมด ที่เกี่ยวข้องกับประวัติผู้ป่วย
หลีกเลี่ยงชื่อที่ซับซ้อนหรือชื่อยาวที่เกิน 1 บรรทัด
ชื่อคำถาม
ชื่อคำถามอธิบายข้อมูลที่ขออย่างกระชับ ชื่อคำถามมีขนาดแบบอักษรใหญ่ที่สุดในหน้าเว็บเพื่อดึงดูดความสนใจของผู้ใช้ ไปยังคำถาม
ทุกหน้าหรือคำถามควรมีชื่อคำถาม ตั้งชื่อคำถาม ให้สั้นหรือใช้รูปแบบคำถาม
ชื่อแบบสั้นช่วยให้ผู้ใช้อ่านได้ง่ายขึ้น
หลีกเลี่ยงคำถามที่ยาวมากหรือการซ้อนคำถาม 2 ข้อเข้าด้วยกัน
ใส่ชื่อคำถามเสมอเพื่อให้ผู้ใช้ทราบได้ง่ายขึ้นว่าต้องป้อนข้อมูลใด
วิธีการ
วิธีการเป็นช่องข้อความที่ไม่บังคับซึ่งแสดงใต้ชื่อคำถาม
ใช้ช่องวิธีการเพื่ออธิบายวิธีการที่เกี่ยวข้อง เช่น หากต้องตอบคำถาม จำนวนตัวเลือกที่เลือกได้ (1 หรือหลายตัวเลือก) และสิ่งที่ผู้ใช้ควรทำหากไม่สามารถกรอกข้อมูลทั้งหมดหรือตอบคำถามได้
ใช้ช่องวิธีการเพื่อแจ้งว่าต้องตอบคำถามหรือไม่และเลือกได้กี่ข้อ
ใช้คำสั่งเพื่อให้ผู้ใช้ทราบสิ่งที่ต้องทำหากพบสถานการณ์ เช่น ไม่สามารถกรอกข้อมูลในช่องทั้งหมดได้
ใช้คำสั่งเพื่อระบุบริบทหรือคำจำกัดความเพิ่มเติมสำหรับคำที่ใช้ ในชื่อคำถาม
ข้อความป้ายกำกับ
ข้อความป้ายกำกับจะแจ้งให้ผู้ใช้ทราบว่าระบบขอข้อมูลใดสำหรับช่องข้อความ หรือเมนูแบบเลื่อนลง เมื่อเลือกช่อง ข้อความป้ายกำกับจะย้ายจากตรงกลาง ของช่องข้อความไปที่ด้านบน
ช่องข้อความและกล่องเมนูแบบเลื่อนลงทุกช่องควรมีป้ายกำกับ ข้อความป้ายกำกับควร สั้น ชัดเจน และมองเห็นได้ทั้งหมด
ข้อความป้ายกำกับควรสั้น ชัดเจน และมองเห็นได้ทั้งหมด
ข้อความป้ายกำกับไม่ควรยาวเกินไป ถูกตัดทอน หรือใช้หลายบรรทัด
ติดป้ายกำกับช่องข้อความเสมอเพื่อให้ผู้ใช้ทราบว่าควรป้อนข้อมูลใด
รูปแบบรายการ
EntryFormat จะแสดงใต้ช่องข้อความเพื่อแจ้งให้ผู้ใช้ทราบถึงรูปแบบเฉพาะ ที่ต้องป้อนข้อมูล ข้อความแสดงข้อผิดพลาดจะแสดงใน ฟิลด์ EntryFormat และแทนที่วิธีการ EntryFormat ที่มีอยู่
ใช้ EntryFormat สำหรับวันที่ หมายเลขโทรศัพท์ หน่วย และจำนวนเต็ม
แสดงรูปแบบวันที่ใต้ช่องและใส่คำอธิบาย
การไม่แสดงรูปแบบข้อมูลอาจทำให้มีการป้อนข้อมูลอย่างไม่ถูกต้อง
เมื่อป้อนช่วงค่าทางการแพทย์ ให้ระบุตัวอย่างของช่วงค่าปกติ ซึ่งจะช่วยให้ผู้ใช้สังเกตเห็นข้อผิดพลาดหรือตัวเลขที่อยู่นอกช่วงได้
ฟิลด์ที่จำเป็น
ช่องที่ต้องกรอกระบุว่าผู้ใช้ต้องกรอกข้อมูลในช่องดังกล่าวและจะถูกบล็อกไม่ให้ ดำเนินการต่อจนกว่าจะกรอกข้อมูลในช่องดังกล่าวเสร็จสิ้น
หากต้องการระบุว่าต้องกรอกข้อมูลในช่อง ให้แสดงเครื่องหมายดอกจัน (*) ที่ท้ายชื่อคำถาม ระบุ "คำถามที่ต้องตอบ" ในช่องคำสั่ง เนื่องจากบางคนอาจไม่ทราบว่าเครื่องหมายดอกจัน (*) หมายถึงอะไร หากไม่มีชื่อคำถาม ให้แสดงเครื่องหมายดอกจัน (*) ในข้อความป้ายกำกับ
แสดงว่าช่องเป็นช่องที่ต้องกรอกโดยใช้เครื่องหมายดอกจัน (*) และใส่ คำสั่งที่เป็นข้อความที่ระบุว่า "คำถามที่ต้องตอบ" ผู้ใช้จำนวนมากไม่คุ้นเคย กับความหมายของเครื่องหมายดอกจัน(*) และจะได้รับประโยชน์จากคำอธิบาย
หลีกเลี่ยงการแสดงเฉพาะเครื่องหมายดอกจัน (*) โดยไม่มีคำอธิบายเป็นลายลักษณ์อักษรว่า หมายถึงอะไร
ใช้คำศัพท์ที่ผู้ใช้คุ้นเคยมากที่สุด ตัวอย่าง: "บังคับ" อาจเป็นคำที่คุ้นเคยมากกว่าและใช้ในบางประเทศแทน "ต้องระบุ"
หากคำถามส่วนใหญ่เป็นคำถามที่บังคับ ให้ระบุคำถามที่ไม่บังคับแทน
หากไม่มีชื่อคำถาม ให้แสดงเครื่องหมายดอกจันในข้อความป้ายกำกับ
ความช่วยเหลือ
ไอคอนความช่วยเหลือจะแสดงข้างชื่อคำถาม เมื่อแตะไอคอน กล่องข้อมูลความช่วยเหลือจะปรากฏขึ้นพร้อมข้อมูลเพิ่มเติม การแตะไอคอนอีกครั้ง จะปิดช่องข้อมูลความช่วยเหลือ
นี่เป็นองค์ประกอบเสริม ใช้เฉพาะในกรณีที่มีประโยชน์ในการแสดงข้อมูลเพิ่มเติม ที่ไม่จำเป็นต้องแสดงอยู่เสมอ
ใช้ความช่วยเหลือสำหรับข้อมูลที่ผู้ใช้อาจต้องดูเพียงครั้งเดียวหรือข้อมูลที่ ให้ข้อมูลเพิ่มเติม
หลีกเลี่ยงการซ่อนวิธีการภายในกล่องความช่วยเหลือที่ควรแสดงต่อ ทุกคน
การเก็บข้อมูล
กรณีที่ควรใช้คอมโพเนนต์ใด
| ประเภทการป้อนข้อมูล | ตัวเลือกบูลีน | ตัวเลือกเดียว | หลายตัวเลือก | ตัวเลือกแบบเปิด | เมนูแบบเลื่อนลง | เครื่องมือเลือกวันที่ | ช่องข้อความ | แถบเลื่อน | เติมคำอัตโนมัติ |
|---|---|---|---|---|---|---|---|---|---|
| เลือก "ใช่" หรือ "ไม่" | |||||||||
| เลือก 1 ตัวเลือก | ข้อควรระวัง |
||||||||
| เลือกหลายรายการ | ข้อควรระวัง |
||||||||
| ข้อความ | |||||||||
| วันที่ | |||||||||
| Numbers | ข้อควรระวัง |
ช่องข้อความ
ช่องข้อความระบุว่าผู้ใช้ป้อนข้อมูลได้
ใช้ช่องข้อความเมื่อมีคนต้องป้อนข้อความลงในแบบสอบถาม เช่น ชื่อ หมายเลขโทรศัพท์ หรือที่อยู่ จำกัดการป้อนข้อมูลที่ต้องใช้การป้อนข้อความ (แป้นพิมพ์) เมื่อใช้การเลือกที่ป้อนข้อมูลไว้ล่วงหน้า (แบบหลายตัวเลือกหรือแบบตัวเลือกเดียว) แทนได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับช่องข้อความใน material.io
ใช้ช่องข้อความสำหรับการป้อนข้อมูลที่ต้องพิมพ์คำหรือตัวเลขที่ไม่ซ้ำกัน
หลีกเลี่ยงการใช้คำตอบแบบข้อความอิสระเมื่อใช้การเลือกหลายรายการได้ เมนูแบบเลื่อนลง หรือการเลือกแบบตัวเลือกเดียวแทน
ตัวเลือกเดียวและตัวเลือกบูลีน
ตัวเลือกเดียวและตัวเลือกบูลีนคือตัวควบคุมการเลือกที่ปรากฏเป็นปุ่มตัวเลือกเมื่อระบบขอให้ผู้ใช้เลือก 1 ตัวเลือกจากตัวเลือกต่างๆ
ใช้ตัวเลือกบูลีนเมื่อมีตัวเลือกแบบไบนารีเป็น "ใช่" หรือ "ไม่ใช่" ไม่เช่นนั้น ให้ใช้คอมโพเนนต์ตัวเลือกเดียว หากมีตัวเลือกมากกว่า 10 รายการในลิสต์ ให้ใช้เมนูแบบเลื่อนลงแทนตัวเลือกเดียว เมนูแบบเลื่อนลงจะมีความหนาแน่นมากกว่าและนำทางได้ง่ายกว่า เมื่อมีตัวเลือกจำนวนมาก
ใช้ตัวเลือกบูลีนเมื่อตัวเลือกคือ "ใช่" และ "ไม่ใช่"
ใช้ตัวเลือกเดียวเมื่อผู้ใช้เลือกได้ 1 ตัวเลือกในรายการ
หลีกเลี่ยงการใช้ตัวเลือกเดียวสำหรับรายการที่ยาวมาก (10 รายการขึ้นไป) ให้ใช้เมนูแบบเลื่อนลงแทน
เครื่องมือเลือกวันที่
เครื่องมือเลือกวันที่ช่วยให้ผู้ใช้ป้อนวันที่ผ่านเครื่องมือเลือกวันที่ในปฏิทินและแป้นพิมพ์ได้ ระบบจะเปิดใช้งานเครื่องมือเลือกวันที่ในปฏิทินเมื่อแตะไอคอนปฏิทิน
ใช้เครื่องมือเลือกวันที่ในปฏิทินเฉพาะวันที่ที่ใกล้กับวันที่ปัจจุบัน เช่น วันที่ประจำเดือนครั้งสุดท้ายหรือการนัดหมายครั้งถัดไป หรือให้ความสำคัญกับการป้อนข้อมูลด้วยแป้นพิมพ์สำหรับ วันที่ เช่น วันเกิด
สำหรับการป้อนวันที่ ให้เปิดใช้ทั้งการป้อนข้อมูลด้วยแป้นพิมพ์ (แตะกล่องข้อความ) และ เครื่องมือเลือกวันที่ในปฏิทิน (แตะไอคอน)
หลีกเลี่ยงการเปิดใช้เครื่องมือเลือกวันที่ในปฏิทินเป็นวิธีการป้อนข้อมูลวันเกิดเพียงอย่างเดียว ไปยังเดือนและปีได้ยาก
เมนูแบบเลื่อนลง
เมนูแบบเลื่อนลงช่วยให้ผู้ใช้เลือกจากตัวเลือกต่างๆ ได้ เมื่อ ผู้ใช้เริ่มพิมพ์ ตัวเลือกจะกรองตามสิ่งที่ป้อน ซึ่งจะช่วยให้ผู้ใช้ ค้นหาตัวเลือกที่เหมาะสมจากรายการขนาดใหญ่ได้อย่างรวดเร็ว
เมนูแบบเลื่อนลงเป็นตัวเลือกที่ยอดเยี่ยมแทนตัวเลือกเดียวเมื่อรายการ ตัวเลือกยาวมาก (มากกว่า 10 ตัวเลือก) เนื่องจากใช้พื้นที่น้อยกว่า
ใช้เมนูแบบเลื่อนลงเมื่อเลือกตัวเลือก 1 รายการในรายการตัวเลือกที่ยาวมาก เช่น การเลือกรัฐหรือเมือง
หลีกเลี่ยงการใช้เมนูแบบเลื่อนลงเมื่อการพิมพ์เนื้อหาจะง่ายกว่า การเลื่อนดูตัวเลือกทั้งหมด เช่น อายุ
หลายตัวเลือก
หลายตัวเลือกคือตัวควบคุมการเลือกที่ปรากฏเป็นช่องทำเครื่องหมายเมื่อผู้ใช้ เลือกได้หลายส่วนจากรายการตัวเลือก
ใช้หลายตัวเลือกเมื่อผู้ใช้เลือกได้จากรายการตัวเลือกที่กำหนดไว้ล่วงหน้าเท่านั้น หากผู้ใช้เพิ่มคำตอบอิสระของตนเองได้ด้วย ให้ใช้คอมโพเนนต์ตัวเลือกแบบเปิด แทน ในช่องวิธีการ ให้เขียนว่า "เลือกทั้งหมดที่เกี่ยวข้อง" เพื่อให้ ผู้ใช้ทราบว่าเลือกได้หลายตัวเลือก
ลักษณะเริ่มต้นคือคอนเทนเนอร์รอบช่องทำเครื่องหมายเพื่อให้เห็นพื้นที่ที่แตะได้ชัดเจน
หลีกเลี่ยงการแสดงหลายตัวเลือกต่อแถว เนื่องจากขนาดหน้าจอและขนาดข้อความของโทรศัพท์แตกต่างกัน ข้อความอาจถูกตัดออก
ตัวเลือกแบบเปิด
ตัวเลือกแบบเปิดคล้ายกับตัวเลือกแบบหลายตัวเลือก แต่เพิ่มความสามารถให้ผู้ใช้ เลือก อื่นๆ และพิมพ์ข้อความอิสระได้
ใช้ตัวเลือกแบบเปิดเมื่อมีรายการตัวเลือกที่ตั้งค่าไว้ล่วงหน้า แต่ผู้ใช้ก็เพิ่มตัวเลือกเพิ่มเติมได้ด้วย ใช้ตัวเลือกแบบเปิดเมื่อทราบตัวเลือกส่วนใหญ่ แต่คาดว่าผู้ใช้บางรายจะเลือกอื่นๆ เนื่องจากไม่มีตัวเลือกที่ระบุ ตรงกับความต้องการ
ใช้เมื่อจำเป็นต้องเก็บรวบรวมข้อมูลที่ถูกต้องและไม่มีตัวเลือกที่กำหนดไว้ล่วงหน้า ที่เกี่ยวข้อง ตัวอย่าง: อาชีพ
หลีกเลี่ยงการใช้หากคำตอบส่วนใหญ่จะต้องเลือกอื่นๆ ในกรณีนี้ ให้ใช้ช่องข้อความหรือช่องย่อหน้าแทน
แถบเลื่อน
แถบเลื่อนช่วยให้ผู้ใช้เลือกจากช่วงของค่าได้ แถบเลื่อนใน Android FHIR SDK เป็นแถบเลื่อนแบบไม่ต่อเนื่อง แถบเลื่อนแบบไม่ต่อเนื่องช่วยให้ผู้ใช้ เลือกค่าที่เฉพาะเจาะจงจากช่วงที่กำหนดไว้ล่วงหน้าได้ คุณอาจใช้เครื่องหมายถูกเพื่อ ระบุค่าที่ใช้ได้ หลีกเลี่ยงการใช้แถบเลื่อนสำหรับการป้อนข้อมูลตัวเลข โปรดใช้ช่องข้อความหรือเมนูแบบเลื่อนลงแทน
ดูข้อมูลเพิ่มเติมเกี่ยวกับแถบเลื่อนได้ที่ material.io
หลีกเลี่ยงการใช้แถบเลื่อนสำหรับค่าที่เฉพาะเจาะจงเมื่อมีช่วงขนาดใหญ่ ใช้ ช่องข้อความที่มีการป้อนด้วยแป้นพิมพ์แทน
การตรวจสอบข้อมูลและข้อผิดพลาด
การตรวจสอบข้อมูล
การตรวจสอบข้อมูลจะจำกัดประเภทข้อมูลหรือค่าที่ป้อนได้ใน ฟิลด์ข้อความ การตรวจสอบข้อมูลช่วยปรับปรุงคุณภาพของข้อมูลที่รวบรวมได้
ใช้ฟิลด์ EntryFormat เพื่อแสดงข้อจำกัดของรูปแบบหรือค่า แสดงข้อความแสดงข้อผิดพลาดในการตรวจสอบข้อมูลที่มีความหมายในบรรทัดและทันทีเพื่อให้ผู้ใช้แก้ไขข้อผิดพลาดได้
แสดงข้อจำกัดในการตรวจสอบข้อมูลตั้งแต่แรกเพื่อให้ผู้ใช้ทราบวิธีป้อนข้อมูล
หากไม่แสดงจำนวนหลักที่หมายเลขโทรศัพท์ต้องมี ผู้ใช้อาจพบข้อผิดพลาด และใช้เวลานานขึ้นในการดำเนินการให้เสร็จสมบูรณ์
แสดงข้อผิดพลาดในการตรวจสอบข้อมูลที่มีความหมายทันทีหลังจากกรอกข้อมูลใน ช่องเสร็จสมบูรณ์ ข้อความแสดงข้อผิดพลาดจะแทนที่ข้อความรูปแบบรายการที่มีอยู่
อย่ารอจนกว่าผู้ใช้จะกด "ส่ง" เพื่อแสดงข้อผิดพลาดในการตรวจสอบ เป็นครั้งแรก
ข้อผิดพลาด
ข้อความแสดงข้อผิดพลาดจะแจ้งเตือนผู้ใช้เมื่อเกิดปัญหาและแจ้งวิธีแก้ไขปัญหา
ใช้สี ไอคอน และข้อความเพื่อสื่อสารข้อผิดพลาด
ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อความแสดงข้อผิดพลาดใน material.io
อธิบายสาเหตุที่เกิดข้อผิดพลาด (คำถามที่ต้องตอบ) และสิ่งที่ทำได้เพื่อแก้ไข (เลือก 1 ข้อ)
ข้อความแสดงข้อผิดพลาดที่ระบุเพียง "ข้อผิดพลาด" ไม่ช่วยให้ผู้ใช้ทราบ วิธีแก้ไขข้อผิดพลาด
ตัวอย่าง: "รูปแบบวันที่ไม่ถูกต้อง รูปแบบต้องเป็น dd/mm/yyyy"
หลีกเลี่ยงการโทษผู้ใช้ด้วยข้อความแสดงข้อผิดพลาดที่มีคำว่า "คุณ" ตัวอย่าง: "คุณ ป้อนรูปแบบวันที่ไม่ถูกต้อง"
ใช้สี ไอคอน และข้อความเพื่อแจ้งให้ผู้ใช้ทราบว่ามีข้อผิดพลาด
เพื่อรองรับความบกพร่องทางสายตาที่พบบ่อย เช่น ตาบอดสีแดงและสีเขียว โปรดอย่าใช้สีเพียงอย่างเดียวในการสื่อสารข้อผิดพลาด
โดยปกติแล้วไอคอนเดียวก็เพียงพอ อย่าใช้ไอคอนมากเกินไปในการสื่อสารข้อผิดพลาด