소개
2020년 초, 모바일과 데스크톱의 Chrome팀은 설치된 웹 앱의 검색 가능성과 참여도를 개선하기 위한 계획을 세웠습니다. 그 결과, PWA 설치 및 참여도가 100% 이상 증가했습니다. 이를 위해 기존 기능을 조사하고 A/B 테스트 실험과 사용자 인터뷰를 진행하여 사용자의 인식과 기대치에 대한 유용한 정보를 얻었습니다. 이 문서에서는 이러한 목표를 달성하는 방법을 설명합니다.
통합 설치 언어
PWA 설치를 트리거하는 클릭 유도 문구가 웹 플랫폼에서 일관되지 않았습니다. Android용 Chrome에서는 홈 화면에 추가를 결정했지만 데스크톱 플랫폼에서는 설치를 강조했습니다. 이러한 불일치가 발생하는 이유는 Google에서 2016년에 진행한 연구에서 서로 다른 문자열을 비교했기 때문입니다. 팀은 홈 화면에 추가가 모바일에서 조금씩만 더 잘 작동한다는 사실을 발견했습니다.
2019년 분류에 관한 추가 연구에서는 차이가 발견되지 않았기 때문에 PWA 설치 환경을 통합하려는 팀은 라벨을 Android에서 설치로 업데이트하기로 했습니다. 2021년에 진행된 추가 연구에서는 Install, Get, Download와 같은 언어를 비교한 결과, 사용자들이 설치를 진행 과정으로 이해하고 있는 것으로 나타났습니다. 사용자는 Get 라벨이 있는 버튼을 탭하면 웹사이트로 이동하는데, Download에서는 파일이 다운로드 폴더 또는 이와 동등한 위치에 있을 것이라고 생각했습니다.
이 모든 점을 염두에 두고 설치 라벨이 PWA에 가장 적합하다는 결론을 내렸습니다. 앞으로 웹 플랫폼 전반의 개발자는 설치를 선호하는 문자열로 채택하는 것이 좋습니다.
데스크톱에 설치 아이콘
데스크톱 플랫폼에는 웹사이트에서 PWA를 로드할 때마다 Chrome에서 검색주소창 오른쪽에 아이콘과 설치 라벨이 포함된 알약이 표시되는 디자인 패턴이 있습니다. 그 이후에 사용자가 사이트를 방문하면 아이콘만 표시됩니다. 이 알약을 클릭하면 데스크톱 PWA 설치가 트리거됩니다.
이 아이콘은 처음에 더하기 기호였습니다. 부분적으로 모바일에서 홈 화면에 추가가 많이 사용되었기 때문입니다. 그러나 앞서 언급했듯이 사용된 언어는 Install이었습니다. 개발자 커뮤니티에서 이 아이콘이 혼란스러워 보인다는 의견을 받았습니다. 또한 사용자가 확대/축소 기능을 사용하여 텍스트를 확대한 경우 확대/축소 아이콘이 매우 유사해 보이므로 사용자를 더욱 혼란스럽게 했습니다.
대부분의 의견이 단편적이어서 사용자의 인식을 조사하기로 했습니다. Google은 UX 연구원과 함께 미국 및 인도네시아 사용자 10,000명을 대상으로 사용자가 설치 아이콘에 대해 얼마나 이해하고 있는지 이해하는 연구를 진행했습니다. Google에서는 기존 디자인을 포함하여 5가지 디자인을 테스트하고 사용자에게 '설치'의 의미를 질문했습니다. 사용자에게 가장 혼란스러워하는 것은 현재 아이콘인 더하기 기호입니다. 많은 사람들이 이 기호를 '약물', '응급 치료', '배터리'와 혼동했습니다.
또한 사용자가 주로 화살표 및 기기와 같은 이미지를 설치와 연관이 있는 것으로 확인되었습니다. 이러한 결론을 바탕으로 Chrome에서 A/B/C 테스트를 실행하여 기존 디자인을 두 가지 대안과 비교했습니다. 모니터를 향한 아래쪽 화살표에 착지했는데 다른 두 개보다 성능이 훨씬 좋았습니다 또한 이 새로운 아이콘을 사용하여 설치 UI 닫기도 감소했습니다.
그 결과, 지금 보시는 디자인이 완성됩니다. 따라서 웹사이트 PWA의 설치율이 2배 이상 증가했습니다. 또한 머티리얼 디자인 아이콘 세트와 그에 상응하는 모바일 아이콘도 추가했습니다. 이 아이콘을 통해 커뮤니티에서는 가장 많은 참여를 유도한 아이콘을 사용할 수 있습니다.
물론 아이콘 하나로 세상이 바뀌는 것은 아니므로 다음 기능으로 연결됩니다.
제품 내 도움말
제품 내 도움말은 특정 기준에 따라 사용자가 관심을 가질 만한 새로운 기능을 사용자에게 온보딩하는 파란색 도움말 풍선입니다. Google에서는 사용자에게 설치 기능을 알리고 새로운 아이콘 재설계를 추가로 지원하기 위해 이 디자인 패턴을 출시했습니다.
사용자가 웹사이트를 정기적으로 방문하면 Chrome은 사이트 참여라는 서비스를 사용합니다.
사용자의 사이트 참여 정도에 대한 정보를 제공합니다. chrome://site-engagement/를 방문하면 정기적으로 이용하는 사이트를 볼 수 있습니다. 이 점수를 바탕으로 사용자가 웹사이트에 관심이
있는지를 파악할 수 있습니다 사이트가 PWA이고 사용자가 참여한 경우 제품 내 도움말 UI를 표시합니다.
즉, 사이트를 한 번 방문하는 사용자를 귀찮게 하지 않고 참여도가 높은 사용자에게만 집중했습니다.
데스크톱에서 제품 내 도움말을 사용한 결과, PWA 설치가 100% 넘게 증가했으며, 참여도가 높은 사용자에게 집중했을 때 웹 앱의 설치 가능성이 개선되었음을 보여줍니다.
더욱 풍부한 설치 UI
대부분의 사용자를 위한 설치 패러다임은 매장입니다. 2000년대 중반부터 Google은 사용자에게 앱을 설치할 때마다 설명, 스크린샷 및 기타 메타데이터를 보고 사용자가 원하는 앱인지 판단할 수 있다고 알려 주었습니다.
PWA를 사용하면 사용자가 웹 앱을 설치하기로 결정할 때 Google에서 표시하는 UI가 비교적 미미했습니다. 따라서 팀은 사용자에게 웹 앱에 관한 컨텍스트를 제공하고 개발자가 네이티브 환경과 동등한 PWA를 축하할 수 있도록 더 풍부한 설치 환경을 살펴보기로 했습니다.
올해 초 Google은 Android용 Chrome의 확장 설치 UI인 리치 설치를 출시했습니다. 이 UI를 사용하면 개발자가 매니페스트에 스크린샷을 추가할 수 있습니다. 개발자는 설명을 추가할 수도 있는데, 이 방법은 권장되지만 필수는 아닙니다. 이 최신 UI로 인해 일부 PWA의 설치율이 두 배로 증가했으며 이는 더 많은 컨텍스트와 풍부한 환경을 제공할 때 사용자가 웹 앱을 설치할 때 신뢰도가 높음을 보여줍니다. 이 UI의 데스크톱 버전은 현재 진행 중인 작업입니다.
결론
팀은 지난 2년 동안 PWA 개발자를 지원하고 지원했으며 사용자에게 웹 환경의 이점을 교육하는 데 도움을 준 Chrome의 최신 기능을 탐색하고 실험해 왔습니다. 아직 할 수 있는 일이 많이 있지만 함께 하면 사용자의 삶을 개선하고 풍요롭게 하며 개방형 웹을 추가로 지원할 수 있습니다.