Пять ошибок в дизайне интернет-магазина, которые вам дорого обойдутся

1 сентября 2020, 17:00

Дизайн сайта — не залог успеха, но если во время его создания допускать откровенные ляпы, это может привести к убыткам на ровном месте. Разбираем самые популярные ошибки на примерах.

Ошибка 1. Дизайн отвлекает от контента

Главным героем любого интернет-магазина должен быть контент — фотографии, информация о товарах, баннеры и т. д. Чтобы от него ничего не отвлекало, интернет-магазинам стоит использовать нейтральный фон — светлый и однотонный, в идеале просто белый. Благодаря большому количеству пустого пространства, внимание пользователя будет приковано к главному.

Видео дня

Все совсем иначе во время использования цветного фона, который некоторые интернет-магазины почему-то все еще считают уместным.

Главная страница интернет-магазина из-за фона воспринимается как большое бордовое пятно (Фото: Анабель)
Главная страница интернет-магазина из-за фона воспринимается как большое бордовое пятно / Фото: Анабель
Белый фон не отвлекает от главного — товаров и товарных категорий (Фото: Byurse)
Белый фон не отвлекает от главного — товаров и товарных категорий / Фото: Byurse

Ошибка 2. Неправильная расстановка акцентов

Важно управлять вниманием покупателя. С помощью правильной расстановки акцентов помогите решить его главную задачу — найти и купить подходящий товар.

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

Эта страница — сплошное яркое разноцветное пятно. Нужно потратить определенное время, чтобы понять, что это баннеры со скидками и категориями каталога (Фото: Шалунишка)
Эта страница — сплошное яркое разноцветное пятно. Нужно потратить определенное время, чтобы понять, что это баннеры со скидками и категориями каталога / Фото: Шалунишка

Намного лучше оставить на главной несколько важных элементов вроде динамического баннера, который поможет показать несколько основных предложений. А, например, поп-апы стоит делать отложенными и показывать, только когда пользователь проведет на сайте определенное время и заинтересуется товарами.

Неплохой пример страницы с правильно расставленными акцентами. Это популярный бренд, поэтому они прежде всего показывают акционные предложения (Фото: Master Zoo)
Неплохой пример страницы с правильно расставленными акцентами. Это популярный бренд, поэтому они прежде всего показывают акционные предложения / Фото: Master Zoo

Ошибка 3. Некачественные вижуалы

Дизайн интернет-магазина можно поручить специалисту или создать его из готовых блоков на облачной платформе. Но визуальное наполнение сайта вроде баннеров, фотографий товаров и обложек статей, напрямую зависят от владельца интернет-магазина.

Даже самую продуманную главную страницу можно испортить некачественным баннером в плохом разрешении. Даже самый удобный каталог будет смотреться нелепо из-за слишком маленьких фотографий товаров. К примеру, на Розетке, специалисты которой очень серьезно относятся к дизайну — постоянно проводят А/В-тесты и обвешивают всевозможные блоки аналитикой, — иногда попадаются товары других продавцов с одной размытой фотографией. В этом случае, даже идеально выдержанный дизайн не поможет продать товар. Покупателю просто не хватит для этого информации.

Чайник на фото плохо вырезан и вставлен на черный фон. Плюс мало фотографий и описание товара не раскрывает все особенности (Фото: Rozetka)
Чайник на фото плохо вырезан и вставлен на черный фон. Плюс мало фотографий и описание товара не раскрывает все особенности / Фото: Rozetka
В этом магазине качественные фото с разных ракурсов, поэтому выше вероятность, что товар купят (Фото: Gard)
В этом магазине качественные фото с разных ракурсов, поэтому выше вероятность, что товар купят / Фото: Gard

Ошибка 4. Явные недочеты в UX-дизайне

Дизайн интернет-магазина должен не только визуально нравиться большинству посетителей, но и помочь им превратиться в клиентов. Этого можно достичь благодаря продуманному UX-дизайну.

Если вкратце, то UX — это User Experience, то есть пользовательский опыт. Основная цель UX-дизайна — чтобы пользователь интуитивно дошел до нужной точки в интернет-магазине и совершил нужное действие. Будь-то расслабленный серфинг по каталогу с целью что-то себе присмотреть или целенаправленный поиск товара для покупки.

Каждый элемент в интернет-магазине должен выполнять определенную задачу и быть привычным. К примеру, процесс оформления заказа должен быть максимально простым и интуитивно понятным.

poster
Дайджест главных новостей
Бесплатная email-рассылка только лучших материалов от редакторов НВ
Рассылка отправляется с понедельника по пятницу
Проблема этого магазина в слишком неординарном дизайне. После нажатия кнопки Купить, появляется непривычный черный блок с цифрами и не слишком понятными требованиями. А чтобы перейти именно в корзину, нужно заметить кнопку, которая появляется вверху экрана (Фото: zeus ceramica)
Проблема этого магазина в слишком неординарном дизайне. После нажатия кнопки Купить, появляется непривычный черный блок с цифрами и не слишком понятными требованиями. А чтобы перейти именно в корзину, нужно заметить кнопку, которая появляется вверху экрана / Фото: zeus ceramica
В этом магазине все намного проще и привычнее (Фото: Street Fassion)
В этом магазине все намного проще и привычнее / Фото: Street Fassion

Ошибка 5. Игнорирование мобильной версии

Совместное исследование LivePage и Хорошоп показало, что в 2019 году более 60% клиентов интернет-магазинов совершали покупки с мобильных устройств. Эти цифры — молчаливый упрек всем, кто уделяет мобильной версии своего интернет-магазина недостаточно внимания. Мобильная версия сегодня важнее десктопной, хотя многие пока что этого не понимают. К примеру, клиенты нашей платформы сразу получают и десктопную, и мобильную версии интернет-магазина. И несмотря на эру mobile first, многие из них даже не проверяют, как выглядит их сайт на экране смартфона.

Исследования Якоба Нильсена показали, что пользователям нужно 10−20 секунд, чтобы принять решение об уходе с сайта. Это особенно критично на мобильной версии, потому что отвлекающих факторов намного больше: пришло уведомление о новом лайке, кто-то написал в мессенджер и другое.

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

Слева сайт, не адаптированный под мобильные устройства. Пользоваться им не слишком удобно. Справа — отдельная мобильная версия сайта. Она выглядит неплохо, хотя кнопку на баннере стоило бы сделать больше. (Фото: Слева - buy.ua, справа - frantini.ua)
Слева сайт, не адаптированный под мобильные устройства. Пользоваться им не слишком удобно. Справа — отдельная мобильная версия сайта. Она выглядит неплохо, хотя кнопку на баннере стоило бы сделать больше. / Фото: Слева - buy.ua, справа - frantini.ua

Разумеется, для разных интернет-магазинов подойдут разные решения. Но в этой статье мы перечислили ошибки, которых нужно избегать абсолютно всем. Проверьте свой сайт на их наличие, чтобы не терять прибыль на пустом месте.

Показать ещё новости
Радіо НВ
X