Сетка карточек или список строк

Что сетка делает хорошо

Сетка превращает страницу в каталог. Шесть карточек с изображениями читаются как набор, а взгляд движется вбок и вниз, вместо того чтобы ползти по одной колонке. Это подходит всему, где картинка и есть подпись: товарам, портфолио, релизам с обложками, выпускам с кадрами. Посетитель не читает, чтобы понять, что перед ним. Он это видит, и решение занимает у него доли секунды.

Сетка ещё и повторяет место, откуда большинство только что пришло. Если ваш профиль — стена из квадратов, страница из квадратов под ним ощущается продолжением, а не отдельным документом. Это настоящее преимущество, и именно поэтому сетка бывает уместна даже там, где ссылок немного. Совпадение формы — это способ сказать «вы там же, где были», не тратя на это ни одного слова.

Что сетка делает плохо

Те же самые свойства превращаются в проблемы, как только содержимое перестаёт быть визуальным. Сетка требует от каждой ссылки картинки, а картинка есть далеко не у всего. Три поломки встречаются чаще всего.

• Длинные подписи. Карточка — маленькая коробка, и заголовок-предложение в ней либо обрезается, либо мельчает до состояния, когда его приходится разбирать.
• Ссылка без изображения. Среди карточек, которые что-то показывают, текстовая читается как загадка: пустая плитка, которую надо расшифровать, а не узнать.
• Слишком много плиток. Двенадцать штук перестают быть пунктами и становятся узором. Ничто не первое, ничто не выделено, страница читается как обои.

Ничего из этого не лечится подбором картинок получше для части карточек. Сетка ровно настолько хороша, насколько хороша её слабая ячейка, потому что набор с одним пробелом отправляет взгляд прямо в этот пробел. Если хотя бы для одной ссылки картинки нет и взять её неоткуда, это уже довод в пользу списка.

Список быстрее, когда каждый пункт — предложение

Если вашим ссылкам нужны слова — предложение с условием, статья с настоящим заголовком, форма, которая обязана объяснить, зачем она, — список выигрывает почти без спора. Строка шириной во весь экран, поэтому длинная подпись помещается, переносится и остаётся читаемой. У строк есть и однозначный порядок: первое — первое, и человек читает вниз, не решая на каждом шаге, куда смотреть дальше. Порядок здесь работает как аргумент: то, что стоит сверху, читается как главное, и объяснять это не нужно.

На список скучнее смотреть, и часто в этом весь смысл. Десять предложений, расставленных строками, просматриваются за один проход. Те же десять, разложенные плитками, требуют нескольких, потому что взгляд возвращается сравнивать одну коробку с другой. Скучная раскладка здесь экономит время читателя, а не тратит его.

Смешанная страница обычно выигрывает

Лучшая страница нередко пользуется обеими идеями сразу: одна крупная карточка наверху под то, что важно в этом месяце, и обычные строки ниже под всё остальное. Карточка забирает изображение и акцент, строки забирают слова и порядок. На узком экране это ведёт себя лучше всего: сетка становится двумя тесными колонками, а строки остаются во всю ширину и под палец. Переключение раскладки действует на всю страницу целиком, так что это решение про большинство ваших ссылок, а не про каждую по отдельности.

Проверка на три секунды

Покажите страницу человеку, который её не видел, отсчитайте три секунды, заберите телефон и спросите, что он запомнил. При хорошей сетке он назовёт два-три пункта по картинкам. При хорошем списке — первую ссылку и примерно о чём были остальные. Если он может описать только то, как страница выглядела, раскладка тащит оформление вместо содержимого, и лечится это обычно уменьшением числа пунктов, а не сменой раскладки. Проверку стоит повторить на телефоне того человека, а не на своём: на чужом экране видно то, к чему вы уже привыкли.