Giới thiệu
Đầu năm 2020, nhóm Chrome trên thiết bị di động và máy tính bàn đã lên kế hoạch cải thiện khả năng khám phá và mức độ tương tác của các ứng dụng web đã cài đặt. Nhờ đó, số lượt cài đặt và mức độ tương tác với PWA đã tăng hơn 100%. Chúng tôi đã đạt được điều này bằng cách nghiên cứu các tính năng hiện có, chạy thử nghiệm kiểm thử A/B và phỏng vấn người dùng để nắm được thông tin chi tiết về nhận thức và kỳ vọng của người dùng. Bài viết này sẽ trình bày cách chúng tôi đạt được điều đó.
Ngôn ngữ cài đặt hợp nhất
Lời kêu gọi hành động kích hoạt lượt cài đặt PWA không nhất quán trên nền tảng web. Đối với Chrome trên Android, chúng tôi đã chọn Thêm vào màn hình chính, nhưng trên Nền tảng máy tính, chúng tôi nhấn mạnh Cài đặt. Lý do cho sự khác biệt này bắt nguồn từ một nghiên cứu mà nhóm đã thực hiện vào năm 2016 để so sánh các chuỗi khác nhau. Nhóm nghiên cứu nhận thấy rằng tính năng Thêm vào màn hình chính hoạt động hiệu quả hơn trên thiết bị di động, dù chỉ là một chút.
Một nghiên cứu sâu hơn về cách phân loại vào năm 2019 không tìm thấy sự khác biệt nào. Vì vậy, nhóm nghiên cứu muốn hợp nhất trải nghiệm cài đặt PWA, nên đã quyết định cập nhật nhãn thành Cài đặt trên Android. Một nghiên cứu tiếp theo vào năm 2021 đã so sánh các cụm từ Cài đặt, Tải xuống và Tải. Chúng tôi nhận thấy người dùng hiểu rằng Cài đặt là một quá trình đang diễn ra. Người dùng cho rằng khi nhấn vào nút có nhãn Get (Lấy), họ sẽ được chuyển đến một trang web và khi nhấn vào nút Download (Tải xuống), họ cho rằng tệp sẽ được lưu vào thư mục tải xuống hoặc tương đương.
Dựa trên tất cả những điều này, chúng tôi kết luận rằng nhãn Cài đặt phù hợp nhất với PWA. Từ nay trở đi, các nhà phát triển trên nền tảng web nên sử dụng chuỗi Cài đặt làm chuỗi ưu tiên.
Biểu tượng cài đặt trên máy tính
Trên các nền tảng máy tính, chúng tôi có một mẫu thiết kế là bất cứ khi nào một trang web tải một PWA, Chrome sẽ hiển thị một viên nang xuất hiện ở bên phải hộp tìm kiếm đa năng, trong đó có một biểu tượng và nhãn Cài đặt. Sau đó, khi người dùng truy cập vào một trang web, họ sẽ chỉ thấy biểu tượng này. Thao tác nhấp vào viên nang này sẽ kích hoạt quá trình cài đặt PWA trên máy tính.
Ban đầu, biểu tượng này là một dấu cộng, một phần là do phép ẩn dụ Thêm vào màn hình chính được dùng trên thiết bị di động. Tuy nhiên, như đã đề cập, ngôn ngữ chúng tôi sử dụng là Cài đặt. Chúng tôi nhận được ý kiến phản hồi từ cộng đồng nhà phát triển rằng biểu tượng này gây nhầm lẫn. Hơn nữa, nếu người dùng sử dụng chức năng thu phóng để phóng to văn bản, thì biểu tượng thu phóng sẽ trông rất giống nhau, khiến người dùng càng thêm nhầm lẫn.
Tôi quyết định điều tra nhận thức của người dùng, vì hầu hết ý kiến phản hồi đều mang tính chất giai thoại. Cùng với các nhà nghiên cứu trải nghiệm người dùng, chúng tôi đã tiến hành một nghiên cứu với 10.000 người dùng ở Hoa Kỳ và Indonesia để xác định mức độ hiểu biết của người dùng về biểu tượng cài đặt. Chúng tôi đã thử nghiệm 5 thiết kế khác nhau, bao gồm cả thiết kế hiện có, và hỏi người dùng ý nghĩa của nút "Cài đặt". Chúng tôi nhận thấy biểu tượng hiện tại, dấu cộng, là biểu tượng gây nhầm lẫn nhất cho người dùng. Nhiều người nhầm lẫn biểu tượng này với "thuốc", "cấp cứu" và "pin".
Chúng tôi cũng nhận thấy rằng người dùng chủ yếu liên kết hình ảnh như mũi tên và thiết bị với lượt cài đặt. Dựa trên những kết luận này, chúng tôi đã chạy thử nghiệm A/B/C trong Chrome, so sánh thiết kế hiện tại với hai thiết kế thay thế. Chúng tôi đã chọn mũi tên chỉ xuống vào màn hình, hoạt động hiệu quả hơn đáng kể so với hai mũi tên còn lại. Chúng tôi cũng nhận thấy số lượt đóng giao diện người dùng cài đặt bằng biểu tượng mới này giảm xuống.
Kết quả là thiết kế mà bạn thấy ngày nay, giúp tăng gấp đôi tỷ lệ cài đặt cho PWA so với trang web. Chúng tôi cũng đã thêm biểu tượng này và một biểu tượng tương đương dành cho thiết bị di động vào bộ biểu tượng Material Design, cho phép cộng đồng sử dụng biểu tượng mà chúng tôi thấy hấp dẫn nhất.
Tất nhiên, một biểu tượng đơn lẻ sẽ không thay đổi thế giới, vì vậy, chúng ta sẽ chuyển sang tính năng tiếp theo.
Trợ giúp trong sản phẩm
Trợ giúp trong sản phẩm là một chú giải công cụ bong bóng màu xanh dương giới thiệu cho người dùng về các tính năng mới mà họ có thể quan tâm dựa trên các tiêu chí cụ thể. Chúng tôi đã quyết định ra mắt mẫu thiết kế này để thông báo cho người dùng về các tính năng cài đặt và hỗ trợ thêm cho việc thiết kế lại biểu tượng mới.
Khi người dùng thường xuyên truy cập vào một trang web, Chrome sẽ sử dụng một dịch vụ có tên là Mức độ tương tác với trang web.
Chỉ số này cung cấp thông tin về mức độ tương tác của người dùng với một trang web. Bằng cách truy cập vào chrome://site-engagement/, bạn có thể xem các trang web mà bạn thường xuyên tương tác. Bằng cách sử dụng các điểm số này, chúng ta có thể xác định xem người dùng có quan tâm đến một trang web hay không. Nếu trang web là một PWA và người dùng tương tác, chúng tôi sẽ hiển thị cho họ giao diện người dùng Trợ giúp trong sản phẩm để cài đặt.
Điều này có nghĩa là chúng tôi chỉ tập trung vào những người dùng tương tác và không làm phiền những người dùng có thể chỉ truy cập vào trang web một lần.
Khi sử dụng tính năng trợ giúp trong sản phẩm trên máy tính, chúng tôi nhận thấy số lượt cài đặt PWA tăng hơn 100%, cho thấy việc tập trung vào người dùng tương tác đã cải thiện khả năng cài đặt ứng dụng web.
Giao diện người dùng cài đặt phong phú hơn
Cửa hàng là mô hình cài đặt cho hầu hết người dùng. Kể từ giữa những năm 2000, chúng tôi đã hướng dẫn người dùng rằng mỗi khi cài đặt một ứng dụng, họ sẽ thấy thông tin mô tả, ảnh chụp màn hình và siêu dữ liệu khác để giúp họ quyết định xem có nên cài đặt ứng dụng đó hay không.
Với PWA, giao diện người dùng mà chúng tôi hiển thị sau khi người dùng quyết định cài đặt ứng dụng web khá ít. Vì vậy, nhóm đã quyết định khám phá một trải nghiệm cài đặt phong phú hơn để cung cấp thông tin cho người dùng về ứng dụng web và cho phép nhà phát triển giới thiệu các PWA ngang tầm với trải nghiệm gốc.
Đầu năm nay, chúng tôi đã ra mắt tính năng Cài đặt phong phú hơn, một giao diện người dùng cài đặt mở rộng trên Chrome trên Android cho phép nhà phát triển thêm ảnh chụp màn hình vào tệp kê khai. Nhà phát triển cũng có thể thêm nội dung mô tả (không bắt buộc nhưng nên làm). Nhờ giao diện người dùng mới này, chúng tôi nhận thấy số lượt cài đặt của một số PWA tăng gấp đôi, cho thấy người dùng tự tin hơn khi cài đặt ứng dụng web khi chúng tôi cung cấp nhiều bối cảnh và trải nghiệm phong phú hơn. Phiên bản máy tính của giao diện người dùng này hiện đang trong quá trình phát triển.
Kết luận
Trong hai năm qua, nhóm này đã dành thời gian khám phá và thử nghiệm các tính năng mới hơn trong Chrome để hỗ trợ và trao quyền cho các nhà phát triển PWA, đồng thời giúp người dùng hiểu rõ về lợi ích của trải nghiệm web. Chúng ta vẫn còn nhiều việc cần làm, nhưng cùng nhau, chúng ta có thể cải thiện và làm phong phú cuộc sống của người dùng, đồng thời hỗ trợ thêm cho web mở.