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

В этой статье мы пройдемся по основным этапам создания уникального дизайна: от выбора цветовой гаммы до готовых макетов.

Анализ целевой аудитории

Целевая аудитория (ЦА) — люди, которые будут приходить за покупками. Если сайт продает электрические бритвы, он ориентирован на мужчин в возрасте от 16 лет.

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

Для проектирования структуры целевой аудитории важно знать:

• пол и возраст;
• платежеспособность;
• задачи, которые решает продукт.

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

В качестве альтернативы используйте базу дисконтной программы. Это распространенный маркетинговый прием, который предполагает получение скидки за покупки в больших объемах. Данные участников — отличный материал для составления портрета ЦА.

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

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

Анализ конкурентов

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

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

Анализ конкурентов помогает, когда нет идей для структуры будущего проекта.

Пошаговый план действий:

1. Наберите в поисковых системах несколько ключевых слов, задающих тематику ниши.
2. Выберите 3-5 идеальных проектов с точки зрения удобства.
3. Запишите в отдельный файл преимущества и недостатки. Отдельно выделите моменты, которые запомнились больше всего.
4. Объедините полученную информацию в список характеристик. Он пригодится для создания макета.

Особое внимание уделите конкурентам, которые показываются на верхних строчках поисковых систем. Если есть открытые счетчики систем аналитики, посмотрите данные поведенческих факторов. Качественные проекты отличаются хорошей глубиной просмотра и большой длительностью визита. Яндекс и Гугл ставят пользовательский опыт на первое место. Именно поэтому молодые проекты обходят «старичков», когда предлагают аудитории больше удобства. Ссылочная масса и SEO-оптимизация — это хорошо, но если до кнопки корзины приходится добираться через 3 всплывающих окна, отказы будут зашкаливать.

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

Выбор цветовой гаммы

Правильное решение — создание интернет-магазина на базе фирменного стиля. Используйте существующую графику, цвета и шрифты. Такой подход создает визуальный портрет бренда. Клиент мгновенно отличит и запомнит сайт или корпоративную атрибутику.

Важные правила выбора цветов:

1. Используйте 2-3 цвета. Сайт не должен пестрить, как новогодняя гирлянда.
2. Адаптируйте цветовую гамму под тематику. Сайты по продаже электроники часто оформляют оранжевыми и красными тонами. Для интернет-магазина косметики подойдут нежные цвета: розовый, голубой и сиреневый.
3. Подберите несколько схем. Воспользуйтесь инструментами с готовыми палитрами. Например, Palleton или любой другой аналог.

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

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

Еще один вариант для нашего примера — винтажный стиль. Он вызывает ассоциации с прошлым веком с модой на гангстеров, старинные машины и элитные виды спорта.

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

Проработка юзабилити

При разработке дизайна сайта электронной коммерции уделите время юзабилити (удобству). Интернет-магазин должен соответствовать формуле AIDA. То есть вызывать внимание, интерес, желание и действие.

Удобство сайта повышает лояльность посетителей, и формирует доверие к бренду.

Главные принципы юзабилити:

1. Корректное отображение на всех устройствах.
2. Удобная и понятная структура. Для сайтов с большими каталогами используется многоуровневая структура. Возьмите на заметку идеи крупных магазинов: Алиэкспресса, Связного, М.Видео.
3. Быстрый доступ к карточке товара. По правилам SEO-оптимизации любая страница должна быть доступна в 3 клика от главной. Размещайте рубрикатор и подборки на видном месте.
4. Качественная типографика. Шрифты должны выглядеть гармонично. Лучше использовать 1-3 варианта из одной «семьи». Обязательно проверьте отображение латинских букв и цифр, некоторые шрифты адаптированы только под кириллицу.
5. Максимум полезной информации для посетителей. Размещайте на виду данные о доставке, оплате, контакты и реквизиты юридического лица.

После просмотра сайта у пользователей не должно остаться ощущения недосказанности. Чтобы они не потерялись в «дебрях» плохого юзабилити.

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

Разработка структуры

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

Главная страница

Не все пользователи начинают знакомство с сайтом с главной страницы, но это не значит, что её стоит отодвинуть на второй план. Многие покупатели сознательно переходят на стартовую страницу, чтобы посмотреть каталог, найти подборки или ознакомиться с преимуществами.

Фокусные точки главной: «шапка» (хедер) и низ (футер). Вверху страницы разместите информацию о доставке и оплате, контакты, корзину и ссылки для входа/регистрации. В хедере обычно есть форма поиска и рубрикатор. В название разделов добавьте иконочный шрифт, а в мобильной версии скройте текст и оставьте только изображения. Это позволит сэкономить пространство на маленьких разрешениях.

В хедере интернет-магазина Barbercompany много элементов, но благодаря грамотной структуре, все они находятся на своем месте и не возникает трудностей с навигацией.

Под «шапкой» обычно размещают слайдер и подборки по разным критериям. Можно сортировать продукцию по цене, брендам, особенностям или популярности. В примере все сделано идеально. Красивые «плитки» с тематическими картинками в хорошем качестве и анимацией при наведении.

Следующий смысловой блок — новинки и хиты продаж. Кроме названия, цены и рейтинга выведите 1-2 ключевых параметра. В интернет-магазине Barbercompany отображается вес, страна-производитель и материал изделия.

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

В нижней части важно разместить все контакты, профили в социальных сетях и ссылки на важные разделы.

Для интернет-магазина — это:

1. Инструкция по оплате.
2. Ответы на самые распространенные вопросы.
3. Отзывы.
4. Гарантия.
5. Закладки.
6. Сравнение.
7. Личный кабинет.

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

Категория

В категории пользователи выбирают товары. Им понадобятся инструменты поиска и сортировки.

Важные элементы:

• подкатегории;
• фильтры;
• сортировка по популярности, новизне и цене;
• кнопки перехода на следующую страницу или прогрузки дополнительных элементов;
• описание категории.

В интернет-магазине Britva-mag удобно выбирать товары. Подкатегории размещены вверху, текстовые подписи сопровождаются картинками.

Карточка товара

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

Элементы, которые должны быть на странице:

• рейтинг;
• код товара;
• базовые характеристики;
• информация о доставке и оплате;
• актуальная цена;
• изображения;
• полное описание;
• подробные характеристики;
• форма отзывов;
• дополнительные и похожие товары;
• возможность купить в 1 клик.

Снова возвращаемся к интернет-магазину Barbercompany. Карточка товара закрывает все потребности покупателей. Здесь есть характеристики сумки, особенности доставки и оплаты, отзывы, история бренда.

Корзина и форма заказа

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

Стандартный набор: ФИО, электронная почта, телефон, способ доставки и оплаты, промокод, время для звонков.

Чем меньше полей в форме, тем лучше. От этого зависит конверсия и настроение покупателей.

Утверждение вариантов

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

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

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

Воспользуйтесь нашими советами и создайте проект, который будет продавать.