Top.Mail.Ru

Дизайн для интернет-магазина - тренды, правила, советы

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

Основные правила дизайна интернет-магазина

  1. Удобство для посетителя. Много ли купит пользователь, если зайдет на неудобный сайт? Сейчас в тренде UX/UI дизайн, который создан для того, чтобы облегчить клиенту жизнь и плавно подвести его к самому главному - покупке или другому целевому действию (оставить контактные данные, зарегистрироваться и так далее). Для этого дизайнер должен продумать все до мелочей: понятное меню, удобные категории товара, небитые ссылки, заметная корзина, яркие кнопки заказа. Все должен быть логично, вытекать одно из другого, чтобы пользователь не метался по сайту вспуганной белкой, а переходил по страницам и добирался в итоге до главного. Например, из меню - в карточку товара, оттуда - в корзину, оттуда - обратно на сайт. Все это должно быть максимально естественно и не вызывать у пользователя ни малейших трудностей. Для этого составляются карты маршрутов по сайту, тестируются различные варианты и в результате выбирается самый оптимальный.
  2. Красота и строгость. Уже давно не в моде кричащие цвета, вычурные шрифты, плотное пространство - современные сайты стильные и элегантные. Много воздуха, не более трех цветов на странице, чистые тона и оттенки цвета, простые четкие шрифты, удобная типографика - вот что отличает сайты, которые продают. Это нужно затем, чтобы покупатель видел за деревьями лес: чтобы полезная и продающая информация не терялась за кричащим оформлением.
  3. Фирменный стиль. Если вы хотите отстроиться от конкурентов - разработка айдентики (фирменного стиля) - обязательное условие. Так вы выделитесь из серой массы интернет-магазинов, пользователь запомнит именно вас. В понятие фирменного стиля входит товарный знак, логотип, слоган, фирменные шрифты и цвета.
  4. Профессиональные фотографии. Если у вас интернет-магазин продуктов и товаров, которые производите сами - тут и думать нечего: проводите предметную съемку и используете эти фото в дальнейшем. Но что если речь идет о большом магазине, торгующем товарами различных брендов? Понятно, что фотосессией тут не отделаешься: нужно обращаться к производителям и поставщикам и просить их прислать качественные фото товара. Ни в коем случае не берите стоковые фото: доверия к таким у посетителей нет. Живые изображения, раскрывающие суть товара - то что надо.
  5. Визуализация. Пользователю неинтересно читать простыни текста. Интернет-магазин - это не новостной сайт и не книга. Все, что он хочет - спокойно выбрать товар и купить его. Следовательно, нужно упростить все, что можно. Для этого в дизайне интернет-магазина активно используются иконки и картинки - они успешно заменяют текст. Например, вместо того чтобы долго рассказывать, что этим товаром можно поделиться в соцсетях, лучше прикрутить иконки этих самых соцсетей. Вместо инструкции, как увеличить изображение для более детального просмотра - использовать значок лупы. Вместо слова “корзина” отрисовать узнаваемую корзину - поверьте, этого будет достаточно.
  6. Интересные фишки. Веб-дизайн, как и любое направление, развивается семимильными шагами. В 2018-2019 годах становятся модными различные эффекты. Их применяют чаще всего на сайтах и лендингах, но кто сказал, что интернет-магазины должны оставаться позади? Используйте анимацию - движущиеся элементы, эффект 3D-изображений, градиенты всех оттенков, тени для придания объема, эффект Parallax – когда картинки на сайте “живут” словно в двух разных измерениях и двигаются с разной скоростью и другие. Вот пример объемных изображений, актуальных для интернет-магазина женской одежды.

Еще пара правил

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

1. Золотое сечение

Не будем приводить сложных формул и расчетов: достаточно сказать, что пропорции предмета или изображения по правилу золотого сечения составляют 3/2, 5/3 и так далее. Это правило можно применять в построении блоков на сайте, подборе картинок, сочетания текста и фото, размера заголовка и текста.

золотое сечение на сайте

2. Правило третей

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

правило третей

Дизайн основных страниц интернет-магазина

Рассмотрим главные правила для каждого раздела интернет-магазина.

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

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

  • простая и понятная навигация: меню, разделы, категории и подкатегории. Можно разделить меню по категориям товара, по брендам или всем этим меткам сразу. Главное - помните о правилах трех кликов. Добраться до нужного товара посетитель должен не более чем за три движения мышкой. То есть примерно так: раздел женской одежды - категории платья - товар “платье синее вязаное фирмы Gucci”. В больших магазинах с огромным ассортиментом сделать это непросто: используйте фильтры на материалу, цвету, цене и другим параметрам. Подробнее мы рассказывали в статье Университета InSales о структуре интернет-магазина;
  • яркие баннеры на главной, которые ведут на страницы акций и распродаж. Суммы скидок в процентах или конкретном значении лучше выделять пожирнее да поконтрастнее. Не прячьте баннеры вниз страницы - посетитель должен увидеть их сразу, как только зайдет на сайт;
  • на случай, если глобальных распродаж пока не предвидится, основные продукты магазина можно выделить в отдельный раздел “Хиты продаж” и публиковать их на главной. Людям всегда интересно, что покупают другие - используйте этот прием;
  • рассказ о компании, иллюстрированный фотографиями или картинками. Также на главной можно рассказать алгоритм работы (можно опять же в картинках или схематичных изображениях - помните о визуализации!).

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

О, сколько мы уже писали о карточках товара! Объясняли теорию, рассказывали на пальцах, приводили разборы конкретных сайтов. Напомним еще раз основные правила:

  • красивое информативное фото, а лучше несколько. Этот тот самый случай, когда товар нужно показать лицом. Использовать одно фото, да еще и в плохом качестве или стоковое - это не есть гуд. Покажите товар с разных ракурсов, пригласите моделей и проведите профессиональную съемку. Если есть видео - это будет прекрасным дополнением;
  • блок информации. Как правило, туда включают цену, описание и характеристики, иконки соцсетей. Все эти элементы должны грамотно сочетаться друг с другом. Например, по неписаным правилам (хотя почему неписаным - давно доказано, как именно пользователь просматривает информацию и на что обращает внимание, а что пропускает мимо) в верхнем левом углу располагается название магазина, в верхней строчке - название, потом цена, справа висит манящая корзина;
  • отдельное внимание стоит уделить цене - именно на основании стоимости большинство посетителей принимают решение. Выделите цену контрастным цветом, крупным шрифтом. Если есть скидки - обязательно отметьте это. Про иконки соцсетей мы уже говорили - обязательно прикрутите их, дайте возможность людям поделиться информацией и рассказать о вашем магазине, причем для вас это будет совершенно бесплатно!

Кнопка СТА

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

  • цвет кнопки. Правила веб-дизайна предписывают делать ее контрастной - чтобы сразу привлекала внимание. Следите, чтобы кнопка СТА сочеталась по цвету с остальными элементами сайта;
  • текст на кнопке. Здесь важно придумать такой текст, чтобы не спугнуть покупателя. “Купить”, “Добавить в корзину” отлично работают. Можно проявить фантазию и пообщаться с клиентом нестандартным способом (“Что думаешь? Жми скорей!”. Но для этого нужно хорошенько изучить свою целевую аудиторию, чтобы не спугнуть ее), можно предложить за регистрацию что-то полезное и бесплатное (прислать курсы и лекции по интернет-маркетингу, личную подборку товаров для конкретного пользователя и так далее);
  • удобство пользования кнопкой. Вы знали, что на этом этапе воронки продаж отваливается множество клиентов? Казалось бы, человек уже проявил интерес, зашел на сайт, выбрал товар, осталось всего ничего - заполнить форму и сделать заказ! Но этого не происходит. Почему? Как правило, дело в неудобном дизайне. Если пользователю предлагается сложная регистрация, ввод капчи или картинок, множество полей для заполнения, он может психануть и покинуть сайт. Поэтому обязательно учитывайте дизайн не только самой кнопки, но и ее “внутрянки”. Дайте задание дизайнеру о количестве полей, способе регистрации (лучше всего - через соцсети, как на “Алиэкспресс” и других сайтах). Помните, главное - удобство покупателя!

ста кнопки

Корзина интернет-магазина

И последний элемент, от дизайна которого напрямую зависят ваши продажи и конверсии. Записывайте:

  • располагайте корзину в верхнем правом углу - так привычнее. Это тот самый случай, когда не надо изобретать велосипед - все уже придумано до нас;
  • делайте корзину большой и заметной - чтобы точно не промахнуться;
  • выделяйте ее контрастными цветами;
  • постоянно обновляйте информацию о количестве товаров в корзине. Нельзя, чтобы пользователь забыл о том, что он сам выбрал;
  • попросите дизайнера сделать такую фишку: при наведении курсора мыши на корзине пользователю должен показываться список покупок. То есть он не обязательно должен каждый раз заходить в нее - достаточно просто навести курсор. Помните: чем меньше кликов - тем лучше!
  • товары в корзине должны показываться не просто названием и описанием, а с фотографией и ссылкой на карточку товара. Это нужно для того, чтобы пользователь мог в любой момент посмотреть, что же он выбрал, и возможно, сравнить с другими товарами;
  • рядом с корзиной поместите информацию о заказе товара и доставке. В голове клиента эти понятия неразрывно связаны - вот и не рвите ему шаблон. Мы же помним про удобство, правда?

Несколько советов напоследок

  1. Конечно, хочется немедленно воплотить на сайте все эти штуки. Но если пока нет достаточного бюджета - лучше не торопиться. Хуже нет, чем заказывать дизайн у новичка-самоучки, зато дешево. Ограничьтесь основными правилами и элементами, а сделать редизайн всегда успеете.
  2. Тестируйте и еще раз тестируйте! Цвета, шрифты, текст на кнопке СТА - все что угодно. Только так вы поймете, какой вариант лучше работает и повышает конверсию.
  3. Не слизывайте у конкурентов - добавляйте частичку себя, индивидуальности вашего бизнеса. Найдите баланс между хорошей идеей и вашим фирменным стилем - это и будет оптимальным вариантом.

Как вам советы? Делитесь в комментариях в соцсетях, присылайте ссылки на ваши сайты! Удачи в продвижении!

Еще нет своего магазина?
Создайте интернет-магазин на платформе InSales
Всё для продаж уже внутри!
Возможно вам также будет интересно:

Черные методы раскрутки сайта: как не нужно продвигаться

02.06.2020
Черный пиар тоже пиар: слыхали это выражение? Рискнем оспорить: черные методы продвижения, может, ненадолго и сработают, но вот репутацию вашего...

Как делегировать полномочия сотрудникам и заниматься бизнесом, а не рутиной

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

Как распознать покупателя-мошенника в интернет-магазине: девять реальных историй

29.05.2020
Многие до сих пор боятся, что заказывать товары через интернет опасно: обманут, не привезут или привезут не тот размер. Знали...

Как правильно вести деловые переговоры с партнерами, инвесторами, клиентами

28.05.2020
Собираетесь на встречу с деловым партнером? Не хотите упустить крупного клиента? А может быть, ищете инвестора для своего интернет-магазина? Тогда...

Саботажник, страдалец, интриган: боремся с токсичными сотрудниками

27.05.2020
Каждый руководитель хоть раз в жизни сталкивался с сотрудниками, которые мешают рабочему процессу. Эйчары называют их токсичными. Хорошее слово, емкое....

Как эффективно управлять интернет-магазином, привлекать клиентов и продавать больше

26.05.2020
Клиент пошел капризный. И то ему не так, и это не эдак. Чуть что не понравилось - идет к конкуренту,...

Что такое лестница узнавания Бена Ханта, или главный секрет высокой конверсии

25.05.2020
В 1950 году в мире рекламного бизнеса стало известно имя Юджина Шварца. С того момента и по сегодняшний день этот...

Что продавать летом в интернет-магазине: готовимся к летнему сезону

22.05.2020
Впереди летний сезон и неизбежное падение спроса. Как не уйти в минус и продержаться на плаву в сезон отпусков? Выход...

Как привлечь миллионы инвестиций в стартап или действующий бизнес в вопросах и ответах

21.05.2020
Согласно “Яндекс.Вордстату”, запрос “куда инвестировать” делают 12 149 пользователей интернета в месяц. Вопрос в том, почему вы никак не может...

Начните бесплатно!

Получите все и сразу: поддержку 24х7, адаптивные шаблоны, рекомендации по продвижению

Создайте интернет-магазин за 1 день
Все для продаж уже внутри
Готовые шаблоны дизайна ・ Надежный хостинг ・ Помощь в продвижении ・ Поддержка 24×7 ・ Интеграции оплаты, доставки и 1С ・ 14 дней бесплатно