6 золотых правил дизайна в электронной коммерции


Содержание

Как Психология влияет на цвет и макет в веб-дизайне электронной коммерции

Главное меню » Информация » Как Психология влияет на цвет и макет в веб-дизайне электронной коммерции

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

Почему психология имеет значение в дизайне

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

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

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

Дизайн и компоновка сетки

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

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

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

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

Цветовая теория для веб-дизайна электронной коммерции

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

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

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

Цвет и значение

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

Красный цвет – это цвет страсти, волнения и энергии. Мы можем часто найти красный цвет в упаковке для напитков энергии, вин так же, как романтичных подарков и нижнего белья. Есть хорошая причина для красной розы так популярной в СМИ и литературе. Однако, как и любой другой цвет, красный также имеет отрицательный оттенок.

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

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

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

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

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

Тем не менее, если эффективно использовать, синий цвет может сообщить о вашем намерении продавать высококачественные продукты людям, которые могут захотеть вести с вами бизнес. Сайты электронной коммерции, которые эффективно внедряют синий в свои дизайнерские решения, почти сразу увидят всплеск трафика и дохода. Wo Hing – универсальный магазин, является прекрасным примером того, как синий цвет может быть посредником между продавцом и покупателем.

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

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

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

Окраска по полу и возрасту

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

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

Психология в действии (заключение)

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


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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

10 основных трендов в веб-дизайне для электронной коммерции в 2020 году

Понимание того, какими принципами руководствуются конкуренты и чего ожидают от сайта клиенты, может оказаться весьма полезным. В этой статье представлено топ 10 трендов дизайна интернет магазинов в 2020 году.

10. Большие фоны

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

Лучше всего создавать персонифицированный фон для каждого уникального клиента в соответствии с его предпочтениями.

9. Продают изображения, а не текст

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

8. Длинные области прокрутки

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

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

7. Динамический поиск товара

В 2020 году все больше сайтов стали применять динамические представления, которые используют JavaScript и Ajax для изменения перечня подобранных товаров.

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

6. Анимация движения

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

5. Знакомая структура дизайна пользовательского интерфейса

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

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

4. Макеты в виде карточек

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

Еще одним из важнейших преимуществ карточных макетов является то, что их просто сделать адаптивными:

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

3. Material Design

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

Хотя может показаться, что Material Design — это минималистичный стиль дизайна, но он использует эффекты тени, концепции движения и глубины, что позволяет создавать, красивые интерфейсы, которые понятны для конечных пользователей.

2. Плоский дизайн

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

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

1. Адаптивный дизайн

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

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

Данная публикация представляет собой перевод статьи « 10 Best eCommerce Web Design Trends in 2020 » , подготовленной дружной командой проекта Интернет-технологии.ру


Тренды электронной коммерции

Изменения в сфере электронной коммерции происходят постоянно. Этому способствует развитие технологий, возросшее доверие к брендам со стороны потребителей и жесткая конкуренция между самими брендами. Все это привело к тому, что несмотря на кризисные явления в мировой экономике, многие эксперты предсказывают серьезный рост онлайн продаж в глобальном масштабе. В 2020 году интернет-ритейлерам придется сосредоточиться на поиске свежих, инновационных и привлекательных идей. Многим компаниям потребуется провести редизайн своих сайтов и внести необходимые изменения, чтобы оправдать доверие покупателей и сохранить свою клиентскую базу. Сегодня нужно постоянно «держать руку на пульсе», чтобы вовремя уловить актуальные тренды и выиграть в конкурентной борьбе. Но какие тенденции будут доминировать в электронной коммерции в этом году?

МОБИЛЬНАЯ КОММЕРЦИЯ

Доля мобильных устройств, с помощью которых можно совершить покупку в интернете, растет с каждым годом. В этом нет ничего удивительного – мобильные устройства компактны, удобны и они всегда с собой. И хотя стационарные компьютеры и ноутбуки активно используются для веб-серфинга, все большее количество пользователей заходит в интернет со смартфонов или планшетов. В начале 2015 года примерно 39% потребителей использовали мобильные приложения для совершения покупок и свыше 50% миллениалов считают, что изучение и выбор товаров в интернет-магазинах – занятие не менее интересное, чем общение в социальных сетях. Но что это значит для электронной коммерции?

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

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

ИСПОЛЬЗОВАНИЕ BIG DATA

Чтобы избежать ошибок и повысить процент правильных решений в бизнесе, брендам нужно больше знать о своих клиентах. А это невозможно без серьезного анализа больших массивов информации. Если компания хочет получить маркетинговое преимущество, работа с Big Data становится насущной необходимостью. Какую пользу может принести работа с большими данными?

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

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

АВТОМАТИЗАЦИЯ МАРКЕТИНГА

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

Цукерберг рекомендует:  Отзывы клиентов средствами PHP, XML и jQuery

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

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

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

МАРКЕТИНГ ОТНОШЕНИЙ

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

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

Отличный пример того, как известный бренд создает сильные связи со своими клиентами, является деятельность компании Patagonia. Она сделала заботу об экологической чистоте частью своей миссии и неуклонно придерживается выбранной стратегии. Бренд заявляет о своей социальной и корпоративной ответственности, выделяя 1% от продаж для поддержки различных экологических организаций, и это сильно воздействует на покупателей. Patagonia, оставаясь нацеленным на получение прибыли брендом, так искренне и последовательно идет по выбранному пути, что это нельзя не отметить. И это отражается на доходах компании, так как многих потенциальных покупателей также заботят экологические проблемы и они отдают предпочтение бренду, который разделяет их позицию.

Routes to finance

8 советов новичкам на Амазон ПЕРЕД стартом бизнеса по продажам (none 2020).

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

1) У продавца есть продукт или продукты, которые она хочет продать.

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

Хотите новый автомобиль? Свежий шпинат? Замена части для вашей древней пишущей машинки? Вы найдете его в сети. Но продукт, независимо от того, насколько он превосходен или хорошо оценен, не делает успешный сайт электронной коммерции.

2) Розничному торговцу необходимо место для показа своего продукта. Традиционно это здание какого-то типа.

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

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

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

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

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

Что происходит, когда люди, совершающие покупки в Интернете, не получают продукт, заказанный им в разумные сроки или вообще не получают его? Они злятся, и шансы хорошие, как бы красиво вы ни приносили извинения им, они никогда больше ничего не купят у вас. И они расскажут всем своим друзьям, как они недовольны своим кротким обслуживанием клиентов!

3) Ретейлер выбирает здание для своего магазина, который находится в хорошем состоянии и имеет все удобства, такие как электричество и тепло, которые необходимы, чтобы сделать его клиентов комфортными. Если здание не находится в хорошем состоянии, он исправляет проблемы.

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


У вас должен быть последовательный 24-часовой хостинг, если вы хотите управлять успешным сайтом электронной коммерции. Вы должны представить полностью функциональный, полный магазин, чтобы посетители могли совершать покупки в Интернете. Нет баннеров ‘Under Construction’ или ‘Coming Soon’.

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

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

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

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

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

4) «Традиционный» ритейлер делает ее магазин максимально привлекательным и демонстрирует продукт для наилучшего использования.

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

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

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

Успешные сайты электронной коммерции предоставляют реальные имена как контакты, а не псевдонимы, такие как «веб-мастер» или, что еще хуже, имена, похожие на пароли, такие как «King1724».Они предоставляют информацию об их персонале и их компании, к которым легко доступен онлайн-покупатель. Создайте доверие, разместив на своем сайте изображение себя и / или ваших сотрудников. У клиентов должно быть ощущение, что они знают вас или, по крайней мере, что они что-то знают о вас, прежде чем они сделают интернет-магазины.

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

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

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

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

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

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

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

6). Традиционный розничный торговец гарантирует, что клиенты чувствуют себя в безопасности в своем магазине.

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

Во время интервью с Мелоди Варгас, Эрик Олафсон, генеральный директор Tomax, сказал: «Существует больше рисков при передаче вашей кредитной карты незнакомому человеку, обслуживающему ваш ужин, чем в онлайн-шопинге.«Но восприятие обработки кредитных карт заключается в том, что передача персональной информации, такой как номера кредитных карт через Интернет, намного опаснее и что хакеры скрываются повсюду.

На ваших онлайн-страницах вы должны иметь SSL (Secure Socket Layering), поэтому у вас есть возможность обрабатывать зашифрованные транзакции. Вы должны явно показать потенциальному интернет-покупателю, что ваш сайт является безопасным, и что ваши онлайн-платежные системы, такие как обработка кредитных карт, безопасны в использовании.

7) Традиционный ритейлер делает это (999) Слишком много веб-сайтов электронной коммерции затрудняют онлайн-покупки. Мой личный питомец peeve — это веб-сайты, которые предлагают только форму заказа, которую клиент должен распечатать, заполнить и отправить по почте. Почему бы мне не потрудиться, когда я могу просто пойти в магазин кирпичей и минометов и передать кому-то свои деньги, кредитной или дебетовой карты? У вас есть интернет-магазин, вы должны предлагать онлайн-платеж, например, обработку кредитных карт.

Чтобы принять платеж онлайн, вы можете использовать онлайн-платежную систему, такую ​​как PayPal, или настроить торговую учетную запись для обработки кредитных карт. Онлайн-платежные системы, такие как Beanstream (канадская компания), позволяют вам настраивать торговые счета и онлайн-обработку платежей как для дебетовых, так и для кредитных карт. Более подробную информацию о онлайн-платежных системах вы найдете в разделе «Обработка платежей» этого веб-сайта.

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

Простые способы получить ваш малый бизнес в электронной коммерции представляет собой выбор недорогих пакетов электронной коммерции под ключ для малых предприятий. 8). Традиционный розничный торговец закрывает продажу «Спасибо, пожалуйста, приходите еще».

Вам нужно сделать это и на своем веб-сайте электронной коммерции. Будь то простой экран, который появляется после транзакции, благодаря вашему клиенту, последующему письму благодарности или поздравительной карточке, на которую вы отправляете завершенный заказ (или все три!), Вам нужно предоставить свой e- коммерческий клиент знает, что вы цените ее бизнес.

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

Поощрение покупок в Интернете

Наличие качественного продукта — это всего лишь одна часть головоломки веб-сайта электронной коммерции. Другое — это получение потенциальных покупателей для посещения вашего сайта электронной коммерции.

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

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

ПО ТЕМЕ


Если вам нужен сайт электронной коммерции и обеспокоены тем, что вы не понимаете, HTML или PHP, не говоря уже о Java или CSS, не волнуйтесь. Не нужно изобретать колесо и строить интернет-магазин с нуля. Вы можете начать с готовых вебпродуктов.
10 правил создания сайта электронной коммерции
1. Продавайте то, что хотят люди хотят. Независимо от того, насколько хорошо выглядит ваш сайт, вы не можете продать продукт, который никто не хочет покупать. Как вы узнать, нужен ли ваш продукт? Делайте исследования. Используйте инструменты поиска ключевых слов, смотрите, что продают конкуренты, проверьте, сколько людей рекламируют подобные продукты в Интернете.
Нужно ли использовать заказное программное обеспечение?
2. Нет! Не нужно использовать для электронной коммерции сайт, который был написан специально для вас. Если вы хотите открыть интернет-магазин, вам нужно использовать одну из многих готовых коммерческих программ иои конструктор сайтов. Выбор будет зависеть от вашего продукта и вашего бюджета.
Проверьте наличие поддержки. Можете ли вы быстро написать специалистам и получить ответ? Некоторые берут долю прибыли, другие движки крутят рекламу на вашем сайте, могут также взимать абонплату.
Вы должны найти что-то новое и оригинальное, чтобы продать?
3. Нет. Не продавайте что-то новое и оригинальное (если у вас нет много инвесторов и огромного бюджета). Если что-то в интернете не продается, скорее всего, на это нет спроса.
Если вы думаете, что нашли брешь в рынке, убедитесь, что в этой бреши есть рынок.
Какие материалы вам нужны для онлайн-магазина?
4. Не забудьте добавить хорошие фотографии и описания товаров. Когда вы готовите описания не думайте об особенностях вашей продукции, подумайте о пользе своего клиента от обладания продуктом. Когда важен внешний вид, обязательно поставьте несколько изображений. Клиенты опасаются покупать в интернете вещи, которые они не могут «пощупать», поэтому помогите им настолько, насколько вы можете. Покажите размер относительно других вещей, выложите фотографии продукта во всех его возможных конфигурациях и покажите его в действии. Предоставьте характеристики и габариты (вес, размер), это может сократить количество телефонных звонков. Помните, большинство людей не будут звонить, если у них есть вопросы, они просто пойдут на другой веб-сайт, который дает информацию, которую они хотят.
Интернет-магазины должны давать не только ассортимент, должны быть статьи о том, как использовать товары, которые вы продаете. Можете ли вы предоставить им бесплатный информационный продукт? Можете ли вы сделать видео, показывающее работу продукта? Создайте свой блог на сайте или информационный бюллетень.
Самое важное — это коммерческий сайт
5. Важно первое впечатление. Анимированные первые страницы можно использовать только владельцам мощных брендов, люди не будут сидеть и ждать, пока ваша главная загрузится. Будьте уверены, чтобы поразить их чем-то, сделать это надо быстро. Скорость важна. В верхней части страницы — несколько плюсов вашего продукта, чтобы привлечь их интерес.
Многие владельцы сайтов тратят много дней работы над дизайном своей главной страницы. Но вы понятия не имеете, какую страницу ваши клиенты увидят в первую очередь. Все ваши страницы должны быть хорошими. Большинство веб-сайтов используют шаблоны и шаблон для домашней страницы немного отличается от шаблона для всех остальных. Некоторые клиенты перейдут на главную, другие никогда не увидят ее.
Важные элементы для общения.
6. У покупателей есть вопросы, убедитесь, что они могут получить ответы. Самый простой способ сделать это, чтобы опубликовать номер телефона прямо в верхней части вашего сайта, где каждый может увидеть его. Если у вас есть бюджет, вы можете направить звонки на виртуального помощника или сделать онлайн чат.
Убедитесь, что вы можете измерить результаты
7. Отслеживание статистики. Вы должны быть в состоянии измерить успех ваших усилий. Используйте Google Analytics и Google Webmaster Tools, Яндекс Метрику и Яндекс Вебмастер для отслеживания трафика на ваш сайт. Вы увидите, откуда приходят люди и как они перемещаются по страницам сайта. Эти инструменты являются бесплатными. Не тратьте деньги на сбор статистики платными программами.
Приоритеты при запуске сайта электронной коммерции
8. Не сосредотачивайтесь на деталях. Самое главное, иметь свой сайт. Он никогда не будет идеальным, потому что нет такого понятия вообще. Сделайте интернет-магазин оперативно и вносите коррективы с течением времени с помощью статистики в качестве ориентира.
Кроме продуктов, о чем нужно думать при открытии интернет-магазина?
9. Не забывайте о деталях. Расходы по транспортировке и сроки доставки — все может иметь большое значение для клиентов. Экспериментируйте с наложенным платежом.
Будут ли клиенты покупать ваш продукт в качестве подарка? Если так, то хорошая упаковка может убедить их покупать у вас, а не у ваших конкурентов, или вы можете предложить подарочную упаковку за дополнительную плату.
Подумайте о бонусах лояльности, подарочных ваучерах, VIP клиентах. Что вы можете предложить, чтобы люди покупали у вас?
Что мне нужно больше всего при запуске интернет-магазина?
10. Одним словом — движение. Лучший веб-сайт в мире не может продать продукт, если никто никогда не посещает его. Сконцентрируйте все свои усилия на привлечении трафика в интернет-магазин, а не на постоянном изменении описания продуктов и конструктивных особенностях сайта.

ПО ТЕМЕ

НОВОСТИ

ПОСЛЕДНИЕ СТАТЬИ

Ноябрь 2020
ПН ВТ СР ЧТ ПТ СБ ВС
28 29 30 31 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 1

Использование материалов «Час Пик» разрешается при условии ссылки (для интернет-изданий — гиперссылки) на сайт «Час Пик»

Перепечатка, копирование, воспроизведение или иное использование материалов, в которых содержится ссылка на агентства

УНІАН и УНН строго запрещено.

Copyright © «Час Пик» 2009 Все права защищены

Продающий дизайн интернет-магазина. Часть 1. Аналитика

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

Это первая статья. Всего их будет 3.

Вступление

Сегодня всё больше людей совершают покупки в интернет-магазинах. Процент таких покупок с каждым годом растёт и всё больше набирает обороты. В России 22 млн. человек покупают в онлайне (по данным агентства Data Insight 2013 г.). Сейчас практически всё можно купить в Интернете, и все те товары, за которыми раньше мы традиционно ходили на рынки и в супермаркеты, теперь мы можем найти и купить, не выходя из дома. Масштабы интернет-магазинов самые разные, от крупных мировых лидеров, таких как Amazon, Ebay, Alibaba и др., где можно найти самые различные группы товаров, до небольших тематических магазинов.

Как и в любой розничной торговле, здесь существует огромная конкуренция. Создать и запустить интернет-магазин в наши дни стало проще, чем это было каких-то 10-15 лет назад. Интернет-магазинов сейчас становится всё больше и больше, но вперед вырываются лишь немногие. Единицы из них имеют хорошую конверсию и, как следствие, высокую прибыль.

В чём же секрет? Как сделать интернет-магазин успешным? Кроме грамотно продуманной стратегии и хорошего маркетинга, необходимо создать привлекательную оболочку, внешний вид. По статистике, человек в течение лишь нескольких секунд решает (на уровне подсознания), оставаться ему на сайте или нет. Немногие из нас могут отличить понятия «красиво» от «некрасиво» мгновенно, лишь взглянув на что-то, но наше подсознание – уж оно то знает, что к чему. В данном случае это выбор решения – остаться на сайте или продолжить путешествовать по другим интернет-магазинам. Решит ли сам человек, «да, здесь всё понятно и просто, этому магазину можно доверять», или за него это сделает подсознание – не столь важно, наша цель – задержать человека на сайте, будь то потенциальный покупатель, целенаправленно ищущий конкретный товар, или простой пользователь, который зашел на сайт случайно. Наша задача – задержать обоих, сформировать у них хорошее мнение о магазине, вызвать доверие и привести их к покупке. Не сейчас, так позже.

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

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

Почему дизайн так важен для интернет-магазина?

Мы сегодня не будем говорить «обо всем», а сосредоточимся только на одной стороне создания успешного интернет-магазина, а именно – на дизайне. Поговорим о визуальной оболочке, интерфейсе. Затронем, конечно, и юзабилити, как же без него?

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

Как мы уже сказали, первое, что видит человек, заходя на сайт – это дизайн. С юзабилити, удобством пользования и другими важными нюансами он столкнется позже, но самое первое, что он видит, заходя на сайт, (особенно на новый сайт, неизвестный) – это непременно дизайн. Это важнейшая составляющая сайта, формирующая первое впечатление у человека и очень важно, чтобы это впечатление не было испорчено. «У вас не будет второго шанса произвести первое впечатление», как говорила Коко Шанель.

Рис. 1. Примеры интернет-магазинов с хорошим дизайном: goodlife.com, flipkart.com, beauty.com.

Каким должен быть успешный дизайн для интернет-магазина?

Первое, что мы должны понять и признать, – это то, что мы делаем дизайн для широкой аудитории. Пользователи интернет-магазинов самые разные: люди разных возрастов, взглядов, вкусов, разного социального положения. Конечно, есть узкотематические интернет-магазины с узкой ЦА, но это скорее исключение, чем правило. Так что, кроме уникальности, о которой мы писали выше, крайне важно сделать наш дизайн универсальным и понятным любому пользователю, будь то ультрамодный тинэйджер, успешный бизнесмен, или сердобольная старушка. Всем должен быть понятен наш сайт. Каждый человек уникален и индивидуален, у всех нас свои вкусы и взгляды. Но в дизайне, как и в любом другом виде искусства, есть своя классика, то, что проходит через время, поколения и не меняется.

«Мода проходит, стиль остается», как гласит известное высказывание. Мода диктует новые тенденции дизайна, в том числе и в веб-индустрии. Сегодня актуально что-то одно, завтра оно сменится другим. Но, если мы хотим приблизиться к универсальности, нам нужно делать упор на то, что признает каждый из нас, несмотря на время и тенденции моды. Это классика. Она есть во всём. Простота и в то же время богатство, однородные цвета, простые формы, внимание к деталям. Это всегда будет актуально. Возьмите, к примеру, автомобили Mercedes Benz классического черного цвета. На одном из них ездил Штирлиц, а сегодня ездят главы государств и многие другие. Мерседес не нужно красить красным цветом в белый горошек, чтобы угодить моде. Это классика, эталон дизайна, это выражение бренда, то, что всегда было актуально, то, что всегда будет на уровне и на ступень выше любого другого дизайна.

Классика есть и в веб-дизайне. Используйте простые геометрические формы элементов, спокойные, не кричащие цвета, правильные цветовые схемы, незагруженность информацией. Хороший дизайн – это когда уже нечего убрать. Как работает скульптор? Берёт каменную глыбу и отсекает от нее всё лишнее. Этот принцип, несомненно, применим и к созданию хорошего дизайна сайта. Не стоит также забывать о логике дизайна, о его правильности. Правильный дизайн человек воспримет подсознательно, такой дизайн выделяет самое главное, цель сайта. Это, прежде всего, правила Золотого Сечения, пропорции Фибоначчи, модульные сетки.

Рис. 2. Еще примеры хорошего дизайна, zappos.com, 2modern.com, tmlewin.co.uk

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

Исследования и аналитика

Прежде чем приступать к созданию визуального образа нашего магазина, необходимо в самую первую очередь провести аналитические исследования и выделить целевую аудиторию (ЦА), понять рынок, углубиться в тематику будущего магазина. Для чего это нужно? Чтобы сделать правильный дизайн, мы должны понимать, для кого мы делаем интернет-магазин, на какую аудиторию нам нужно рассчитывать, как она себя ведет. Дизайнеру важно знать возраст, пол, социальное положение, профессиональную деятельность и другие характеристики людей, которые будут делать покупки в магазине.

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

Маркетинг в дизайне

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


AIDA. В маркетинге существует такая модель как AIDA. Расшифровывается это так: Attention, Interest, Desire, Action (Внимание, Интерес, Желание, Действие). Принцип её – общий порядок событий, которые могут возникнуть, когда потребитель взаимодействует с рекламой, а в нашем случае – с контентом на страницах сайта. Пользуясь этой системой, мы можем «продать за 4 шага».

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

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

Рис. 3. Как работает AIDA на примере страницы товара

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

Юзабилити

Первое правило – делайте так, как привык пользователь. Расположение элементов должно быть привычным для людей. Не заставляйте человека лишний раз думать, он должен найти всё на привычных ему местах. Наш магазин должен быть понятен любому пользователю, как опытному юзеру, так и ничего не смыслящему чайнику. Правило «дурака» гласит: если даже дурак поймет, то остальные точно поймут, я думаю, вы уже поняли на кого нужно ориентироваться? Структура сайта должна быть понятной и дружелюбной. Перемещение по сайту должно быть свободным, без препятствий и вопросов «как отсюда выйти?». Пользователь всегда должен понимать, где находится нужная ему информация и как до неё добраться.

Сценарии поведения (User Story). Этот этап призван выявить ошибки в логике, расставить приоритеты и улучшить придуманные нами решения. Сценарии поведения – схема общего системного мышления, пошаговый путь пользователя, то, как человек приходит к целям на сайте. Сценарии эти детально описывают варианты решения пользователями конкретных задач, в нашем случае это путь к покупке. Продумывание сценариев поведения предполагает анализ поведения пользователей на страницах сайта: какие действия выполняются, сколько затрачивается времени, что привлекает внимание и т.д. Это применяется до процесса макетирования, чтобы лучше понимать, как проектировать, а также для проверки готовых макетов: все ли мы учли, все ли сделали правильно с точки зрения юзабилити.

Сценарии поведения в нашем случае могут иметь разные логики: старт пользователя с главной страницы магазина, при переходе в магазин из поисковой системы, социальной сети, баннера и др. По данным исследований inFOLIO Research Group, в 2012 году самым популярным средством поиска товаров были поисковые системы – 92% аудитории. Если пользователь, например, искал конкретный товар через поисковую систему и попал на наш сайт – он окажется на странице нужного ему товара, или на странице категории, или на странице статьи-обзора. Одним словом, близко к цели. Но если он у нас впервые – само собой, у него могут возникнуть сомнения, можно ли доверять этому магазину. Его могут заинтересовать разделы «О магазине», или «Контакты», чтобы убедиться в том, что магазин «живой» и его не обманут. Кажется, наш покупатель отклонился от цели, ушёл со страницы товара. Вот поэтому и продумываются разные сценарии поведения, которыми мы с вами должны руководствоваться, создавая дизайн. Если наш покупатель оказался, допустим, на странице контактов, напомните ему о его цели, например, с помощью блока «недавно просмотренные товары». Он увидит фотографию того, что искал, вспомнит, что хотел это купить, и вернется к своей цели.

Рис. 4. Пример сценария поведения по получении консультации

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

Рис. 5. Пример Journey Map

Зачем мы всё это описываем в статье про дизайн? Дело в том, что дизайнер должен мыслить не только как дизайнер, но и как маркетолог, как юзабилист, и как покупатель тоже. Когда мы уже провели исследования, изучили ЦА, проработали маркетинг и собираемся делать дизайн – дизайнер наш должен построить свою работу на основе результатов предыдущих этапов. Как бы взять заложенный фундамент и на его основе уже строить, делать дизайн. Так как всё это – командная работа, последовательная и взаимосвязанная.

Проектирование

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

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

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

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

Рис. 6. Прототип главной страницы интернет-магазина Kibet

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

Рис. 7. Тот же Kibet, но уже в дизайне

Внешний вид, цветовая гамма

По-настоящему хороший дизайн магазина – этот тот, который не сильно заметен. «Хороший дизайн виден сразу. Отличный дизайн незаметен» как выразился Джо Спарано. Дизайн не должен отвлекать внимание пользователя от просмотра товаров, изучения информации, совершения покупок. Но при этом дизайн должен вызывать у пользователя правильные эмоции, которые подготовят его к совершению покупки. Это две стороны медали, которые вызывают конфликт: как сделать дизайн незаметным, но эмоциональным? Ниже мы постараемся ответить на этот вопрос. Очень часто многие допускают ошибку, делая красивые картинки, анимацию и другие «навороты» в дизайне интернет-магазина, но ведь цель то у нас какая? Мы ведь делаем дизайн для покупателей, а не для заказчика, помните это. И, так как это интернет-магазин, где продают товары (а они – самое главное здесь), то нам и нужно выставить их на передний план, а дизайн пусть будет на втором плане, как дополнение и завершение общей картины.

Рис. 7. Примеры, infibeam.com, alibaba.com

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

Если мы хотим создать качественный дизайн, чистый и элегантный, не нужно использовать более 2-3 цветов. Это прописная истина, которой не стоит пренебрегать. Речь идёт лишь о цветовой схеме самого сайта. Другие цвета появятся позже в рекламных баннерах, это нормально, баннеры и должны выделяться и привлекать внимание. Также будет огромное множество фотографий товара самых разных цветов. Но сама цветовая схема сайта не должна содержать много цветов. Не используйте кричащие, ядовитые цвета, они вызовут лишь негативные эмоции, человек не сможет долго находиться на таком сайте. Лучше использовать мягкие и спокойные цвета и цветовые схемы, они будут вызывать умиротворенность и доверие. Соблюдение этого правила станет одной из ступней создания эмоционального фона, который приведет человека к покупке.

Рис. 8. Примеры цветовых схем известных интернет-магазинов: ebay.com, amazon.com, bigbrownbox.com.au

Цвет фона также рекомендуется делать однородным, чистым. Если и применять паттерн, то лучше еле видный, неброский или однородный. Фон не должен отвлекать внимание от информации.

Рис. 9. Примеры использования паттернов и фоновых изображений, hushbabies.com, ballarddesigns.com

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

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

Анонсы от автора:

Курсы по электронной коммерции. Совсем скоро в нашей бизнес-школе «Digitov» стартуют практические курсы от авторов статьи: Проектирование серьезных сайтов, Маркетинг для интернет-магазина и Все о создании интернет-магазина. Спешите записаться на курс и получить скидку!

Книга по электронной коммерции. Мы заканчиваем писать книгу по созданию и продвижению интернет-магазинов. Желающие могут оставить заявку и получить первые экземпляры книги. Для этого нужно отправить на email: info@seclgroup.ru письмо-заявку с темой «Книга по электронной коммерции» и сразу после выхода книги мы отправим подробную информацию.


Новые статьи. Чтобы получать наши новые статьи раньше других или просто не пропустить новые публикации — подписывайтесь на фан страницы SECL Group: Facebook, VK, и Twitter или на фан страницы Digitov, где будут выкладываться обучающие материалы и мероприятия, в том числе бесплатные: Facebook, VK, и Twitter.

Тенденции И Новаторство Веб-Дизайна В Сфере E-Commerce

Современный мир электронной коммерции (e-commerce) меняется быстро, гораздо быстрее, чем стандарты корпоративных сайтов или новостных порталов, значит, это – вызов любому веб-дизайнеру. Но что именно сейчас важно при разработке веб-дизайна интернет-магазина, на что обращают внимание и заказчики и веб-мастера?

Насколько часто каждый из вас посещает интернет-магазины? Наверно, как минимум один раз в неделю-две. То мышку для компьютера надо купить/обновить, то в ближайших магазинах у дома/работы крем для лица закончился, а именно он и нужен! И многое другое, случаев в жизни бесчисленное множество. Но при этом все мы стараемся закупаться в одних и тех же магазинах и только иногда ищем новые, рассматриваем другие сайты. Почему так? Как минимум от того, что они удобны при использовании (не только наличие товара или известность). Отчего же они удобны? Почему, казалось бы, похожие по ассортименту сайты e-commerce совсем разные по посещаемости?

Современный мир электронной коммерции (e-commerce) меняется быстро, гораздо быстрее, чем стандарты корпоративных сайтов или новостных порталов, а значит, это – вызов любому веб-дизайнеру. Вызов, чтобы создать для клиентов возможность удобства покупок и при этом оценить современные тенденции e-commerce и выбрать только самое необходимое для данного вида и конкретного типа сайта.

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

Загадочное меню

Меню в стиле «гамбургера», то есть многослойное, то есть скрытое, с подпунктами и подкатегориями набирает популярность, поскольку позволяет избавить сайты интернет-магазинов от многочисленной лишней информации, страниц и данных. Но, что занятно. Преимущественно, такое меню используют в мобильных приложениях или мобильных версиях сайтов. В десктопном виде оно реже применяется, но имеет и свои вариации. Так, например, интернет-магазины Китая имеют боковое меню, явное и четкое taobao, banggood, gearbest. При том, что дополнительно некоторые категории выносятся на отдельные «плавающие» панели. Мы об этом рассказывали подробнее отдельно. В то же время меню иногда представляется в виде самих товаров Martina Sperl или минималистическим видом Evyi Shop. Также проект Bill Blass представляет интерес, но мы еще вернемся к нему ниже.

И для тех, и для других

Единый дизайн сайта для просмотра на компьютерах, планшетах и смартфонах – обязательное требование заказчиков в 90% случаев. Но работа с адаптивным дизайном весьма сложна, поскольку с каждым годом мониторы пользователями используются с большим разрешением или даже заменяется монитор телевизором. Смартфоны также, при своем огромном ассортименте, обладают разными размерами экрана и разрешением соответственно, и планшеты аналогично. И при этом на всех них сайт должен выглядеть и быть не столько одинаковым, сколько безупречно удобным. Именно поэтому все больше дизайнов создаются с учетом большого разрешения и затем разрабатывается мобильное приложение, либо мобильная версия сайта, либо единый адаптивный дизайн.

Material Design

Material Design до сих пор популярен, как и в 2014 году. Яркий и строгий, он будет еще долго доминировать в веб-дизайне в целом, поскольку идеально подходит для разработки десктопных вариаций сайтов, мобильных, и приложений. Между тем, использовать Material Design для интернет-магазинов сложно, зачастую, можно увидеть частичное его использование, а потому компаний, что решили создать свои сайты в таком стиле очень мало. Например, французский магазин товаров для дома Pa Design, индийский Bewakoof, международный Wildberries, испанский HOMMU. На некоторых Material Design представлен в яркой форме, в иных – как раз таки только основные моменты. Все их лучше видеть вживую.

В движении

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

Новаторы стараются использовать анимацию на кнопках добавления в корзину или добавления в список желаемого товара, значках управления товарами (поворот, увеличение/уменьшения), на загрузочных барах. Интересны варианты анимации в интернет-магазине спортивных товаров из США Fleet Feet Sports, где плитки имеют всплывающий указатель, художественных работ affranchi.myshopify.com, где плитки чуть вздрагивают и меняют оттенок, а проект Good Аs Gold обладает анимационным логотипом, который превращается в загрузочный круг во время прогрузки любой страницы.

Иногда в карточку товаров включают не статическую картинку, а видео товара, как делают это в Wildberries.

Фотографии и видео на витрине

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

Как правило, фотографии используют на главной странице (витрине), но бывают моменты применения и на страницах категорий или товаров. Более того, вместо фотографий размещают и видео. Примеры ниже наглядно демонстрируют описанное выше. Это и eyeheartworld.org, и helmboots.com, и rebel8.com, и puma.com.

Вариативный поиск

Необычный, но весьма удобный вид поиска приходит не как замена стандартному полю, что располагается обычно в верхней части сайта, а как дополнение. Это горизонтальная прокрутка товаров в категории. Ее удобно использовать при большом количестве товаров, чтобы покупатель имел возможность быстрого ознакомления с ассортиментом. Самыми яркими примерами реализации являются Ozon, Jadopado, Tea Place.

Также стоит отметить, что в моду входят все больше яркие цвета и контрастные, нежели светлые и едва-заметные. Разумеется, не стоит забывать об исследованиях Pantone и создавать акцент на важном невыбеленными окрасами.

Авторские сайты e-commerce

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

NORTHERNISM

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

Bill Blass

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

Drybar

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

Подводя итоги

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

И да, возможно банально, но еще и С. Джобс однажды в интервью сказал:


Большинство людей ошибочно считает, что дизайн – это то, как выглядит продукт. Они думают, что это просто внешняя оболочка. По их мнению, дизайнеру просто вручают какую-нибудь коробку и говорят: «Сделай так, чтобы она выглядела красиво». Мы смотрим на это по-другому. Дизайн – это не то, как устройство выглядит, а то, как оно работает.

И данное правило применимо не только к технике и физическим предметам, но и веб-дизайну также, в особенности, к сайтам электронной коммерции.

7 правил веб-дизайна в e-commerce, актуальных в 2020 году

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

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

Чтобы подкрепить все наблюдения конкретным примерами, взглянем на первую десятку самых популярных интернет-магазинов в украинском сегменте e-commerce по данным исследования Фонда электронной коммерции.

Топ 10 онлайн-ритейлеров Украины по данным исследования рынка электронной коммерции Европы в сегменте B2C по итогам 2015 года, проведенному Фондом электронной коммерции при поддержке национальных ассоциаций.

Размещение логотипа и его функция

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

В Eldorado разместили лого в верхнем левом углу страницы. Изображение ведет на главную страницу сайта.

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

В девяти из десяти рассматриваемых нами e-commerce-сайтов логотип размещен в верхнем левом углу, в одном – по центру сверху. Логотипы почти всех интернет-магазинов ведут на главную страницу сайта.

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

Из десяти самых посещаемых интернет-магазинов Украины три разместили навигацию по продукции в левой части страницы и семь – по центру в хедере. Слева навигацию обычно размещают сайты с большим количеством категорий.

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

Строка поиска в хедере

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

Большинство из списка популярных украинских интернет-магазинов имеют такую функцию.

На сайте Lamoda строка поиска находится в хедере рядом с категориями.

Иконка корзины с ссылкой на чекаут

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

Ссылка на корзину на сайте Mobilluck размещена именно там, где ее и ожидают увидеть покупатели.

Стандартные иконки и символы

Онлайн-покупатели уже привыкли к определенному набору привычных веб-символов. С некоторой вариацией все рассмотренные нами интернет-магазины использовали по одному и более таких стандартных символов и иконок в дизайне страницы. Самые распространенные – это, конечно, символы поиска и корзины.

Comfy использует стандартные иконки для обозначения поиска и корзины на сайте.

Используя иконки и символы, обязательно выбирайте те, которые смогут распознать большинство ваших покупателей.

Разметка страницы товара

Лучшее место для фото товара – это левая часть страницы (для относительно больших экранов) и верх страницы под хедером (для экранов мобильных устройств).

Все просмотренные нами сайты последовали этому правилу.

Самое удачное место для размещения фото товара на странице – ее левая часть.

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

Иконку с корзиной следует поместить справа от фото для больших экранов и прямо под фото для экранов мобильных устройств.

“Иконка-гамбургер” для мобильных устройств


Три горизонтальные линии давно стали классическим символом меню в интернет-пространстве. Свое гастрономическое название символ получил благодаря визуальному сходству с гамбургером. Основная задача этого символа – экономия пространства на экранах небольших мобильных устройств.

Почти все интернет-магазины, рассмотренные нами, использовали “иконку-гамбургер” в своей мобильной версии.

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

21 пример e-commerce сайтов с UX новшествами в дизайне

E-commerce сайты уже начали в широком масштабе проявлять признаки зрелости, становясь более изящными и динамичными. Это пример того, как продающий сайт реагирует на современные тенденции развития интернет-бизнеса. Новые технологии, такие как HTML5, CSS3 и jQuery вносят что-то новое в опыт пользования сайтами электронной коммерции. В результате мы можем видеть совершенно потрясающие решения на примерах новых дизайнов интернет магазинов.

Но сначала первое предостережение — к этим ecommerce решениям можно применить безжалостную критику с практической точки зрения. Например, недостаточно информации в карточке товара или вы заметите, что в полях поиска используются крошечных размеров шрифты. Также достаточно спорных вопросов по юзабилити.

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

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

Давайте посмотрим на эти примеры e-commerce сайтов, сделавших попытку внести разнообразие в интернет-бизнес. Их новые идеи заслуживают внимания даже за этот небольшой вклад в развитие электронной коммерции и улучшение UX-дизайна (User eXperience Design).

1. Jack Jones

Кластерные решения и агрегирование по группам однородных товаров — популярный тренд в современной интернет торговле. Создание полных комплектов товаров, сгруппированных по их принадлежности вместо разрозненного их представления покупателям, стимулирует сбыт товаров повышенной стоимости. У Jack Jones есть свои идеи, как помочь покупателям определиться с деталями своего образа, поиграв с разными группами изделий.

2. Shop Rivegauche

Рив Гош (онлайн-магазин косметики и парфюмерии) добавлен в коллекцию удобных для пользователей дизайнов интернет-магазинов, также, за свой функционал. Расширенный поиск, сортировка по брендам, параметрам, типам товара. Элемент TrackBar, с линейной числовой шкалой: при помощи двух ползунков устанавливается нужный ценовой диапазон.

7. Soulland

Много фонового видео на сайте: начиная от главной и до страниц товаров. Переусердствуй дизайнер и получится путаница, но поддержка необходимого баланса делает страницы более оживленными. Также, удачно оформлена обработка ошибок добавления товара в корзину (без выбора размера).

8. Protest

Lookbook – это фото подборка стильных образов. Своеобразный способ привлечь покупателей с реализацией, тут же, этой линейки товаров. Буквальный перевод «заказывать образ». На этом e-commerce сайте для любителей серфинга, вэйкбординга (вейк) и сноубордистов, lookbook посвящен коллекции одежды для серфингистов. Большие изображения и выдвижное боковое меню с единицами товаров, показанных на этой странице. Остается только оформить заказ понравившегося изделия.

9. Vertty

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

Оригинальное решение с совершением покупки по кнопке «get yours» — цвет логотипа инвертируется на белый, а фон страницы меняется в соответствии с цветом выбранного товара.

10. Bellroy

У многих вызывает интерес проводимая компания: «Сделай свой бумажник компактным». У Bellroy веб-сайт подстать их продукции — оригинальный и удобный, с приятным дизайном. Располагают к просмотру функциональные слайдеры с фото товара и полезной информацией. Красиво сочетаются разные шрифты. В раскрывающихся меню использованы товарные ярлыки в виде рисунков от руки. И вся продукция представлена по шкале: от футляра для кредитных и дисконтных карт до туристического кошелька-органайзера — с разбиением на подгруппы. Продуманный дизайн и удобная навигация помогают продающему сайту выполнять свои задачи.

11. House of Fraser

После недавней доработки и модернизации онлайн-магазин House of Fraser выглядит очень неплохо. Использование инновационной технологии True Fit, позволяет магазину минимизировать возвраты товара, помогая потребителю подобрать подходящий размер.

13. Colette Malouf

Исключительно чистый e-commerce сайт в черно-белых тонах с супер минималистичным дизайном.

15. KitchenAid

У этого онлайн-магазина бытовой техники для кухни — очень полезный для пользователей функционал: использование фильтров в поиске товаров, предложения сопутствующих товаров (например, технологические оснастки и приспособления), показ недавно просмотренных товаров с их ценниками, спецификации, мануалы, сравнения, рейтинги и многое другое.

17. Folk

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

18. Greats

Эти кроссовки можно покрутить с помощью мыши.

19. Luvd

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


20. Wild Berries

Опция быстрого просмотра может служить альтернативой переходу на внутреннюю страницу. Находясь в каталоге, вы можете увидеть возможные расцветки товара на моделях, а в диалоговом окне уже сами параметры модели (Определите свой размер). Возможен видео-ролик и есть дополнительное описание, выпадающим списком. Другие полезные опции: фильтр по стилям, брендам, другим параметрам и TrackBar с двумя бегунками для выбора товара в определенном диапазоне цен. Подобные удобства просмотра или получения нужных результатов поиска — пример лучшего удовлетворения потребностей клиентов и хорошего UX-дизайна для интернет-магазина.

21. Nasty Gal

Магазином Nasty Gal «скверная девчонка», завершим обзор UX-дизайнов в электронной коммерции. Это лучший пример соответствия пользовательским ожиданиям (User eXperience) с функциональными возможностями Quick view, LookBook, управление стрелками клавиатуры. Разнообразие опций фильтрации, включая TrackBar. В выпадающем меню Shop, покупателю предложено определиться с выбором: Can’t live without (Не могу жить без) — вечернего наряда / распродаж. Валюта определяется автоматически, но иной выбор сохранится на будущее. Легкостью пользования и своей понятностью этот e-commerce сайт во многом обязан минималистичному стилю, структуре и, конечно же, UX дизайну.

5 инновационных трендов в электронной коммерции в 2020 году

Достигли ли вы всего, к чему стремились, в 2015 году? Сегодня многие вспоминают, чего они смогли добиться за прошедший год, и хотят узнать, что ждет их в наступившем. Поговорим о трендах 2020 года.

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

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

1. Улучшение работы с клиентом через мобильные устройства

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

Важно и то, что некоторые продавцы постепенно переходят на новый уровень, предлагая услугу онлайн-чата. Это моментально соединяет вас с клиентом. Если вы всегда можете предложить им полезный совет через их девайсы, они гораздо вероятнее станут вашими лояльными покупателями. Это также имеет значение и для физических магазинов, у которых есть направление e-commerce.

В 2020 году мобильный шопинг станет доминирующим направлением в электронной коммерции.

2. Контекст — новая персонализация

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

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

Персонализация постепенно заменяется контекстным шопингом. Клиенты начинают обращать внимание на наиболее релевантную информацию.

3. Аналитика в реальном времени

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

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

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

4. Видеомаркетинг

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

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

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

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

Многие бизнесы, работающие в e-commerce, создали свои каналы на YouTube, в то время как другие используют Instagram или Vine для привлечения внимания потенциального клиента. Существует множество возможностей, чтобы присутствовать там, где находится ваш клиент.

5. Социальное взаимодействие

Социальное взаимодействие сегодня на подъеме в мире онлайн-торговли. Одно дело иметь продукты, которые хотят ваши клиенты, другое — подстраиваться под пользователя, но именно это и происходит сейчас на таких платформах, как Etsy.

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

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

Выводы

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

Но в данном случае речь идет не только о том, сколько инвестиций вы вкладывается в инициативы. Во многих случаях траты могут только навредить инновациям, ведь самое главное в этом деле — креативный подход.

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

Цукерберг рекомендует:  Htmlcss - Горизонтальный маркированный список по центру на сайте
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих