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

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

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

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

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

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

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

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

Инсайт 1. Пульт неудобен. Но без него никак

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

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

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

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

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

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

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

Инсайт 2. Агрегировать контент — тоже непросто

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

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

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

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

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

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

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

Инсайт 3. Темный — это новый черный

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

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

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

Инсайт 4. Варфреймы

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

Результат

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

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

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

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

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

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

Планы

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

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

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

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

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

52
28 комментариев

Симпатично вышло.

7
Ответить

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

4
Ответить

А не думали о том, что вы просто на просто могли попасть на бракованный товар, и вместо того что бы тут скандал устраивать,пойти спокойно и поменять его

6
Ответить

Ничего лучше стокового лончера для AndroidTV ещё не придумали.
Любые попытки запихнуть сторонний шелл всегда приводят к боли и страданиям со стороны клиентов, которые за это ещё и заплатили. Хотите сделать круто - не трогайте ничего. И клиенты вам будут благодарны.

3
Ответить

Ничего лучше стокового лончера для AndroidTV ещё не придумали.Лучше для чего/кого?
Любые попытки запихнуть сторонний шелл всегда приводят к боли и страданиям со стороны клиентов, которые за это ещё и заплатили.Ерунда. Тестировать нормально надо.
Хотите сделать круто - не трогайте ничего. И клиенты вам будут благодарны.Странный продукт в котором ничего делать не надо, но пользователи деньги все равно несут и благодарны.

2
Ответить

Видно много проблем)

1. Явно есть ощущение что плеер не допилен.
2. Не обязательно использовать клавиатуру по умолчанию. Можно сделать были свою.
3. Нет плашек возврата на контенте.
4. Не учтен момент если будет много сезонов у сериала.
5. Не очень банеры на главной. Можно было лучше привлечь.
6. Не понятен переход на другие кинотеатры.
7. Не понятно как выглядят настройки плеера.

2
Ответить

1. Плеер у каждой кинотеки свой
2. Можно, но она отлично вписалась, почему бы не сэкономить ресурсы на разработку😉
3. Есть, сбоку слева
4. Учтен, есть переключение по сезонам, посмотрите внимательнее)
5. Баннеры предоставляют кинотеки
6. Этот экран есть, но в статье не показали
7. Ответили в первом пункте

Спасибо за комментарии👍

Ответить