Проектирование структуры страницы персоны Кинопоиска
В первом посте я исследовал как люди используют страницу персон Кинопоиска, изучил разные типы сайтов о кино и сформулировал задачи редизайна. Если не читали, то начните с него:
В этом спроектирую блочную структуру страницы персон и опишу изменения в визуальном стиле.
Карта информации
Каждый сегмент данных и каждая функция на Кинопоиске имеют значение. Выкинешь какую-нибудь мелочь — и полтора процента разгневанных пользователей выпьют тебе всю кровь. Понимая это, некоторые элементы в макет я все равно не возьму.
Чтобы ничего не забыть в процессе, я собрал все детали страницы персон на карте. Что удалю, пометил крестом, что добавлю — плюсом.
Держитесь, картинка получилась длинная.
Рекламы и так много, а блоки с директом раздражают аудиторию, которая все еще с подозрением относится к Яндексу. Лучше оставить только тематические баннеры.
Функции «Добавить в Яндекс», «Поделиться по почте» и «Купить
двд-диск» — отголоски из прошлого.
Нерелевантные сегменты боковой панели заполняют место
на страницах матерых персон. Из-за них же у молодых актеров образуется огромная дыра после фильмографии.
Тумблер и обновления по RSS — настолько специфичные вещи,
что стоит спрятать их поглубже.
Сценарии использования
Огромное количество пользовательских задач и сценариев умещается в три типовых варианта поведения:
- найти ответ на конкретный вопрос,
- выбрать что-нибудь интересное,
- исследовать новое.
Все остальные — надстройка над ними. Я визуализировал
их для тестирования удобства структуры страницы.
Ответ на вопрос
Люди заходят на страницу персоны, чтобы узнать, кто она такая, за что известна и откуда они её помнят.
Точка входа: внешний и внутренний поиск.
Платформа: мобильный веб.
Время на странице: меньше минуты.
Поведение: поиск конкретного ответа; страница персоны первая
и последняя в сессии; часто просматривается параллельно с другими действиями, например во время фильма.
Важно: создать четкую иерархию информации от популярного
к менее; ответить на главные вопросы на первом экране.
Точка выхода: ×
Визуальный поиск
Люди заходят на страницу персоны, чтобы выбрать фильм, почитать биографию и интересные факты, посмотреть фотографии и узнать новости.
Точка входа: страницы фильмов, поиск.
Платформа: мобильный веб, приложения и десктоп.
Время на странице: от 1 до 2 минут.
Поведение: беглый просмотр страницы в поисках интересного; страница персон она из двух-трех в сессии.
Важно: расставить акценты и предоставить возможность углубиться
в изучение интересного контента.
Точка выхода: страницы фильмов и сериалов, поиск, торренты.
Исследование нового
Люди заходят на страницу персоны, чтобы изучить фильмографию, проверить обновления будущих проектов
и посмотреть статистику своих просмотров.
Точка входа: страницы фильмов, новости, рецензии, страницы других персон, поиск, что угодно.
Платформа: десктоп.
Время на странице: от 2 до 5 минут.
Поведение: изучение, сравнение, поиск неочевидных связей; страница персон промежуточная в длинной цепочке переходов по сайту.
Важно: визуализировать важные закономерности; предоставить инструменты для сравнения и анализа.
Точка выхода: страницы фильмов, профиль пользователя.
Основное противоречие — постоянные пользователи хотят больше обновляемого интересного контента, но большинство не будет читать.
Чтобы его разрешить, нужно подать информацию о персоне
в удобном для восприятия формате.
История о персоне
Хороший дизайн — это история.
История о персоне строится на вопросах из первых двух сценариев использования. И ответы должны быть простыми и легкими. Внимание пользователей скачет, и не стоит заставлять его читать огромное полотно текста за раз.
Формат — не серьезная аналитическая статья, а маленькие кусочки питательной информации, которые усваиваются за десять секунд.
Это забавный факт, который можно рассказать друзьям в очереди
за попкорном:
— При подготовке к роли Джокера Джаред Лето встречался с психопатами, которые совершали тяжкие преступления, и наблюдающими их психиатрами.
— Ну ничего себе!
В формат коротких сообщений легко помещаются факты
из биографии, занимательные события со съемок, особенности амплуа, цитаты. Даже твиты и фотографии из инстаграма.
Часть информации может одновременно жить на страницах персон
и фильмов, углублять опыт исследования. Например, история о том, как Кристиан Бэйл похудел на 30 килограммов для роли
в Машинисте (и сколько раз худел для других ролей).
Если всю информацию о персоне поделить на маленькие части,
то можно:
- быстро писать;
- легко модерировать контент сторонних авторов;
- делиться в соцсетях;
- добавлять в избранное;
- вставлять перекрестные ссылки на других персон и фильмы;
- читать как отдельную ленту обновлений на главной странице;
- сортировать по рейтингу популярности.
Структура информации о персоне строится по шаблону, который могут заполнять редакторы и сторонние авторы.
Редакторская характеристика творчества
Что делает персону особенной.
Разноплановый американский режиссер итальянского происхождения. Снимает гангстерские фильмы, основанные
на реальных событиях. Часто исполняет эпизодические роли в своих фильмах.
Персональные данные
- возраст, дата рождения, знак зодиака;
- место рождения;
- родители;
- личная жизнь, супруги и дети;
- рост, интересные персональные характеристики.
Карьера
- режиссерский почерк, актерское амплуа;
- количество фильмов;
- жанры;
- первые работы;
- самые популярные и знаковые картины;
- периоды творчества;
- награды и номинации;
- кто повлиял на творческое видение.
Дополнительная информация
- интересные факты из жизни и со съемок;
- цитаты личные и из ролей;
- правила жизни;
- твиты;
- фотографии из инстаграма;
- фотографии;
- ссылки на источники с подробной биографией и аналитикой творчества.
Обновления по специальным случаям
- выход нового фильма с громкой рекламной кампанией;
- день рождения или юбилей;
- годовщина со дня смерти и признание былых заслуг;
- выбор персоной месяца по рейтингу популярности;
- …
Пустое состояние
О многих непопулярных персонах ничего не известно, поэтому страница не должна рассыпаться если информации мало,
или нет совсем. Структура гибкая и живет при наличии любого количества информации. Пустые состояния — красивые и побуждают заполнять себя.
Редакционная политика
На Кинопоиске тысячи страниц персон и десятки тысяч фильмов. Никакой редакторский отдел не сможет написать текст для каждой
из них. Для заполнения новой структуры нужно привлекать сторонних авторов. Чтобы снизить процент неадекватных обращений, можно сделать эту функцию доступной только при достижении определенного уровня. Например, после оценки тысячи фильмов.
Редакторская работа — отобрать небольшой процент самых популярных персон и заполнить их страницы информацией для наглядного примера. Затем оформить редполитику, которая расскажет пользователям как и какую информацию присылать
на Кинопоиск.
Редполитика Кинопоиска должна быть простой и выглядеть примерно так:
Зачем писать
Кинопоиск — сайт о мировом кинематографе. Здесь публикуются материалы о фильмах, режиссерах и актерах. Со дня основания
мы развиваем ресурс вместе с активными пользователями, которые находят и присылают интересную информацию.Мы разработали систему поощрений для популярных авторов.
Чем больше вы пишете рецензий, ставите оценок и добавляете информации на сайт, тем выше ваш рейтинг.Каждую неделю мы награждаем самых активных пользователей билетами на премьеры, разыгрываем атрибутику из популярных фильмов и приглашения на закрытые показы.
Что писать
Любую информацию из структуры предыдущего блока.Как писать
1. Зайдите на страницу персоны или фильма.2. Нажмите кнопку «Добавить информацию на страницу».
3. Напишите в пустой раздел или отредактируйте заполненную информацию.
4. Исправьте подчеркнутые орфографом ошибки.
5. Прикрепите ссылку на источник, если цитируете чужие материалы.
6. Отправьте на модерацию.
7. Редакция проверит, отредактирует и опубликует
ваш материал.8. Вы получите уведомление и баллы в рейтинге.
Структура страницы
Я собрал четыре структуры страницы из логических блоков
для сравнения и выбора оптимальной.
1. Две колонки
Структура из первого варианта задания. Логика простая — страница делится на сервисную и медийную части. Информация в правой колонке сгруппирована по логическим сегментам. Каждый открывается подробнее в попапе.
По задумке пользователь просматривает ту часть страницы, которая нужна для решения задачи. В реальности нормально изучать фильмографию не получается — взгляд постоянно отвлекается
на яркие блоки правой панели.
2. Логические слои
Информация сгруппирована по логическим слоям, слои упорядочены
по популярности. Подробности каждого слоя раскрываются
на этой же странице по принципу спойлера.
Страница получится длинной. Придется добавить сквозную навигацию.
3. Три колонки
Биографическая карточка персоны в первой колонке фиксируется
при скролле длинных страниц и помещается на одном экране стандартного разрешения. Видна всегда.
Во второй колонке выводится фильмография. В третьей —
вся дополнительная информация. Подробности — в попапе.
4. Синтетическая классика
Классическая компоновка с заимствованиями из предыдущих вариантов.
Первый экран — визитная карточка персоны. Занимает всю ширину
и отвечает на самые популярные вопросы. Фильмография занимает левую колонку — естественное положение для вдумчивого изучения.
В правой колонке выводятся все дополнительные блоки для углубления пользовательского опыта. Они могут содержать интерактивные элементы, раскрываются на отдельной странице.
Отдельные страницы подробностей «Награды Мартина Скорсезе», «Биография Мартина Скорсезе» и др. индексируются поисковиками, привлекают дополнительный трафик на сайт и покрывают энциклопедические сценарии использования. На них меньше красивых медийных блоков, но есть сквозная навигация по всем разделам страницы персоны.
В попапах выводятся действия со страницей и другие мелочи,
на которых нужен максимальный фокус. При скролле длинной ленты короткая колонка фиксируется, чтобы избежать дыр в верстке.
После двух основных колонок можно выводить сколько угодно дополнительных сегментов на полную ширину, чтобы заинтересовать пользователя и увести его на другие страницы.
Для выбора оптимальной структуры я проранжировал варианты
по десятибалльной шкале на прохождение основных сценариев использования и степень привычности.
Классическая структура отвечает на главные вопросы на первом экране, позволяет удобно исследовать фильмографию и погружает глубже дополнительными материалами в боковой панели и слоями после основного содержимого. Кроме того она не сильно отличается от текущей, значит пользователи быстрее к ней привыкнут.
Если вы не согласны с моей субъективной оценкой, напишите,
где я ошибся.
Визуальный стиль
Мировой кинематограф становится масштабнее, зрелищнее и дороже. Фильмы сражаются за внимание зрителя громкими промо-кампаниями, выпуская огромное количество материалов, которые нужно где-то хранить.
В динамичной индустрии развлечений Кинопоиск должен транслировать пользователям ощущения простоты и радости открытия новых интересных фильмов.
Чтобы этого добиться, нужно сохранить узнаваемость бренда, привести визуальный стиль в порядок и заложить возможности
для роста. В поиске акцентов и вдохновения я собрал мудборд.
Принципы современных медийных продуктов:
Минимализм
На сайте приятно находиться от минуты до часа. Вычищен весь визуальный мусор: лишние плашки, обводки, разделители, подчеркивания, старостильные иконки. Любое выделение обосновано, интерфейс незаметен, активный цвет — только
для акцентов.
Контраст
Большие и яркие постеры, обложки и фотографии дополняют сдержанный стиль сервисной части. Новое оформление органично сочетается с нынешним в местах, до редизайна которых руки дойдут не сразу.
Динамика
Интерфейс адекватно реагирует на каждое действие пользователя. Людям физически приятно пользоваться поиском, фильтрами, ставить оценки и рассматривать графики.
Стилеобразующие элементы
Логотип
Набирается строчными Текстбука. Произносится одним словом без пауз и акцентов. Превращается в нарицательное — синоним выбора фильма в интернете.
Иконки
Сервисные иконки контурные, простые, с закруглениями. Контентные иконки выполнены в том же плоском стиле с добавлением цвета.
Для примера возьму иконки наград с Кинопоиска+.
Шрифты и типографика
Стандартный Эриал, чтобы потом можно было безболезненно заменить на фирменный Яндекс Санс.
Сейчас основной кегль на Кинопоиске 12 пк. Даже с нормальным зрением тяжело читать. Нужно уменьшить количество текстовых стилей до четырех-шести, увеличить основной кегль и остальную линейку вслед за ним.
Ссылки
Кинопоиск — энциклопедия со множеством перекрестных ссылок. Пользователи знают, что можно кликнуть практически куда угодно
и перейти на другую страницу.
Подчеркивания шумят в плотной верстке, поэтому внутренние ссылки выделять не нужно. У них есть акцентированное состояние
по наведению — изменение цвета и всплывашки с обложками фильмов. Ссылки на внешние ресурсы — синие, подчеркиваются
по наведению.
Цвета
Фирменный оранжевый приблизить к киношному красному. Добавить ему дополнительный желтый для акцентов. Детали выделять контрастными синим и зеленым.
Сетка
Резиновая Википедия на десктопах разъезжается в нечитаемое полотно текста. Для энциклопедичного Кинопоиска следует ограничиться набором брейкпоинтов и адаптировать макет под них.
Шаг сетки — 5 пк. Все размеры и расстояния в макете кратны 5 (кроме некоторых полей). Название фильма в фильмографии набирается базовым размером шрифта. Остальная линейка достраивается
под него.
Смартфон 320 пк
Линейка кеглей: 12, 14, 16, 20.
Среднее количество символов в строке — 44.
Вертикальный ритм — 20.
Планшет в портретной ориентации 768 пк
Линейка кеглей: 12, 14, 18, 24.
Среднее количество символов в строке текстового блока (3 колонки) — 57.
Вертикальный ритм — 20.
Десктоп 1024 пк
Линейка кеглей: 12, 14, 16, 22, 30.
Среднее количество символов в строке текстового блока (5 колонок) — 47.
Вертикальный ритм — 25.
Десктоп от 1280 пк
На разрешениях от 1280 пк и выше модульная сетка фиксируется, свободное место по краям отводится под брендирование.
Линейка кеглей: 13, 15, 18, 24, 32.
Среднее количество символов в строке текстового блока (8 колонок) — 68.
Вертикальный ритм — 30.
Дизайн
В третьем посте я верстаю все данные из карты информации в четвертый вариант структуры, собираю прототип и рассказываю об интерфейсных решениях.
