Как сделать дизайн интернет магазина
Дизайн интернет-магазина: как сделать продающий сайт красивым и удобным
Если вы задаетесь вопросом: «Как дизайн интернет-магазина влияет на пользователя и почему стоит уделить время на его разработку?» — эта статья для вас! Ниже мы рассказываем об этапах подготовки, показываем на реальных примерах, как работают основные правила дизайна и какие существуют варианты оформления страниц сайта.
Содержание
Почему дизайн сайта интернет-магазина так важен
Дизайн интернет-магазина — это облик сайта, влияющий на первое впечатление и, конечно, на конверсию. Если дизайн совместим с юзабилити, пользователям проще совершать покупки, а также подолгу и с удовольствием рассматривать страницы интернет-магазина.
Дизайн интернет-магазина должен цеплять и заинтересовывать, то есть задача UX-дизайнера — создать композицию из цвета, шрифта и правильного контекста, который плавно приведет пользователя к покупке.
Многие популярные компании — такие, как Ebay, Wildberries или Aviasales, — годами тестируют расположение элементов, чтобы понять, как пользователю будет удобнее работать с сервисом. Поэтому большая часть интернет-магазинов повторяет один и тот же дизайн и получает лиды сразу же после запуска сайта. Есть сервисы, пытающиеся выделиться, но креативные идеи иногда пугают пользователей — и компании приходится в конце концов возвращаться к основам и проверенным методам в дизайне.
На примере ниже представлена главная страница Ebay. Сверху располагается шапка сайта с логотипом, строкой поиска и меню. Далее идет баннер с коллекциями и скидками, после него — преимущества интернет-магазина, подборки с акционными и популярными товарами, а в конце страницы расположен футер.
Главная страница Ebay с продающим дизайном интернет-магазина
Дизайн сайта создают после нескольких важных этапов, которые помогут избежать ошибок на старте и разногласий с заказчиком.
Дизайн для интернет-магазина: с чего начать
В этом разделе разберемся, как правильно подойти к оформлению интернет-магазина, избежать конфликтов с клиентом и ошибок в разработке.
Самый первый и важный шаг — проработка информации от заказчика или руководителя. Здесь нужно понять, чего хочет получить клиент на выходе: как он представляет себе будущий сайт и какие «фишки», по его мнению, обязательно должны на нем быть.
Для получения полной картины мы советуем разработать бриф, а после того, как заказчик его оформит, встретиться с ним для обсуждения каждого пункта. Дизайнеры и разработчики часто сталкиваются с негативом из-за того, что в самом начале сделки не обсудили, например, цветовую гамму сайта или функцию регистрации на сайте.
В брифе лучше всего указать максимальное количество вопросов с вариантами ответов или с подсказками, чтобы заказчик понимал, что вы хотите от него получить. Варианты брифов можно найти в интернете и на их основе составить свой.
Анализ целевой аудитории
Переходим ко второму шагу — анализ целевой аудитории. Здесь можно подключить маркетолога или самостоятельно изучить ЦА.
Четкая картина сегментов аудитории и ее потребностей позволяет понять: для кого создается сайт. От этого будет зависеть вся концепция дизайна интернет-магазина. Например, если у вас сайт по продаже женской одежды — цветовая гамма для молодой аудитории может быть яркой, а для более возрастной группы лучше подойдут пастельные и спокойные тона. Если вы продаете офисную мебель, и к вам чаще приходят мужчины — здесь актуальным будет строгий и лаконичный стиль.
Создание макета сайта
На основе полученной от клиента информации и анализа ЦА составьте макет сайта. Необходимо выбрать формат: распишите главную страницу, каталог, блог и версию для сопутствующих страниц с доставкой, возвратом и контактами.
В макете сайта отображают размещение блоков и дополнительных элементов: калькулятор стоимости, онлайн-примерочная, кабинет пользователя и тому подобное. Фактически, это схематичный план разработки, по которому вы и ваша команда будете двигаться.
На каждом этапе создания макета советуйтесь с клиентом, обсуждайте моменты, которые лучше всего реализовать сейчас, а какие оставить на потом.
Вместе с тем, как вы составляете макет, продумывайте функционал сайта и варианты контента, который будет размещен на страницах.
Проработка функционала интернет-магазина
Функционал сайта — это первый шаг к юзабилити. Продумайте структуру и цели интернет-магазина, определите наиболее интересные страницы для пользователя и то, как он будет взаимодействовать с элементами на сайте.
Написание контента
Контент в интернет-магазине используется в карточках товаров, в описании коллекций, блоге, а также для баннеров с акциями и кнопок с целевыми действиями.
Контент должен быть направлен на вашу целевую аудиторию. Если вы создаете сайт с детскими товарами — говорите с женщинами, впервые ставшими матерями, на одном языке, отвечая на миллион вопросов о том, как будет реагировать пищеварительная система младенца на сухую смесь марки X. А для тех женщин, у которых это уже не первый ребенок, нужно создавать другие статьи.
Рекомендуется к прочтению! Узнайте, как написать полезную SEO-статью для сайта.
Тексты в карточках товаров должны полностью отвечать на все запросы клиента, даже на те, о которых он еще не успел подумать: варианты размещения стеллажа в комнате — горизонтально или вертикально. А если пользователь, например, ищет подушку, но не знает, какая ему подойдет — сделайте на сайте опрос, помогающий выбрать оптимальный вариант.
Внедрение юзабилити
Юзабилити сайта помогает легко и быстро ориентироваться в интернет-магазине. Пользователю должно быть понятно, как перейти в корзину и оформить заказ, как его оплатить и где получить. Все кнопки и иконки он должен видеть сразу, а не судорожно искать надписи «Купить» или «Главная страница».
Помогите своему будущему клиенту — сделайте раздел с просмотренным товаром, который он мог бы сохранять в закладки. Например, пользователь выбирает кроссовки в нескольких магазинах. На вашем сайте ему понравились несколько пар стоимостью 15 000 рублей. Человек уйдет с сайта подумать и через несколько дней может решиться на покупку, но не вспомнит название модели, если на сайте не будет возможности сохранить понравившийся товар.
А чтобы понять, какой функционал нужен вашим пользователям — составьте карту путешествий. То есть изучите каждый шаг, который совершает человек до момента покупки или отказа от нее.
Проектирование
На этапе проектирования у вас уже будет готовая стратегия для разработки интернет-магазина. Обсудите окончательный план с заказчиком, составьте смету по всем работам и переходите к реализации. А начнем мы с дизайна сайта.
Откройте для себя чат-бота
Выстраивайте автоворонки продаж и отвечайте на вопросы пользователей с помощью чат-бота в Facebook, VK и Telegram.
Основные правила дизайна интернет-магазина
В этом разделе рассмотрим основные правила дизайна интернет-магазина.
На первом месте юзабилити, а не креатив
Давайте немного разберемся. Под креативом мы понимаем необычную и сложную конструкцию, которая вам очень нравится, а на деле пользователь теряется на сайте и не понимает, куда можно нажать и где посмотреть каталог.
Поэтому создаем удобный и легкий в понимании сайт, где каждый элемент направляет пользователя или подсказывает ему, какие действия совершать. Клиент не хочет разбираться во всех тонкостях вашего изысканного вкуса, ему нужно быстро получить информацию и решиться на покупку.
Что принято понимать под термином «удобство сайта».
Окно для поиска или значок для его вызова всегда видны на всех страницах сайта.
На скриншоте ниже показан сайт Алибаба, на котором размещается поисковая строка с возможностью искать продукт по фотографиям.
Пример размещения поисковой строки
Навигационное меню можно скрыть или развернуть, если там расположен каталог.
А здесь показан пример открывающегося каталога на сайте:
Пример каталога на сайте
Фильтрация по параметрам также должна быть под рукой пользователя.
На примере ниже показаны варианты фильтрации: сортировка товаров, выбор тегов, вид расположения элементов, а также параметры и характеристики продуктов.
Фильтры на странице интернет-магазина Эльдорадо
Хлебные крошки — это вкладки на странице, показывающие путь клиента. Пользователю будет проще переключиться на общий список товаров бренда или вернуться в каталог.
На скриншоте показано расположение хлебных крошек:
Расположение «хлебных крошек»
А здесь вы можете увидеть пример минималистичного оформления хлебных крошек:
Пример оформления хлебных крошек
Блок с дополнительными или похожими товарами в карточке продукта.
Например, при покупке краски или штукатурки вам могут пригодиться дополнительные материалы: валики, кисти или шпатели. Магазин Петрович предлагает на выбор несколько категорий, тем самым показывая покупателю, что все товары можно приобрести в одном месте.
Сопутствующие товары в карточке продукта
Горячее предложение на главной странице.
Ниже показан пример горячих предложений на странице сайта Утконос: акции, скидки и выбор покупателей.
Пример специальных и горячих предложений на сайте
Четкая структура оформления
Современный дизайн интернет-магазина — это большое количество пространства, единый стиль шрифта, чистые тона и оттенки, а также до трех-четырех цветов на странице сайта. Благодаря сдержанному и понятному стилю покупатель видит главную информацию, а не отвлекается на лишние элементы в оформлении.
Пример дизайна в интернет-магазине Ламода:
Современный дизайн интернет-магазина
Уникальный стиль
Чтобы отличаться от конкурентов, необходимо создать свой уникальный стиль — разработать айдентику и брендинг: шрифт, цвета, логотип, шрифт, слоган и товарный знак. Таким образом у пользователя сформируется образ вашей компании, который поможет ему сразу реагировать на рекламу и упоминания о фирме в новостях.
На примере показан сайт по продаже рюкзаков, который листается не сверху вниз, как все привыкли, а слева направо. Также в интернет-магазине показано хорошее сочетание трех цветов: белый, черный и синий.
Необычный стиль интернет-магазина
Качественные изображения
Хорошие и качественные изображения привлекают внимание пользователей. На четкой фотографии есть возможность рассмотреть детали: текстуру ткани и швы, качество материала и тому подобное.
Лучше всего использовать оригинальные фотографии и креативы, но если у вас на данный момент нет профессиональных снимков, используйте стоковые картинки — но обязательно в высоком разрешении. И при первой возможности сделайте фотосессию с продуктом: как персонаж вашей ЦА использует товар в повседневной жизни, какие есть функции у продукта и как он выглядит со всех сторон.
Также для визуализации используют 3D модели товаров: продукт можно прокрутить на 360 градусов или посмотреть, как он впишется в ваш интерьер.
На скринкасте ниже показан пример изображений товара и видео, где показан продукт со всех сторон:
Пример качественных изображений и видео в карточке товара
Визуальный эффект
Под визуальным эффектом принято понимать акценты на страницах сайта, за которые цепляется взгляд пользователя. Не создавайте страницы, заполненные сплошным текстом, — разбавьте его картинками, видео и иконками. Например, если вам нужно указать гарантию на товар и сроки возврата — добавьте к тексту иконки, показывающие важность данной информации для клиента.
Также можно взять за основу интерактивные страницы товаров Apple, Microsoft или Samsung. Пример показан на скринкасте ниже: отличное расположение элементов и шрифтов в сочетании с лаконичным дизайном страницы.
Пример создания привлекательного визуального эффекта
Запоминающиеся элементы и «фишки»
Выше мы уже упоминали некоторые элементы и «фишки», используемые в интернет-магазинах: 3D модели товаров, калькулятор и онлайн-примерочные. Применение таких модулей облегчает жизнь пользователям, они проявляют лояльность к компании и возвращаются за повторными покупками.
Сейчас активно развивается направление чат-ботов или помощников. Например, Алиса от Яндекса, помогающая пользователям сделать заказ на АлиЭкспресс за несколько минут.
Навык подключается через значок Алисы в браузере Яндекса. Он доступен как с десктопа, так и с мобильного телефона.
Навыки Алисы
После активации навыка можно ввести данные или проговорить их — Алиса подключится к аккаунту, поможет выбрать товар и сделать заказ.
Чат с Алисой
Также вы можете взять за основу идею Икеи и придумать свой планировщик расположения мебели:
Пример «фишки» на сайте Икеи
Верстка страницы и расположение элементов
Когда дизайнер верстает страницу, он пользуется несколькими правилами по размещению элементов.
Правило «Золотого сечения»
Правило гласит о том, что гармоничные пропорции объектов — это соотношения двух величин: 3/2 или 5/3.
Пример применения «Золотого сечения» в дизайне сайта Sony. Здесь показана ширина контента и размещение баннеров — первый длинный, на котором сделан основной акцент, второй меньше и показывает категорию популярных товаров.
Правило «Золотого сечения»
Правило третей
Это правило помогает определить поле, куда чаще всего смотрит пользователь. Посмотрите на сайт, поделите страницу на три одинаковые части по вертикали и по горизонтали и выделите точки пересечения линий. В полученном фрагменте, а именно в центральной части, необходимо разместить ключевую информацию, которая поможет человеку купить продукт.
Пример применения правила третей на главной странице сайта AliExpress. В данном случае в центре показан блок с акциями и интересными предложениями.
Правило третей на сайте
Адаптивность под любые устройства
Дизайн интернет-магазина и его элементы должны корректно отображаться на всех устройствах: десктоп, мобильный телефон и планшет.
Пример отображения сайта Лабиринт — версия для ПК:
Пример распределения элементов на экранах устройств
Версия для мобильного телефона:
Пример отображения элементов в мобильной версии
Автоматизация email рассылок
Отправляйте цепочки триггерных сообщений приветствия, брошенной корзины, реактивации, совмещая внутри одной цепочки email, SMS и web push.
Дизайн главной страницы интернет-магазина
Главная страница — это то самое «первое впечатление», о котором мы говорили в начале статьи. Здесь должна быть сконцентрирована полезная и вовлекающая информация.
Рассмотрим каждый пункт на примере двух интернет-магазинов: «Аскона» и Molnio. В первом находятся товары для сна, во втором — электробайки.
Почему мы выбрали такие разные сайты:
Шапка сайта, или хедер
В шапку сайта добавляют логотип, номер телефона, адреса офлайн-магазинов, кнопки заявок, меню, поиск и фильтры.
Первый пример оформления — сайт Асконы. Сверху расположена строка с адресами магазинов, с регионом, в котором находится пользователь, ссылкой на новости и часто задаваемыми вопросами.
Ниже идет строка с логотипом, поиском, кнопкой обратного звонка и номером телефона. Также здесь есть иконки для отслеживания заказа и входа в личный кабинет.
На третьей строке поместили каталог с основными категориями товаров и акциями.
Дизайн шапки интернет-магазина
Второй пример — сайт Molnio. Здесь другое расположение элементов в шапке: одна строка с логотипом и основными страницами сайта, а также номером телефона компании.
Рекламный блок
В этом блоке размещаются акции, специальные предложения и новые коллекции, на которые пользователь должен обратить внимание в первую очередь. В этот модуль, как правило, добавляют от одного до пяти предложений.
«Аскона» предлагает сразу шесть предложений на выбор пользователя: варианты оснований кроватей и матрасов, а также товаров для детей.
Рекламный блок на сайте Асконы
На сайте Molnio представлены баннеры с продуктами компании и возможностью взять рассрочку по карте Халва. Также здесь размещается окно обратной связи и перечисляются преимущества продукции.
Оформление блока с баннерами на сайте Molnio
Каталог
В каталоге на главной странице показывают популярные товары или коллекции. Обычно это небольшая подборка, дублирующая меню.
На сайте Асконы в блок с каталогом добавили хиты продаж и основную продукцию со скидкой:
Оформление раздела каталога на главной странице
У Molnio есть блок с модельным рядом, при переходе в категорию открывается страница с товарами, а ниже представлена галерея фотографий продукции:
Оформление каталога на главной странице сайта
Дизайн галереи фотографий:
Галерея продукции
Хиты продаж и акции
А в блоке «Хиты продаж» размещают популярную продукцию за последнее время. Иногда данный раздел отводится под товары, которые компания не успела продать в прошлом сезоне, и их нужно быстрее реализовать, чтобы освободить склад для новых моделей.
«Аскона» у себя на сайте дублирует блок, который уже был представлен выше в каталоге, но здесь на первом месте стоят подушки и чехлы на матрас.
Пример оформления блока «Хиты продаж»
На главной странице также можно найти акцию для клиентов, оформивших членство в клубе «Любителей здорового сна»:
Пример оформления акции и дополнительного привлечения пользователей
Molnio не добавила на свой сайт акции или хиты продаж. Вместо этого здесь представлен блок с гарантийным обслуживанием, что немаловажно для магазинов с оригинальным продуктом и запчастями.
Услуги гарантийного сервиса на сайте
Дополнительная информация
Здесь размещают любую дополнительную информацию, которая может заинтересовать пользователя: история компании, новые товары, волонтерство, приглашение к участию в конференции и тому подобное.
«Аскона» в данном случае разместила блок с новинками:
Блок с новинками на сайте
Molnio, в свою очередь, решила рассказать о компании, оформив ее историю в хронологической последовательности:
Пример оформления блока «О нас»
В блоге или новостной ленте компании рассказывают пользователям о себе и о возможностях своей продукции — это также помогает продвижению в поисковых системах.
«Аскона» публикует статьи об истории компании и продукции, а также делится советами о том, как правильно спать или какой матрас выбрать для больной спины.
На скриншоте ниже показаны два блока: вверху — история и рассказ о производственных мощностях компании, внизу — новостная лента и статьи.
Блог на главной странице
На сайте Molnio нет блога или новостной ленты. Вместо этого актуальную информацию публикуют на страничках в социальных сетях, ссылки на которые размещаются внизу страницы.
Футер
Подвал сайта обычно представляет из себя карту из основных страниц и предложений с окном подписки на рассылку и иконками соцсетей.
На сайте Асконы футер расписан очень детально: статьи, каталог, информация для покупателей и партнеров, история, сертификаты и многое другое. Также здесь есть окно для подписки на рассылку.
Оформление футера
У Molnio в футере есть ссылки на социальные сети и на документы о политике конфиденциальности:
Пример оформления футера
Дизайн основных страниц интернет-магазина
Продолжаем разбор сайтов Асконы и Molnio. В этом разделе рассмотрим дизайн основных страниц: каталог, оплата и доставка, обмен, возврат, услуги, контакты. Страницы с каталогом и контактами оформляют в оригинальном дизайне, а для остальных разрабатывают единый шаблон.
Пример основных страниц на сайте «Аскона»:
Разбор сайта Molnio и его основных страниц:
Дизайн карточки товара на странице интернет-магазина
Далее разберем карточки товаров на примере двух сайтов: оформление, описание, количество изображений, а также наличие инструкций.
На сайте Асконы карточка товара представлена с подробным описанием:
Molnio предлагает минимализм во всем. В карточке товара — только ключевая информация:
Дизайн кнопки целевого действия
А теперь перейдем к дизайну кнопок целевого действия. В интернет-магазинах можно встретить множество вариантов кнопок. Главный принцип — сделать кнопку максимально заметной и читабельной. Рассмотрим оформление на примере двух выбранных сайтов.
Кнопка в карточке товара на сайте «Аскона» хорошо заметна, читабельна и кликабельна.
Пример оформления кнопки «Добавить в корзину»
А кнопка «Купить» из раздела сопутствующих товаров выглядит так:
Пример оформления кнопки «Купить»
На сайте Molnio кнопка не отличается от основного контента и ее плохо видно на странице — пользователь может вовсе не увидеть ее и уйти с интернет-магазина:
Пример неудачного оформления кнопки на сайте
Дизайн личного кабинета
Перейдем к дизайну личного кабинета пользователя. В этом разделе мы рассмотрим основные проблемы, с которыми сталкиваются все пользователи.
Во втором нашем примере, на сайте Molnio, нет личного кабинета, поэтому ниже мы расскажем об удобном функционале и покажем дизайн других интернет-магазинов.
Простая регистрация
Для пользователя важно пройти быструю регистрацию без дополнительных вопросов об отчестве, возрасте и местоположении.
Пример вариантов регистрации на сайте с помощью соцсетей или email:
Пример оформления регистрации на сайте и входа в личный кабинет
Если человек перешел на сайт по ссылке, а сервис предлагает сначала пройти регистрацию и только потом открывает доступ к контенту — страница с интересующей пользователя ссылкой не должна закрываться после прохождения регистрации.
Пример правильной регистрации на сайте
История заказов
В личном кабинете укажите историю заказов или выбранных тарифов.
Пример оформления блока с историей заказов:
Оформление истории заказов
Личные данные пользователя
В кабинете пользователя должна быть только необходимая информация. Добавляйте вопросы, которые важны для аналитиков и маркетологов. Если речь идет о сайте с сантехнической продукцией, нет смысла спрашивать у клиента про семейное положение или кличку его собаки.
Пример минимального количества данных о пользователе на сайте Ламода:
Пример оформления личного кабинета
Интернет-магазины за получение данных о пользователе предлагают скидки или промокоды на товары или услуги. Продумайте систему бонусов для клиентов за заполнение профиля.
Пример промокодов в кабинете Adidas: укажите дату рождения и местоположение — и получите скидку.
Пример оформления личного кабинета
Список желаний или предпочтения клиента
Мы уже упоминали про списки желаний и избранные товары — дорогие вещи редко покупают сразу, пользователю может потребоваться время на то, чтобы обдумать и решить, какой продукт приобрести. Добавьте в личный кабинет страницу с избранными товарами, как на примере ниже:
Оформление страницы с избранными товарами
Рассылки
В личном кабинете должна быть кнопка подписки и отказа от рассылки, чтобы пользователь мог сразу решить, интересно ли ему получать новости от компании или нет.
Пример оформления подписки на рассылку в личном кабинете:
Подписки в личном кабинете
Дизайн корзины интернет-магазина
Оформление корзины интернет-магазина должно быть простым и удобным. В этом разделе мы собрали ключевые моменты, на которые стоит обратить внимание при разработке дизайна.
Расположение, цвет и размер иконки
Корзина может быть скрыта или расположена в шапке сайта, но она должна быть видна с первого взгляда. Пользователь, сканируя глазом страницу, останавливается на ключевых элементах.
Пример расположения корзины в верхнем правом углу на странице сайта с контрастной иконкой:
Расположение корзины
Добавьте также функцию отображения заказа без клика на значок корзины, чтобы пользователь каждый раз не переключался для проверки, добавил он товар или нет.
Пример такой функции: при наведении указателя мыши открывается корзина и пользователь видит товар, который успел положить в корзину:
Пример отображения корзины, когда пользователь наводит курсор мыши
Запомните! Чем меньше кликов, тем быстрее и проще путь клиента, а значит — высока вероятность совершения сделки.
Оформление заказа и покупка
Оформление заказа и покупка должны быть максимально простыми — автоматическое заполнение данных и удобная оплата картой или наличными. Добавляя варианты покупки, вы получаете лояльного клиента.
Пример оформления заказа на сайте Леруа Мерлен:
Пример простого дизайна на странице оформления заказа
Лучшие дизайны интернет-магазинов
Пример стильного дизайна сайта Nikos Koulis — производителя ювелирных изделий:
А вот пример современного дизайна интернет-магазина по продаже бытовой техники Haier.
А здесь показан пример UX-разработки — интерактивная покупка велосипеда. Объект изменяется с применением различных составляющих, а также быстро складывается, чем экономит место в квартире.
Интерактивный дизайн интернет-магазина
Общие рекомендации к дизайну интернет-магазина
Мы рассмотрели популярные интернет-магазины, которые годами тестируют дизайн и юзабилити, а также сделали подборку сайтов для вдохновения в качестве примеров того, как можно создавать красивые и при этом удобные сервисы.
Чек-лист по дизайну интернет-магазина:
А чтобы привлекать пользователей на сайт, регистрируйтесь в нашем сервисе SendPulse и подключайте email рассылки, web push, Viber и SMS рассылки, чат-боты в мессенджерах Telegram, Facebook Messenger и ВКонтакте!