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 đã lên 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. Nỗ lực của chúng tôi giúp việc cài đặt và tương tác với ứng dụng web tiến bộ (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 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 tuỳ chọn Thêm vào màn hình chính, nhưng trên Nền tảng dành cho 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 đế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 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 (nếu chỉ đơn thuần).
Một nghiên cứu thêm về cách phân loại vào năm 2019 cho thấy không có sự khác biệt. Do đó, nhóm 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 Cài đặt trên Android. Một nghiên cứu sâu hơn vào năm 2021 đã so sánh ngôn ngữ Cài đặt, Tải và Tải xuống. Chúng tôi nhận thấy rằng người dùng hiểu quá trình Cài đặt đang diễn ra. Người dùng cho rằng việc nhấn vào nút có nhãn Get (Tải xuống) sẽ đưa người dùng đến một trang web và với Download (Tải xuống), họ cho rằng một tệp sẽ được đưa đến thư mục tải xuống hoặc thư mụ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 là 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áy tính
Trên các nền tảng dành cho máy tính, chúng tôi có một mẫu thiết kế theo đó bất cứ khi nào một trang web tải PWA, Chrome sẽ hiển thị một viên thuốc xuất hiện ở bên phải thanh địa chỉ, trong đó có biểu tượng và nhãn Cài đặt. Sau đó, khi người dùng truy cập vào trang web, chỉ có biểu tượng xuất hiện. Thao tác nhấp vào viên này sẽ kích hoạt quá trình cài đặt ứng dụng web tiến bộ (PWA) dành cho máy tính.
Ban đầu, biểu tượng này là 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 sử 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. Phản hồi của cộng đồng nhà phát triển cho biết biểu tượng này khó hiểu. 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 trông rất giống, khiến người dùng bị nhầm lẫn 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 thời sự. Phối hợp với các nhà nghiên cứu trải nghiệm người dùng, chúng tôi đã thực hiện 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 kiểu thiết kế, bao gồm cả thiết kế hiện tại và hỏi người dùng về ý nghĩa của "Cài đặt". Chúng tôi nhận thấy rằng biểu tượng hiện tại (dấu cộng) là biểu tượng dễ gây nhầm lẫn nhất đối với người dùng. Nhiều người nhầm lẫn ký hiệu 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 có với 2 phương án thay thế. Chúng tôi đã đáp xuống mũi tên chỉ xuống một màn hình. Mũi tên này 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ố lượt đóng giao diện người dùng cài đặt với biểu tượng mới này giảm đi.
Kết quả chính là thiết kế mà bạn thấy hiện nay, với tỷ lệ cài đặt PWA cao hơn gấp đôi so với các trang web. Chúng tôi cũng đã thêm biểu tượng này và một 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 hình 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 duy nhất sẽ không thay đổi thế giới, và điều này dẫn chúng tôi đến tính năng tiếp theo của mình.
Trợ giúp trong sản phẩm
Trợ giúp trong sản phẩm là chú thích dạng bong bóng màu xanh dương cung cấp 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, đồng thời hỗ trợ hơn nữa 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à Lượt 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 chrome://site-engagement/, bạn có thể xem các trang web mà mình
thường xuyên tương tác. Dựa trên những điểm số này, chúng tôi 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à 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 người dùng đã tương tác và không làm phiền những người dùng có thể truy cập trang web một lần.
Bằng cách 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%. Điều này cho thấy rằng việc tập trung vào người dùng tích cực tương tác đã cải thiện khả năng cài đặt của ứng dụng web.
Giao diện người dùng Cài đặt phong phú hơn
Mô hình cài đặt của hầu hết người dùng là cửa hàng. 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à siêu dữ liệu khác để giúp họ quyết định xem ứng dụng có phải là ứng dụng họ muốn hay không.
Với PWA, giao diện người dùng mà chúng tôi hiển thị khi người dùng quyết định cài đặt ứng dụng web tương đối ít ỏi. 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 bối cảnh cho người dùng về ứng dụng web, đồng thời cho phép nhà phát triển đánh giá những ứng dụng web tiến bộ (PWA) ngang bằng với trải nghiệm gốc.
Đầu năm nay, chúng tôi đã ra mắt Richer Install (Cài đặt đa dạng hơn), một giao diện người dùng cài đặt mở rộng trong 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. Các nhà phát triển cũng có thể thêm nội dung mô tả. Bạn nên làm việc này nhưng không cần thiết. Do giao diện người dùng mới này, chúng tôi nhận thấy tỷ lệ cài đặt của một số PWA tăng gấp đôi. Điều này cho thấy người dùng yên tâm hơn khi cài đặt các ứng dụng web khi chúng tôi cung cấp thêm ngữ cảnh và trải nghiệm phong phú hơn. Phiên bản dành cho máy tính của giao diện người dùng này hiện đang trong quá trình hoàn thiện.
Kết luận
Nhóm đã dành 2 năm qua để khám phá và thử nghiệm các tính năng mới hơn trong Chrome. Các tính năng này đã hỗ trợ và cung cấp cho nhà phát triển PWA, đồng thời giúp hướng dẫn người dùng 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 nói 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, đồng thời hỗ trợ hơn nữa môi trường web mở.