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

บทนำ

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

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

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

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

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

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

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

ไอคอนเครื่องหมายบวกสำหรับการติดตั้งเดิม
ไอคอนเครื่องหมายบวกสำหรับการติดตั้งเดิม

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

ข้อบกพร่องของแถบอเนกประสงค์ที่มีไอคอนซูมและไอคอนติดตั้ง
ข้อบกพร่องของแถบอเนกประสงค์ที่มีไอคอนซูมและไอคอนติดตั้ง

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

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

ติดตั้งไอคอนรูปแบบต่างๆ จากชุดไอคอน Material Design
ภาพไอคอนการติดตั้งรูปแบบต่างๆ ที่คุณสามารถดาวน์โหลดได้จากชุดไอคอน Material Design

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

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

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

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

ฟีเจอร์ความช่วยเหลือในผลิตภัณฑ์
ฟองเคล็ดลับความช่วยเหลือในผลิตภัณฑ์ที่แจ้งให้ผู้ใช้ทราบเกี่ยวกับฟีเจอร์

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

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

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

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

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

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

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

บทสรุป

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