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

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

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

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

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

UI ชั่วคราว

UI ชั่วคราว เช่น รูปแบบการออกแบบแถบข้อมูล จะแจ้งให้ผู้ใช้ทราบและช่วยให้ผู้ใช้ดำเนินการต่างๆ ได้อย่างง่ายดาย ซึ่งในกรณีนี้คือการติดตั้งแอป เมื่อใช้อย่างเหมาะสม รูปแบบ 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

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

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

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

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