{"id":7297,"title":"\u0417\u0430\u043a\u0430\u0442\u0438\u043b\u0438 \u0432\u0435\u0447\u0435\u0440\u0438\u043d\u043a\u0443 vc.ru. \u0420\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e","url":"\/redirect?component=advertising&id=7297&url=https:\/\/vc.ru\/promo\/300923-proveli-vecherinku-vc-ru-i-sdelali-ofis-uyutney-s-pomoshchyu-novogo-servisa-ot-ozon&placeBit=1&hash=1786c9dcf11a3b054c8e53004e27074664313ed4055e24064ede059ebc186db8","isPaidAndBannersEnabled":false}
Дизайн
65pixels

Дизайн приложения для 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 :)

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

{ "author_name": "65pixels", "author_type": "self", "tags": [], "comments": 27, "likes": 45, "favorites": 43, "is_advertisement": false, "subsite_label": "design", "id": 304663, "is_wide": true, "is_ugc": true, "date": "Thu, 14 Oct 2021 16:19:29 +0300", "is_special": false }
0
27 комментариев
Популярные
По порядку
Написать комментарий...

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

6

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

0

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

6

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

–6

😉

0

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

1

Ничего лучше стокового лончера для AndroidTV ещё не придумали.

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

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

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

0

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

0

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

0

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

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

2

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

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

0

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

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

0

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

0

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

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

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

0

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

2

Спасибо! 😊

0

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

0

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

0

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

1

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

0

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

0

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

0

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

0

😉
спасибо!

0

К интерфейсам вопросов нет. Современно, стильно... обычно :)
А вот к хайер вопросы есть, особенно "андроид тв" в их исполнении...
Хайер - это типичный китаец второго эшелона. А-ля ббк, векта, дигма... Исполнение соответствующее...

0

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

0

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

0
Читать все 27 комментариев
Cloud CDN: что это такое, как устроено и кому нужно. Разбираем на примере бургеров

Cloud CDN — это сеть быстрой доставки статического контента в формате услуги облачного провайдера. Объяснить, как работает технология, проще всего на примере — сравнить Cloud CDN с популярным продуктом, который выглядит плюс-минус одинаково вне зависимости от того, заказали вы его в Москве, Питере или Нью-Йорке. Знакомьтесь: классический бургер.…

Минэк и корпорация МСП предложили освободить малый бизнес от штрафов за первое нарушение КоАП Статьи редакции

Поправки должна рассмотреть правительственная комиссия, а в случае одобрения их внесут в Госдуму, рассказал источник.

7 причин начать пользоваться Bright Data Proxy Manager:
Реальное развитие руководителей. Базовый принцип

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

ПСБ запустил личный кабинет для предпринимателей. Там можно следить онлайн за каждым своим терминалом

Сервис предоставляется бесплатно.

Как OTUS стал платформой для самореализации. История преподавателя

Наш преподаватель, специалист по Data Science, решил поделиться своей историей преподавания. Он рассказал, как пришел в эту сферу, с какими трудностями столкнулся на пути к преподаванию и что ему помогает. А еще поделился советами, как поддерживать внимание студентов и сделать занятия полезными и увлекательными.

«За гранью ума»: сооснователь YC Пол Грэм о том, почему одного интеллекта недостаточно, чтобы создать что-то новое Статьи редакции

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

Пол Грэм Medium
Детство на антибиотиках: как медицинский догматизм чуть меня не угробил, но, в итоге, подарил дело моей жизни

Часто, когда говорят или пишут о великих, упоминают, что еще в детстве они столкнулись с какой-то проблемой, решили спасти от нее весь мир и так стали тем, кем стали. С великими себя не сравниваю, но для меня такие биографии – свидетельство того, что если человеку нужно, он добьется всего, что захочет. У меня тоже есть подобная история за…

Любителям автоматизации пост

Привет! Это мой первый пост на этой платформе. Я не совсем ещё знаком с местными правилами, но всё же решил написать об одном из своих Telegram ботов и поделиться им.

Строит магазины без окон, чтобы люди теряли счёт времени и думали о покупках: как IKEA заставляет тратить больше Статьи редакции

Ежегодные продажи компании достигают $50 млрд, большая часть которых приходится на незапланированные покупки посетителей, рассказал журналист The Hustle Трунг Фан.

Покупательница магазина Campaignasia
Как не попасть в карьерную ловушку тимлида: личный опыт

Кажется, что тимлиду просто некуда расти: дальше надо либо идти в менеджмент, либо наоборот, становиться узконаправленным разработчиком. По просьбе «Лаборатории Касперского» Евгений Мацюк, который прошел в компании неординарный путь, рассказал о своих карьерных развилках во время и после тимлидства, а также поделился опытом горизонтального роста.

null