Введение
В начале 2020 года команда Chrome для мобильных и настольных компьютеров разработала план по улучшению обнаружения и взаимодействия с установленными веб-приложениями. Наша работа привела к более чем 100-процентному увеличению количества установок и вовлеченности PWA. Мы добились этого, исследуя существующие функции, проводя эксперименты A/B-тестирования и интервью с пользователями, чтобы получить представление о восприятии и ожиданиях пользователей. В этой статье рассказывается, как мы туда попали.
Единый язык установки
Призыв к действию, запускающий установку PWA, был непоследовательным на всей веб-платформе. Для Chrome на Android мы остановились на «Добавить на главный экран» , но на наших настольных платформах мы сделали упор на «Установить» . Обоснование этого несоответствия было получено в исследовании, проведенном командой в 2016 году и в ходе которого сравнивались различные строки. Команда обнаружила, что функция «Добавить на главный экран» работает лучше, хотя и незначительно, на мобильных устройствах.
Дальнейшее исследование таксономии, проведенное в 2019 году, не обнаружило никакой разницы, поэтому команда, желающая унифицировать процесс установки PWA, решила обновить ярлык до «Установить на Android». Дальнейшее исследование, проведенное в 2021 году, сравнило языки Install , Get и Download , и мы обнаружили, что пользователи понимают Install как происходящий процесс. Пользователи чувствовали, что нажатие кнопки с надписью «Получить» приведет к перенаправлению пользователя на веб-сайт, а при использовании «Загрузить» они предполагали, что файл окажется в их папке загрузок или в ее эквиваленте.
Учитывая все это, мы пришли к выводу, что ярлык «Установить» лучше всего подходит для PWA. Мы рекомендуем разработчикам веб-платформы в будущем использовать Install в качестве предпочтительной строки.
Установить иконку на рабочий стол
На наших настольных платформах у нас есть шаблон дизайна, согласно которому всякий раз, когда веб-сайт загружает PWA, Chrome отображает таблетку, которая появляется в правой части омнибокса и содержит значок и метку Install . После этого, когда пользователь зайдет на сайт, будет присутствовать только значок. Нажатие на эту таблетку запускает установку настольного PWA.
Первоначально значок был символом плюса, отчасти из-за метафоры «Добавить на главный экран» , используемой на мобильных устройствах. Однако, как уже упоминалось, мы использовали язык Install . В отзывах, которые мы получили от сообщества разработчиков, этот значок сбивает с толку. Более того, если пользователь использовал функцию масштабирования для увеличения текста, значок масштабирования выглядел очень похоже, что еще больше сбивало пользователя с толку.
Я решил изучить восприятие наших пользователей, поскольку большинство отзывов носили анекдотический характер. Сотрудничая с нашими исследователями UX, мы провели исследование с участием 10 000 пользователей в США и Индонезии, чтобы определить, как пользователи понимают иконографию установки. Мы протестировали пять различных дизайнов, включая существующий, и спросили пользователей, что означает «Установить». Мы обнаружили, что текущий значок (символ плюса) больше всего сбивает с толку наших пользователей. Многие путали этот символ с «лекарствами», «скорой помощью» и «батарейками».
Мы также обнаружили, что пользователи в первую очередь ассоциировали с установкой изображения, такие как стрелки и устройства. Основываясь на этих выводах, мы провели A/B/C-тест в Chrome, сравнив существующий дизайн с двумя альтернативами. Мы остановились на стрелке, указывающей вниз на монитор, который работал значительно лучше, чем два других. Мы также заметили снижение количества отклонений пользовательского интерфейса установки с этим новым значком.
Результатом стал дизайн, который вы видите сегодня: количество установок PWA для веб-сайтов более чем удвоилось. Мы также добавили этот значок и его мобильный эквивалент в наш набор значков Material Design , что позволяет сообществу использовать иконографию, которая нам показалась наиболее интересной.
Конечно, один значок не изменит мир, что подводит нас к следующей функции.
Встроенная справка
Встроенная справка по продукту — это всплывающая подсказка в виде синего пузыря, которая знакомит пользователей с новыми функциями, которые могут их заинтересовать на основе определенных критериев. Мы решили запустить этот шаблон дизайна, чтобы информировать пользователей об особенностях установки и дополнительно поддерживать новый дизайн значков.
Когда пользователь регулярно посещает веб-сайт, Chrome использует службу, известную как Site Engagement . Это предоставляет информацию о том, насколько пользователь взаимодействует с сайтом. Посетив chrome://site-engagement/ , вы можете увидеть сайты, которыми вы регулярно пользуетесь. Используя эти оценки, мы можем определить, заинтересован ли пользователь в веб-сайте. Если бы сайт был PWA и пользователь был вовлечен, мы бы показали ему пользовательский интерфейс встроенной справки по установке. Это означало, что мы сосредоточились только на вовлеченных пользователях и не раздражали пользователей, которые могут посетить сайт один раз.
Используя встроенную справку на настольном компьютере, мы увидели более чем 100-процентное увеличение количества установок PWA, показывая, что ориентация на заинтересованных пользователей улучшила возможность установки веб-приложений.
Более богатый пользовательский интерфейс установки
Парадигма установки для большинства пользователей — магазин. С середины 2000-х годов мы учили пользователей тому, что всякий раз, когда они устанавливают приложение, они видят описание, снимки экрана и другие метаданные, которые помогают им решить, подходит ли им приложение.
В случае с PWA пользовательский интерфейс, который мы демонстрировали, когда пользователь решил установить веб-приложение, был относительно скудным. Поэтому команда решила изучить более широкие возможности установки, которые дали бы нашим пользователям контекст веб-приложения и позволили бы разработчикам оценить PWA, которые были на одном уровне с нативными приложениями.
Ранее в этом году мы запустили Richer Install — расширенный пользовательский интерфейс установки Chrome на Android, который позволяет разработчикам добавлять снимки экрана в свой манифест. Разработчики также могут добавить описание, что рекомендуется, но не обязательно. Благодаря новому пользовательскому интерфейсу мы увидели, что количество установок некоторых PWA удвоилось, что показывает, что пользователи с большей уверенностью устанавливают веб-приложения, когда мы предоставляем больше контекста и более богатый опыт. Версия этого пользовательского интерфейса для настольных компьютеров в настоящее время находится в стадии разработки.
Заключение
Команда провела последние два года, изучая и экспериментируя с новыми функциями Chrome, которые расширили возможности разработчиков PWA и помогли рассказать пользователям о преимуществах веб-интерфейса. Нам еще предстоит много работы, но коллективно мы можем улучшить и обогатить жизнь наших пользователей, а также и дальше поддерживать открытую сеть.