ทดสอบแบบฟอร์ม

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

แบบฟอร์มของคุณใช้กับอุปกรณ์อื่นๆ ได้ไหม

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

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

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

นอกจากนี้ คุณยังสามารถใช้บริการทดสอบเพื่อทดสอบแบบฟอร์มในเบราว์เซอร์ต่างๆ เบราว์เซอร์เวอร์ชันต่างๆ อุปกรณ์ และระบบปฏิบัติการต่างๆ BrowserStack มีบัญชีทดสอบฟรีสำหรับโปรเจ็กต์โอเพนซอร์ส เพื่อเปิดใช้การทดสอบในเบราว์เซอร์ อุปกรณ์ และระบบปฏิบัติการต่างๆ

คุณจะทดสอบได้อย่างไรว่าแบบฟอร์มของคุณเหมาะกับผู้อื่น

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

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

คุณจะวัดประสิทธิภาพของแบบฟอร์มได้อย่างไร

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

PageSpeed Insights (PSI)

PSI จะวัดประสิทธิภาพของเว็บไซต์และให้คำแนะนำในการปรับปรุงเว็บไซต์

ลองใช้งาน: PageSpeed ให้บริการรายงานประสิทธิภาพโดยใช้ข้อมูลห้องทดลองและข้อมูล เว็บไซต์ที่เร็วเป็นสัญญาณแรกที่แสดงว่าแบบฟอร์มของคุณใช้งานได้ หากเว็บไซต์ของคุณยังไม่เร็ว PSI แสดงคำแนะนำวิธีปรับปรุงประสิทธิภาพ

ดูรายงานของเว็บไซต์ที่คุณเคยทดสอบกับ PSI อีกครั้ง ดูข้อมูลเกี่ยวกับ Core Web Vitals ไหม นี่เป็นข้อมูลสรุปหากเว็บไซต์ของคุณเป็นไปตามเกณฑ์ของ Core Web Vitals Core Web Vitals ช่วยให้คุณเข้าใจประสบการณ์การใช้งานหน้าเว็บของผู้ใช้

ประภาคาร

Lighthouse ช่วยให้คุณระบุประสิทธิภาพ, การปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา (SEO), แนวทางปฏิบัติแนะนำ และปัญหาด้านความสามารถเข้าถึงได้ง่าย

คุณใช้ Lighthouse ได้หลายวิธี ทางเลือกหนึ่งคือการเรียกใช้โดยตรงใน DevTools เปิด URL ด้วยแบบฟอร์มใน Chrome เปิดเครื่องมือสำหรับนักพัฒนาเว็บ สลับไปยังแท็บ Lighthouse และเรียกใช้การตรวจสอบ

ระบบจะแสดงเมตริกประสิทธิภาพจาก PSI นอกจากนี้ Lighthouse จะตรวจสอบเว็บไซต์ของคุณเทียบกับ SEO, แนวทางปฏิบัติแนะนำ และปัญหาด้านการช่วยเหลือพิเศษ หากลืมเชื่อมต่อป้ายกำกับกับตัวควบคุมแบบฟอร์ม Lighthouse จะเตือนคุณพร้อมให้คำแนะนำในการแก้ไขปัญหา

เครื่องมือในการระบุปัญหาที่พบได้ทั่วไป

มีเครื่องมือมากมายที่จะระบุปัญหาที่พบได้ทั่วไป วิธีหนึ่งคือการใช้ส่วนขยายเครื่องมือแก้ปัญหาแบบฟอร์ม เพื่อเตือนคุณในกรณีที่ไม่มีแอตทริบิวต์ autocomplete, แอตทริบิวต์ที่ไม่เป็นไปตามมาตรฐาน, ป้ายกำกับขาดหายไปหรือว่างเปล่า และอื่นๆ

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

คุณจะตรวจสอบประสบการณ์การใช้งานแบบฟอร์มได้อย่างไร

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

PSI

วิธีหนึ่งในการตรวจสอบประสบการณ์คือการใช้ PSI อีกครั้ง คุณใช้ PSI API เพื่อสร้างเครื่องมือตรวจสอบของตัวเองได้ โดยใช้ PageSpeed Insights API อธิบายวิธีดำเนินการดังกล่าว

PSI มีข้อมูลจากชุดข้อมูลรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) หากมีสำหรับ URL ดังกล่าว วิธีนี้จะทำให้คุณดูข้อมูลช่องในรายงานได้โดยตรง

ประภาคาร

คุณใช้ Lighthouse เป็นเครื่องมือบรรทัดคำสั่ง เป็นโมดูลโหนด หรือใช้เครื่องมือ CI ของ Lighthouse การตรวจสอบประสิทธิภาพด้วย Lighthouse CI อธิบายการเพิ่ม Lighthouse ลงในระบบการผสานรวมอย่างต่อเนื่อง เช่น การดำเนินการของ GitHub

มีtoolsอื่นๆ อีกมากมายที่ใช้วัดและตรวจสอบเว็บไซต์ได้ บางเครื่องมือมีให้ใช้งานเป็นเครื่องมือบนเว็บ บางอย่างให้คุณเรียกใช้การตรวจสอบในบรรทัดคำสั่ง และบางรายการมี API เพื่อผสานรวมเข้ากับเครื่องมือของคุณ

วิธีวิเคราะห์แบบฟอร์ม

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

Analytics

เครื่องมือหนึ่งที่คุณใช้ได้คือ Google Analytics (GA) หลังจากตั้งค่าแล้ว คุณจะได้รับข้อมูลโค้ด JavaScript ที่รวมอยู่ในแต่ละหน้าของเว็บไซต์ จากจุดนี้เป็นต้นไป คุณจะดูได้ว่าผู้คนใช้เว็บไซต์ของคุณอย่างไร

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

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

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

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

ทดสอบความรู้ของคุณเกี่ยวกับแบบฟอร์มการทดสอบ

ข้อมูลฟิลด์คืออะไร

ข้อมูลที่เก็บรวบรวมในสนาม
ลองอีกครั้งนะ
ข้อมูลจากผู้ใช้จริง
🎉
ข้อมูลจากเงื่อนไขจริง
🎉
ข้อมูลที่รวบรวมในห้องทดลอง
ลองอีกครั้งนะ

RUM รวบรวมเมตริกจาก

ผู้ใช้จริง
🎉
ผู้ใช้ที่เลือกไว้ล่วงหน้า
ลองอีกครั้ง
เบราว์เซอร์ที่กำหนดไว้ล่วงหน้า
ลองอีกครั้ง
เบราว์เซอร์จากผู้ใช้ปลายทาง
🎉

แหล่งข้อมูล