Синефильский редизайн страницы персоны Кинопоиска
В первых постах я собирал и анализировал данные для дизайна.
Если не читали, то начните с них:
Здесь я наконец показываю картинки и разбираю интерфейсные решения.
Презентация на Бехансе
Визуальная выжимка, если не хотите читать длинный текст.
Прототип в Марвеле
Перелинкованные страницы шести персон для проверки макета на разных наборах данных:
- корректно отображается на десктопе,
- нажимаемые области подсвечиваются по клику на страницу,
- загрузка состояний притормаживает, потому что картинки большие.
Выводы из проектирования
В прошлом посте я увлекся абстракциями и наведением красоты до работы с реальными данными. Из-за этого в дизайне пришлось править сетку, расположение блоков, линейку кеглей и почти все остальные элементы.
Главная ошибка — рассчитывать точные значения модульной сетки до определения базовых единиц смысла. Я начал дизайн с постеров и достроил остальные размеры и пропорции под них.
Самый полезный инструмент снижения неопределенности в макете — пятипиксельная сетка. По ней удобно рассчитывать размеры элементов и отступы между ними. Настраивается в Grid Settings Скетча. Для удобства вынесите вкл/выкл сетки на панель инструментов или запомните шорткат: Control + G.
Базовый принцип концепта — «Данные на фасад». Я показываю важную информацию из внутренних разделов на превью, а не прячу за ссылкой.
Шапка
Название превращается в нарицательное, произносится в одно слово и набирается строчными. Градиентный логотип выразительно смотрится на светлом и темном фонах.
Кинопоиск = поиск кино, поэтому поисковая строка идет сразу за логотипом. Полезно отдать ей всю ширину панели как в Пинтересте, но для этого придется менять логику навигации на сайте.
Панель прибита к верху экрана, на страницах с брендированием становится полупрозрачной.
Профиль пользователя
Я собрал структуру профиля и перекомпоновал разделы с фильмами и персонами.
В первую очередь на Кинопоиск приходят за фильмами, поэтому я вынес раздел со списком фильмов пользователя в навигационную панель для быстрого доступа.
Пользователи оценивают фильмы, пишут рецензии, добавляют друзей и прокачивают профиль на сервисе. Чем выше уровень пользователя, тем значимее его оценка при подсчете рейтинга фильма. Первый разделитель в меню профиля выполняет роль прогресс-бара до следующего уровня. Центр уведомлений содержит все сообщения от системы и других пользователей.
Персональные данные
Огромное количество родственников на странице Скорсезе объясняется тем, что Мартин снимал всех в своих фильмах, и у каждого есть страница на Кинопоиске.
Индекс популярности
Индекс популярности отражает количество поисковых запросов и посещаемость страницы. Позиция в рейтинге обновляется каждый день, поэтому важно показать значение на первом экране.
Большинству пользователей не интересно изучать график, поэтому превью недельных колебаний открывается только при наведении на индикатор. Страница со значением индекса за все время и другими рейтингами персоны спрятана за кликом.
Действия со страницей
Я собрал все пользовательские действия на панели под фотографией. Правку и добавление информации убрал в низ боковой панели.
Добавить в избранное — самое популярное действие. Я объединил в нем текущий функционал лайка и подписки на обновления. Избранные фильмы, сериалы и персоны складываются в первую коллекцию своих разделов. Параметры подписки настраиваются для всех страниц в профиле, а не как сейчас для каждой по отдельности.
Лайк для сервиса — это важный аргумент при построении рекомендаций. Если пользователь лайкает страницы Дженнифер Лоуренс и Брэдли Купера, то с большой вероятностью можно рекомендовать их совместные фильмы.
Сохранить в коллекцию
Из контекстного меню пользователи могут сохранить страницу в кастомную коллекцию (создается в соответствующем разделе) или написать комментарий к странице (текущий функционал).
Лучшие картины
Незнакомые с творчеством персоны пользователи начинают изучать фильмографию со списка лучших фильмов и сериалов. Я раскрыл текстовый список текущей страницы на отдельный этаж, потому что это один из самых популярных сценариев использования.
Персональные рекомендации
Пользователи, оценившие хотя бы три фильма персоны, по умолчанию видят вкладку с личной статистикой и персонально отобранными фильмами.
График рейтинга фильмографии
Проблемы текущего графика
- Шаг сетки — один фильм. Из-за этого временная шкала не несет никакого смысла, разные временные промежутки выглядят равными.
- Вышедшие в один год фильмы объединяются под одной точкой со средним рейтингом.
- График не интересно изучать и он не помогает обнаруживать тенденции в карьере.
Полезное действие графика — проследить активность персоны и успешность карьеры во времени. Пользователи наглядно оценивают рейтинг фильмографии и принимают решение, стоит ли изучать её подробнее.
- Временная шкала равномерно распределяется по ширине блока. У каждого фильма есть точная дата выхода и координата.
- Фильмы поделены на три кластера по рейтингу, лучшие дополнительно выделены визуальной подложкой.
- Промежуток времени на графике увеличивается выделением мышки.
Амплуа
Все амплуа персоны собраны в одну строку для быстрого сравнения и упорядочены по текущей доминирующей роли. Клинт Иствуд снялся в большем количестве фильмов, чем снял сам, но первой нужно показывать вкладку «Режиссёр».
Фильтр строки амплуа позволяет выбрать фильмы, в которых персона одновременно выполняла несколько ролей. Я не отделяю фильтры от сортировок, потому что для пользователя это единый сценарий представления данных (выбрать лучшую комедию с Шварценеггером).
Текстовый список фильмов
Предназначен для изучения и анализа фильмографии. В подстрочник выносится важная информация о картине — оригинальное название, исполняемая роль (для актеров), определяющий жанр, хронометраж и достижения (топ-250, награды, гонорары).
Хронология вместо нумерации
Номера фильмов не несут никакого смысла, поэтому вместо них я вынес годы и объединил повторяющиеся. Это помогает быстрее перемещаться по списку и оценивать активность персоны.
Ожидаемые фильмы
В строку выводится текущий статус и счетчик до выхода в прокат. Клик по иконке часов подписывает на обновления, и фильм попадает в избранное со статусом ожидаемого.
Когда картина пойдет в кинотеатрах, человек получит уведомление, а система сможет рекомендовать удобные сеансы.
Фильмы в прокате
На фильмы в прокате можно купить билет со страницы персоны. Если пользователь уже ходил в кино и поставил оценку, то у билета на кнопке отрывается корешок.
Франшизы
Сейчас, чтобы посмотреть полный список картин во франшизе, люди уходят на Википедию. О неочевидных связях между фильмами (трилогия Линклейтера «После …») пользователи могут вообще не узнать. Необходимо добавить этот функционал на Кинопоиск и завести отдельные страницы для связанных фильмов.
Сиквелы, приквелы, трилогии и франшизы отмечаются значками. Можно отрисовать иконки сотни популярных и одну для всех остальных.
Вариант для визуалов. Контраст однозначно узнаваемого постера и динамичного кадра помогает вспомнить, оценить и выбрать фильм.
По умолчанию показывается для незалогиненных и пользователей не выставляющих оценки. Переключение сортирует фильмы по рейтингу и запоминается сервисом на всех страницах.
Сегменты боковой панели
Все сегменты построены по одному шаблону:
- представляют раздел с определенным типом контента,
- выводят превью с четырьмя новыми или популярными элементами,
- показывают статистику раздела в подстрочнике заголовка.
Первым выводится биографический сегмент. Если нет ни одного факта, то карточка с предложением добавить информацию.
Остальным присваивается вес, определяющий очередность вывода. На него влияют исключительные факторы. Например, если у персоны есть связи с процентом совпадения выше 75%, то сегмент выводится выше остальных, а крепкая связь выделяется плашкой. Персоны с такими совпадениями целенаправленно снимают фильмы вместе (Коэны, Дафферы, Ноланы, Руссо).
Количество разделов, контента и пользовательских сценариев слишком велико, чтобы определить оптимальную иерархию сегментов. Поэтому следующий логичный шаг редизайна боковой панели — собрать навигационный блок как на IMDB. Быстрые ссылки помогут переходить к нужным разделам с первого экрана и не отнимать у пользователя время на ненужный скролл.
Коллекции
Коллекционирование фильмов — хобби из времен видеосалонов и кассет. Кинопоиск начинался как дневник просмотров в тетрадке, IMDB—как список актрис с красивыми глазами.
Коллекции на Кинопоиске — полезный инструмент рекомендаций, выстраивания связей и открытия нового.
- Редакторы и топовые критики собирают интересные коллекции и обучают остальных пользователей.
- На странице вперемешку выводятся редакторские и пользовательские коллекции, отсортированные по совпадению с творчеством персоны и количеству подписчиков.
- Авторы выбирают из нескольких шаблонов отображения, добавляют обложку, описание коллекции и характеристику к каждому элементу. Если обложка не выбрана вручную, то на превью выводится коллаж из постеров или фотографий.
- Пользователи подписываются на коллекции и получают уведомления при добавлении новых элементов.
- Коллекции используются как списки просмотра с подробной статистикой и прогресс-баром.
Выглядит по-киношному стильно и бережет уставшее зрение вечерних посетителей. Чтобы почувствовать боль в глазах от белой версии, несколько раз переключите режимы в темном помещении (туалет).
Автоматическое включение в определенное время настраивается в профиле. Вручную включается из меню пользователя.
Совет: не перекрашивайте элементы механически, если собираете несколько цветовых схем интерфейса. Сокращайте количество стилей и увеличивайте контраст на цветном фоне. Внимательно проверяйте болд, тени, маленькие кегли и иконки.
Логичный шаг развития продукта — добавление страниц персонажей. Это закроет популярные сценарии поиска и привлечет дополнительный трафик.
Я собрал страницу персонажа по шаблону страницы персон без потери существенных характеристик.
Для сложных персон как Рейган, Гитлер и О. Дж. Симпсон на таббар амплуа добавляется вкладка «Персонаж» со списком картин, использующих образ. С текущей страницы О. Джея вы не узнаете об отличном сериале Американская история преступлений.
Не вошедшее
Для реализации всех идей из предыдущих постов мне не хватило данных. Полежат здесь до будущих проектов:
- Игровая механика в профиле пользователя. Серьезный функционал, который повысит активность на сервисе и превратит Кинопоиск в полноценную социальную сеть. Профиль содержит красивую статистику, которую хочется показывать друзьям.
- Страница всех рейтингов. Аналитика индекса популярности, количества добавлений в избранное, рейтинга фильмографии, рейтинга ожиданий будущих фильмов, персональной статистики просмотров и топовых фанатов персоны.
- Новая схема монетизации. Практика написания абстрактных редполитик и схем работы с нативной рекламой не привела к осмысленному решению. Сдался и вставил в концепт четыре формата баннеров.
- Темная схема мобильной версии. Позволяет быстро найти актера из фильма и избежать эффекта светящегося лица в кинотеатре.
- Сериалы в списке. Функционал отображения количества серий, в которых снялся актер, и количества снятых режиссером серий нужно разрабатывать совместно с возможностью отдельной оценки сезонов и эпизодов.
Результат
Я провел исследование и собрал прототип на основе реальных знаний о Кинопоиске. Тестовая группа пользователей разобралась со структурой и не нашла серьезных ошибок. Концепт чище, логичнее и содержит больше информации чем текущая страница персоны.
Капитанские советы из собственной боли:
- Не составляйте детальный план на месяцы вперед. Он перестанет соответствовать реальности после первой обратной связи.
- Определяйте приоритетные задачи, точки демонстрации и корректируйте план на ходу.
- Показывайте работу как можно чаще. Другие люди отлично находят недоработки, которые вы не видите.
- Добавляйте в каждый проект что-нибудь от себя, чтобы не стать равнодушным в рутине бизнес-целей и дедлайнов.
- Проектируйте приятные ощущения, и пользователи полюбят ваш продукт.
Гадания на интерфейсе
В последнем посте я оторвусь от реальности и пофантазирую о будущем Кинопоиска и продуктов вокруг кино. Комментируйте пост или пишите письма, если у вас есть идеи на эту тему и вы хотите их обсудить.
Тексты, фотографии, баннеры, иконки наград и другие материалы позаимствованы с Кинопоиска и Кинопоиска+ в образовательных целях.
