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

Mustafa Kurtuldu

Adriana Jara

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

เกริ่นนำ

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

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

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

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

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

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