31

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

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

  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. Изменил цвет текста с бледно-голубого на белый для лучшей читаемости
Поделиться
Отправить

Комментарии