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