ทดสอบแบบฟอร์มในอุปกรณ์และแพลตฟอร์มต่างๆ

คุณกรอกแบบฟอร์มได้หลายวิธี ผู้คนอาจใช้แบบฟอร์มของคุณในสมาร์ทโฟนขณะยืนในรถประจำทางที่มีผู้คนหนาแน่น หรือใช้โปรแกรมอ่านหน้าจอ หรือใช้แล็ปท็อปเครื่องเก่า มาดูกันว่าคุณจะทำให้แบบฟอร์มทำงานได้ในอุปกรณ์และบริบทที่ต่างกันไปได้อย่างไร

ตรวจสอบว่าแบบฟอร์มของคุณใช้งานได้สำหรับผู้ใช้แป้นพิมพ์

การทดสอบแรกที่ดีเพื่อให้แน่ใจว่าคุณสามารถเข้าถึงแบบฟอร์มได้คือการกรอกแบบฟอร์มโดยใช้แป้นพิมพ์เท่านั้น เปิดแบบฟอร์มแล้วลองไปยังส่วนต่างๆ ด้วยแป้น 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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการทดสอบแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูง

ช่วยให้ผู้ใช้ใช้แบบฟอร์มได้ทุกที่ทุกเวลา

ลองจินตนาการว่าคุณกำลังเดินไปหาการนัดหมาย แต่ทันใดนั้นโทรศัพท์ก็ดังขึ้น คุณรับสาย และในเวลาเดียวกัน ก็ได้รับการแจ้งเตือนจากบริษัทประกันภัยให้กรอกแบบฟอร์มใบสมัครที่คุณเริ่มไว้ คุณเปิดแบบฟอร์มและพยายามจะกรอกข้อมูลขณะที่ยังเดินและพูดอยู่

อย่าลืมว่าผู้คนจะใช้แบบฟอร์มของคุณในบริบทต่างๆ ในสถานการณ์เครียดขณะทำอย่างอื่นไปด้วยได้ทุกที่ทุกเวลา คุณช่วยผู้ใช้ได้ด้วยการทำให้แบบฟอร์มใช้งานง่าย

ลองกำหนดขีดจำกัดเวลาในการกรอกแบบฟอร์ม ลองจำลองเงื่อนไขที่ไม่สมบูรณ์แบบซึ่งคุณทดสอบแบบฟอร์มได้

อย่าลืมแชร์ผลการทดสอบ

บันทึกการทดสอบทั้งหมดและแชร์ผลลัพธ์กับทีม วิธีนี้จะช่วยจัดลำดับความสำคัญของรายการการทำงาน เพื่อให้ทุกคนในทีมทราบถึงงานที่สำคัญที่สุด

ดูข้อมูลเพิ่มเติมเกี่ยวกับการแชร์ผลการทดสอบ

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการทดสอบข้ามแพลตฟอร์ม

แหล่งข้อมูล

• WebPageTest: การทดสอบประสิทธิภาพและเพิ่มประสิทธิภาพเว็บไซต์
• การทดสอบแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูง
• การแชร์ผลการทดสอบ