คุณกรอกแบบฟอร์มได้หลายวิธี ผู้คนอาจใช้แบบฟอร์มของคุณในสมาร์ทโฟนขณะยืนในรถประจำทางที่มีผู้คนหนาแน่น หรือใช้โปรแกรมอ่านหน้าจอ หรือใช้แล็ปท็อปเครื่องเก่า มาดูกันว่าคุณจะทำให้แบบฟอร์มทำงานได้ในอุปกรณ์และบริบทที่ต่างกันไปได้อย่างไร
ตรวจสอบว่าแบบฟอร์มของคุณใช้งานได้สำหรับผู้ใช้แป้นพิมพ์
การทดสอบแรกที่ดีเพื่อให้แน่ใจว่าคุณสามารถเข้าถึงแบบฟอร์มได้คือการกรอกแบบฟอร์มโดยใช้แป้นพิมพ์เท่านั้น
เปิดแบบฟอร์มแล้วลองไปยังส่วนต่างๆ ด้วยแป้น tab
เป็นที่ชัดเจนหรือไม่ว่าฟิลด์แบบฟอร์มใดที่มีการใช้งานอยู่ในปัจจุบัน
หากต้องการช่วยให้ผู้ใช้เข้าใจว่าช่องใดของแบบฟอร์มที่ใช้งานอยู่
คุณสามารถใช้ตัวบ่งชี้โฟกัส
ลองใช้เลย
ใช้ปุ่ม tab
เพื่อไปยังอินพุต
คุณเห็นเส้นขอบเมื่ออินพุตทำงานอยู่ไหม
นั่นคือตัวบ่งชี้การโฟกัส
คุณเพิ่มตัวบ่งชี้โฟกัสได้โดยใช้คลาส Pseudo-class ของ :focus
input:focus {
outline: 4px solid #222;
}
ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบตัวบ่งชี้โฟกัสที่เข้าถึงได้
ช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของแบบฟอร์ม
การทดสอบที่ดีอีกอย่างคือความสามารถในการใช้งานและการช่วยเหลือพิเศษคือการตรวจสอบว่าลำดับแท็บตรรกะเป็นไปตามลำดับแท็บของภาพ คุณจะทดสอบลำดับแท็บได้อย่างไร กด Tab ผ่านแบบฟอร์มทั้งหมด คุณสังเกตเห็นการข้ามในการนำทางที่ไม่เหมาะสมหรือไม่ ตรวจสอบว่าลำดับ DOM ตรงกับลำดับภาพ
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีตรวจสอบว่าลำดับของภาพในหน้าเว็บเป็นไปตามลำดับ DOM
ช่วยให้ผู้ใช้กรอกแบบฟอร์มบนอุปกรณ์แบบสัมผัส
เยี่ยมเลย คุณตรวจสอบว่าแบบฟอร์มใช้งานกับแป้นพิมพ์ได้ คราวนี้มาดูกันว่าคุณจะใช้งานบนอุปกรณ์แบบสัมผัส เช่น โทรศัพท์มือถือ ได้อย่างไร
เปิดแบบฟอร์มบนอุปกรณ์ระบบสัมผัส
กรอกข้อมูลในช่องทั้งหมดและส่งแบบฟอร์ม
คุณต้องแตะหลายครั้งเพื่อเลือกตัวควบคุมแบบฟอร์มใช่ไหม
ปัญหาอาจเกิดจากพื้นที่การแตะมีขนาดเล็กเกินไป
ตรวจสอบว่าขนาดเป้าหมายการแตะของปุ่มมีขนาดอย่างน้อย 48 พิกเซลและแต่ละ <input>
และ <select>
มีขนาดใหญ่พอที่จะแตะได้
นอกจากนี้ คุณยังสามารถช่วยผู้ใช้ไปยังส่วนต่างๆ ของแบบฟอร์มบนอุปกรณ์แบบสัมผัส โดยการเพิ่มระยะห่างระหว่างตัวควบคุมแบบฟอร์มให้เพียงพอ
ตรวจสอบว่าผู้ใช้ได้ใช้แป้นพิมพ์ที่ได้รับการเพิ่มประสิทธิภาพ
ในโมดูลที่ผ่านมา คุณได้เรียนรู้วิธีเปิดใช้งานแป้นพิมพ์บนหน้าจอแบบต่างๆ โดยใช้แอตทริบิวต์ type
หรือ inputmode
เปิดการสาธิต
บนโทรศัพท์แล้วแตะในช่องหมายเลขโทรศัพท์
โปรดสังเกตว่าตัวเลขจะแสดงบนแป้นพิมพ์บนหน้าจอโดยค่าเริ่มต้น พร้อมกับอักขระอื่นๆ ที่คุณอาจต้องใช้สำหรับหมายเลขโทรศัพท์
ใช้ type="tel"
เพื่อเพิ่มประสิทธิภาพแป้นพิมพ์บนหน้าจอสำหรับการป้อนหมายเลขโทรศัพท์
ใช้โทรศัพท์เพื่อทดลองด้วยตัวคุณเอง
และดูว่าคุณสามารถป้อนอักขระทุกตัวที่จำเป็นในการป้อนหมายเลขโทรศัพท์ได้อย่างง่ายดายหรือไม่
หากสงสัยว่าแป้นพิมพ์บนหน้าจอทำงานอย่างไรกับtype
อีกตัวหนึ่ง โปรดลองใช้type="email"
ในการสาธิต
ตรวจสอบว่าไม่ได้ซ่อนปุ่มแบบฟอร์มไว้
ลองจินตนาการว่าเมื่อคุณกรอกแบบฟอร์มยาวๆ
และพร้อมที่จะส่งแล้ว แต่ปุ่มส่งอยู่ที่ไหน
ซึ่งอาจอยู่หลังแถบเครื่องมือของเบราว์เซอร์ ซึ่งอยู่ที่ด้านล่างของหน้าจอ
วิธีหนึ่งที่จะทำให้มั่นใจได้ว่าปุ่มจะแสดงอยู่คือการใช้ฟังก์ชัน CSS ของ env()
ดูวิธีตรวจสอบว่าอินเทอร์เฟซผู้ใช้ของอุปกรณ์ไม่บดบังปุ่ม
ตรวจสอบว่าแบบฟอร์มทำงานได้ในแพลตฟอร์มต่างๆ
พยายามทดสอบแบบฟอร์มของคุณบนอุปกรณ์ต่างๆ ให้มากที่สุด มีแล็ปท็อปเครื่องเก่าใช่ไหม เปิดเบราว์เซอร์เริ่มต้นและทดสอบแบบฟอร์ม หากเพื่อนของคุณมีแท็บเล็ต ยืมและทดสอบแบบฟอร์มที่นั่นด้วย
การจัดรูปแบบบางอย่างดูแตกต่างออกไปในเบราว์เซอร์เดียวไหม คุณดูวิธีทำให้สไตล์ทำงานข้ามแพลตฟอร์มได้ในโมดูลถัดไป
BrowserStack มีบัญชีทดสอบฟรีสำหรับโปรเจ็กต์โอเพนซอร์ส และ Browserling ยังเสนอให้ทดลองใช้ฟรีเพื่อทดสอบในเบราว์เซอร์ อุปกรณ์ และระบบปฏิบัติการต่างๆ
ช่วยให้ผู้ใช้กรอกแบบฟอร์มของคุณในบริบทต่างๆ
ผู้คนไม่เพียงแค่ใช้เบราว์เซอร์ อุปกรณ์ และระบบปฏิบัติการที่ต่างกัน นอกจากนี้ ผู้คนยังใช้แบบฟอร์มของคุณในบริบทต่างๆ อีกด้วย ลองใช้เลย! ตอนนี้มีแดดออกข้างนอกไหม นำโทรศัพท์ออกไปข้างนอก การใช้แบบฟอร์มในแสงจ้าเป็นวิธีที่ดีในการทดสอบว่าสามารถใช้อัตราส่วนคอนทราสต์ได้ไหม
ดูข้อมูลเพิ่มเติมเกี่ยวกับการช่วยเหลือพิเศษเกี่ยวกับสีและคอนทราสต์
ตรวจสอบว่าแบบฟอร์มใช้งานได้ซึ่งมีการเชื่อมต่อที่ไม่ดี
สมมติว่าคุณเดินทางไปไหนสักแห่งบนรถไฟ คุณเปิดหน้าเว็บในโทรศัพท์ สงสัยไหมว่าการโหลดเว็บไซต์ใช้เวลานานขนาดนั้นเลย กลับเข้ามาในโปรแกรมแล้วใช่ไหม
คุณจำลองการเชื่อมต่อที่ช้าและเครือข่ายประเภทต่างๆ ได้ด้วย WebPageTest หรือ DevTools
ดูข้อมูลเพิ่มเติมเกี่ยวกับการทดสอบแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูง
ช่วยให้ผู้ใช้ใช้แบบฟอร์มได้ทุกที่ทุกเวลา
ลองจินตนาการว่าคุณกำลังเดินไปหาการนัดหมาย แต่ทันใดนั้นโทรศัพท์ก็ดังขึ้น คุณรับสาย และในเวลาเดียวกัน ก็ได้รับการแจ้งเตือนจากบริษัทประกันภัยให้กรอกแบบฟอร์มใบสมัครที่คุณเริ่มไว้ คุณเปิดแบบฟอร์มและพยายามจะกรอกข้อมูลขณะที่ยังเดินและพูดอยู่
อย่าลืมว่าผู้คนจะใช้แบบฟอร์มของคุณในบริบทต่างๆ ในสถานการณ์เครียดขณะทำอย่างอื่นไปด้วยได้ทุกที่ทุกเวลา คุณช่วยผู้ใช้ได้ด้วยการทำให้แบบฟอร์มใช้งานง่าย
ลองกำหนดขีดจำกัดเวลาในการกรอกแบบฟอร์ม ลองจำลองเงื่อนไขที่ไม่สมบูรณ์แบบซึ่งคุณทดสอบแบบฟอร์มได้
อย่าลืมแชร์ผลการทดสอบ
บันทึกการทดสอบทั้งหมดและแชร์ผลลัพธ์กับทีม วิธีนี้จะช่วยจัดลำดับความสำคัญของรายการการทำงาน เพื่อให้ทุกคนในทีมทราบถึงงานที่สำคัญที่สุด
ดูข้อมูลเพิ่มเติมเกี่ยวกับการแชร์ผลการทดสอบ
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับการทดสอบข้ามแพลตฟอร์ม
คุณแสดงสัญญาณบอกสถานะโฟกัสให้ผู้ใช้แป้นพิมพ์เท่านั้นได้ไหม
:focus-visible
:focus-detected
:focus-shown
แหล่งข้อมูล
- WebPageTest: การทดสอบประสิทธิภาพและเพิ่มประสิทธิภาพเว็บไซต์
- การทดสอบแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูง
- การแชร์ผลการทดสอบ