วิธีบันทึกวิดีโอเดโมส่วนขยายเบราว์เซอร์ให้คนดูอยากติดตั้งทันที

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

ข่าวดีคือข้อจำกัดเหล่านี้คาดเดาได้ เมื่อคุณรู้ว่าเดโมส่วนขยายมักพังที่จุดไหน วิดีโอสั้น ๆ ก็โน้มน้าวใจได้อย่างน่าทึ่ง

ทำไมเดโมส่วนขยายจึงต่างจากงานอื่น

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

• UI ของคุณเล็กมาก: ป๊อปอัป แบดจ์ และเมนูคลิกขวากินพื้นที่เพียงเศษเสี้ยวของเฟรม การจัดเฟรมแบบปกติจึงทำให้มองไม่เห็น
• หน้าเว็บของคนอื่นคือเวที: ผู้ชมต้องจำได้ก่อนว่าคุณกำลังเสริมเว็บไซต์ไหน จึงจะเห็นว่าคุณเปลี่ยนอะไร
• คุณค่าอยู่ที่ “ส่วนต่าง”: คุณไม่ได้โชว์ฟีเจอร์ แต่โชว์หน้าเว็บที่ดีขึ้น
• การติดตั้งเป็นส่วนหนึ่งของผลิตภัณฑ์: หน้าขออนุญาตและการปักหมุดไอคอนคือสิ่งแรกที่ผู้ใช้ใหม่เจอ และเป็นจุดที่คนเลิกกลางทางจริง ๆ

วางแผนการบันทึกรอบสี่ข้อนี้ ที่เหลือก็เป็นงานฝีมือธรรมดา

เริ่มจากสร้างโปรไฟล์เดโมที่สะอาด

อย่าบันทึกเดโมส่วนขยายในเบราว์เซอร์ที่ใช้งานประจำ สร้างโปรไฟล์แยกไว้ใช้สำหรับการบันทึกเท่านั้น

• เคลียร์แถบเครื่องมือ: ไอคอนส่วนขยายอื่นทุกตัวแย่งความสนใจจากของคุณ ลบหรือซ่อนให้หมด
• ปักหมุดเฉพาะส่วนขยายของคุณ: ไอคอนเดียวบนแถบที่ว่างเปล่าย่อมไม่มีใครเข้าใจผิด
• ออกจากระบบบัญชีส่วนตัว: รูปโปรไฟล์ ชื่อ และอีเมลปรากฏในเฟรมมากกว่าที่คิด
• จัดบุ๊กมาร์กและแถบบุ๊กมาร์ก: หรือเปลี่ยนเป็นบุ๊กมาร์กกลาง ๆ ที่ปลอดภัยต่อการเผยแพร่
• รีเซ็ตหน้าแท็บใหม่: ค่าเริ่มต้นมักแสดงประวัติการเข้าเว็บเป็นภาพย่อ
• ปิดการแจ้งเตือนที่ไม่เกี่ยวข้อง: ทั้งฝั่งเบราว์เซอร์และระบบปฏิบัติการ
• ตั้งระดับซูมให้เหมาะ: ซูมหน้าเว็บ 100% และขนาดหน้าต่างตรงกับอัตราส่วนที่จะส่งออก

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

เลือกโหมดจับภาพให้ถูก

มีสามทางเลือกที่สมเหตุสมผล ขึ้นอยู่กับว่าหน้าตาของเบราว์เซอร์สำคัญหรือไม่

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

เดโมส่วนใหญ่ควรบันทึกหน้าต่างเบราว์เซอร์ในขนาดใกล้ 16:9 แล้วทำภาพใกล้ด้วยเอฟเฟกต์ซูมในโปรแกรมตัดต่อ ไม่ใช่สลับโหมดจับภาพกลางวิดีโอ

แสดงขั้นตอนติดตั้งอย่างตรงไปตรงมา

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

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

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

ทำให้ UI จิ๋ว ๆ อ่านออก

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

• ซูมทุกครั้งที่ป๊อปอัปเปิด: การซูมไปที่ป๊อปอัปตลอดช่วงที่มันเปิดอยู่ คือการตัดต่อที่ให้ผลคุ้มค่าที่สุดในวิดีโอส่วนขยาย
• ซูมไอคอนบนแถบเครื่องมือเมื่อแบดจ์เปลี่ยน: ตัวเลขที่เปลี่ยนจาก 0 เป็น 12 ไร้ความหมายถ้าไม่มีใครอ่านออก
• เน้นเคอร์เซอร์: ไม่เช่นนั้นการคลิกไอคอนขนาด 16 พิกเซลจะมองไม่เห็นเลย เอฟเฟกต์เน้นเคอร์เซอร์และการคลิกบอกได้ชัดว่าเกิดอะไรขึ้นที่จุดไหน
• เปิดป๊อปอัปแล้วหยุดนิ่งก่อน: ให้เวลาหนึ่งวินาทีเต็มก่อนขยับเมาส์ การเคลื่อนไหวบน UI เล็ก ๆ จะเบลอหลังถูกบีบอัด
• ป้ายที่ขยายไม่ได้ให้ใช้ข้อความซ้อน: คำบรรยายสั้น ๆ ดีกว่าให้คนเพ่งตัวอักษรขนาด 10 พิกเซล
• อย่าพึ่งทูลทิปตอนชี้เมาส์: มันเล็ก ช้า และหลายครั้งไม่ติดมาในวิดีโอ พูดชื่อป้ายออกมาดีกว่า

วางโครงแบบก่อน-หลัง

ส่วนขยายคือการทำให้ประสบการณ์เดิมดีขึ้น จึงควรเริ่มจากความเจ็บปวด

1. แสดงหน้าเว็บที่ยังไม่มีส่วนขยาย ห้าถึงสิบวินาที ทั้งงานที่ต้องทำมือ ข้อมูลที่ขาด และขั้นตอนที่น่าเบื่อ
2. เปิดส่วนขยาย หรือคลิกไอคอนให้เห็นชัด ๆ
3. แสดงหน้าเดิมที่เปลี่ยนไปแล้ว ถ้าได้ควรใช้เฟรมเดียวกันเพื่อให้เห็นความต่างทันที
4. ทำงานจริงหนึ่งอย่างให้จบตั้งแต่ต้นจนจบ ด้วยฟีเจอร์นั้น
5. ปิดท้ายด้วยเส้นทางการติดตั้ง และตำแหน่งของการตั้งค่า

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

ตั้งค่าการบันทึกและส่งออก

• 30fps เพียงพอ สำหรับการโต้ตอบกับหน้าเว็บและ UI ป๊อปอัป ตัวอักษรคมและไฟล์ไม่ใหญ่
• บันทึกที่ความละเอียดดั้งเดิม แล้วให้โปรแกรมตัดต่อครอปหรือซูม ไม่ใช่บันทึกเล็กแล้วขยาย
• ล็อกขนาดหน้าต่างเบราว์เซอร์: การปรับขนาดกลางการบันทึกจะทำให้หน้าเว็บจัดเรียงใหม่และพังคีย์เฟรมซูม
• บันทึกเสียงระบบถ้าส่วนขยายมีเสียง ถ้าไม่มีก็ใช้ไมโครโฟนอย่างเดียว
• ส่งออก 1080p สำหรับเว็บ และลองครอปแนวตั้งจาก 20 วินาทีที่ดีที่สุดไว้ลงโซเชียล

เช็กลิสต์ก่อนบันทึก

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

ข้อผิดพลาดที่พบบ่อย

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

สรุป

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