[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Mikhail Kalashnikov", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d","pinterest","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b"], "comments": 10, "likes": 13, "favorites": 2, "is_advertisement": false, "section_name": "default", "id": "4875" }
Mikhail Kalashnikov
4 480

Почему дизайн в стиле 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-дизайн в чистом виде для этого не годится.

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


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

#Дизайн #pinterest #интерфейсы

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления