Задачка про шесть категорий

Пример решения небольшой задачки по впихиванию нового контента, поступившего от заказчика. Ну мало ли, кому-то пригодится и такой формат будет полезен.

Условие

Есть вот такой блок сайта-каталога с двумя категориями: «Моющие средства» и «Бумажная продукция».

Присылают новую вводную.

Будет шесть категорий в каталоге:

1. Бумажная продукция

2. Моющая продукция

3. Чистящие средства (Чистящий порошок Фея Мила, Очистители стекла, крем «фея»)

4. Пластиковая продукция

5. Товары Хорека

6. Белизна

Решение

Разумеется, что поясняющий текст «чистящий порошок Фея Мила, Очистители стекла, крем «фея» в названиях категорий использовать не будем, поэтому подставляем в макет все остальное:

Ожидаемо. Многое попросту не поместилось — а надо бы! 🙂

Для начала пробуем самое очевидное — уменьшить размер шрифта:

Не хватило — два слова выступают за линию контента. Поднажмем:

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

Когда список большой, а место ограничено, можно использовать выпадающий список. Смотрим:

Крупно, заметно. Но, во-первых, не видно все категории сразу. А во-вторых, такая длинная «колбаса» на всю ширину контента, в которой используется 15−20% — ну такое. Многие далекие от дизайна разработчики любят использовать эти «сосиски». Например, вот такую форму добавил программист одного моего заказчика в мой дизайн:

Для смартфонов — да, а для компов лучше поискать другое решение. Ведь задача у нас стоит улучшить результат, а не испортить, верно?

Попробуем категории написать в две строки:

Стало крупнее и заметнее, но пострадала читабельность. Да и «белизна» теперь такая, что перфекционисты закидают помидорами.

Так вот. «Белизна» в одну строку — не очень на фоне всего остального и, по-хорошему, к ней надо слово дописать. Но зачем трогать то, что и так особо не вставляет. Лучше сделаем наоборот и что-нибудь уберем. Есть предложение выпилить повторы. «Продукция» — слишком часто повторяется. К тому же, именно так называется сам блок, а значит, в категориях можно пренебречь этим словом и смысл при этом не изменится:

Ну вот! Весь текст поместился. Размер шрифта больше, чем у названий. Почти хорошо стало. Избавимся от шахматного порядка: средства / продукция / средства / продукция. И поставим сначала «Бумажную» / «Пластиковую», а потом уже всякие средства. Так с заголовком категории будут лучше дружить:

Ну и для полного счастья можно попробовать добавить жирка. Вдруг цепляться взгляд за категории будет лучше?