เกริ่นนำ
ในช่วงต้นปี 2020 ทีม Chrome ในอุปกรณ์เคลื่อนที่และเดสก์ท็อปได้วางแผนปรับปรุงการค้นพบและการมีส่วนร่วมของเว็บแอปที่ติดตั้งอยู่ งานของเราทำให้มีการติดตั้งและมีส่วนร่วมกับ PWA เพิ่มขึ้นกว่า 100% เราบรรลุเป้าหมายนี้โดยการวิจัยฟีเจอร์ที่มีอยู่ ทำการทดสอบ A/B และการสัมภาษณ์ผู้ใช้เพื่อให้ได้ข้อมูลเชิงลึกเกี่ยวกับความรู้สึกและความคาดหวังของผู้ใช้ บทความนี้จะกล่าวถึง เส้นทางที่เราไปถึงจุดนั้น
ภาษาสำหรับการติดตั้งแบบรวม
คำกระตุ้นให้ดำเนินการที่ทริกเกอร์การติดตั้ง PWA ไม่สอดคล้องกันในแพลตฟอร์มเว็บ สำหรับ Chrome ใน Android เราตัดสินใจเพิ่มลงในหน้าจอหลัก แต่ในแพลตฟอร์มเดสก์ท็อป เราจะเน้นปุ่มติดตั้ง สาเหตุของความคลาดเคลื่อนนี้มาจากการศึกษาที่ทีมดำเนินการในปี 2016 โดยเปรียบเทียบสตริงต่างๆ ทีมพบว่าฟีเจอร์เพิ่มลงในหน้าจอหลักทำงานได้ดียิ่งขึ้นบนอุปกรณ์เคลื่อนที่ หากอยู่เพียงส่วนน้อย
การศึกษาเพิ่มเติมเกี่ยวกับการจัดหมวดหมู่ในปี 2019 ไม่พบความแตกต่าง ทีมที่ต้องการรวมประสบการณ์การติดตั้ง PWA จึงตัดสินใจอัปเดตป้ายกํากับเป็นติดตั้งใน Android การศึกษาเพิ่มเติมในปี 2021 ได้เปรียบเทียบภาษา ติดตั้ง รับ และดาวน์โหลด และพบว่าผู้ใช้เข้าใจวิธีติดตั้งสำหรับขั้นตอนที่เกิดขึ้น การที่ผู้ใช้รู้สึกว่าการแตะปุ่มที่มีป้ายกำกับ Get จะส่งผู้ใช้ไปยังเว็บไซต์ และเมื่อกด Download ผู้ใช้จะคิดว่าไฟล์จะอยู่ในโฟลเดอร์ดาวน์โหลดหรือโฟลเดอร์ที่เทียบเท่ากัน
จากแนวทางปฏิบัติดังกล่าว เราจึงสรุปได้ว่าป้ายกำกับติดตั้งเหมาะกับ 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 การติดตั้งที่สมบูรณ์ยิ่งขึ้น
รูปแบบการติดตั้งสำหรับผู้ใช้ส่วนใหญ่คือ Store ตั้งแต่ช่วงกลางปี 2000 เราได้ให้ความรู้ผู้ใช้ว่าทุกครั้งที่ติดตั้งแอป ผู้ใช้จะเห็นคำอธิบาย ภาพหน้าจอ และข้อมูลเมตาอื่นๆ เพื่อช่วยให้ตัดสินใจได้ว่าแอปเป็นสิ่งที่ต้องการหรือไม่
เมื่อใช้ PWA ทำให้ UI ที่เราแสดงเมื่อผู้ใช้ตัดสินใจติดตั้งเว็บแอปค่อนข้างน้อย ดังนั้นทีมจึงตัดสินใจที่จะสำรวจประสบการณ์การติดตั้ง ที่สมบูรณ์ขึ้น ซึ่งจะให้บริบทแก่ผู้ใช้เกี่ยวกับเว็บแอป และช่วยให้นักพัฒนาซอฟต์แวร์ได้ฉลองให้กับ PWA ซึ่งเทียบเท่ากับประสบการณ์การใช้งานที่มาพร้อมเครื่อง
เมื่อต้นปีนี้ เราได้เปิดตัว RicherInstall ซึ่งเป็น UI การติดตั้งแบบขยายเวลาใน Chrome บน Android ที่ช่วยให้นักพัฒนาซอฟต์แวร์เพิ่มภาพหน้าจอลงในไฟล์ Manifest ได้ นักพัฒนายังสามารถเพิ่มคำอธิบาย ซึ่งเราแนะนำไว้ แต่ไม่จำเป็น UI ที่ใหม่กว่านี้ทำให้เราเห็นว่าอัตราการติดตั้งของ PWA บางตัวเพิ่มขึ้นเป็น 2 เท่า ซึ่งแสดงให้เห็นว่าผู้ใช้มีความมั่นใจมากขึ้นในการติดตั้งเว็บแอปเมื่อให้บริบทและประสบการณ์ที่ครบถ้วนยิ่งขึ้น UI นี้ในเวอร์ชันเดสก์ท็อป อยู่ระหว่างดำเนินการ
บทสรุป
ทีมนี้ได้ใช้เวลา 2 ปีที่ผ่านมาในการสำรวจและทดสอบฟีเจอร์ใหม่ๆ ใน Chrome ที่เปิดและส่งเสริมนักพัฒนาซอฟต์แวร์ PWA รวมถึงช่วยให้ความรู้แก่ผู้ใช้เกี่ยวกับประโยชน์ของประสบการณ์การใช้งานเว็บ เรายังทำอะไรได้อีกหลายอย่าง แต่โดยรวมแล้วเราสามารถปรับปรุงและเสริมสร้างชีวิตของผู้ใช้ได้ และให้การสนับสนุนเว็บแบบเปิดต่อไปด้วย