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

Понедельник, 19 марта 2018 г.

Следите за нами в ВКонтакте, Facebook'e и Twitter'e

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

В избранное

В избранном

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

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

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

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

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

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

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

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

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

Пользователь прокручивает ленту и кликом раскрывает нужные карточки

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

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

Два режима просмотра ленты

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

По «смахиванию» вбок лента переключается в подробный режим

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

Теперь содержимое карточки помещается на экране полностью

Вот теперь годится. Табло

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

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

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

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

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

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

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

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

#дизайн

Следите за нами в ВКонтакте, Facebook'e и Twitter'e


Просмотров: 429
Рубрика: Hi-Tech
(CY)

Архив новостей / Экспорт новостей

Ещё новости по теме:

RosInvest.Com не несет ответственности за опубликованные материалы и комментарии пользователей. Возрастной цензор 16+.

Ответственность за высказанные, размещённую информацию и оценки, в рамках проекта RosInvest.Com, лежит полностью на лицах опубликовавших эти материалы. Использование материалов, допускается со ссылкой на сайт RosInvest.Com.

Skype: rosinvest.com (Русский, English, Zhōng wén).

Архивы новостей за: 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003

Октябрь 2004: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Rating@Mail.ru