Дизайн приложения для Android TV в четырех инсайтах. Кейс Haier

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

В 2021 году компания готовилась к запуску приложения для Android TV — сервиса, который объединяет агрегатор онлайн-кинотеатров, дашборд умного дома и каталог товаров Haier.

Тогда же Haier обратился за разработкой интерфейса нового приложения к нам, 65pixels. Подобные проекты встречаются редко, поэтому мы сразу же взялись за нестандартную (но жутко интересную!) задачу.

До работы с Haier мы успели накопить большой опыт в создании дизайна для мобильных приложений, но в интерфейсах Android TV мы только нарабатывали экспертизу. Для нашей команды это был вызов — и мы его приняли.

Первым делом решили досконально изучить, как пользователи взаимодействуют с Smart TV — обзавелись ТВ-приставкой, несколько дней тестировали управление пультом на приложениях онлайн-кинотеатров и сравнивали путь пользователя при работе с сайтом, мобильным приложением и ТВ-приставкой.

Такое погружение в область дало нам несколько важных инсайтов. Они же и стали главными задачами в проектировании нашего интерфейса.

Мы сразу выделили главное отличие ТВ-приставки от мобильного приложения — управление пультом. При помощи сенсора на смартфоне легко выбрать нужный элемент или переключиться между экранами — нужно только свайпнуть вверх/вниз или вправо/влево и нажать пальцем на экран. Но у телевизоров все не так.

Пульт требует больше времени и действий. Например, чтобы добраться до нижнего элемента, придется пройти по всем предыдущим — нельзя с верхней части экрана сразу перейти на нижний. К тому же, не всегда понятно, где именно находится курсор в данный момент.

Так мы выделили основную задачу — сделать управление с помощью пульта максимально удобным для пользователя.

Для этого мы расположили элементы на экране так, чтобы между ними можно было быстро и понятно переключаться. Чтобы пользователь мог легко распознавать местоположение курсора, мы продумали индикацию активного элемента. Так выделенный элемент увеличивается в размере и подсвечивается голубым цветом.

Также важно было предусмотреть, что ТВ находится на большом расстоянии от пользователя, поэтому элементы и текст должны быть достаточно крупными. Чтобы убедиться, что все кнопки визуально считываются, после отрисовки экрана мы отходили от монитора примерно на 3 метра и таким образом проводили «тест».

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

Вторая особенность нашего проекта — агрегируемый контент. У Haier нет собственного каталога фильмов и сериалов, их предоставляют кинотеатры-партнеры.

Каждый каталог отличается не только содержанием, но и визуальным оформлением.

Дело в том, что кинотеатры предоставляют и горизонтальные и вертикальные постеры — из-за этого нельзя получить визуально приятный интерфейс, просто поместив картинки разного формата на одной странице.

Мы поставили следующую задачу: собрать общий каталог в единой стилистике и сделать экран логичным и удобным.

Решение задачи нашли быстро — для каждого кинотеатра-партнера мы выделили отдельный раздел.

Карточки фильмов и сериалов практически не отличаются друг от друга, все элементы расположены по единой логике. Это было сделано также для удобства — так пользователь знает, что кнопки находятся в привычных местах и не тратит время на поиск.

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

В самом начале проекта мы предложили клиенту отказаться от его фирменной светлой темы в оформлении. Основная причина — от темных цветов на экране телевизора меньше напрягаются глаза, значит, взаимодействовать с приложением комфортнее. К тому же, большинство приложений для ТВ-приставок используют именно темную тему.

Клиенту настолько понравилось новое цветовое решение, что он решил изменить и фирменный стиль мобильного приложения. Так нам пришел запрос на редизайн мобильного приложения Haier EVO :)

Разработка планировалась итерационно. Мы подготовили прототипы в MVP и более функциональной версии, чтобы дальнейшее добавление новых блоков и разделов в приложении происходило максимально безболезненно.

Главный экран. Здесь находятся точки входа на экраны управления устройствами SMART HOME, каталог товаров Haier, Журнал Haier.

Далее — основные разделы с фильмами/сериалами и различные подборки: Новинки, Рекомендации, Эксклюзивные предложения от кинотеатров-партнеров и другие.

Экраны фильмов и сериалов. При выборе иконки фильма или сериала, пользователь переходит в детальную страницу. Она включает основную информацию, описание сюжета, рейтинги и другие детали.

Так как приложение Haier — агрегатор, для одного фильма или сериала существует несколько аудиодорожек от разных кинотеатров. Мы предусмотрели возможность просмотра всех вариантов озвучки в одном фай.

Как мы уже сказали, сейчас мы работаем над большой задачей — редизайном мобильного приложения Haier EVO. И конечно, разрабатываем дизайн-решения для новых фич приложения для Android TV.

P.S. Ставьте лайки и подписывайтесь на нас тут и в Instagram*: @65pixels.ru :)

P.S.S. Кейс Haier в картинках — уже на нашем Behance, приглашаем любоваться!

*Meta, которой принадлежит Instagram, признана в России экстремистской организацией