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

Mustafa Kurtuldu

Twitter GitHub Glitch หน้าแรก

Adriana Jara

Twitter GitHub Mastodon

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

เกริ่นนำ

อุปกรณ์เคลื่อนที่และการนำเสนอ App Store ของผู้ให้บริการอุปกรณ์ได้เปลี่ยนโมเดลความคิดของผู้ใช้ในด้านการค้นหา ประเมิน และติดตั้งซอฟต์แวร์ ตอนนี้ผู้ใช้คุ้นเคยกับ App Store เป็นอย่างดีและข้อมูลเพิ่มเติมที่ให้ไว้ผ่าน App Store เช่น บริบทเกี่ยวกับแอป ความคิดเห็นทางสังคม คะแนน ฯลฯ ที่คุณเห็นการอุปมาของ App Store เกิดขึ้นในระบบปฏิบัติการเดสก์ท็อป ซึ่งรวมถึง ChromeOS, Mac และ Windows

ความท้าทายของแพลตฟอร์มการติดตั้งของวันนี้

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

ตัวอย่าง UI การติดตั้ง PWA

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

ตัวอย่าง UI ของ Bottomsheet ใน Chrome

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

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

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

ความเข้ากันได้กับรุ่นก่อนหน้า

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

การแสดงตัวอย่าง UI

UI นี้ทำงานจาก Chrome 94 ใน Android และ Chrome 108 บนเดสก์ท็อป

ฟีเจอร์นี้เปิดใช้ใน squoosh.app และดูตัวอย่างได้ที่นั่น

การใช้งาน

หากต้องการแสดงกล่องโต้ตอบการติดตั้ง UI ที่สมบูรณ์ยิ่งขึ้น นักพัฒนาต้องเพิ่มภาพหน้าจออย่างน้อย 1 ภาพสําหรับรูปแบบของอุปกรณ์ที่สอดคล้องกันในอาร์เรย์ screenshots คุณไม่จำเป็นต้องระบุข้อมูลในช่อง description แต่ขอแนะนำให้ป้อนข้อมูล กล่องโต้ตอบเนื้อหาสร้างขึ้นโดยใช้เนื้อหาของช่อง screenshots และ description เพื่อมอบประสบการณ์การใช้งานที่คล้ายคลึงกับการติดตั้งใน App Store มากขึ้น UI นี้ช่วยให้ผู้ใช้ทราบว่ากำลังเพิ่มแอปลงในอุปกรณ์ และเมื่อมีพื้นที่ว่างมากขึ้น นักพัฒนาแอปก็สามารถให้บริบทที่เฉพาะเจาะจงแก่ผู้ใช้ ณ เวลาที่ติดตั้ง

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

สำหรับข้อกำหนดโดยละเอียดและคำแนะนำในการเพิ่มข้อกำหนดลงในแอป โปรดไปที่รูปแบบ UI การติดตั้งที่สมบูรณ์ยิ่งขึ้น

ความคิดเห็น

ในอนาคต เราจะพิจารณาเพิ่มข้อมูลอื่นๆ เช่น หมวดหมู่และการให้คะแนนแอป แต่จะอิงตามความคิดเห็นจากนักพัฒนาแอปและผู้ใช้

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