Сейчас на работе занимаюсь проектрированием навигации по каталогу.
Навигация осуществляется с помошью виджетов. В данном случае — виджет это интерактивный элемент с картинкой и текстом, который содержит в себе ссылку на отдельный список товаров в каталоге.
Спроектировал, продемонстрировали прототип, компания одобрила. Компания прислала изображения для наполнения контентом. Вставил. Мне не нравится.
Начал исследовать проблему.
Что я вижу на экране? Визуальный шум, картинки категорий никак мне не помогают в навигации, всё равно приходится вчитываться в текст. А потом еще и вглядываюсь, что же там изображено.
Проблемы, которые обнаружил.
Изображение, при малых размерах, соизмеримых с икнонкой, должно быть таким, чтобы при попадании в зону видимости, пользователь сразу понимал, куда он попадёт, нажимая на виджет.
В виджете площадь изображения больше, чем площать, которую занимает текст, поэтому именно изображение будет первым, на что обратит внимание пользователь.
Иначе создаётся визуальный шум и картинки будтут только затруднять поиск нужной категории.
Как решать? Визуальный шум создаёт картинка в виджете. Следовательно её нужно менять.
Как получить нужное изображение от клиента? Выписать рекомендации, что именно должно быть на изображении, чтобы оно помогало пользователям, а не путало их.
И так, вот что получилось.
Три способа информативно отобразить главный предмет для виджета. Три стиля.
В идеале — для всех категорий нужно выбрать единый стиль отображения. В таком случае все виджеты в совокупности будут выглядеть консистентно.
Тут я и сам затупил, довольно абстрактно звучит задача: «Пришлите нам изображения для разделов категорий, чтобы мы их вставили в виджеты». На такую формулировку подойдёт любая картинка, но вот будет ли она выполнять свою задачу — это уже дело случая, поэтому лишний раз себе доказал, что чем больше времени уйдёт на детализацию формулировки задачи, тем меньше хлопот получу в итоге.
Пример с хорошими изображениями, которые однозначно дают понимание того, какие товары содержатся в категории. Тут изображения по всем трём стилям для демонстрации (главный предмет, главный предмет и сопутствующий, композиция):
