Усі статті
4 хв читання#layout#structure#design

Сітка карток чи список рядків

Дві розкладки, і вибір між ними не про смак. Він про те, чи впізнають ваші посилання за картинками, чи читають за словами.

Що сітка робить добре

Сітка перетворює сторінку на каталог. Шість карток із зображеннями читаються як набір, а погляд рухається вбік і вниз, замість того щоб повзти однією колонкою. Це пасує всьому, де картинка і є підписом: товарам, портфоліо, релізам з обкладинками, випускам із кадрами. Відвідувач не читає, щоб зрозуміти, що перед ним. Він це бачить, і рішення забирає в нього частки секунди.

Сітка ще й повторює місце, звідки більшість щойно прийшла. Якщо ваш профіль — стіна з квадратів, сторінка з квадратів під ним відчувається продовженням, а не окремим документом. Це справжня перевага, і саме тому сітка буває доречною навіть там, де посилань небагато. Збіг форми — це спосіб сказати «ви там само, де були», не витрачаючи на це жодного слова.

Що сітка робить погано

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

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

Нічого з цього не лікується добором кращих картинок для частини карток. Сітка рівно настільки добра, наскільки добра її слабка комірка, бо набір з однією прогалиною відправляє погляд прямо в цю прогалину. Якщо бодай для одного посилання картинки немає і взяти її нізвідки, це вже аргумент на користь списку.

Список швидший, коли кожен пункт — речення

Якщо вашим посиланням потрібні слова — пропозиція з умовою, стаття зі справжнім заголовком, форма, яка мусить пояснити, навіщо вона, — список виграє майже без суперечки. Рядок завширшки з увесь екран, тож довгий підпис уміщується, переноситься і лишається читабельним. У рядків є й однозначний порядок: перше — перше, і людина читає вниз, не вирішуючи на кожному кроці, куди дивитися далі. Порядок тут працює як аргумент: те, що стоїть згори, читається як головне, і пояснювати це не треба.

На список нудніше дивитися, і часто в цьому весь сенс. Десять речень, розставлених рядками, переглядаються за один прохід. Ті самі десять, розкладені плитками, вимагають кількох, бо погляд повертається порівнювати одну коробку з іншою. Нудна розкладка тут економить час читача, а не витрачає його.

Змішана сторінка зазвичай виграє

Краща сторінка нерідко користується обома ідеями одразу: одна велика картка згори під те, що важливе цього місяця, і звичайні рядки нижче під усе інше. Картка забирає зображення і акцент, рядки забирають слова і порядок. Виділене одне, решта рівні між собою — саме так і має виглядати сторінка з одним пріоритетом. На вузькому екрані це поводиться найкраще: сітка стає двома тісними колонками, а рядки лишаються на всю ширину і під палець. Перемикання розкладки діє на всю сторінку цілком, тож це рішення про більшість ваших посилань, а не про кожне окремо.

Сітка картокСписок рядків
Що несе змістКартинкаСлова
Підпис із восьми слівОбрізається або тіснить плиткуПереноситься і читається
Посилання без картинкиВиглядає діркою в наборіВиглядає як усі інші
Порядок читанняВільний, погляд блукаєСуворий, згори вниз
Десять пунктівПочинають читатися як візерунокУсе ще список, просто довший
На вузькому телефоніДві колонки, дрібний текстНа всю ширину, під палець

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

Покажіть сторінку людині, яка її не бачила, відлічіть три секунди, заберіть телефон і спитайте, що вона запам’ятала. За доброї сітки вона назве два-три пункти за картинками. За доброго списку — перше посилання і приблизно про що були решта. Якщо вона може описати лише те, як сторінка виглядала, розкладка тягне оформлення замість вмісту, і лікується це зазвичай зменшенням кількості пунктів, а не зміною розкладки. Перевірку варто повторити на телефоні тієї людини, а не на своєму: на чужому екрані видно те, до чого ви вже звикли.

Читати далі