Лента — это такая разновидность обычного текстового модуля или модуля с иллюстрациями. Ленту мы встречаем всё время. Вот, например, лента — это какой‑то фрагмент моего почтового клиента:
Мне здесь насыпались какие‑то письма — это просто типичная лента, она представляет собой последовательный список из однородных элементов. Тут могут быть какие‑то картинки или подписи. Но смысл в том, что это всё абсолютно однородно.
Лента хороша, когда вам нужно показать какой‑то список. Вот список архивных рубрик в «Советах» на сайте бюро:
Лента и здесь состоит из однородных элементов: заголовка, ссылки и подписи.
Вот лента поисковой выдачи справочной системы «Актиона»:
Здесь она немного разнородная. Она состоит из разных блоков, но внутри каждого блока сами виджеточки поисковой выдачи одинаковые: поисковая выдача, заголовок, ссылка, текст. А ниже какая‑то выдача в формах, в правовой базе. Всё однородно, аккуратно.
Ленты совершенно спокойно можно дополнять маркерами и разделителями. Когда я говорю, что можно спокойно дополнять, это не значит, что обязательно это делать.
Вот перед нами фрагмент ленты сайта «Лента.ру», в которой просто вывели какие‑то новости:
У каждой новости есть маркер времени публикации новости, но ещё зачем‑то ребята разделили всё линейками. Можно было совершенно спокойно без линеек отделить всё какими‑то минимальными расстояниями. Благодаря маркерам это всё уже выглядело бы достаточно кликабельным и отделялось в том числе друг от друга.
Вот перед нами лента на сайте «Олимпиада.ру»:
Здесь всё, на мой взгляд, лучше, потому что нет никаких разделительных линеек, просто расстояние и дата. И всё хорошо работает.
Иногда в ленте можно тоже вносить кое‑какое разнообразие. Та же самая лента новостей на «Олимпиаде.ру»:
Во‑первых, мы вместо того, чтобы рядом с каждой новостью подписывать дату публикации, просто их сгруппировали под заголовками. А во‑вторых, мы какие‑то особо важные новости написали крупнее. С конструктивной точки зрения всё абсолютно то же самое — есть текст новости и тег. Но то, что написано крупнее, сразу обращает на себя внимание.
Вот лента на сайте «Нью‑Йорк Таймса»:
Я имею в виду правую колонку. Ребята не добавили никаких маркеров, чтобы помочь читателю понять, что это ссылки. И выкрутились за счёт разделительных линеек. Когда мы говорили про ссылки, мы обсуждали, что линейки могут помочь создать ощущение того, что перед нами что‑то кликабельное. Хотя ребята, на мой взгляд, ходят по грани.
Вот ещё пример ленты на сайте того же «Нью‑Йорк Таймса»:
Лента справа, но и соседняя колонка на самом деле тоже своеобразная лента, просто в ней появились ещё иллюстрации.
А вот ещё интересная история на сайте «Нью‑Йорк Таймса», на мой взгляд, не очень хорошая:
Здесь в чём проблема? Иллюстрации очень активно объединяются друг с другом. Может показаться, что на самом деле надо читать не по колонкам, а по горизонтали, что лента идёт не слева направо.
А ощущение создаётся, во‑первых, из‑за того, что здесь куча иллюстраций друг с другом выравниваются. Во‑вторых, ребята вообще никоим образом не помогли понять, что это разные материалы. Это реально три разных материала:
Просто первый материал с картинкой, а все остальные просто с текстом. Здесь нет ни даты, ни подчёркивания, стрелки или хотя бы линейного разделителя. Просто ребята фигакнули текст.
Мне кажется, что даже самые продвинутые дизайнеры в этом месте могут затупить. А уж про обычных пользователей даже страшно подумать.
Ещё пример ленты с сайта бюро:
Мы таким образом выводим большое количество советов по одному тегу. Но обратите внимание, как хорошо и однородно может в ленту встраиваться вот эта типографическая линия, которую мы обсуждали. Есть заголовок «Советы», а под ним ссылочка, которая помогает понять, что всё это кликабельно. Есть дата публикации, голосовалка. И всё красиво, однородно встаёт.
Ленту с сайта ИТАР‑ТАСС мы уже с вами видели:
Она довольно плохая. Я сейчас говорю и про левую колонку, и про правую. В первую очередь давайте посмотрим на правую колонку, она плохая, потому что жутко некомпактная. Ребята зачем‑то выравнивают каждый блок ленты с тем, что происходит слева. Но мало того, что из‑за этого появляются какие‑то дополнительные связи между колонками, так ещё эта лента занимает гораздо больше места, чем могла бы. Ничего не мешало всё поставить максимально плотно друг к другу. Но, если надо, оставить разделение линейками. Сразу бы две проблемы решили. Почему‑то не стали.
А вот лента с главной страницей справочной системы «Главбух», она могла бы быть интересной:
Это такая лента, в которой главный бухгалтер видит и понимает, что тут за неделю такого важного произошло, что ему надо знать. Например, вышла новая рекомендация, произошли какие‑то изменения в бухгалтерском мире. Или что‑то ещё.
В чём здесь проблема? Здесь в ленту намешаны разные информационные поводы, и новости, и рекомендации, какое‑то обновление справочника, и какой‑то расчётчик появился. Но все эти штуки выглядят абсолютно однородно. Чтобы понять, что они чем‑то друг от друга отличаются, мне нужно вчитываться в каждую бирку, в каждый текст. Иначе я не пойму, что здесь для меня есть интересного.
С этой точки зрения кажется более удачным решение, которое я вам уже показывал:
Это лента из предыдущей версии той же самой справочной системы, только для кадровиков. Считайте, клон. Но здесь мы повыделяли разными способами разные типы материалов. Например, закон или обновление, появление юридического документа сопровождается зелёной биркой. Больше ни у кого такой зелёной бирки нет. Если я вижу, что есть зелёная бирка, я сразу понимаю, что это что‑то про правовую базу. Рекомендации отличаются маленьким портретом автора. Какая‑то мегановость или реклама вообще стоит на цветной плашке. Форма у нас отмечается красной линейкой, а ещё сбоку серая бирка, которая помогает лучше понять, что здесь произошло.
Когда я вижу эту ленту, мне не нужно во всё вчитываться, я мгновенно понимаю, где всё про правовую базу, где реклама, рекомендации, портреты. Я могу быстрее решить, на что я хочу обратить внимание.
Ленты хорошо подходят для рейтингов. Вот у нас этаж с рейтингом статей на сайте газеты «Гардиан»:
Здесь таким образом выводят самые популярные статьи то ли за месяц, то ли за неделю. Просто привлекли внимание большими цифрами и вывели эти статьи.
Вот перед нами пример плохой ленты справа:
В этой ленте есть картинки, которые настолько активно выравниваются друг с другом и стоят так близко друг к другу, что они объединились чуть ли не в отдельную колонку. Выглядит это немножко фигово с композиционной точки зрения, кто‑то вообще может запутаться. Особенно плохо внизу ленты — здесь картинки ближе друг к другу, чем к своим текстовым блокам.
С этой точки зрения лучше лента на сайте «Вайрда»:
Здесь, во‑первых, ребята гораздо ближе поставили картинки к своим текстовым блокам. Во‑вторых, гораздо лучше выравнивают картинки с текстовыми блоками по высоте. И для уверенности ещё разделяют линейками. Я ни за что не подумаю, что картинки относятся друг к другу. Они относятся к своему тексту.
Вот вам ещё пример того, что лента не обязательно должна быть вертикальной. В данном случае перед нами «Нью‑Йорк Таймс»:
Лента может быть и горизонтальной — вот лента материалов, посвящённых умному жилью. Но при этом материалы поданы очень однородно. Здесь они ещё разделены линейками. И у меня не возникает соблазна объединить картинку с картинкой. Кстати, ещё и картинка к своему тексту стоит тоже ближе, чем на предыдущем примере.
Ещё хочу поговорить про ленты. Бывает такое, что ленты делают очень длинными. Перед нами три примера — лента новостного сайта, лента новостей с ещё более старой версии справочной системы «Главбух» и ещё какой‑то новостной сайт:
Что здесь надо знать? Такие чрезмерно длинные или особенно бесконечные ленты новостей прокручивать очень скучно и утомительно. Просто в силу формата: всё выглядит очень однородно. Это надоедает. Ни в коем случае не стоит использовать это как какой‑то основной канал доставки информации пользователю. Это может сработать, если у вас есть страница с основной колонкой, в которой материалы как раз поданы разнообразно и интересно. А сбоку есть какая‑то длинная лента «А вот что ещё происходит в мире прямо сейчас» — это какое‑то совершенно необязательное дополнительное чтение. Основной контент всё‑таки лучше подавать разнообразно.
Возвращаясь к ленте в системе кадров. Сначала была бесконечная лента, вот эта средняя картинка. Причём она реально была бесконечная. Там при желании можно было докрутить на несколько лет вперёд, все новости прочитать в таком формате. Очень сложно представить, чтобы кто‑нибудь так делал.
В следующей версии мы придумали сделать эту ленту явно ограниченной:
Вот это вся лента. При этом мы постарались проделать небольшую работу за читателя и ему даже в этом формате уже подсовывать какие‑то важные и второстепенные вещи. У нас есть новости за сегодня, дальше ещё три важные новости за прошедшую неделю и за прошедший месяц. А всё второстепенное можно почитать в полноценном разделе со всеми новостями. Здесь только самое важное.
Насколько я помню, статистика показала, что новый формат для читателя сработал гораздо лучше. Они сюда больше кликали, больше читали. Соответственно, получали больше пользы.
Ещё хочу показать маленький пример, как ленту можно сделать плохо и сделать хорошо. Сначала была лента такая, это образовательный сервис высшей школы «Главбуха»:
Здесь есть материал, который бухгалтер может прочитать. А сбоку колонка с какими‑то дополнительными материалами. Что здесь плохо? Во‑первых, здесь какие‑то уродские многострочные ссылки, про которые мы с вами говорили, что так плохо. Во‑вторых, они все поданы настолько однородно, что можно даже подумать, что это или одна большая ссылка, или обычный текст, который зачем‑то подчеркнули.
Мы потом взяли переделали вот так:
Здесь ссылки, конечно, остались многострочными. Наверное, сейчас мы бы уже поставили ссылки, наоборот, на маленьких словах в конце, а заголовки сделали бы чёрными. Но всё равно теперь лента выглядит гораздо более разборчиво, просто потому что у неё появились маркеры, которые разделяют поток синего текста.
Ещё какая‑то лента:
Не очень хорошо, потому что ссылки, несмотря на даты, слиплись, и нужно очень сильно постараться, чтобы, не оглядываясь на даты, понять, где закончилась одна новость и началась другая. Просто потому что расстояния плохие.
Можно разделить линеечками, тогда всё станет гораздо лучше:
А можно поставить вот так и обойтись без линеек:
Можно было бы, как мы с вами видели у «Ленты.ру», поставить время прямо в строчку ссылкой, и получилось бы ещё компактнее.