รูปแบบที่ส่งเสริมการติดตั้ง 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
  • ทําให้โปรโมชันการติดตั้งและคํากระตุ้นให้ดำเนินการ (Call-To-Action) ดึงดูดสายตา แต่ต้องหลังจากที่คุณอธิบายคุณค่าที่คุณนำเสนออย่างชัดเจนแล้วเท่านั้น ท้ายที่สุดแล้ว หน้า Landing Page ก็คือหน้า Landing Page
  • ลองเพิ่มการโปรโมตเพื่อการติดตั้งในส่วนที่แอปของคุณมีผู้ใช้อยู่มากที่สุด

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

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

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

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

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 ไว้แล้ว นอกจากนี้ มักจะมีเนื้อหาอื่นๆ ที่เป็นประโยชน์ไม่มากนักที่จะวางไว้ในหน้าเหล่านี้ ด้วยเหตุนี้ การทำคำกระตุ้นให้ดำเนินการ (Call-To-Action) ให้มีขนาดใหญ่ขึ้นจึงรบกวนผู้ชมน้อยลง ตราบใดที่คำกระตุ้นให้ดำเนินการดังกล่าวไม่บดบังเนื้อหา

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

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

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

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

ในฟีด

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

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

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

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

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