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 đời của các cửa hàng ứng dụng của nhà cung cấp thiết bị đã thay đổi mô hình tư duy của người dùng về cách khám phá, đánh giá và cài đặt phần mềm. Giờ đây, người dùng đã quá quen thuộc với cửa hàng ứng dụng và thông tin bổ sung được cung cấp qua cửa hàng ứng dụng, chẳng hạn như bối cảnh về ứng dụng, phản hồi trên mạng xã hội, điểm xếp hạng, v.v. Do đó, bạn có thể thấy phép ẩn dụ về cửa hàng ứng dụng xuất hiện trong các hệ điều hành trên Máy tính, 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 ít thông tin nhất. Nếu họ tiếp tục cài đặt, thì quá trình sẽ kết thúc quá nhanh mà không cung cấp ngữ cảnh cho người dùng. Điều này trái ngược với kỳ vọng của họ khi cài đặt ứng dụng và có thể khiến họ 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 đang giới thiệu giao diện cài đặt mới, Richer Install, cho phép 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, đồng thời đưa nội dung này vào 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 mang đến cho nhà phát triển cơ hội tạo ra 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, đồng thời bắt chước mô hình tinh thần mà họ đang áp dụng khi 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 có ít nhất một ảnh chụp màn hình vào tệp kê khai sẽ tiếp tục nhận được các lời nhắc 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à phản ứng của người dùng.

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.

Ý kiế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. Tuy nhiên, việc này sẽ dựa trên ý kiế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 muốn xem cách các 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 muốn 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