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

Mù tạt Kurtuldu
Phông chữ Mustafa Kurtuldu
Adriana Jara
Adriana Jara

Giới thiệu

Thiết bị di động và sự ra đời của cửa hàng ứng dụng của nhà cung cấp thiết bị đã làm 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. Người dùng hiện đã quá quen thuộc với các 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 xã hội, điểm 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 các hệ điều hành dành cho máy tính như ChromeOS, Mac và Windows.

Thách thức với các nền tảng cài đặt hiện nay

Hiện nay, nếu người dùng muốn cài đặt PWA, một thanh thông tin và lớp phủ phương thức sẽ xuất hiện với rất ít thông tin. Nếu họ tiếp tục cài đặt, thì quá trình này sẽ kết thúc quá nhanh mà không cung cấp được ngữ cảnh cho người dùng. Điều này trái ngược với kỳ vọng của họ về việc 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.

Để giúp nhà phát triển cung cấp trải nghiệm đã cài đặt ngang bằng với trải nghiệm gốc, Chrome sẽ giới thiệu giao diện cài đặt mới có tên Richer Install (Cài đặt đa dạng hơn). Giao diện này 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 và để tệp đó xuất hiện trong hộp thoại 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 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 và bắt chước mô hình trải nghiệm tâm trí hiện có của họ.

Đã mở rộng giao diện người dùng Cài đặt phong phú hơ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.
Đã 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 cung cấp ít nhất một ảnh chụp màn hình trong 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 mức độ đón 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 từ 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

Để hộp thoại cài đặt giao diện người dùng trở nên 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 nên có. Hộp thoại nội dung được tạo bằng nội dung của các trường screenshotsdescription để mang lại trải nghiệm giống với quá trình cài đặt trên 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 được họ đang thêm một ứng dụng vào thiết bị của mình. 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 giữ ứng dụng trên thiết bị của họ. Đồng thời, với screenshots, họ có thể thể hiện 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ả quyền truy cập dễ dàng mà các ứng dụng nền tảng có.

Để biết thông số kỹ thuật chi tiết và hướng dẫn thêm các thông số này vào ứng dụng của bạn, hãy truy cập vào mẫu Giao diện người dùng Cài đặt đa dạng hơn.

Ý kiến phản hồi

Trong tương lai, chúng tôi sẽ xem xét bổ sung 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 các nhà phát triển và người dùng.

Trong những tháng tới, chúng tôi muốn tìm hiểu cách nhà phát triển khám phá mẫu giao diện người dùng mới này và 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