3 этапа создания дизайна интернет-магазина для малого бизнеса
Маркетплейс Satom.ru делится своим опытом по созданию дизайна для интернет-магазинов.
С каждым годом оборот интернет-торговли растет и это неудивительно, так как в интернете теперь можно купить абсолютно все. Количество интернет-магазинов увеличивается с каждым днем и, как следствие, растет и конкуренция. Ведь создать интернет-магазин сегодня может абсолютно каждый всего в пару кликов, но сделать его успешным могут лишь единицы.
В чём же секрет? Это комплексный подход по развитию сайта: продуманная стратегия, грамотный маркетинг, SEO-продвижение и, конечно же, привлекательный внешний вид. Хороший дизайн сайта — это не просто красивая оболочка, от него зависит конверсионность вашего сайта, т. к. интуитивно-понятный дизайн проведет пользователя по всем этапам воронки продаж и приведет к покупке.
В этой статье мы хотим поделиться своим опытом по созданию дизайна для интернет-магазинов. Работая на рынке уже более 6 лет и помогая развитию бизнеса более 50 000 компаний, мы создали своего рода алгоритм по работе с дизайном интернет-магазина, который надеемся будет полезен и вам. Создание дизайна можно разделить на несколько этапов.
Анализ поведения пользователей
Первый этап при создании любого сайта, в частности и интернет-магазина — это аналитика. Это один из важнейших шагов, от которого зависит функциональность вашего сайта, удобство пользовательского интерфейса, а, как следствие, и объем ваших продаж. Если у вас уже есть сайт и вы просто хотите обновить дизайн, то в сборе информации вам поможет Яндекс.Метрика.
На что обращаем внимание:
- Время на сайте. Если время просмотра страниц небольшое, а показатель отказов высокий, необходимо проанализировать контент этих страниц: сократить содержание страницы или наоборот увеличить, структурировать информацию, выделить важные аспекты и т.д.
- Карта кликов. Этот отчет покажет наиболее кликабельные зоны на странице. Если это контакты, то можно их сделать более заметными или перенести в шапку сайта, чтобы пользователю не приходилось просматривать всю страницу в поиске необходимой информации и он мог видеть ее сразу при переходе на сайт. Также интересным параметром являются недействительные клики, если пользователи часто нажимают на неактивный элемент, то есть смысл сделать его интерактивным. Например, пользователи часто нажимают на изображение товара, но ничего не происходит. В этом случае можно при клике на изображение открыть его в большем разрешении, а еще лучше — добавить увеличение изображения при наведении курсора.
- Карта скроллинга. Этот инструмент поможет проанализировать, какую часть страницы просматривают пользователи чаще всего, а какую просто пролистывают, а также, просматривают ли они страницу до конца.
- Рекомендуем обратить внимание на такие отчеты, как аналитика форм, карта путей по сайту и карта ссылок, чтобы составить полную картину о поведении пользователей на сайте и найти «слабые» места.
Если у вас еще нет сайта, то провести аналитику помогут сайты конкурентов. Изучите расположение элементов, контент и оформление сайта. Для получения более подробной информации о сайтах конкурентов используйте открытые источники, например сервис Similarweb.
Проектирование
Следующим этапом создания дизайна сайта является проектирование: создание структуры сайта и схематически внешний вид. Многие считают этот этап несущественным и переходят сразу к дизайну, такое решение нередко приводит к таким проблемам, как большие трудозатраты на доработку страниц.
Во время проектирования сайта учитываются такие аспекты как юзабилити, проработка всех элементов и их расположения на будущем сайте, что в дальнейшем облегчит работу дизайнера и поможет не упустить ничего важного на сайте.
При создании прототипов будущего сайта не забудьте про его адаптивность в связи с тенденцией роста мобильного трафика. По данным SMM-платформы Hootsuite и аналитического агентства We Are Social доля мобильного трафика в мире превышает 52%. Один из подходов при создании сайта можно считать концепцию Mobile-First, при которой изначально создается страница адаптированная для мобильных устройств и постепенно расширяется до размеров десктопа. Рост мобильного трафика не единственная причина почему следует адаптировать ваш сайт под мобильные устройства, поисковые системы также лучше ранжируют адаптивные сайты.
Мы придерживаемся данных принципов при создании шаблонов дизайна для наших клиентов.
Дизайн сайта
Внешний вид сайта — это визитная карточка интернет-магазина. Хороший дизайн — незаметный дизайн, самое главное на вашем сайте — товары и именно на них в первую очередь должен обратить внимание посетитель вашего сайта.
Цветовая гамма
Как известно, цвета имеют свое влияние на человека и правильно подобранные цвета вашего сайта могут изначально задать нужное настроение потенциальному покупателю. По правилам хорошего тона в дизайне рекомендуется использовать не более 2-3 основных цветов для сайта. Фон для страницы должен быть неярким и однотонным. Если вы используете паттерн, то он должен быть еле заметным и однородным, чтобы не отвлекать посетителей от основного контента. Не рекомендуется использовать яркие кислотные цвета в дизайне, так как они вызовут только негативные эмоции и человек быстро покинет ваш сайт.
Основные акценты
Конверсионность сайта зависит от правильного расположения информации, ее доступности и акцентов.
- Такие элементы, как логотип, строка поиска, номера телефонов, корзина и авторизация лучше всего сделать в хэдере (шапке) сайта, чтобы пользователь имел свободный доступ к нужной ему информации.
- Каталог товаров лучше расположить с левой стороны или сверху страницы, в зависимости от количества категорий, тщательно проработав структуру будущего сайта.
- Навигация по сайту должна быть удобная, не важно с какой страницы началось знакомство пользователя с вашим сайтом, необходимо обеспечить легкий доступ к основным его страницам.
- Но самая главная страница сайта — это карточка товара. Именно она является последней ступенью перед совершением покупки, поэтому дизайн этой страницы должен быть продуман до мелочей. Для создания карточки товара необходимо помнить про модель потребительского поведения AIDA . Термин AIDA — это аббревиатура от английских слов «Attention», «Interest», «Desire» и «Action», что в переводе означают «Внимание», «Интерес», «Желание» и «Действие». Карточка товара должна привлекать клиента для этого используйте большие качественные фотографии товара с разных ракурсов. Напротив фотографии необходимо указать стоимость товара, рейтинг товара (если есть), условия доставки и оплаты и конечно же кнопку «Купить». Эти элементы будут создавать нашу модель AIDA и их нужно расположить последовательно, слева направо, сверху вниз. Особый акцент должен быть на кнопке «Купить» , она должна быть яркой, заметной и выделяться от остального дизайна сайта, ведь именно от нажатия на эту кнопку зависит прибыль вашего магазина.
О дизайне интернет-магазина можно написать книгу, потому что существует масса нюансов в зависимости от специфики бизнеса, размера магазина, целевой аудитории. В статье мы рассмотрели лишь малую часть информации по созданию дизайна для интернет-магазина, включив наиболее универсальные методики и подходы, которые мы используем для сайтов наших клиентов и в дизайне каталога Satom.ru.
