การสร้างคู่มือการใช้งานแอปแบบโต้ตอบได้

ทีมสนับสนุนมักประสบปัญหาเมื่อต้องใช้งานแอปที่พวกเขาไม่เคยติดตั้งมาก่อน คู่มือแบบ PDF เป็นทางออกที่ไม่ดีนักเพราะไม่มีใครอ่านมัน

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

หลักการทำงาน

ผมใช้ Firebase Storage สำหรับรูปภาพ และใช้ vanilla JavaScript สำหรับส่วนตรรกะ (logic) ผมหลีกเลี่ยงการใช้ไลบรารีภายนอกเพื่อให้ตัวเครื่องมือมีขนาดเบาและทำงานได้รวดเร็ว

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

ระบบนี้ใช้ state machine แบบง่ายๆ โดยแต่ละหน้าจอจะประกอบด้วย:

  • ID ของรูปภาพ
  • รายการของ hotspot
  • จุดหมายปลายทางที่ต้องการไป

เครื่องมือที่ผมสร้างขึ้น

การกะพิกัดด้วยสายตานั้นล่าช้า ผมจึงสร้าง HTML editor แบบ standalone ขึ้นมาเพื่อช่วยให้กระบวนการนี้เร็วขึ้น

  • อัปโหลดภาพสกรีนช็อตไปยัง canvas
  • ลากเมาส์เพื่อวาดรูปสี่เหลี่ยม
  • ตัว editor จะคำนวณพิกัดเปอร์เซ็นต์ให้โดยอัตโนมัติ
  • เชื่อมโยงพื้นที่นั้นไปยังหน้าจออื่นผ่านเมนู dropdown
  • ส่งออก (export) วัตถุสุดท้ายเข้าสู่โค้ดของคุณได้โดยตรง

เพื่อช่วยผู้ใช้งาน ผมได้เพิ่มเอฟเฟกต์แสงสีฟ้าแบบกะพริบ (pulsing blue glow) ลงในพื้นที่ที่คลิกได้ เพื่อแสดงให้เห็นชัดเจนว่าพวกเขาสามารถแตะตรงไหนได้บ้าง

บทเรียนทางเทคนิคที่สำคัญ

  1. Firebase Security: อย่าสร้าง URL ของ storage ด้วยตัวเอง ให้ใช้เมธอด getDownloadURL จาก SDK ซึ่งจะรวม auth token ที่จำเป็นมาให้ด้วย หากไม่มีสิ่งนี้ รูปภาพจะไม่โหลดและจะไม่แสดงข้อผิดพลาดใดๆ ออกมา

  2. Layout Fixes: ในเลย์เอาต์แบบ flex column ให้กำหนดความสูง (height) ที่ชัดเจนให้กับ element ตัวแม่ (parent) และกำหนด min-height เป็น 0 ให้กับ element ตัวลูก (children) วิธีนี้จะช่วยป้องกันปัญหาเลย์เอาต์ยุบตัว (layout collapse) และปัญหาการล้น (overflow)

  3. Scaling: ใช้คุณสมบัติ CSS transform: scale ซึ่งจะช่วยให้รูปภาพและ hotspot ปรับขนาดไปพร้อมๆ กัน ทำให้ทุกอย่างยังคงสัดส่วนเดิมไม่ว่าขนาดหน้าจอจะเป็นอย่างไร

  4. Speed: การดึง URL ทีละรายการจะทำให้เกิดอาการหน่วง ผมจึงได้นำระบบ in-memory cache และฟังก์ชัน preload แบบทำงานเบื้องหลังมาใช้ โดยรูปภาพทั้งหมดจะถูกโหลดแบบขนาน (parallel) เมื่อ modal เปิดขึ้น ซึ่งช่วยให้การเปลี่ยนหน้าทำได้อย่างรวดเร็วทันใจ

ผลลัพธ์ที่ได้

  • 20 หน้าจอพร้อมระบบนำทางที่สมบูรณ์
  • 52 interactive hotspots
  • ไม่มีแถบเลื่อน (scrollbar) เลยด้วยระบบ auto-scaling
  • การเปลี่ยนหน้าทำได้อย่างรวดเร็วผ่านการ preload

Source: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e