Перейти к содержимому



Юзабилити и повышение конверсии. Как создать сайт который продает?

#1 sunseeker7

sunseeker7
  • Пользователь
  • 18 сообщений
  • Репутация: 7
0

Отправлено 27 Ноябрь 2012 - 13:45

Изображение


Привет! Рад снова поучаствовать в конкурсе на этом форуме.

Итак. Поехали!

Как создать сайт который будет хорошо продавать?

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

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

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


До того как вы начнете рисовать дизайн сделайте следующий шаг

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

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


Дизайн и юзабилити

Иногда у блогеров можно увидеть такое высказывание “Контент король”. Это не так, если я попаду на сайт где офигенный контент (я даже об этом могу и не узнать), но жуткий дизайн я закрою его. В разработке сайта главное ВСЕ! Нельзя что-то конкретно выделять, должно быть все едино и дизайн с юзабилити, и контент, и SEO оптимизация и социальные факторы на сайте.

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

Дизайн это не только, то как выглядит сайт, но и то как он работает.

Как узнать, отвратительный мой сайт или нет?
Если вы сделали свой сайт сами и вы не дизайнер - это отстой. Вам нужен новый дизайн.

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

Изображение


Вам самим не отвратительно смотреть на эти фотографии. Сфотографируйте реального человека.


Чем больше вы знаете о чем-то, тем лучше вы можете выявить разницу
Не заказывайте дизайн у фрилансера за $2, скорей всего это будет человек с минимальными знаниями. Для вашего бизнеса вы сделаете только хуже. Вы же не покупает второсортные продукты питания для себя? Так не пожалейте денег и на сайт, все окупится!

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


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


Изображение

Каждая страница на вашем сайте должна иметь самое главное действие - первое действие которое вы хотите чтобы посетители делали на той странице.

Давайте посмотрим на этот сайт LlinguaLeo



Изображение


Теперь подумайте как двигались ваши глаза на странице? Что вы заметили в первую очередь, вторую, последнюю?

Скорей всего в первую очередь вы заметили заголовок “Лучший сервис для изучения...”, потом “Изучайте английский язык в контексте”, а дальше прочитали объясняющий параграф и перешли к фотографиям, а дальше к форме регистрации. На других слайдах есть призыв к действию “Присоединитесь к ним сейчас!”.

И это не случайно! Они так и хотели. А то что вам не важно они сделали незаметным (меню вверху в правом углу).

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

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

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

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

Примерно 50% посетителей не покупают так как не могут найти, то что искали. Вот поэтому качественный поиск очень важен. Поиск должен быть на сайте, он должен быть легко заметен. Качество поиска так же должно быть на отличном уровне.


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

Например я искал фотоаппарат Canon EOS 600D (товар 100% был на сайте), я ввел в поисковую строку Canon 600D, а товара мне не выдало. Найти товар можно было только по точному вхождению названия товара.


На лучшем сайте все интуитивно понятно и людям не нужно думать.


Люди проводят большую часть времени на других сайтах
Имейте в виду, что люди проводят большую часть времени онлайн на ДРУГИХ сайтах. Многие действия на сайтах они делают на автомате. Не изобретайте колесо.

Итак что же важно знать, какие элементы влияют на конверсию:
  • Клик по логотипу всегда должен вести на главную сайта
  • В футере должна быть контактная информация
  • Согласованность: навигация и другие важные элементы должны быть на том же месте по всему сайту.
  • Ссылки должны быть легко отличимы от обычного текста
  • Используйте нормальный язык (например используйте “Контакты” вместо “Связь”)
  • Многие пишут, что лучше делать минимум скроллинга на странице. Это не совсем так. Важную информацию желательно поместить до начала скролинга, а вот страница может быть и длинной.

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


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


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

Вот несколько шагов для улучшения читабельности сайта:
  • Используйте крупны шрифт. 14px, или даже 16px.
  • Оптимизируйте высоту линии между двумя строками текста. Оптимальный размер 24px.
  • Следите за контрастлм между текстом и фоном. Если вы будете использовать светло-серый текст на белом фоне это не хорошо.
  • Разбивайте текст на абзацы, его легче читать чем один длинный абзац.
  • Используйте подзаголовки. Это поможет легче читать текст. Сделайте их чуть больше основного текста и выделите жирным. Запомните, большинство людей не читают полностью текст они его бегло просматривают.
  • Используйте буллит поинты.
  • Используйте фотографии. Для товаров используйте качественные и большие фотографии. Взгляд людей в первую очередь “схватывается” на графике, а потом уже на тексте. Посмотрите сайт apple, вы увидите потрясающие фотографии их продукции.
  • Используйте короткие предложения.

Повышаем доверие к вашему сайту
Вызывающий доверие сайт делает посетителей лояльными и они:
  • доверяют всему что говорится на вашем сайте;
  • спокойно оставляют личную информацию;
  • уверены, что на вашем сайте стоит потратить деньги.
Приведу небольшой чек-лист трастового сайта:
Пройдитесь по этому списку и посмотрите что вы можете изменить на своем сайте для повышения доверия.
  • Дизайн - мы уже об этом поговорили.
  • Сделайте ваш телефон и адрес всегда видимыми.
  • Ссылка на контакты всегда должны быть в меню.
  • Отображайте только релевантную информацию.
  • Используйте простой язык. Пишите тексты так что бы вас понимали ваши клиенты.
  • Следите за грамматикой.
  • Покажите фотографии ваших работников.
  • Ссылка на важную информацию для клиентов должна быть видима. Например для интернет-магазина - это оплата и доставка.
  • Если вы продаете какой-то товар, то должны быть подробная информация, качественная и большая фотография.
  • Всегда показывайте цену. Некоторые до сих пор пишут типа “цена по запросу”, “скачать прайс-лист”, да-да такие магазины все еще существуют.
  • Используйте реальные отзывы. Доверие потенциальных покупателей вырастет.
  • Присутствуйте в социальных сетях. Да без них уже никуда.
  • Хватит уже использовать мигающие баннеры и жуткие всплывающие окна. Сравните что вам больше понравиться:
    • Вы заходите в бар где ужасно накурено и невозможно дышать, к вам подходят пара официантов и пытаются что-то впарить, а еще суют под нос их рекламу, в то время как вы пытаетесь прочитать меню.
    • Или же. Вы заходите в уютный ресторан, где свободно дышите, садитесь за столик и спокойно читаете меню, а потом подзываете официанта и делаете заказ.
    • Думаю второй вариант выберут все. Так и с сайтами, сведите рекламу до минимума.
  • Скорость сайта важна! Используйте CDN для оптимизации доставки контента. Оптимизируйте код сайта.
  • Будьте хорошим и честным человеком. Будьте дружелюбны, щедры и честны - всегда.
    Повышение конверсии
Повышение конверсии

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

Большинство владельцев оставляют сайты такими же как и при создании. Это большая ошибка!

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

Допустим ваш сайт дает вам 200 000 грн. дохода в год, за два года это 400 000 грн. А теперь вы только представьте себе если проведете А/В тестирование важных страниц и это повысит ваши продажи на 15%. За два года это даст вам дополнительные 60 000 грн. Неплохо да?


А/В тестирование (или сплит-тестирование). Это отличный способ превратить посетителей в покупателей. Тестировать, тестировать и еще раз тестировать.

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

Не забывайте спрашивать ваших посетителей. Иногда можно выявить неявные на первый взгляд проблемы.

Например вы продаете софт с бесплатной пробной версией и при регистрации запрашиваете номер кредитки.


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



Повысить конверсию можно путем ее оптимизации. Разобьем оптимизацию конверсии на 5 шагов:
  • Подумайте об основных конверсиях. Чего вы хотите достичь?
  • Определите важные элементы на вашем сайте у которых есть потенциал оптимизации.
  • Соберите качественную информацию. Соберите мнения посетителей их чувства, мнения. Используйте инструмент онлайн опросов для сбора этой информации. Даже вопрос “Вы считаете эту страницу полезной?” может дать необычные ответы.
  • Создаем и внедряем А/В тестирование. Это тестирование поможет вам понять какая из тестовых страниц лучшим образом конвертирует посетителей в клиентов. Вы сможете протестировать различные элементы сайта по отношению к другим и найдете наиболее эффективные варианты.
  • Измеряйте, тестируйте и повторяйте. Оптимизация конверсии это проект не на один раз. Вы можете постоянно проверять различные элементы вашего сайта и всегда будете находить способы улучшения. Главное убедитесь что вы тратите время на ценные элементы, а не тратите его попусту.


Какие же элементы важны при тестировании?
  • Заголовки. Они должны быть сильными, убедительными и правдоподобными, отражающие всю суть вашего главного предложения. Самое важное пишите в начале заголовков, т.к. в выдаче Google видно только первые 65 символов заголовка.
  • Макет страницы полностью, навигация.
  • Ценностное предложение - это основная причина почему посетитель должен купить у вас. Создайте убедительное и четкое ценностное предложение.
  • Размер кнопки, а так же текст призыва к действию (CTA). Например - “Присоединяйтесь сейчас и получите XYZ” vs “Зарегестируйтесь”.
    • Если вы где-то прочитали о том, что какой-то определенный цвет для кнопки лучше другого, не верьте этому, для каждого сайта есть свой идеальный цвет. Все должно быть в контрасте с вашим сайтом.
  • Цвет призыва к действию.
  • Размещение CTA на странице.
  • Форма CTA (прямоугольная vs закругленные углы vs круглая кнопка).
  • Изображения, которые являются частью процесса покупки. (Еще раз повторюсь - используйте фотографии реальных людей).
  • Описание товара.
  • Фотография товара.
  • Корзина.
  • Цена, скидки. Пробуйте разные цены - 40 грн., 39 грн, 39,99 грн. и прочее. Со скидками так же - “-20%”, “от 20%”, “на 20% ниже” и т.д.
  • Количество вариантов предложений. Например для хостинговой компании это предложение пакетов хостинга. Чем больше пакетов вы предложите тем больше вероятность потерять потенциального клиента. Не забывайте о “парадоксе выбора”, больше вариантов предлагаете больше шанс потерять клиента, запутать его.

Изображение


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

Изображение


Изображение


Отличный пример sotmarket.ru. Товар можно купить в 1 клик. Это потрясающе, мне нужно ввести номер телефона и все! Не нужно заполнять email, почтовый адрес и пр.

Изображение



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


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


С помощью каких инструментов тестировать?
  • Бесплатный инструмент можете найти в Google Analytics в Стандартные отчеты - Содержание - Эксперименты.
  • Из платных могу посоветовать Visual Website Optimizer и Optimizely.
  • Создавайте опросы на сайте с помощью https://qualaroo.com/.
Итоги

Перейдя на ваш сайт потенциальный покупатель должен сразу получить ответы на следующие вопросы:
  • О чем этот сайт?
  • Что я могу здесь сделать?
  • Что здесь полезного для меня?
  • Почему я должен купить у вас, а не у конкурентов?
Если ваш сайт отвечает на эти вопросы в полном размере и не нужно тратить много времени на поск ответов, то это круто!

Не жалейте денег на качественный дизайн. Первое впечатление всегда важнее второго.

Понимайте ваших посетителей. Вы сможете ими управлять.

Тестируйте! Тестируйте! Тестируйте!


При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

Изображение

 

 

  • 1


Оформление форума – IPBSkins.ru