Дизайн Ilya Grabovskiy
3 779

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

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

В закладки

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

Главная страница в старой (слева) и новой (справа) версиях «Яндекс.Браузера»

Идея

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

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

Задача

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

Методология

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

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

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

Виджеты

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

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

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

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

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

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

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

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

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

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

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

Табло

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

Табло в старой версии «Яндекс.Браузера»

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

Табло в виде горизонтальной ленты

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

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

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

«Табло» в новой версии «Яндекс.Браузера»

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

Результаты и выводы

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

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

#дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Ilya Grabovskiy", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 24, "likes": 39, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 34902, "is_wide": false }
{ "id": 34902, "author_id": 2475, "diff_limit": 1000, "urls": {"diff":"\/comments\/34902\/get","add":"\/comments\/34902\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/34902"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

24 комментария 24 комм.

Популярные

По порядку

Написать комментарий...
9

Кстати для тех кто придумал всплывающие баннеры на сайтах яндекса в аду есть отдельный котел

Ответить
0

Дак отключите их. Эта функция есть в настройках

Ответить
0

Где такие волшебные настройки?!

Ответить
1

Главная страница -> Сверху справа "Настройка" -> Настройки портала -> Реклама -> Снять галочку с пункта "Показывать рекламу"

Ответить
0

Думаю, человек говорил и просьбах установить Яндекс Браузер

Ответить
0

Спасибо)

Ответить
4

Норм стало. Молодцы. Но о своём первом изменении табло можно жёстче написать. Его не просто забраковали. Его сравняли с землёй. Как такое вообще в голову пришло?))) Но всё равно молодцы, что переделали

Ответить
2

А почему нет Алисы для мака? (Извините что не по теме)
Так много было новостей об этом, встречали Алису с фейерверком и фанфарами, а когда я захотел ее поставить себе на мак, выяснилось что она только для Windows 7 и старше...

Ответить
1

Потому что Яндекс разрабатывает Браузер для Мака по остаточному принципу. Всё-таки (условно) 1% пользователей против 99% виндовых. Линукс-версии ещё меньше внимания достаётся.

Ответить
0

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

С учетом информации выше, рассматривался ли в качестве быстрого варианта "минимум" разместить под "табло" просто мобильную версию yandex.ru (пусть даже без шапки)? Если да, то почему отказались? (перфекционизм/свободные ресурсы или реальная потребность)

Ответить
0

Вы удивитесь! Такая версия уже есть. Так и называется: мобильное приложение «Яндекс».

Ответить
0

В материале вы описали работу над браузером, а не каким-либо другим приложением. Мой вопрос именно про браузер.

Ответить
0

Привет! Рассматривали такой вариант, но он ломал существующие пользовательские сценарии браузера: пользователи любят Дзен и вертикальная лента ассоциируется в первую очередь с ним. Выбрали поступательный вариант, который позволит нашей аудитории решать больше задач на главном экране, но не поломает существующие привычки.

Ответить
0

Спасибо за ответ!
Оффтоп: тот человек, что минусовал мой вопрос, работал в вашей команде? :)

Ответить
0

Не знаю, но вопрос у вас хороший, мы его себе тоже задавали!

Ответить
0

Неужели Яндекс Бро перестал ставить всякую хрень подпольно?

Ответить
0

Давно уже

Ответить
0

Хм, а стойкий иммунитет на него все еще огромен

Ответить
0

Бро никогда и не ставил ничего такого отдельно.

Ответить

Комментарий удален

0

Давным-давно. Это второй по популярности браузер в России, вообще-то.

Ответить

Комментарий удален

0

На десктопе, например, это уже 20% доли.

Ответить
0

Минус вам в карму за дурацкую букву Я внизу на плашке которую нельзя скрыть. Самое глупое что она просто ведёт на главный экран, который открывается нажатием на соседнюю кнопку вкладок. Фэйспалм...

Ответить
0

в настройках же скрывается

Ответить
0

Раньше не было настройки. Спасибо за подсказку!

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления