html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

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


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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с siliconrus.com

11

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • vc.ru
          • сми
          • домен siliconrus.com

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции