Алексей Масюта's profile

Проектирование виджетов

Изображения для виджетов
Сейчас на работе занимаюсь проектрированием навигации по каталогу.

Навигация осуществляется с помошью виджетов. В данном случае — виджет 
это интерактивный элемент с картинкой и текстом, который содержит в себе 
ссылку на отдельный список товаров в каталоге. 

Спроектировал, продемонстрировали прототип, компания одобрила. 
Компания прислала изображения для наполнения контентом. Вставил. Мне не 
нравится. 
Начал исследовать проблему.

Что я вижу на экране? Визуальный шум, картинки категорий никак мне не 
помогают в навигации, всё равно приходится вчитываться в текст. А потом еще 
и вглядываюсь, что же там изображено.

Проблемы, которые обнаружил.
Изображение, при малых размерах, соизмеримых с икнонкой,  должно быть 
таким, чтобы при попадании в зону видимости, пользователь сразу понимал, 
куда он попадёт, нажимая на виджет.

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

Иначе создаётся визуальный шум и картинки будтут только затруднять поиск 
нужной категории.

Как решать? Визуальный шум создаёт картинка в виджете. Следовательно её 
нужно менять.

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

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

В идеале — для всех категорий нужно выбрать единый стиль отображения. В 
таком случае все виджеты в совокупности будут выглядеть консистентно.

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

Пример с хорошими изображениями, которые однозначно дают понимание 
того, какие товары содержатся в категории. Тут изображения по всем трём 
стилям для демонстрации (главный предмет, главный предмет и 
сопутствующий, композиция):
Посмотрите на сайте реализацию: Рэйд-21 — Каталог 
Проектирование виджетов
Published:

Owner

Проектирование виджетов

Published: