Дизайн
Mikhail Kalashnikov

Почему дизайн в стиле Pinterest не годится для новостных медиа

Михаил Калашников, креативный директор Sports.ru и Tribuna.com, написал в своём блоге колонку-рассуждение о том, почему новостные медиа, дублирующие дизайн Pinterest, выбрали неверный путь. ЦП публикует этот материал с разрешения автора. 

Даже если вы никогда не заходили на сайт Pinterest, то наверняка знакомы с его дизайном — блоки-карточки (картинка+подпись), расположенные в несколько колонок. Все карточки одинаковой ширины, но могут быть разной высоты — это частный и довольно простой случай Masonry-верстки, идея которой в том, чтобы располагать на странице блоки разного размера без промежутков. 

Например, так:

Верстку Pinterest считают одной из причин его популярности, она нравится многим дизайнерам и неоднократно использовалась в других проектах (например, для нижней части главной страницы «Рамблера» или нового сайта «Эха Москвы»). У этого способа представления есть ясные достоинства — например, он переносится в мобайл простым соединением колонок в одну (хотя это скорее особенность «карточного» представления информации). 

Но у любого дизайна есть области применимости.

Почему такой дизайн отлично работает для Pinterest

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

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

  3. В Pinterest огромное количество контента, при этом процент нужного не очень большой. Типичная цель пользователя — найти что-то конкретное или что-то особо интересное (один из известных сценариев использования — подготовка свадеб и других мероприятий). Много колонок и очень плавный бесконечный скролл (критично важное продуктовое решение) позволяют облегчить процесс этого серфинга.

  4. У Pinterest нет разделения по типам контента и каких-то необычных форматов. Пользователя устраивает бесконечная однородная лента, потому что она не отвлекает его от его целей — найти интересные картинки.

  5. У Pinterest нет редакционной политики — разделения на важное и неважное, временной актуальности. Любой кусок ленты равноправен с любым другим (это, в частности, позволяет получать лайки спустя годы после того, как залил картинку).

  6. У Pinterest нет необходимости «продавать» пользователю каждую единицу контента. Сайт полностью cоставлен из того, что нашли пользователи, и даже для них поиск или заливка картинок — не особенно затратное по усилиям действие. Если даже довольно большой процент картинок никому, кроме автора, не пригодятся — ничего страшного.

Почему такой дизайн не годится для новостных медиа

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

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

При обилии текста на странице проявляются два важных фактора.

Люди не любят читать текст, предпочитая его сканировать. Пользователи редко читают больше 20% текста на странице, обращая внимание на важные для них слова, заголовки и прочие элементы, которые выделены как более значимые. Страницы, которые плохо сканируются, меньше скроллят — человек устает от плохо воспринимаемого контента. Сканировать человек предпочитает сверху вниз, по начальным словам колонки.

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

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

В этот момент вы можете сказать, что многоколочных сайтов так много, что все дизайнеры мира не могут ошибаться. Действительно, чтобы упростить сканирование, медийные сайты используют сложную информационную архитектуру: рубрикаторы, разные представления типов контента, редакционные акценты. Если читатель знает, что в какой колонке (скажем, на Sports.ru новости всегда слева), то может сканировать только ту, которая сейчас нужна. Если колонки разбиты на тематические блоки, более важные новости выделены, куда-то вынесены материалы, которыми сайт больше гордится, графический воздух и сетка зрительно упорядочивают архитектуру — это создает информационный скелет, и упрощает восприятие. Но Pinterest-дизайн в чистом виде для этого не годится.

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


Чтобы написать колонку для ЦП, ознакомьтесь с требованиями к публикуемым материалам.

{ "author_name": "Mikhail Kalashnikov", "author_type": "self", "tags": [], "comments": 6, "likes": 13, "favorites": 2, "is_advertisement": false, "subsite_label": "design", "id": 4875, "is_wide": true, "is_ugc": true, "date": "Mon, 01 Sep 2014 18:50:47 +0400", "is_special": false }
0
6 комментариев
Популярные
По порядку
Написать комментарий...
4

Pinterest — это исключительно картинки

Точка. Это и есть ответ на вопрос в заголовке. Остальное - только следствия этого нехитрого тезиса.

Ответить

Комментарий удален

1

Мда. 4 колонки с "коробочками" текста, плюс пятая колонка баннеров...

Ответить

Комментарий удален

Комментарий удален

1

Еще при использовании pinterest-верстки не соблюдается правильная визуальная последовательность элементов (таймлайн, если хотите), а в медиа это все-таки важно.

Ответить
0

+1. Вон, есть The Verge - так я его читаю исключительно в мобильной версии, даже на ПК. Потому что в оригинальной я вообще не понимаю, что, где и как. Просто каша.

Ответить
0

TL;DR
>Почему дизайн в стиле Pinterest не годится для новостных медиа

Потому, что он убогий.

Ответить
0

А на sports.ru всё, конечно же, сразу понятно и просто. Глаза не разбегаются никуда.

Ответить

Комментарий удален

Читать все 6 комментариев
31 июля завершается приём заявок в 1-й этап отбора программы B2C Future Solutions
Как успешно пройти испытательный срок?

Свершилось – вы получили работу мечты! Но впереди еще три месяца испытательного срока. Это время дается вам и работодателю, чтобы определиться, насколько вы друг другу подходите. Как использовать это время с максимальной для себя пользой? Рассказывает главный специалист отдела подбора персонала Ольга Шабалина. Как всегда, упаковали полезные…

15 тонкостей таргета в TikTok, о которых ты мог не знать

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

Критикую Контур Эльбу

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

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

Организация Quiet Parks International открывает «тихие парки» по всему миру, пытается защитить леса от шума, привлечь туристов и инвестиции.

Директор QPI по диким паркам в Азии Лайла Чин-Хуэй Фань Wired
Сломана морфология
Как малому бизнесу понять свою «зону смерти»

Риск-менеджмент традиционно считается уделом крупных компаний. Кроме них просчитывают риски разве что стартапы, и те по требованию инвесторов. Малый и средний бизнес (МСБ) работает без подобной аналитики — ему не до этого. Предпринимателей можно понять, когда ты поднимаешься с нуля или масштабируешь проект, мысль идет в векторе достижения…

Как превратить юристов из бюрократов в опору компании

Бывает, что корпоративные юристы — люди, которые не показываются из кабинета и иногда вставляют палки в колёса другим отделам. Но в «Фоксфорде» они сами ходят к бизнес-заказчикам и предлагают идеи. Юрист онлайн-школы «Фоксфорд» Катя Кулакова рассказывает, как работает юридический отдел, который живёт интересами компании.

Катя Кулакова, юрист онлайн-школы "Фоксфорд"
Пункт выдачи Ozon отказался принимать товар, хотя поддержка Ozon настаивала на приеме

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

Как подготовиться к жизни без cookies: рекомендации маркетологам

О технологии Federated Learning of Cohorts (FLoC), которая заменит cookies, Google объявил еще в начале года. Недавно компания анонсировала перенос запуска технологии на 2023 год, и теперь у рынка интернет-маркетинга есть 2 года, чтобы найти альтернативу работе с данными. Как выглядит ситуация сейчас и что делать маркетологам — в обзоре от AiData.

null