Дизайн
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": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","pinterest"], "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 комментариев
Выборы, выборы, кандидаты

Нет, не в рифму известной песни. "Всего лишь" педофилы... Делюсь своим негодованием после посещения избирательного участка.

«Сбербанк» через час после личного визита позвал 84-летнюю бабушку еще раз в прийти офис

Казалось бы удобно - оформил получение пенсии на карту и нет проблем. Но это не про историю со Сбербанком. Здесь через час после получения карты лично в отделении прилетело смс о блокировке онлайн сервисов банка.

Почему не стоит заказывать товары 18+ на Озоне, если вы не готовы их потом нести в пункт самовывоза

Хочу поделиться неудачной историей заказа товара 18+ на Озоне. И как Озон не хочет помогать решить проблему. Текст могут читать только совершеннолетние пользователи сайта.

Как работать удалённо по московскому времени, если живёшь в Сибири

Команда ИТ-компании Southbridge — о преодолении трудностей часовых поясов: графике работы, планировании и отдыхе.

«Яндекс» оставляет только положительные отзывы о своих сервисах

После ситуации с не доставленным заказом из Яндекс Лавки, я оставил отзыв на сервисе Карт. Его приняли и разместили, но доступен он только для аккаунта, с которого я его оставлял)))

Что может быть важнее прибыли. ESG-словарь для инвестора

В 2020–2021 гг. резко возросла популярность темы ответственного инвестирования, или ESG. Идея о том, что инвестиции должны не только приносить прибыль, но и поддерживать экологию и социальную справедливость, привела к тому, что ESG-фонды стали играть значимую роль на мировых рынках капитала.

Дайджест новостей Сбера: AR-экскурсия, распознавание животных и премия для учёных

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

Конференция GoGlobal! соберет ведущих маркетологов

29 сентября 2021 года впервые состоится GoGlobal! — однодневная онлайн-конференция для маркетологов, заинтересованных в ускорении глобального присутствия своих кампаний.

«Вам звонок из Циан»: зачем компания скупает номера телефонов и как call-tracking помогает клиентам сервиса

Подменные номера телефонов защищают от нежелательных звонков и упрощают аналитику продаж

Я задолбался пропускать интересные статьи на vc.ru и создал Capitan

Это самый удобный рабочий стол для браузера

null