Навіть якщо ви ніколи не заходили на сайт Pinterest, то напевно знайомі з його дизайном - блоки-картки (картинка + підпис), розташовані в декілька колонок. Всі картки однакової ширини, але можуть бути різної висоти - це приватний і досить простий випадок Masonry-верстки, ідея якої в тому, щоб мати у своєму розпорядженні на сторінці блоки різного розміру без проміжків.
Наприклад, так:
Верстку Pinterest вважають однією з причин його популярності, вона подобається багатьом дизайнерам і неодноразово використовувалася в інших проектах (наприклад, для нижньої частини головної сторінки «Рамблера» або нового сайту «Ехо Москви»). У цього способу подання є ясні гідності - наприклад, він переноситься в мобайл простим з'єднанням колонок в одну (хоча це швидше особливість «карткового» подання інформації).
Але у будь-якого дизайну є області застосовності.
Чому такий дизайн відмінно працює для Pinterest
- Pinterest - це виключно картинки, які люди знаходять всередині або зовні сайту і об'єднують в колекції так, як їм подобається. Текст допоміжні по відношенню до картинки і займає значно меншу частку. Картинка є контентом сама по собі, вона не рекламує щось інше і не ілюструє, при цьому зберігає свій сенс навіть в зменшеному вигляді. При скроллинге не потрібно робити великих розумових зусиль, картинки сприймаються легко і безпосередньо.
- Забрати собі картинку (а це основна дія користувача після перегляду, на порядок частіше, ніж лайк або коментар) можна в один клік, нікуди не йдучи зі стрічки і не перериваючи процес серфінгу по сайту.
- У Pinterest величезна кількість контенту, при цьому відсоток потрібного не дуже великий. Типова мета користувача - знайти щось конкретне або щось особливо цікаве (один з відомих сценаріїв використання - підготовка весіль та інших заходів). Багато колонок і дуже плавний нескінченний скролл (критично важливе продуктове рішення) дозволяють полегшити процес цього серфінгу.
- У Pinterest немає поділу за типами контенту і якихось незвичайних форматів. Користувача влаштовує нескінченна однорідна стрічка, тому що вона не відволікає його від його цілей - знайти цікаві картинки.
- У Pinterest немає редакційної політики - поділу на важливе і неважливе, тимчасової актуальності. Будь-шматок стрічки рівноправний з будь-яким іншим (це, зокрема, дозволяє отримувати лайки через роки після того, як залив картинку).
- У Pinterest немає необхідності «продавати» користувачеві кожну одиницю контенту. Сайт повністю cоставлен з того, що знайшли користувачі, і навіть для них пошук або заливка картинок - не дуже витратне по зусиллям дію. Якщо навіть досить великий відсоток картинок нікому, крім автора, не знадобляться - нічого страшного.
Чому такий дизайн не годиться для новинних медіа
Незважаючи на експерименти з фото і відео, текст поки залишається основним засобом передачі новин. Більш того, основним форматом медіа залишається не короткий контент, який сприймається цілком, а анонс окремого матеріалу. Він, безумовно, схожий на картку Pinterest, але це лише зовнішню схожість.
Анонс вимагає не тільки прочитання тексту, а й розшифровки його значення і прийняття рішення, цікаво це чи ні. Якщо у анонса є картинка (що майже обов'язково при використанні такого дизайну), то вона лише ілюструє контент: в кращому випадку - позначає тематику, в гіршому - привертає увагу сама по собі або просто займає місце. Іноді використовують фотографії авторів, залучаючи додаткову увагу до тих, чиє обличчя відомішою.
При великій кількості тексту на сторінці проявляються два важливі чинники.
Люди не люблять читати текст, вважаючи за краще його сканувати. Користувачі рідко читають більше 20% тексту на сторінці, звертаючи увагу на важливі для них слова, заголовки і інші елементи, які виділені як більш значущі. Сторінки, які погано скануються, менше Скролл - людина втомлюється від погано сприймається контенту. Сканувати людина вважає за краще зверху вниз, за початковими словами колонки.
При цьому у людей погано розвинене периферійний зір. Поза зоною фокуса люди найкраще помічають рух, куди гірше - форму об'єкта і особливо дрібні деталі. Біологічно це пояснюється необхідністю вчасно помітити загрозу, в інтернеті пояснює, чому банери в «сліпий» правій колонці так люблять блимати.
У разі досить великих картинок периферійного зору досить (тим більше що плавне «прояв» картинок при Скролл привертає до них увагу). Але наявність на сторінці кількох рівнозначних колонок з текстом робить її сканування вкрай незручним. Саме тому Facebook зберігає вузьку колонку з основним контентом, хоча на деякі екрани влізло б три таких, і відмовився вже від двухколочного таймлайна в профілі. Навіть якщо ваш контент настільки цікавий, що ви впевнені, що людину приверне кожен з пунктів, в ваших інтересах, щоб він швидше його помічав і краще розумів.
У цей момент ви можете сказати, що многоколочних сайтів так багато, що всі дизайнери світу не можуть помилятися. Дійсно, щоб спростити сканування, медійні сайти використовують складну інформаційну архітектуру: рубрикатори, різні уявлення типів контенту, редакційні акценти. Якщо читач знає, що в якій колонці (скажімо, на Sports.ru новини завжди зліва), то може сканувати тільки ту, яка зараз потрібна. Якщо колонки розбиті на тематичні блоки, більш важливі новини виділені, кудись винесено матеріали, якими сайт більше пишається, графічний повітря і сітка візуально впорядковують архітектуру - це створює інформаційний скелет, і спрощує сприйняття. Але Pinterest-дизайн в чистому вигляді для цього не годиться.
Про всяк випадок: я не ставив експериментів по ефективності різних форматів верстки. Творці головною «Рамблера» якісь експерименти проводили - так що, можливо, є нюанси, які я не врахував.
Щоб написати колонку для ЦП, ознайомтеся з вимогами до опублікованими матеріалами.
