Экспресс-анализ нового дизайна КиноПоиска

Эта статья уже не актуальна. Но может рассматриваться как набор теоретических советов к дизайну интерфейса.

За последние несколько дней прослушал и прочитал несколько «лекций» о том какой плохой редизайн сделали КиноПоиску и какой это тотальный провал. Стало любопытно, в силу профессионального интереса. И вот решил дать, по возможности, детальную (с картинками) оценку новому дизайну. Обычно, подобное я делаю каждый раз когда клиент просит сделать редизайн сайта. Так что опыт есть.

Речь об этой версии сайта: beta.kinopoisk.ru

Если на сайте что-то изменится с момента написания этого анализа, то ссылайтесь на скриншоты в тексте.

Единственное, что сразу хочу отметить: буду анализировать только дизайн интерфейса. Контент и структуру сайта оценивать не буду по двум причинам:

1. ради экономии времени (Яндекс мне не платит);
2. я сайтом особо-то и не пользовался никогда, а потому мне сложно будет сходу сравнить контент и структуру, а это займёт время (см. пункт 1).

Также, весь мой опыт пользования сайтом сводится только к тому, что я заходил на сайт, вбивал название фильма в строке поиска и получал информацию об искомом фильме. И на этом всё. Так что мой анализ будет непредвзятым и относительно объективным (по сравнению с постоянными посетителями которые за долгие годы привыкли к старому дизайну).

И тут всплывает первый и самый главный негативный аспект всего этого редизайна:

Яндекс допустил большую ошибку сделав слишком радикальные изменения в дизайне «за один присест».

Такие изменения всегда будут восприниматься людьми в штыки. Это было, есть и будет всегда. Это одна и та же история всех радикальных редизайнов. Это было, в своё время, с YouTube, и с VK.com, и с другими...

Конечно, подумайте сами: человек сидит и 5 лет пользуется одним и тем же сайтом. Он уже знает его как свои 5 пальцев. Если нужно что-то найти или куда-то посмотреть, то движения отточены как у профессионального пианиста: пара кликов мышью без задержек и он в нужном месте.

...а тут БАМ! Всё выглядит по другому и расположено не на своих местах — нужно заново осваиваться.

С такой громадной аудиторией вводить редизайн нужно постепенно. Например:

• если был вверху баннер — оставить его, но растянуть, поправить, украсить;
• если рейтинг фильма стоял в каком-то углу — оставить там же, но уже можно изменить стиль;
• если колонка новостей там-то, то можно сдвинуть, но не далеко;
• и т.д.

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

Но хорошо, пора переходить непосредственно к анализу.

Главная страница и общий стиль сайта

Интерфейс с точки зрения удобства пользования (юзабилити) стал чуть-чуть хуже, но не такой провальный как об этом говорят. Есть улучшения, а есть и ухудшения.

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

Возьмём пример: самая правая колонка в которой расположены всякие списки и рейтинги, например, «Лучшие фильмы»:

Здесь неоправданно большие зазоры между строками. И горизонтальные разделители не спасают. Хотели создать «воздушность и лёгкость», а получилась бессмысленная трата места. Если уж это рейтинг лучших фильмов, то органичнее смотрелся бы рейтинг из 10-ти лучших фильмов. Это уже клише, что ли. Да и в 10-ке лучших легче сориентироваться, чем в пятерке. Сжать немного межстрочные интервалы и в этот блок легко уместится 10 пунктов. И эстетично будет (текст всё равно мелкий).

Это было к вопросу об общем стиле. Теперь сверху вниз по странице.

Строка поиска расположена теперь лучше, но отзывчивость кажется ухудшилась — увеличилась пауза между вводом названия фильма и получением списка вариантов поиска (ещё до нажатия кнопки «Найти»).

Блок «Сейчас в кино» у меня, то показывается, то не показывается (в Safari). Закономерность вычислить не смог.

А вот здесь, визуально — полная лажа:

Да, «мудрый дизайнер» всё делает по сетке. И я понимаю, что внизу главного блока «Марсианин» есть ещё текст, который выравнивает композицию с «Воином» справа. Как-то вот так:

Но вот только обычные люди с линейкой возле экранов не сидят, они всё воспринимают «на глазок». И они слыхом не слыхивали ни о каких ваших сетках. А на глазок тут всё плохо. Серый текст слева никак не может соревноваться по визуальной весомости с ровным нижним краем картинки справа. И, в итоге, мы видим некрасивую ступеньку. К тому же, непосредственная близость «Воина» к заголовку «Новинки онлайн» привносит хаос в композицию (выделил красненьким):

Хочется сразу сделать примерно вот так:

…и тут же решаются все проблемы. В общем, эта часть страницы не доработана.

Для блока «Сейчас в кино» (и для всех аналогичных) не помешало бы сделать кнопку типа «полный список» (или «все фильмы» и тп), чтобы при нажатии переходить к этому полному списку. Это будет лучше с точки зрения юзабилити.

Сейчас эту функцию выполняет заголовок раздела «Смотрите в кино», если по нему кликнуть. Но он далеко слева и их связь совершенно не очевидна. Да и, в конце концов, если есть список, который можно продолжить и при этом не поставить под ним кнопку «полный список» — это просто моветон.

Ниже на странице раздел «Новые коллекции». Неужели он настолько важен чтобы так его выделять? Можно было сделать вдвое компактнее без ущерба для эстетики. Или просто показать больше коллекций на той же площади. А то сейчас мы видим 4 коллекции, а на небольшом экране этот набор папочек постыдно ужимается всего до 3-х коллекций. Но при этом они занимают целый экран места. А на нетбуках, так вообще, в экран не влазит. Позор. Вот так этот раздел выглядит на нетбуке одного человека, который пользуется сайтом чаще чем я):

Ещё ниже на странице списки с теми же ошибками: гигантомания, мало пунктов.

Но есть и другие недоработки: здесь этих списков всего 4. Мы узнаем об этом если воспользуется стрелками в правом верхнем углу. И ради этого нужно было делать целый слайдер на странице? Можно было просто попытаться нормально, по человечески вместить 4-й список на страницу. А схлопывать этот раздел уже только на маленьких экранах, добавляя навигацию стрелками. Тут даже не нужно быть дизайнером, чтобы понять что это по меньшей мере странное решение в дизайне сайта.

Ещё в этом же блоке: заголовки кликабельны! На них можно нажать. Это я сейчас рассказываю пользователям сайта. Потому что ничто не указывает на наличие ссылки в заголовках. Именно в этом контексте наличие ссылок в заголовках совсем не очевидно. Нужно было выделить их как-то. А про кнопку «полный список» я уже писал выше.

Страница фильма

С первого взгляда мне очень не понравился огромный постер на весь экран. Возмутило очередное необдуманное использование места и растыканные по разным углам кнопочки. Но потом я узнал, что прямо в этом «постере» можно сразу же посмотреть и трейлер, и кадры из фильма. А это очень удобно. Так как большинство людей, уверен, именно за этим и приходят. Надо отдать должное, очень круто работает просмотр кадров — быстро и без лагов. Видимо, фотки грузятся в фоне при первом посещении страницы. Это хорошо. Вот только видео-плеер ещё пока плохо работает местами.

А теперь плохое.

Нашёл баг: на обычных экранах заголовок фильма «Kingsman: Секретная служба» написан в две строки, а на маленьком — одной. По идее, должно было быть наоборот.

С композицией опять лажа: кнопка рейтинга и кнопка «постеры и кадры» сползли куда-то вниз, вам не кажется? Их хочется приподнять и поставить прямо в уголок, где им и место.

Да, я знаю, «мудрые дизайнеры» всегда пользуются сетками и они выровняли кнопочки с заголовком:

...но всё равно как-то плохо выровняли. Это во-первых. Во-вторых, мы это уже проходили: ваши пользователи возле экранов с линейкой не сидят, а воспринимают всё через призму стереотипов, психологии и хрусталиков своих глаз. Я бы сделал так:

Сейчас, после того как я обратил ваше внимание на выравнивание кнопок по заголовку вы можете сказать, что так тоже не очень... Но это заметно, только на небольшом скриншоте. И только если вы специально ищите визуальную прямую, связывающую заголовок с кнопками. Но если вы зайдёте на сайт, и откроете какой-то фильм, то увидите, что название настолько далеко от кнопок, что когда вы уводите взгляд к кнопке, то заголовок совершенно исчезает из виду. Установить визуальную связь между этими элементами в естественной ситуации «без линейки» невозможно. И человек всегда будет воспринимать эту кнопку как «кнопку в углу картинки», а не «кнопку как визуальное продолжение заголовка».

И вообще, почему кнопка «Постеры и кадры» так называется? За ней нет постеров: там только кадры из фильма и трейлер. Я, как иллюстратор, вообще люблю рассматривать официальные постеры к фильмам. И это была первая кнопка, которую я нажал при знакомстве с новым Кинопоиском. Но я был разочарован отсутствием постеров. Эту кнопку надо было назвать: «Кадры и трейлеры». Потом подумал, что возможно, они её так назвали на будущее с расчётом на то, что будут добавлять постеры к фильмам позже. Но даже если так, то вряд ли у них что-то получится. Не знаю как они собираются вписать вертикальный постер в горизонтальный прямоугольник без ущерба для юзабилити. Потому что последний раз когда постеры были горизонтальными они выглядели ещё так:

И уже почти 100 лет они вертикальные.

Я даже попробовал сделать это сам: поставил постеры так как они могли бы смотреться в этом слайдере:

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

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

Здесь же: зачем писать «Набрал больше 20 000 оценок» если слева вверху уже и так указано сколько людей проголосовали. Если нечего писать, то ничего и не надо писать. Уберите строчку — картинка лучше будет. Да, в других фильмах на этом месте подана заметка о наградах или другая значимая информация. Но эту информацию тоже не обязательно ставить вот так прямо в центре. Эта строчка хорошо бы смотрелась и вверху, прямо под заголовком.

Теперь двигаем вниз.

Вуаля! Вот она, самая нужная и полезная информация. Как и полагается для важной информации, она представлена в центре страницы и занимает много места:

Вообще, это нужная информация. Но не на столько чтобы её вот так показывать. Можно было бы смело делать вдвое меньше. Да, понимаю, их сделали большими, чтобы на них было удобно нажимать. Но только это не тот случай. Если кто-то захочет найти фильм по жанру, то воспользуется поиском. Или кто-то думает, что есть люди которые будут активно кликать по этим тегам в своей повседневной работе с сайтом? Это не тот случай — кнопочки можно было бы сделать совсем маленькими.

Постер фильма: думаю, он должен быть кликабельным и открываться в большом лайтбоксе. А вы как думаете?

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

Когда я искал полную информацию о фильме, то искал её относительно долго. Нашёл за кнопкой «Вся информация» (сразу под IMDb рейтингом). При клике обнаружил, что информация во многом дублируется. А по сути, добавились только: рейтинг ожидания, слоган и премьера на DVD.

Это что же, нельзя было поднатужится и впихнуть эти крохи в основную информацию о фильме? Места там хватает. Ведь эта вкладка «Информация» — это тот необходимый минимум из досье фильма, за которым люди приходят на сайт. Её не нужно прятать в «стильненьких» лайтбоксах.

И вообще, здесь не нужно было изобретать велосипед и так всё хитроумно обыгрывать. Было бы на много проще и удобнее вынести спрятанное основное меню по фильму на главную страницу фильма, вот так:

Это не может быть окончательным дизайном, но, думаю, идею вы уловили. Так было бы понятнее и удобнее для всех. И без сбивающих с толку всплывающих окошек.

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

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

Если бы мне поручили редизайн такого сайта, я бы в первую очередь не делал его таким полностью белым. И сделал бы ещё темнее старого сайта. Известно, что картинки и видео лучше смотреть на тёмном фоне. Именно по этой причине некоторые видео-порталы предлагают включить темные поля по бокам (Youtube), затемнить интерфейс или, вообще, перейти в «режим дивана» (Vimeo). По этой же причине лайтбоксы делают на тёмном фоне, а в кинотеатрах выключают свет. А большие простыни текста, можно подавать отдельно на светлом фоне.

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

Думаю, если этот сайт ещё «доработать напильником», то получится неплохо. И успехов им в этом!