ช่วยนักพัฒนาซอฟต์แวร์สร้างเว็บแอปที่มีประสิทธิภาพและติดตั้งได้

เกริ่นนำ

ในช่วงต้นปี 2020 ทีม Chrome ทั้งในอุปกรณ์เคลื่อนที่และเดสก์ท็อปได้วางแผนปรับปรุงการค้นพบได้และการมีส่วนร่วมของเว็บแอปที่ติดตั้งไว้ งานของเราทำให้การติดตั้งและการมีส่วนร่วมกับ PWA เพิ่มขึ้นมากกว่า 100% เราทำได้โดยการศึกษาฟีเจอร์ที่มีอยู่ ทำการทดสอบ A/B และสัมภาษณ์ผู้ใช้เพื่อให้ทราบข้อมูลเชิงลึกเกี่ยวกับการรับรู้และความคาดหวังของผู้ใช้ บทความนี้ครอบคลุมวิธีดำเนินการ

ภาษาสำหรับการติดตั้งแบบรวม

คำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่ทริกเกอร์การติดตั้ง PWA ไม่สอดคล้องกันในแพลตฟอร์มเว็บ สำหรับ Chrome ใน Android เราตัดสินใจว่าจะใช้เพิ่มลงในหน้าจอหลัก แต่ในแพลตฟอร์มเดสก์ท็อป เราเน้นติดตั้ง เหตุผลของความคลาดเคลื่อนนี้มาจากการศึกษาที่ทีมดำเนินการในปี 2016 โดยเปรียบเทียบกับสตริงที่แตกต่างกัน ทีมพบว่าฟีเจอร์เพิ่มลงในหน้าจอหลักทำงานได้ดีขึ้นในอุปกรณ์เคลื่อนที่เพียงเล็กน้อย

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

จากทั้งหมดที่กล่าวมา เราได้ข้อสรุปว่าป้ายกำกับติดตั้งเหมาะกับ PWA มากที่สุด เราขอแนะนำให้นักพัฒนาซอฟต์แวร์ทั่วทั้งแพลตฟอร์มเว็บใช้ "ติดตั้ง" เป็นสตริงที่ต้องการนับจากนี้ไป

ไอคอนติดตั้งบนเดสก์ท็อป

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

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

ผมตัดสินใจตรวจสอบมุมมองของผู้ใช้ เพราะความคิดเห็นส่วนใหญ่เป็นเรื่องส่วนตัว เราทำงานร่วมกับนักวิจัย UX ของเราเพื่อทำการศึกษากับผู้ใช้ 10,000 คนในสหรัฐอเมริกาและอินโดนีเซีย เพื่อระบุความเข้าใจของผู้ใช้เกี่ยวกับลักษณะเด่นของการติดตั้ง เราได้ทดสอบการออกแบบ 5 แบบ รวมทั้งแบบที่มีอยู่ และถามผู้ใช้ว่า "ติดตั้ง" หมายถึงอะไร เราพบว่าไอคอนปัจจุบัน (เครื่องหมายบวก) สร้างความสับสนแก่ผู้ใช้มากที่สุด หลายคนสับสนระหว่างคำว่า "ยา" "การปฐมพยาบาล" และ "แบตเตอรี่"

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

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

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

ความช่วยเหลือในผลิตภัณฑ์

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

เมื่อผู้ใช้เข้าชมเว็บไซต์เป็นประจำ Chrome จะใช้บริการที่เรียกว่าการมีส่วนร่วมในเว็บไซต์ ข้อมูลนี้ให้ข้อมูลเกี่ยวกับการมีส่วนร่วมของผู้ใช้กับเว็บไซต์ เมื่อไปที่ chrome://site-engagement/ คุณจะเห็นเว็บไซต์ที่คุณมีส่วนร่วมเป็นประจำ คะแนนเหล่านี้ช่วยให้เราระบุได้ว่า ผู้ใช้สนใจเว็บไซต์หรือไม่ หากเว็บไซต์เป็น PWA และผู้ใช้มีส่วนร่วม เราจะแสดงให้ผู้ใช้ดู UI ความช่วยเหลือในผลิตภัณฑ์สำหรับการติดตั้ง โดยเราจะมุ่งเน้นเฉพาะผู้ใช้ที่มีส่วนร่วม และไม่รบกวนผู้ใช้ที่อาจเข้าชมเว็บไซต์เพียงครั้งเดียว

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

UI การติดตั้งที่สมบูรณ์ยิ่งขึ้น

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

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

เมื่อต้นปีนี้ เราได้เปิดตัว RicherInstall ซึ่งเป็น UI การติดตั้งแบบขยายใน Chrome บน Android ที่ช่วยให้นักพัฒนาซอฟต์แวร์เพิ่มภาพหน้าจอลงในไฟล์ Manifest ได้ นักพัฒนาซอฟต์แวร์ยังเพิ่มคำอธิบายได้ด้วย ซึ่งเป็นการแนะนำให้ทำ แต่ไม่จำเป็น UI ที่ใหม่กว่านี้ทำให้เราเห็นอัตราการติดตั้งของ PWA บางรายการเป็น 2 เท่า ซึ่งแสดงให้เห็นว่าผู้ใช้มีความมั่นใจมากขึ้นในการติดตั้งเว็บแอปเมื่อเราให้บริบทและประสบการณ์การใช้งานที่สมบูรณ์ยิ่งขึ้น UI เวอร์ชันเดสก์ท็อป ยังอยู่ระหว่างการพัฒนา

บทสรุป

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