Москва
(495)240-82-20
Ростов-на-Дону
(863)219-77-00
   

Дизайн продающего сайта

Дизайн продающего сайта
29.12.2014
Доклад семинара «1С-Битрикс»: Веб для бизнеса

Первые продающие сайты

Amazon.jpg

Понятие интернет-магазин зародилось в Америке. Идея создания первого интернет-магазина появилась у Джеффа Бизоса в 1994 году.

В 1994 г. Д. Бизос открыл компанию Amazon, а в июле 1995 года открылся первый интернет-магазин в мире - Amazon. Качественно проработанная маркетинговая политика позволила «Амазону» занять высокие позиции в этом сегменте рынка. Каждый год обороты магазина увеличивались кратно. До сегодняшнего дня Amazon – один из крупнейших интернет-магазинов в мире.

А крупнейший интернет-магазин в рунете торгующий электроникой - это СотМаркет (SotMarket.ru). Он обладает огромнейшим ассортиментом и позволяет купить все – от карт памяти до ноутбуков.

Сотмаркет.jpg

Дизайн интернет магазина

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

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

По статистике, человек в течение лишь нескольких секунд решает (на уровне подсознания), оставаться ему на сайте или нет.

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

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

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

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

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

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

reebook.jpg

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

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

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

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

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

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

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

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

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

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

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

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

Юзабилити

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

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

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

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

kibet.jpg

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

Проектирование – один из самых важных и сложных этапов разработки сайта.

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

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

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

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

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

Пример плохого сайта:

Пример неудачного дизайна.jpg

Цвета

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

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

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

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

Adidas1.jpg

Adidas2.jpg

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

Список используемой литературы