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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

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

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

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

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

Планы

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

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

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

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

0
28 комментариев
Написать комментарий...
Eldar Karamov

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

Ответить
Развернуть ветку
Covid 19

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

Ответить
Развернуть ветку
Darina Asinkritova

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

Ответить
Развернуть ветку
Covid 19

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

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

😉

Ответить
Развернуть ветку
Тот самый партизан

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

Ответить
Развернуть ветку
Михаил Белов
Ничего лучше стокового лончера для AndroidTV ещё не придумали.

Лучше для чего/кого?

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

Ерунда. Тестировать нормально надо.

Хотите сделать круто - не трогайте ничего. И клиенты вам будут благодарны.

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

Ответить
Развернуть ветку
S.Z

А зачем вообще делать очередную свою прошивку, хотя есть нормальный android tv?

Ответить
Развернуть ветку
Михаил Белов

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

Ответить
Развернуть ветку
Yan

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

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

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

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

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

Ответить
Развернуть ветку
Yan

1. Ну плеер реально сырой и явно не видно элементов, которые будут управлять аудиодорожкой и садами т.д.

2.Сделал свою Клаву, можно было бы реально улучшить опыт пользователя. Сократив лишние кнопки при разных сценариях и добавить кнопку очистку того же поля поиска.
3. Что не заметил. На макетах вообще.
8. Вроде ещё не учтено состояние проложить просмотор.

Ответить
Развернуть ветку
Alexey Tveritinov

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

Ответить
Развернуть ветку
Yan

Ну ее делал не только кинопоиск. Это клавиатура в целом используется не только на андройд тв, а так же других клиентах.

Так же не проблема делать кнопки голосового вода в поиск).

С точки зрения реализации не так дорого

Ответить
Развернуть ветку
Alexandra Makarova

Выглядит эргономично! Не раздражает цветовая палитра, короче плюсую!

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Спасибо! 😊

Ответить
Развернуть ветку
Ярослав

если торрент тв нет то неинтересно

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Тут каждому свое) другие цели и задачи были в приоритете

Ответить
Развернуть ветку
Alexey Yanshin

А почему бы не написать приложение пульт для смартфонов чтобы убить первую проблему?

Ответить
Развернуть ветку
Андрей Деревянко

Lg уже решили эту проблему выпустив нормальный пульт magic remote. Управление телевизором со смартфона - костыль какой то

Ответить
Развернуть ветку
Alexey Tveritinov

Так для андроид миллион лет уже есть приложение пульт от Google.

Ответить
Развернуть ветку
Илья Куфаров

Одного первого инсайта хватило. Очень понятный интерфейс, респект!

Ответить
Развернуть ветку
Daria Sheveleva

Действительно )

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

😉
спасибо!

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Alexey Tveritinov

Зря не написали что за ноунейм приставка была источником вдохновения.
Фирменная приставка Google with AndroidTV всё это уже реализует. И агрегацию, и голосовой ввод, и поиск по каталогам. И даже рекомендации 😁
А интерфейс, вы уж простите, слишком похож на КиноПоиск для AndroidTV.

Ответить
Развернуть ветку
Артур Кожевников

Да его самого стащили много откуда.

Ответить
Развернуть ветку
user0564335

с чего вдруг Haier КРУПНЕЙШИЙ производитель? В какой отрасли? У них в телевизорах доля от силы 5%, а скорее меньше. Те же Xiaomi и Samsung разве меньше бытовой техники производят?

Сам кейс тоже ни о чём, очередной лаунчер с кучей бесполезных для большинства пользователей функций. Бесполезная трата ресурсов. У многих людей дома больше одного продукта Haier, чтобы таким заниматься? Мне кажется счёт на сотни, даже не на тысячи.

Почему бы не выбрать стандартный лаунчер или тот же (прости господи) Яндекс ТВ? Который был бы привычен пользователям и предлагал плюшки какой-то реальной экосистемы, а не пародию, которую через пару лет вероятно перестанут поддерживать. Абсолютно ненужными вещами занимаетесь и пытаетесь это преподнести как что-то стоящее. Как разрабатываемое приложение сделало кому-то жизнь проще? Да никак. Очередной велосипед, просто в другом цвете. Едет так же, скорее даже хуже

Ответить
Развернуть ветку
25 комментариев
Раскрывать всегда