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