Giao diện người dùng cài đặt PWA đa dạng thức hơn

Giới thiệu

Thiết bị di động và sự ra mắt của các cửa hàng ứng dụng của nhà cung cấp thiết bị đã thay đổi tư duy của người dùng mô hình tư duy về cách khám phá, đánh giá và cài đặt phần mềm. Người dùng hiện đã quen thuộc với cửa hàng ứng dụng và thông tin bổ sung được cung cấp thông qua cửa hàng ứng dụng, chẳng hạn như ngữ cảnh về ứng dụng, phản hồi trên mạng xã hội, xếp hạng, v.v. mà bạn thấy phép ẩn dụ của cửa hàng ứng dụng xuất hiện trong hoạt động trên Máy tính để bàn bao gồm ChromeOS, Mac và Windows.

Thách thức của nền tảng cài đặt ngày nay

Hiện nay, nếu người dùng muốn cài đặt PWA, thanh thông tin và lớp phủ phương thức sẽ xuất hiện với rất ít của bạn. Nếu người dùng tiếp tục cài đặt, quá trình sẽ kết thúc quá nhanh mà không ngữ cảnh cho người dùng. Điều này đi ngược lại với kỳ vọng của họ khi cài đặt ứng dụng và có thể khiến họ hơi bối rối về những gì đã xảy ra.

Ví dụ về giao diện người dùng cài đặt PWA.
Ví dụ về giao diện người dùng cài đặt PWA.

Để cho phép nhà phát triển cung cấp trải nghiệm đã cài đặt tương đương với trải nghiệm gốc Chrome sẽ ra mắt một giao diện cài đặt mới có tên là Richer Install (Cài đặt phong phú) hơn, cho phép các nhà phát triển thêm nội dung mô tả và ảnh chụp màn hình vào tệp kê khai và để tệp đó xuất hiện trong hộp thoại của bảng dưới cùng trong Chrome dành cho Android.

Ví dụ về giao diện người dùng của bảng dưới cùng trong Chrome.
Ví dụ về giao diện người dùng của bảng dưới cùng trong Chrome.

Điều này giúp nhà phát triển có cơ hội xây dựng một quy trình cài đặt hấp dẫn hơn phù hợp hơn với kỳ vọng của người dùng và bắt chước mô hình tư duy hiện có của họ trải nghiệm đã cài đặt.

Đã mở rộng giao diện người dùng cài đặt phong phú hơn.
Đã mở rộng giao diện người dùng cài đặt phong phú hơn.
Đã thu gọn giao diện người dùng cài đặt phong phú hơn.
Đã thu gọn giao diện người dùng cài đặt phong phú hơn.

Khả năng tương thích ngược

Các trang web không bao gồm ít nhất một ảnh chụp màn hình cho tệp kê khai sẽ tiếp tục nhận được các câu lệnh hiện có. Điều này có thể thay đổi trong tương lai tuỳ thuộc vào sự tiếp nhận của cộng đồng nhà phát triển và thông tin về người dùng lượt thể hiện cảm xúc.

Xem trước giao diện người dùng

Giao diện người dùng này hoạt động trên Chrome 94 trên Android và Chrome 108 trên máy tính.

Tính năng này được bật trên squoosh.app và có thể xem trước tại đó.

Triển khai

Để hiển thị hộp thoại cài đặt giao diện người dùng phong phú hơn, nhà phát triển cần thêm ít nhất một ảnh chụp màn hình cho hệ số hình dạng tương ứng trong mảng screenshots. Trường description là không bắt buộc nhưng bạn nên dùng. Hộp thoại nội dung được xây dựng bằng nội dung của trường screenshotsdescription để mang lại trải nghiệm giống với lượt cài đặt trong cửa hàng ứng dụng. Giao diện người dùng này giúp người dùng xác định rằng họ đang thêm một ứng dụng vào thiết bị. Khi có nhiều không gian hơn, nhà phát triển có thể cung cấp bối cảnh cụ thể cho người dùng tại thời điểm cài đặt.

Ví dụ: nhà phát triển có thể sử dụng trường description để làm nổi bật các tính năng của ứng dụng nhằm khuyến khích người dùng sử dụng ứng dụng đó trên thiết bị của họ. Với screenshots, họ có thể giới thiệu giao diện của ứng dụng web dưới dạng một ứng dụng độc lập với tất cả khả năng truy cập dễ dàng mà các ứng dụng nền tảng có.

Để xem thông số kỹ thuật chi tiết và hướng dẫn cách thêm các thông số đó vào ứng dụng, hãy truy cập mẫu Giao diện người dùng cài đặt phong phú hơn.

Phản hồi

Trong tương lai, chúng tôi sẽ cân nhắc việc thêm các dữ liệu khác như danh mục và điểm xếp hạng ứng dụng, nhưng việc này sẽ dựa trên phản hồi của nhà phát triển và người dùng.

Trong những tháng tới, chúng tôi rất muốn xem cách nhà phát triển khám phá mẫu giao diện người dùng mới này và chúng tôi rất mong nhận được ý kiến phản hồi của bạn. Liên hệ với chúng tôi bằng cách điền vào biểu mẫu này