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

บทนำ

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

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

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

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

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

วันที่ ตัวอย่าง UI ของ Bottom Sheet ใน Chrome
ตัวอย่าง UI ของ Bottom Sheet ใน Chrome

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

วันที่ ขยาย UI การติดตั้งที่สมบูรณ์ขึ้น
ขยาย UI การติดตั้งที่สมบูรณ์ยิ่งขึ้น
วันที่ ยุบ 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 ใหม่นี้อย่างไร ต้องการได้รับความคิดเห็นจากคุณ โปรดติดต่อเราโดยกรอกแบบฟอร์มนี้