Giới thiệu
Vào đầu năm 2020, nhóm Chrome trên thiết bị di động và máy tính đã đưa ra kế hoạch cải thiện khả năng được phát hiện và mức độ tương tác của các ứng dụng web đã cài đặt. Công việc của chúng tôi đã giúp số lượt cài đặt và 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 A/B và phỏng vấn người dùng để thu thập 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 đề cập đến 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 vào Cài đặt. Nguyên nhân dẫn đến sự khác biệt này xuất phát từ một nghiên cứu mà nhóm này đã thực hiện vào năm 2016 so sánh các chuỗi khác nhau. Nhóm phát hiệ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 (nếu chỉ ở mức biên) trên thiết bị di động.
Một nghiên cứu sâu hơn về cách phân loại vào năm 2019 cho thấy không có sự khác biệt nào. Do đó, đội ngũ muốn hợp nhất trải nghiệm cài đặt PWA đã quyết định cập nhật nhãn thành Install (Cài đặt) trên Android. Một nghiên cứu khác vào năm 2021 đã so sánh ngôn ngữ Install (Cài đặt), Get (Tải) và Download (Tải xuống). Chúng tôi nhận thấy rằng người dùng hiểu quy trình Cài đặt. Người dùng cảm thấy rằng thao tác nhấn vào nút có nhãn Get (Lấy) sẽ đưa người dùng đến một trang web. Với Download (Tải xuống), họ giả định rằng một tệp sẽ chuyển đến thư mục tệp đã tải xuống hoặc tương đương.
Do đó, chúng tôi kết luận rằng nhãn Cài đặt phù hợp nhất với PWA. Từ giờ trở đi, các nhà phát triển trên nền tảng web nên sử dụng Cài đặt làm chuỗi ưu tiên.
Biểu tượng cài đặt trên màn hình
Trên nền tảng máy tính, chúng tôi có mẫu thiết kế rằng mỗi khi một trang web tải PWA, Chrome sẽ hiển thị một hình viên thuốc xuất hiện ở bên phải thanh địa chỉ có chứa biểu tượng và nhãn Cài đặt. Sau đó, khi người dùng truy cập trang web, sẽ chỉ có biểu tượng xuất hiện. Khi bạn nhấp vào hình này, quá trình cài đặt PWA dành cho máy tính sẽ được kích hoạt.
Ban đầu, biểu tượng này là biểu tượng 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. Ý kiến phản hồi mà chúng tôi nhận được từ cộng đồng các nhà phát triển cho 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 hàm thu phóng để phóng to văn bản, thì biểu tượng thu phóng trông rất giống và khiến người dùng khó hiểu hơn nữa.
Tôi quyết định tìm hiểu cảm nhận của người dùng, vì hầu hết ý kiến phản hồi đều mang tính giai đoạn. Làm việc 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 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 phát hiện ra rằng biểu tượng hiện tại (dấu cộng) là cách dễ nhầm lẫn nhất đối với người dùng. Nhiều người nhầm lẫn biểu tượng này với "y học", "sơ 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 với hình ảnh như mũi tên và thiết bị cùng với quá trình cài đặt. Dựa trên những kết luận này, chúng tôi đã chạy một thử nghiệm A/B/C trong Chrome, so sánh thiết kế hiện có với 2 phương án thay thế. Chúng ta đã tìm thấy mũi tên chỉ vào màn hình, hoạt động tốt 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ố thao tác đóng giao diện người dùng cài đặt với biểu tượng mới này đã giảm.
Kết quả là thiết kế như bạn thấy hiện nay, với tỷ lệ cài đặt PWA nhiều hơn gấp đôi đối với các trang web. Chúng tôi cũng đã thêm biểu tượng này và thiết bị di động tương đương với bộ biểu tượng Material Design, cho phép cộng đồng sử dụng các 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 sẽ không thay đổi thế giới, dẫn chúng ta đến tính năng tiếp theo.
Trợ giúp trong sản phẩm
Trợ giúp trong sản phẩm là chú giải công cụ dạng bong bóng màu xanh dương giúp người dùng nắm được 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 trang web, Chrome sẽ sử dụng một dịch vụ gọi là Hoạt động tương tác với trang web.
Thẻ này cung cấp thông tin về mức độ tương tác của người dùng với 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. Sử dụng những điểm số này, chúng tôi có thể xác định
người dùng có quan tâm đến một trang web hay không. Nếu trang web đó là một ứng dụng web tiến bộ (PWA) và người dùng có tương tác, chúng tôi sẽ hiển thị cho họ giao diện người dùng trợ giúp cài đặt trong sản phẩm.
Đ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 chứ không làm phiền những người dùng có thể truy cập trang web một lần.
Nhờ 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ích cực đã cải thiện khả năng cài đặt của các ứng dụng web.
Giao diện người dùng cài đặt phong phú hơn
Mô hình lượt cài đặt đối với hầu hết người dùng là một cửa hàng. Kể từ giữa những năm 2000, chúng tôi đã hướng dẫn người dùng rằng bất cứ khi nào họ cài đặt ứng dụng, họ sẽ thấy nội dung mô tả, ảnh chụp màn hình và các siêu dữ liệu khác để giúp họ quyết định xem ứng dụng có phải là thứ họ muốn hay không.
Với PWA, giao diện người dùng mà chúng tôi cho thấy khi người dùng quyết định cài đặt một ứng dụng web tương đối thiếu thốn. Vì vậy, nhóm đã quyết định khám phá một trải nghiệm cài đặt phong phú hơn, giúp cung cấp bối cảnh cho người dùng về ứng dụng web và cho phép nhà phát triển tôn vinh PWA ngang hàng so với trải nghiệm gốc.
Đầu năm nay, chúng tôi đã ra mắt Richer Install (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ả (nên làm nhưng không cần thiết). Nhờ giao diện người dùng mới hơn này, chúng tôi nhận thấy một số PWA đã tăng gấp đôi tỷ lệ cài đặt. Điều này cho thấy người dùng tin tưởng hơn vào việc cài đặt các ứng dụng web khi chúng tôi cung cấp thêm bối cảnh và trải nghiệm phong phú hơn. Phiên bản giao diện người dùng này dành cho máy tính hiện đang trong quá trình hoàn thiện.
Kết luận
Nhóm đã dành hai năm qua để khám phá và thử nghiệm các tính năng mới trong Chrome. Các tính năng này đã 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 về những lợi ích của trải nghiệm web. Vẫn còn rất nhiều việc chúng tôi có thể làm, nhưng nhìn chung, chúng tôi có thể cải thiện và làm phong phú thêm cuộc sống của người dùng cũng như hỗ trợ hơn nữa cho môi trường web mở.