Device Emulation ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์นั้นยอดเยี่ยม แต่ไม่สามารถใช้ได้กับผู้ใช้ทุกคนและอาจจะดีกว่านี้มาก โปรดช่วยเราปรับปรุงมัน
เมื่อเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ออกมาพร้อมกับ Device Emulation และ reponsive design tooling ทุกอย่างก็เปลี่ยนไป
ในฐานะนักพัฒนา คุณไม่จำเป็นต้องปรับขนาดหน้าต่างเบราว์เซอร์อีกต่อไปเพื่อดูว่าการออกแบบของคุณเปลี่ยนไปอย่างไร คุณมีวิธีทดสอบว่าผลิตภัณฑ์ของคุณทำงานอย่างไรบนอุปกรณ์เคลื่อนที่
การทดสอบบนโทรศัพท์ไม่ใช่เรื่องสนุก คุณต้องเชื่อมต่ออินเทอร์เน็ตกับโทรศัพท์ และทำให้ประสิทธิภาพการทำงานล่าช้า คุณต้องเผยแพร่ผลิตภัณฑ์ของคุณไปยังเซิร์ฟเวอร์ที่พร้อมใช้งาน หรือ ตั้งค่าอุโมงค์ข้อมูลไปยังเซิร์ฟเวอร์ ภายในของคุณบนคอมพิวเตอร์ที่โทรศัพท์สามารถเข้าถึงได้
นี่คือเหตุผลที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์มีการจำลองอุปกรณ์ คุณสามารถจำลองอุปกรณ์ต่างๆ หมุนอุปกรณ์ และรับการจำลองการสัมผัส ซึ่งเป็นการดีที่จะพบว่าเอฟเฟกต์โฮเวอร์ที่คุณรักมากนั้นค่อนข้างเข้าถึงไม่ได้สำหรับผู้ใช้ส่วนใหญ่ของคุณ
ตอนนี้ ไม่กี่ปีและด้วยความก้าวหน้าในพื้นที่อุปกรณ์ เครื่องมือที่เราได้เริ่มไม่เพียงพอต่อความต้องการที่เรามี ดูเหมือนว่าเราต้องคิดใหม่เกี่ยวกับเครื่องมือที่เราต้องโอบรับโลกที่ใหญ่ขึ้นของอุปกรณ์และผู้ชมที่ใหญ่ขึ้น
ฉันทำงานเป็นผู้จัดการผลิตภัณฑ์ในเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ของเบราว์เซอร์ Microsoft Edge และฉันได้รับข้อเสนอแนะ 400 รายการต่อวันจากผู้ใช้เบราว์เซอร์
ไม่ใช่ผู้ใช้การจำลองทุกคนที่เป็นนักพัฒนา
ในฐานะนักพัฒนา ฉันคุ้นเคยกับเครื่องมือสำหรับนักพัฒนาเป็นอย่างดี ฉันชอบที่ฉันสามารถเลียนแบบอุปกรณ์และสถานะต่างๆ และใช้เครื่องมือเพื่อแก้ไขปัญหาที่ฉันพบ อย่างไรก็ตาม ฉันรู้สึกหงุดหงิดที่ชิ้นส่วนจำลองกระจัดกระจายไปทั่วเครื่องมือ บางส่วนอยู่ในการจำลองอุปกรณ์ ส่วนอื่นๆ อยู่ในเครื่องมือการแสดงผล และส่วนอื่นๆ เป็นส่วนหนึ่งของตัวแก้ไข Elements/Styles
ในฐานะ PM ฉัน ได้รับข้อความหลายสิบข้อความต่อวันว่าผู้คนต่างวิตกเกี่ยวกับความซับซ้อนของสิ่งเหล่านั้น และสาเหตุที่มีคน “แฮ็กคอมพิวเตอร์ของฉัน” หรือ “แสดงข้อผิดพลาดมากมายที่ฉันไม่สามารถเกิดขึ้นได้และไม่รู้ว่าต้องทำอย่างไร เกี่ยวกับ”.
ทำให้ฉันสงสัยว่าเราสามารถทำอะไรได้บ้างเพื่อยกเลิกการเชื่อมต่อส่วนการจำลองของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จากเครื่องมือต่างๆ ต่อไปนี้ ฉันจะพูดถึงบางสิ่งที่ฉันพบและชี้ให้เห็นปัญหาในการใช้งานเครื่องมือในปัจจุบันเมื่อต้องส่งมอบความต้องการของผู้ใช้ที่แตกต่างกัน
การจำลองความต้องการสำหรับผู้ที่ไม่ใช่นักพัฒนา
ฉันได้รับคำขอจากผู้ที่ชอบใช้คุณลักษณะการจำลองเพื่อทดสอบผลิตภัณฑ์ที่พวกเขาใช้ไม่ได้ เหล่านี้คือผู้ทดสอบ ผู้จัดการโครงการ นักออกแบบ และบุคคลที่คล้ายกันที่ต้องการตรวจสอบว่าผลิตภัณฑ์ของตนใช้งานได้ แต่ไม่จำเป็นต้องทำงานกับโค้ดหรือแก้ไขด้วยตนเอง
คนเหล่านี้มีปัญหาที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใช้พื้นที่ส่วนใหญ่ของหน้าจอโดยไม่ได้ให้ฟังก์ชันการทำงานที่พวกเขาต้องการ สิ่งนี้เป็นปัญหามากขึ้นเมื่อคุณจำลองอุปกรณ์ที่มีความละเอียดสูงและทำงานบนแล็ปท็อปด้วยตัวเอง เนื่องจากเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใช้พื้นที่ในเบราว์เซอร์ค่อนข้างมาก อุปกรณ์จำลองจึงต้องซูมออกไปยังระดับที่ไม่สามารถใช้งานได้เท่าที่คุณต้องการ
หากคุณมีจอภาพที่สอง คุณสามารถ ถอดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ออกจาก จอภาพนั้นได้ แต่การเรียนรู้จำนวนคนที่ไม่เคยรู้เลยว่านี่เป็นเพียงตัวเลือกที่น่าทึ่งมาก
ผู้ใช้เช่นนี้ต้องการมี:
- การจำลองอุปกรณ์ในเบราว์เซอร์โดยไม่ต้องใช้เครื่องมือสำหรับนักพัฒนาที่ใช้พื้นที่มาก
- วิธีง่ายๆ ในการจำลองสถานะต่างๆ ของผลิตภัณฑ์ (โหมดมืด/สว่าง การเชื่อมต่อช้า ประสิทธิภาพของอุปกรณ์ระดับล่าง)
- วิธีง่ายๆ ในการดูอุปกรณ์รอบๆ เนื้อหาและถ่ายภาพหน้าจอของสิ่งนั้น
- วิธีง่ายๆ ในการใส่คำอธิบายประกอบปัญหาที่พบและอาจแจ้งข้อบกพร่องกับทีมพัฒนาของพวกเขา
สิ่งเหล่านี้เป็นเครื่องมือตรวจสอบเฉพาะจุดและไม่ต้องการการจำลองที่สมบูรณ์แบบ แต่จะดีมากถ้าใช้สิ่งเหล่านี้โดยไม่ต้องใช้ความพยายามพิเศษใดๆ
จำลองผู้ใช้ที่ต้องการเล่นเกมเว็บ
กลุ่มที่น่าสนใจอีกกลุ่มหนึ่งที่ฉันพบในความคิดเห็นคือผู้ใช้ที่เลียนแบบอุปกรณ์มือถือเพื่อรับประสบการณ์การใช้งานเว็บที่ดีขึ้นหรือเข้าถึงฟังก์ชันที่พวกเขาไม่ได้รับในเบราว์เซอร์ กรณีการใช้งานหลักคือบริการต่างๆ เช่น Instagram ที่อนุญาตให้อัปโหลดจากอุปกรณ์มือถือเท่านั้น ไม่ใช่จากคอมพิวเตอร์ เนื่องจากผู้คนจำนวนมากใช้การเชื่อมต่อแบบคิดค่าบริการตามปริมาณข้อมูลบนอุปกรณ์มือถือ พวกเขาจึงใช้โปรแกรมจำลองเพื่ออัปโหลดรูปภาพจากคอมพิวเตอร์ นอกจากนี้ เว็บไซต์เวอร์ชันมือถือมักจะมีขนาดเล็กกว่า ใช้งานง่ายกว่า และไม่เต็มไปด้วยป๊อปอัปและความต้องการในการลงชื่อสมัครใช้บริการและอื่นๆ เว็บไซต์วิดีโอหลายแห่งยังใช้โปรแกรมเล่น HTML5 ดั้งเดิมบนอินเทอร์เฟซมือถือแทนโปรแกรมที่มีการโต้ตอบและป๊อปอัปจำนวนมาก วิธีนี้ทำให้คุณสามารถบันทึกวิดีโอได้อย่างง่ายดาย
ผู้ใช้ประเภทนี้โดยปกติไม่ต้องการเครื่องมือสำหรับนักพัฒนา ดังนั้นพวกเขาจะได้ประโยชน์จากวิธีที่ง่ายกว่าเช่นกันในการเข้าสู่โหมดจำลอง
การเปลี่ยนแปลงที่อาจเกิดขึ้นกับประสบการณ์การจำลอง
ความแตกต่างหลักที่ฉันเสนอคือประสบการณ์การจำลองควรเป็นอิสระจากเครื่องมือสำหรับนักพัฒนา
ส่วนขยาย Microsoft Edge สำหรับ Visual Studio Code ปัจจุบันมี screencast พร้อมแถบเครื่องมือของตัวเอง ที่มีฟังก์ชันดังกล่าว นอกจากการเข้าถึงการจำลองที่ง่ายขึ้นแล้ว ยังช่วยให้เห็นผลิตภัณฑ์ในธีมต่างๆ และจำลองปัญหาการช่วยสำหรับการเข้าถึง
Firefox ยังมีแถบจำลองที่พร้อมใช้งานโดยไม่ขึ้นกับเครื่องมือสำหรับนักพัฒนาที่เปิดอยู่
คำถามตอนนี้คือผู้ใช้จะเปิดการจำลองนี้โดยไม่เปิดเครื่องมือสำหรับนักพัฒนาได้อย่างไร Firefox มีแป้นพิมพ์ลัด แต่สิ่งเหล่านี้ยากที่จะทำให้ผู้คนปรับตัว
ความกังวลเกี่ยวกับการจำลอง
ปัญหาใหญ่อย่างหนึ่งที่เราต้องแก้ไขคือการจัดการความคาดหวัง การจำลองใดๆ ที่เรามีในตอนนี้จะแสดงเฉพาะการดูเว็บที่มีขนาดของอุปกรณ์ต่างๆ และโหมดสัมผัสที่จำลองเท่านั้น คุณยังสามารถจำลองการเชื่อมต่อที่ไม่สม่ำเสมอและหมุนอุปกรณ์ได้ อย่างไรก็ตาม คุณไม่เห็นว่าอุปกรณ์จะแสดงผลิตภัณฑ์อย่างไร เนื่องจากการจำลองยังคงใช้เบราว์เซอร์ที่สร้างขึ้นเพื่อแสดงผลิตภัณฑ์
นี่เป็นปัญหาโดยเฉพาะอย่างยิ่งกับอุปกรณ์ iOS ซึ่งใช้เอ็นจิ้นการเรนเดอร์และอุปกรณ์จำลองที่แตกต่างกันมักจะทำให้คุณเข้าใจผิดว่าทุกอย่างใช้งานได้ ยิ่งเราเลียนแบบประสบการณ์มากเท่าไหร่ (การจำลองรอยบาก ปัญหาช่องว่างภายใน ข้อบกพร่องที่ล้น ฯลฯ…) เราก็ยิ่งมีแนวโน้มสูงที่จะเกินความเป็นจริงและแสดงผลน้อยไป
เราได้เล่นกับการใช้ประโยชน์จากบางอย่างเช่น Playwright เพื่อแสดงเนื้อหาในอุปกรณ์จำลองโดยใช้เอ็นจิ้นการเรนเดอร์อื่น ๆ แต่ค่าใช้จ่ายค่อนข้างสูง ณ ตอนนี้
ต้องการความช่วยเหลือของคุณ
ฉันได้เผยแพร่ตัว อธิบายเกี่ยวกับ GitHub ซึ่งครอบคลุมสถานการณ์ที่เป็นไปได้ และจะได้รับแนวคิดการออกแบบเพิ่มเติมเร็วๆ นี้ และเรามี ปัญหาเกี่ยวกับ GitHub ติดตามความคืบหน้า ฉันชอบที่จะได้ยินสิ่งที่คุณคิดว่าจะเป็นประสบการณ์ที่ดีกว่าสิ่งที่เรามีในตอนนี้
