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.S. Кейс Haier в картинках — уже на нашем Behance, приглашаем любоваться!
А заказать дизайн интерфейса можно оставив заявку на нашем сайте.