Ошибки, которых мы не совершили, или предыстория виджетов в «Яндекс.Браузере» для Android

Рассказали менеджер продукта Ирина Есиновская и дизайнер Тимур Нурутдинов.

Недавно вышла новая версия «Яндекс.Браузера» для Android. Главная страница «Браузера» теперь выглядит иначе — на ней появились виджеты с данными от сервисов «Яндекса»: погодой, пробками, новостями и котировками. В этом материале мы расскажем, как родилась идея виджетов и как мы искали оптимальный вариант их внедрения в «Браузер».

Самый популярный сайт у пользователей «Яндекс.Браузера» — «Яндекс». Каждый день на него заходит четверть нашей аудитории, а каждую неделю — около 40%. Люди пользуются «Яндексом» не только для того, чтобы найти что-нибудь в интернете. Они читают новости, проверяют пробки, смотрят прогноз погоды. Мы решили сократить путь до этой информации, добавив аналогичные блоки в «Браузер» — чтобы пользователи могли составить картину дня сразу после запуска приложения.

Ещё одним аргументом в пользу виджетов стало мнение, которое мы не раз слышали на фокус-группах. Люди говорили, что дизайн «Браузера» «непривычно пустой». Оказалось, что некоторые наши пользователи не разделяют понятия «Яндекс.Браузер» и «Яндекс». Для них одно равноценно другому, поэтому они ожидают увидеть в «Браузере» ту же информацию, что и на yandex.ru.

Главный экран «Браузера» — точка входа в интернет. Пользователи видят экран всякий раз, когда запускают «Браузер» или открывают новую вкладку. Нашей задачей было не только продумать внешний вид и механику виджетов, но и вписать их в главный экран так, чтобы не нарушить привычные сценарии использования и сохранить количество переходов с экрана в «Дзен» и на сайты из «Табло».

Во время работы над проектом мы придумали множество вариантов интеграции виджетов в «Браузер». Чтобы выбрать наилучший, мы собирали на основе макетов работоспособные прототипы и показывали их пользователям в нашей лаборатории.

В ходе юзабилити-тестирования проверяли, как люди используют виджеты, понимают ли они, что на них изображено, с какими сложностями сталкиваются. Варианты, отобранные по результатам юзабилити-исследований, выкатывали на часть пользователей альфа- и бета-версий «Яндекс.Браузера» — проводили A/B-тестирование, смотрели на метрики и собирали отзывы.

Такой подход позволил заранее выявить проблемные места. Многие решения, которые хорошо выглядели на макетах, в деле оказались неочевидными или неудачными. Ниже мы приведём несколько примеров.

Виджеты в «Браузере» решили показывать в виде карточек. Такой формат, во-первых, стилистически соответствует ленте «Дзена», которая тоже находится на главном экране. Во-вторых, карточки хорошо сочетаются с фонами «Браузера».

Мы попробовали несколько вариантов размещения карточек и в итоге остановились на горизонтальной ленте. По умолчанию все карточки в ленте свёрнуты. На свёрнутой карточке отображается краткая сводка, на развёрнутой — более подробная. Предполагалось, что люди будут раскрывать карточки по отдельности, нажимая на нужную:

Такой вариант оказался не самым удачным. Выяснилось, что если человек планирует поездку, ему хочется посмотреть сразу две карточки — и погоду, и пробки.

Тогда предприняли другой подход — предусмотрели два режима просмотра ленты: краткий и подробный. Подробный режим включается при нажатии на любой виджет; все карточки раскрываются, и между ними можно переключаться:

Выглядит неплохо, но если вам, допустим, хочется прочитать новости, нужно выполнить целых два действия: «смахнуть» ленту вбок и нажать на карточку с новостями. Дорабатываем механику и превращаем «смахивание» в триггер. Если человек выполняет это действие, лента сама переключается в подробный режим:

Здесь проблема в том, что информация не помещается в экран — палец заслоняет нижнюю часть карточек, а чтобы увидеть все пять новостей, необходимо чуть проскроллить вниз. Отцентрировали ленту и заодно ускорили раскрытие карточек:

Вот теперь годится.

Виджеты занимают место на экране, поэтому другой элемент — «Табло» — требовалось сделать более компактным, но так, чтобы никто не пострадал, и количество переходов на сайты осталось прежним. Изначально «Табло» выглядело так:

Чтобы высвободить пространство, попробовали превратить «Табло» из вертикального в горизонтальное. На юзабилити-тестировании победил такой вариант:

После UX-тестирования мы включили горизонтальное «Табло» у части пользователей «Яндекс.Браузера» — и, та-дам, получили много негативных отзывов. Новый вид оказался непривычным. Некоторые пользователи не понимали, что ленту можно прокручивать горизонтальным свайпом, а те, кто понял, жаловались, что им неудобно тянуть палец вверх.

Вариант успешно прошёл юзабилити-тестирование, но в приложении пользователи его забраковали. Почему так получилось? Дело в том, что на UX-тестах пользователям показывали прототип — вполне работоспособный, но обезличенный, без любимых сайтов на «Табло». Поэтому люди взаимодействовали с главным экраном не совсем так, как в настоящем «Браузере».

Что же, делаем ещё один подход — отказываемся от идеи горизонтального Табло и возвращаем прежний вертикальный формат с сеткой из трёх колонок. При этом слегка уменьшаем тумбы и отодвигаем их друг от друга:

Идём на второй круг: добавляем этот вариант в альфа- и бета-версии «Браузера» и проводим A/B-эксперименты. Метрики и отзывы показывают, что всё хорошо.

Некоторые гипотезы, которые мы выдвинули во время работы над виджетами, оказались неверными. Юзабилити-тестирование на прототипах (их в общей сложности было больше восьмидесяти) и эксперименты позволили вовремя выявить проблемы и предотвратить ошибки.

Перед запуском мы провели контрольную проверку: активировали новый главный экран у части пользователей «Браузера». Большинство отзывов были положительными. За неделю виджетами воспользовалась треть аудитории, а дневная возвращаемость в «Яндекс.Браузер» выросла на 1,2%. Нам удалось решить задачу: необходимая людям информация стала ближе, но при этом сценарии использования главного экрана «Браузера» остались прежними.

#дизайн