Аудит дизайна интернет-магазина для компании «Агромир»

Рекомендации по дизайну

1. Иконки не помогают понять контакты.
   http://joxi.ru/5md6NQYCe81BPA
   http://joxi.ru/vAWoRyKUqOKWdA
2. Если такой фирменный стиль — ок, а так такие эффекты для кнопки устарели давно.
   http://joxi.ru/Dr87WNyTzMnbNA
3. В дизайне лучше использовать реальные названия и описания.
   http://joxi.ru/eAOo0DYUpkEzBA
4. Нужно попробовать другие варианты компоновки шапки. Сейчас что-то по центру, что-то по левому краю. Ощущение несобранности и плохое использование пространства.
   http://joxi.ru/vAWoRyKUqOKN5A
5. Первое впечатление — грязный градиент. Не вызывает мысли о том, что это мрамор.
   http://joxi.ru/zANopkYU6jxPVr
6. Нарушено правило теории близости: название категории ближе к заголовку, чем к своим ссылкам. Внутренние поля ссылки меньше внешних.
   http://joxi.ru/p27y6o9fWNEzxr
7. Темный текст плохо читается на сером фоне. Зачем нужен был градиент у ссылки? Он только ухудшает читабельность.
   http://joxi.ru/5md6NQYCe81zRA
8. Эта ошибка называется «подмышка». Картинка заставляет пользователя смещать линию чтения. Это ухудшает восприятие.
   http://joxi.ru/ZrJoOpYUMnejxm
9. Я понимаю, что дизайнер выровнял текст в этом элементе по тексту описания. Но сам элемент выглядит неопрятно из-за нарушения внутренних отступов.
   http://joxi.ru/KAgL7WoTXKeMBr
10. У отступов нет контраста, они примерно одинаковые. Это создает мешанину в описании. Непонятно что к чему относится.
    http://joxi.ru/1A5kQWxTGbkMzm
11. Кнопка не отцентрирована.
    http://joxi.ru/KAxqdjoI1KqaPr
12. Отступы между элементами больше, чем отступы всей карточки
    http://joxi.ru/n2YoROaUZeVN4r
13. Тоже, что и в 13 пункте, но еще заметнее из-за текста.
    http://joxi.ru/DmBj1xLTz4PbBm
14. Грязный фон, на котором не читается логотип, иконки, текст.
    http://joxi.ru/52aDNRzHbkZOwm
15. Слишком размытое изображение, не понятно что там.
    http://joxi.ru/brRoEY5UYOVeam
16. Здесь текст выровнен по левому краю, а все остальное по центру. Лучше выделить по левому все, так лучше читается.
    http://joxi.ru/4AkR0GoCXk1Oy2
17. Бренды должны быть на отдельной странице или отдельной секции под категориями. Я читаю заголовок «Категории», а слева в этом время лезут бренды, которых я не жду в категории товаров.
    http://joxi.ru/vAWoRyKUqOKbdA
18. Нарушено правило теории близости.
    http://joxi.ru/krDo1xlUJ4LpVA
19. Из-за декоративных элементов заголовок кажется лишним, словно он не относится к этой секции.
    http://joxi.ru/brRoEY5UYOVKam
20. Синяя активная точка на синем фоне — не лучшее решение. Ее не видно.
    http://joxi.ru/L21OpRzCg0VPqr
21. С лету не понятно, что это товар, что можно на него навести мышкой и получить какой-то отклик. Я бы кнопку разместил по умолчанию и не делал такого появления.
    http://joxi.ru/gmvN67vTv1B94m

Возможные способы исправления

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

Номера в заголовке совпадают с номерами проблем в списке сверху.

Картинки по ссылкам можно приблизить и рассмотреть детали.

5, 6, 7 — панель с ссылками сбоку

http://joxi.ru/5md6NQYCe81jeA

1. Поменял цвет фона на синий
2. Убрал декоративный элемент слева внизу
3. Поменял цвет текста на белый, поправил отступы внутри
4. Отделил название «Техника» линией и отступами.
   

8, 9, 10 — описание товара

http://joxi.ru/zANopkYU6jZJBr

1. Убрал слово «основные преимущества», так как это бессмысленный текст. Назначение, высота и особенности модели это не преимущества, это свойства любого товара
2. Переместил заголовок в правую часть. Теперь текст находится в одной области и его удобно считывать
3. Отредактировал отступы между блоками с информацией о товаре
4. Изменил цвет текста о количестве купивших на синий, так как красный воспринимается как сообщение об ошибке

11, 12, 13, 19 — похожие товары

http://joxi.ru/Y2LopkYUQEL9wm

1. Поместил заголовок внутрь секции
2. Убрал декоративные элементы
3. Отредактировал отступы внутри карточки
4. Отцентрировал текст в кнопке
5. Сделал заголовки товаров синим цветом, чтобы дать понять, что это ссылка

14 — подвал

http://joxi.ru/a2XoaOZUD4awpm

1. Заменил фон на белый
2. Убрал лишние иконки
3. Сделал текст номеров и почты синим, чтобы было понятно, что это ссылки
4. Поправил отступы между ссылками

15 — Размытое изображение

http://joxi.ru/E2pxWb1TaGX7D2

Сделал его видимым, оно не отвлекает от просмотра, но и не мешает размытостью, как предыдущее изображение. Его можно вообще убрать, эффективность страницы не упадет.

20 — точка в слайдере

http://joxi.ru/L21OpRzCg0OgBr

1. Изменил цвет активной точки на белый
2. Изменил цвет обычной точки на темно-синий, чтобы был эффект «вдавливания»

1, 2, 4 — шапка сайта

http://joxi.ru/82QlpqQiy9d3Bm

1. Убрал грязный серый цвет
2. Убрал лишние иконки у номеров и почты
3. Сделал поле поиска больше, в интернет-магазина часто ищут товары там
4. Сделал меню крупнее и выделил активный пункт, чтобы пользователь чувствовал себя увереннее. Так он понимает, где находится
5. Изменил цвет текста с бледно-голубого на белый для лучшей читаемости