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