Интерфейс ТВ‑приставки Электронного города

Самое интересное происходило на главном экране, поэтому расскажу тут только о нём.

Сначала смотрим, что уже придумали до нас — концепты и реальные продукты типа Эпл‑ТВ и Нетфликса:

Эпл‑ТВ ещё специально покупаем в Коворкафе, чтобы пощупать руками. Самой классной штукой оказывается пульт с тачпадом, который позволяет реализовать разные способы перемещения по экрану. У нас пока вместо такого будет пульт сильно попроще с кнопками‑стрелками, к сожалению.

У Нетфликса радуют способы построения подборок. Например, в разделе для детей мультфильмы не просто вывалены кучей, а сгруппированы по персонажам:

Переходим к проектированию.

Ещё на стадии обсуждения задачи мы рассказали клиенту о бюрошном концепте Командор 2.0. Клиенту концепт понравился и оказалось, что он видит будущее приставки примерно таким же, хоть и не так подробно.

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

Наконец, незадолго до начала проекта у «Электронного города» обновился фирменный стиль. Получаем от клиента пачку фирменных шрифтов, цветов и графики.

И вот рисуем:

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

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

Успокаиваем цвета, упрощаем сетку, выделяем важный фильм, а ещё уносим поиск из главного меню наверх, чтобы до него было проще добраться (такой вот Фиттс для телевизионных приставок):

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

Прикидываем, как будет выглядеть и работать навигация по экрану и выделение текущего элемента. Придумываем менять в зависимости от выбранного фильма или передачи фон экрана:

Собираем пачку макетов и видосов и показываем всё клиенту. Клиент одобряет подход, но просит подумать, как сделать приставку ещё современнее на вид.

А мы такие: А что значит современнее? Почему, на ваш взгляд, сейчас не современно?

Клиент: Я был на днях на выставке по теме и видел там очень любопытные концепты. Например, вот:

Ещё клиент: Если оценивать современность интерфейса по шкале одного до десяти, то вот этот концепт где‑то на уровне 9‑10 — уже совсем будущее. Нам настолько концептуально не нужно. Ваш интерфейс — на уровне 4‑5. Он гораздо современнее чем то, что у нас было, но хочется ещё посовременнее, 6‑7.

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

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

Ещё:

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

Что‑то тоже современности не прибавилось, да и со стилем компании не подружилось.

Придумываем более радикальное решение: убрать логотип и раздел пользователя наверху (раздел пользователя перемещаем в Настройку), а иконки меню оставить без подложки:

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

По организационным причинам клиент решил вести разработку без нашего участия и доработал и запустил приставку самостоятельно.