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