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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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