Ошибки, которых мы не совершили, или предыстория виджетов в «Яндекс.Браузере» для Android
Рассказали менеджер продукта Ирина Есиновская и дизайнер Тимур Нурутдинов.
В избранное
В избранном
Недавно вышла новая версия «Яндекс.Браузера» для Android. Главная страница «Браузера» теперь выглядит иначе — на ней появились виджеты с данными от сервисов «Яндекса»: погодой, пробками, новостями и котировками. В этом материале мы расскажем, как родилась идея виджетов и как мы искали оптимальный вариант их внедрения в «Браузер». Главная страница в старой (слева) и новой (справа) версиях «Яндекс.Браузера» Идея
Самый популярный сайт у пользователей «Яндекс.Браузера» — «Яндекс». Каждый день на него заходит четверть нашей аудитории, а каждую неделю — около 40%. Люди пользуются «Яндексом» не только для того, чтобы найти что-нибудь в интернете. Они читают новости, проверяют пробки, смотрят прогноз погоды. Мы решили сократить путь до этой информации, добавив аналогичные блоки в «Браузер» — чтобы пользователи могли составить картину дня сразу после запуска приложения.
Ещё одним аргументом в пользу виджетов стало мнение, которое мы не раз слышали на фокус-группах. Люди говорили, что дизайн «Браузера» «непривычно пустой». Оказалось, что некоторые наши пользователи не разделяют понятия «Яндекс.Браузер» и «Яндекс». Для них одно равноценно другому, поэтому они ожидают увидеть в «Браузере» ту же информацию, что и на yandex.ru. Задача
Главный экран «Браузера» — точка входа в интернет. Пользователи видят экран всякий раз, когда запускают «Браузер» или открывают новую вкладку. Нашей задачей было не только продумать внешний вид и механику виджетов, но и вписать их в главный экран так, чтобы не нарушить привычные сценарии использования и сохранить количество переходов с экрана в «Дзен» и на сайты из «Табло». Методология
Во время работы над проектом мы придумали множество вариантов интеграции виджетов в «Браузер». Чтобы выбрать наилучший, мы собирали на основе макетов работоспособные прототипы и показывали их пользователям в нашей лаборатории.
В ходе юзабилити-тестирования проверяли, как люди используют виджеты, понимают ли они, что на них изображено, с какими сложностями сталкиваются. Варианты, отобранные по результатам юзабилити-исследований, выкатывали на часть пользователей альфа- и бета-версий «Яндекс.Браузера» — проводили A/B-тестирование, смотрели на метрики и собирали отзывы.
Такой подход позволил заранее выявить проблемные места. Многие решения, которые хорошо выглядели на макетах, в деле оказались неочевидными или неудачными. Ниже мы приведём несколько примеров. Виджеты
Виджеты в «Браузере» решили показывать в виде карточек. Такой формат, во-первых, стилистически соответствует ленте «Дзена», которая тоже находится на главном экране. Во-вторых, карточки хорошо сочетаются с фонами «Браузера».
Мы попробовали несколько вариантов размещения карточек и в итоге остановились на горизонтальной ленте. По умолчанию все карточки в ленте свёрнуты. На свёрнутой карточке отображается краткая сводка, на развёрнутой — более подробная. Предполагалось, что люди будут раскрывать карточки по отдельности, нажимая на нужную:
Пользователь прокручивает ленту и кликом раскрывает нужные карточки
Такой вариант оказался не самым удачным. Выяснилось, что если человек планирует поездку, ему хочется посмотреть сразу две карточки — и погоду, и пробки.
Тогда предприняли другой подход — предусмотрели два режима просмотра ленты: краткий и подробный. Подробный режим включается при нажатии на любой виджет; все карточки раскрываются, и между ними можно переключаться:
Два режима просмотра ленты
Выглядит неплохо, но если вам, допустим, хочется прочитать новости, нужно выполнить целых два действия: «смахнуть» ленту вбок и нажать на карточку с новостями. Дорабатываем механику и превращаем «смахивание» в триггер. Если человек выполняет это действие, лента сама переключается в подробный режим:
По «смахиванию» вбок лента переключается в подробный режим
Здесь проблема в том, что информация не помещается в экран — палец заслоняет нижнюю часть карточек, а чтобы увидеть все пять новостей, необходимо чуть проскроллить вниз. Отцентрировали ленту и заодно ускорили раскрытие карточек:
Теперь содержимое карточки помещается на экране полностью
Вот теперь годится. Табло
Виджеты занимают место на экране, поэтому другой элемент — «Табло» — требовалось сделать более компактным, но так, чтобы никто не пострадал, и количество переходов на сайты осталось прежним. Изначально «Табло» выглядело так: Табло в старой версии «Яндекс.Браузера»
Чтобы высвободить пространство, попробовали превратить «Табло» из вертикального в горизонтальное. На юзабилити-тестировании победил такой вариант: Табло в виде горизонтальной ленты
После UX-тестирования мы включили горизонтальное «Табло» у части пользователей «Яндекс.Браузера» — и, та-дам, получили много негативных отзывов. Новый вид оказался непривычным. Некоторые пользователи не понимали, что ленту можно прокручивать горизонтальным свайпом, а те, кто понял, жаловались, что им неудобно тянуть палец вверх.
Вариант успешно прошёл юзабилити-тестирование, но в приложении пользователи его забраковали. Почему так получилось? Дело в том, что на UX-тестах пользователям показывали прототип — вполне работоспособный, но обезличенный, без любимых сайтов на «Табло». Поэтому люди взаимодействовали с главным экраном не совсем так, как в настоящем «Браузере».
Что же, делаем ещё один подход — отказываемся от идеи горизонтального Табло и возвращаем прежний вертикальный формат с сеткой из трёх колонок. При этом слегка уменьшаем тумбы и отодвигаем их друг от друга: «Табло» в новой версии «Яндекс.Браузера»
Идём на второй круг: добавляем этот вариант в альфа- и бета-версии «Браузера» и проводим A/B-эксперименты. Метрики и отзывы показывают, что всё хорошо. Результаты и выводы
Некоторые гипотезы, которые мы выдвинули во время работы над виджетами, оказались неверными. Юзабилити-тестирование на прототипах (их в общей сложности было больше восьмидесяти) и эксперименты позволили вовремя выявить проблемы и предотвратить ошибки.
Перед запуском мы провели контрольную проверку: активировали новый главный экран у части пользователей «Браузера». Большинство отзывов были положительными. За неделю виджетами воспользовалась треть аудитории, а дневная возвращаемость в «Яндекс.Браузер» выросла на 1,2%. Нам удалось решить задачу: необходимая людям информация стала ближе, но при этом сценарии использования главного экрана «Браузера» остались прежними.
#дизайн
В избранное
В избранном
Недавно вышла новая версия «Яндекс.Браузера» для Android. Главная страница «Браузера» теперь выглядит иначе — на ней появились виджеты с данными от сервисов «Яндекса»: погодой, пробками, новостями и котировками. В этом материале мы расскажем, как родилась идея виджетов и как мы искали оптимальный вариант их внедрения в «Браузер». Главная страница в старой (слева) и новой (справа) версиях «Яндекс.Браузера» Идея
Самый популярный сайт у пользователей «Яндекс.Браузера» — «Яндекс». Каждый день на него заходит четверть нашей аудитории, а каждую неделю — около 40%. Люди пользуются «Яндексом» не только для того, чтобы найти что-нибудь в интернете. Они читают новости, проверяют пробки, смотрят прогноз погоды. Мы решили сократить путь до этой информации, добавив аналогичные блоки в «Браузер» — чтобы пользователи могли составить картину дня сразу после запуска приложения.
Ещё одним аргументом в пользу виджетов стало мнение, которое мы не раз слышали на фокус-группах. Люди говорили, что дизайн «Браузера» «непривычно пустой». Оказалось, что некоторые наши пользователи не разделяют понятия «Яндекс.Браузер» и «Яндекс». Для них одно равноценно другому, поэтому они ожидают увидеть в «Браузере» ту же информацию, что и на yandex.ru. Задача
Главный экран «Браузера» — точка входа в интернет. Пользователи видят экран всякий раз, когда запускают «Браузер» или открывают новую вкладку. Нашей задачей было не только продумать внешний вид и механику виджетов, но и вписать их в главный экран так, чтобы не нарушить привычные сценарии использования и сохранить количество переходов с экрана в «Дзен» и на сайты из «Табло». Методология
Во время работы над проектом мы придумали множество вариантов интеграции виджетов в «Браузер». Чтобы выбрать наилучший, мы собирали на основе макетов работоспособные прототипы и показывали их пользователям в нашей лаборатории.
В ходе юзабилити-тестирования проверяли, как люди используют виджеты, понимают ли они, что на них изображено, с какими сложностями сталкиваются. Варианты, отобранные по результатам юзабилити-исследований, выкатывали на часть пользователей альфа- и бета-версий «Яндекс.Браузера» — проводили A/B-тестирование, смотрели на метрики и собирали отзывы.
Такой подход позволил заранее выявить проблемные места. Многие решения, которые хорошо выглядели на макетах, в деле оказались неочевидными или неудачными. Ниже мы приведём несколько примеров. Виджеты
Виджеты в «Браузере» решили показывать в виде карточек. Такой формат, во-первых, стилистически соответствует ленте «Дзена», которая тоже находится на главном экране. Во-вторых, карточки хорошо сочетаются с фонами «Браузера».
Мы попробовали несколько вариантов размещения карточек и в итоге остановились на горизонтальной ленте. По умолчанию все карточки в ленте свёрнуты. На свёрнутой карточке отображается краткая сводка, на развёрнутой — более подробная. Предполагалось, что люди будут раскрывать карточки по отдельности, нажимая на нужную:
Пользователь прокручивает ленту и кликом раскрывает нужные карточки
Такой вариант оказался не самым удачным. Выяснилось, что если человек планирует поездку, ему хочется посмотреть сразу две карточки — и погоду, и пробки.
Тогда предприняли другой подход — предусмотрели два режима просмотра ленты: краткий и подробный. Подробный режим включается при нажатии на любой виджет; все карточки раскрываются, и между ними можно переключаться:
Два режима просмотра ленты
Выглядит неплохо, но если вам, допустим, хочется прочитать новости, нужно выполнить целых два действия: «смахнуть» ленту вбок и нажать на карточку с новостями. Дорабатываем механику и превращаем «смахивание» в триггер. Если человек выполняет это действие, лента сама переключается в подробный режим:
По «смахиванию» вбок лента переключается в подробный режим
Здесь проблема в том, что информация не помещается в экран — палец заслоняет нижнюю часть карточек, а чтобы увидеть все пять новостей, необходимо чуть проскроллить вниз. Отцентрировали ленту и заодно ускорили раскрытие карточек:
Теперь содержимое карточки помещается на экране полностью
Вот теперь годится. Табло
Виджеты занимают место на экране, поэтому другой элемент — «Табло» — требовалось сделать более компактным, но так, чтобы никто не пострадал, и количество переходов на сайты осталось прежним. Изначально «Табло» выглядело так: Табло в старой версии «Яндекс.Браузера»
Чтобы высвободить пространство, попробовали превратить «Табло» из вертикального в горизонтальное. На юзабилити-тестировании победил такой вариант: Табло в виде горизонтальной ленты
После UX-тестирования мы включили горизонтальное «Табло» у части пользователей «Яндекс.Браузера» — и, та-дам, получили много негативных отзывов. Новый вид оказался непривычным. Некоторые пользователи не понимали, что ленту можно прокручивать горизонтальным свайпом, а те, кто понял, жаловались, что им неудобно тянуть палец вверх.
Вариант успешно прошёл юзабилити-тестирование, но в приложении пользователи его забраковали. Почему так получилось? Дело в том, что на UX-тестах пользователям показывали прототип — вполне работоспособный, но обезличенный, без любимых сайтов на «Табло». Поэтому люди взаимодействовали с главным экраном не совсем так, как в настоящем «Браузере».
Что же, делаем ещё один подход — отказываемся от идеи горизонтального Табло и возвращаем прежний вертикальный формат с сеткой из трёх колонок. При этом слегка уменьшаем тумбы и отодвигаем их друг от друга: «Табло» в новой версии «Яндекс.Браузера»
Идём на второй круг: добавляем этот вариант в альфа- и бета-версии «Браузера» и проводим A/B-эксперименты. Метрики и отзывы показывают, что всё хорошо. Результаты и выводы
Некоторые гипотезы, которые мы выдвинули во время работы над виджетами, оказались неверными. Юзабилити-тестирование на прототипах (их в общей сложности было больше восьмидесяти) и эксперименты позволили вовремя выявить проблемы и предотвратить ошибки.
Перед запуском мы провели контрольную проверку: активировали новый главный экран у части пользователей «Браузера». Большинство отзывов были положительными. За неделю виджетами воспользовалась треть аудитории, а дневная возвращаемость в «Яндекс.Браузер» выросла на 1,2%. Нам удалось решить задачу: необходимая людям информация стала ближе, но при этом сценарии использования главного экрана «Браузера» остались прежними.
#дизайн
Ещё новости по теме:
18:20