รูปแบบที่ส่งเสริมการติดตั้ง PWA

การติดตั้ง Progressive Web App (PWA) จะช่วยให้ผู้ใช้ค้นหาและใช้งานได้ง่ายขึ้น แม้จะมีการโปรโมตเบราว์เซอร์ ผู้ใช้บางคนก็ไม่รู้ตัวว่าสามารถติดตั้ง PWA ได้ ดังนั้นการมอบประสบการณ์ในแอปที่คุณใช้โปรโมตและเปิดใช้การติดตั้ง PWA จึงอาจมีประโยชน์

ภาพหน้าจอของปุ่มติดตั้งแบบง่ายใน PWA
ปุ่มติดตั้งแบบง่ายๆ ซึ่งมีให้ใน PWA

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

แนวทางปฏิบัติแนะนำ

ไม่ว่าคุณจะใช้โปรโมชันรูปแบบใดในเว็บไซต์ก็ตาม มีแนวทางปฏิบัติแนะนำบางประการที่สามารถนำไปใช้ได้

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

การโปรโมตเบราว์เซอร์อัตโนมัติ

เมื่อเป็นไปตามเกณฑ์บางอย่าง เบราว์เซอร์ส่วนใหญ่จะแจ้งให้ผู้ใช้ทราบว่า Progressive Web App ของคุณติดตั้งได้ ตัวอย่างเช่น Chrome บนเดสก์ท็อปจะแสดงปุ่มติดตั้งในแถบอเนกประสงค์

ภาพหน้าจอของแถบอเนกประสงค์ที่มีสัญญาณบอกสถานะการติดตั้งที่มองเห็นได้
โปรโมชันการติดตั้งที่ได้จากเบราว์เซอร์ (เดสก์ท็อป)
ภาพหน้าจอของโปรโมชันการติดตั้งที่ได้จากเบราว์เซอร์
โปรโมชันการติดตั้งที่ได้จากเบราว์เซอร์ (อุปกรณ์เคลื่อนที่)

Chrome สำหรับ Android จะแสดงแถบข้อมูลขนาดเล็กให้ผู้ใช้เห็น แต่ป้องกันได้ด้วยการเรียกใช้ preventDefault() ในเหตุการณ์ beforeinstallprompt หากคุณไม่ได้เรียกใช้ preventDefault() แบนเนอร์จะปรากฏขึ้นในครั้งแรกที่ผู้ใช้เข้าชมเว็บไซต์และตรงตามเกณฑ์ความสามารถในการติดตั้งใน Android และจะแสดงอีกครั้งหลังจากผ่านไปประมาณ 90 วัน

รูปแบบการโปรโมตอินเทอร์เฟซผู้ใช้

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

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

ปุ่มติดตั้งแบบใช้งานง่าย

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

ปุ่มติดตั้งแบบกำหนดเอง
ปุ่มติดตั้งแบบใช้งานง่าย

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

ปุ่มติดตั้งแบบกำหนดเองในส่วนหัว
ปุ่มติดตั้งที่กำหนดเองในส่วนหัว

เมื่อใช้อย่างเหมาะสม การโปรโมตการติดตั้ง PWA จากส่วนหัวของเว็บไซต์เป็นวิธีที่ยอดเยี่ยมในการทำให้ลูกค้าที่เหนียวแน่นที่สุดกลับมาใช้บริการอีกครั้งได้ง่ายขึ้น พิกเซลในส่วนหัว PWA นั้นมีค่า ดังนั้นให้ตรวจสอบว่าคำกระตุ้นให้ดำเนินการ (Call-To-Action) ในการติดตั้งมีขนาดที่เหมาะสม และมีความสำคัญมากกว่าเนื้อหาส่วนหัวอื่นๆ ที่เป็นไปได้และไม่รบกวนการใช้งาน

ปุ่มติดตั้งที่กำหนดเองในส่วนหัว
ปุ่มติดตั้งที่กำหนดเองในส่วนหัว

ตรวจสอบให้แน่ใจว่าคุณได้:

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

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

ตรวจสอบให้แน่ใจว่าคุณได้:

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

หน้า Landing Page

หน้า Landing Page มีจุดประสงค์เพื่อโปรโมตผลิตภัณฑ์และบริการของคุณ ดังนั้นจึงเป็นที่หนึ่งที่มีความเหมาะสมในขนาดใหญ่เมื่อโปรโมตข้อดีของการติดตั้ง PWA

ข้อความแจ้งให้ติดตั้งแบบกำหนดเองในหน้า Landing Page
ข้อความแจ้งให้ติดตั้งแบบกำหนดเองในหน้า Landing Page

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

ตรวจสอบให้แน่ใจว่าคุณได้:

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

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

แบนเนอร์การติดตั้งแบบกำหนดเองที่ด้านบนของหน้า
แบนเนอร์แบบปิดได้ที่ด้านบนของหน้า

ตรวจสอบให้แน่ใจว่าคุณได้:

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

UI ชั่วคราว

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

แบนเนอร์การติดตั้งแบบกำหนดเองเป็นแถบแสดงข้อความ
สแน็กบาร์แบบปิดได้ซึ่งระบุว่า PWA ติดตั้งได้

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

แบนเนอร์การติดตั้งแบบกำหนดเองเป็นแถบแสดงข้อความ
สแน็กบาร์แบบปิดได้ซึ่งระบุว่า PWA ติดตั้งได้

ตรวจสอบให้แน่ใจว่าคุณได้:

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

หลังการแปลง

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

โปรโมชันการติดตั้งหลังจาก Conversion
โปรโมชันการติดตั้งหลังจากที่ผู้ใช้ทำการซื้อเสร็จสมบูรณ์

เส้นทางการจองหรือการชําระเงิน

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

โปรโมชันการติดตั้งหลังจากเส้นทางของผู้ใช้
โปรโมชันการติดตั้งหลังจากเส้นทางของผู้ใช้

ตรวจสอบให้แน่ใจว่าคุณได้:

  • ใส่คำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่เกี่ยวข้อง ผู้ใช้กลุ่มใดจะได้รับประโยชน์จาก การติดตั้งแอปของคุณ และเพราะเหตุใด และมีความเกี่ยวข้องกับเส้นทางที่พวกเขากำลังดำเนินอยู่อย่างไร
  • หากแบรนด์ของคุณมีข้อเสนอที่ไม่ซ้ำกันสำหรับผู้ใช้แอปที่ติดตั้งไว้ ให้พูดถึงพวกเขา
  • ป้องกันไม่ให้การโปรโมตเกิดขึ้นในขั้นตอนถัดไปในเส้นทาง ไม่เช่นนั้นอาจส่งผลเสียต่ออัตราความสำเร็จในเส้นทาง ในตัวอย่างอีคอมเมิร์ซด้านบน ให้สังเกตว่าคำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่สำคัญอยู่สูงกว่าโปรโมชันการติดตั้งแอป

ขั้นตอนการลงชื่อสมัครใช้ ลงชื่อเข้าใช้ หรือออกจากระบบ

โปรโมชันนี้เป็นกรณีพิเศษของรูปแบบโปรโมชันเส้นทาง ซึ่งการ์ดโปรโมชันมีความโดดเด่นมากขึ้น

ปุ่มติดตั้งที่กำหนดเองในหน้าลงชื่อสมัครใช้
ปุ่มติดตั้งที่กำหนดเองในหน้าลงชื่อสมัครใช้

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

ตรวจสอบให้แน่ใจว่าคุณได้:

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

รูปแบบโปรโมชันในบรรทัด

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

ในฟีด

โปรโมชันการติดตั้งในฟีดจะปรากฏขึ้นระหว่างบทความข่าวหรือรายการการ์ดข้อมูลอื่นๆ ใน PWA

โปรโมชันการติดตั้งภายในฟีดเนื้อหา
โปรโมชันการติดตั้งภายในฟีดเนื้อหา

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

ตรวจสอบให้แน่ใจว่าคุณได้:

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