Skip to content

Бесплатный отчет + Решение на живом примере: Как избавиться от трех распостраненных «убийц продаж» в дизайне вашего сайта, о которых большинство владельцев бизнес-сайтов даже не догадываются…


Меня зовут Влад и вместо длинных вступлений я сразу дам вам проверенный ответ на вопрос "Что нужно показывать на моем сайте?", который я, уже много лет, в разной форме слышу от своих клиентов (восновном это предприниматели, которые имеют классную идею, классный бизнес и хорошо понимают, что им нужен сайт):

Заходя на адекватный сайт, который дает (вместо того чтобы отбирать) возможность купить то, что на нем продают, посетитель на протяжении первых 5 секунд четко и недвусмысленно понимает 3 вещи:

  1. Что это?
  2. Зачем это нужно?
  3. Что конкретно я получу?

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

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

На первый взгляд, когда есть конкретные вопросы, на которые нужно ответить пользователю - все кажется очень просто... Но как же добиться чтобы все посетители смоги правильно "считать" нужные им ответы до того как истечет их "кредит внимания" (за 5 секунд) ?
Поэтому, давайте обозначим задачу этой статьи следующим образом:

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

Если этого не произойдет - в обязательном порядке нужно излить все свои возмущения и комментариях.

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

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

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

Если прибавить к вышесказанному тот факт, что современным людям, чем дальше тем сложнее концентрировать внимание и не отвлекаться - у вашего сайта есть, в лучшем случае 5 секунд на то, чтобы дать понять пользователю: Что это? Зачем это нужно? Что конкретно я получу? (теперь понятно почему такие рамки?..)

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

Пример страницы Apple

осадочная страница Apple для продажи первой версии iPad (часть страницы, которая видна без прокрутки)
Посадочная страница Apple для продажи первой версии iPad (часть страницы, которая видна без прокрутки)

Предъявим этой странице наши вопросы: 

1. Что это?
Большой текст говорит мне что это iPad - революционное устройство, которое я тут же вижу на картинке.

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

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

На экране устройства показан новостной сайт, открытый через привычный интернет-браузер.
На экране устройства показан новостной сайт, открытый через привычный интернет-браузер.

3. Что конкретно я получу?
Я получу все эти продвинутые технологии, в виде магического устройства по невероятной цене - от $499

Описание выгод (которые я могу получить для себя имея этот продукт) видны сразу под названием продукта.
Описание выгод (которые я могу получить для себя имея этот продукт) видны сразу под названием продукта.

Несколько секунд и мне понятно что здесь происходит. Очень конкретно и лаконично. Мои шансы отвлечься от ответов на самые главные вопросы практически сведены к нулю.

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

Пример страницы Украинского производителя

Предлагаю обсудить вот такой сайт - внимание на экран (кстати на все картинки в этом блоге можно нажимать, чтобы увеличить):

Страница, через которую украинский производитель DEMBOhouse продает свои продукты.
Страница, через которую украинский производитель DEMBOhouse продает свои продукты.

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

Приступим…

Что это?
Shop = магазин, хорошо, понятно. (это в том случае если посетитель, который скорее всего украинец, достаточно знает английский язык)

В логотипе присутствует слово "shop"
В логотипе присутствует слово "shop"

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

  • Это какие-то стаканчики, или напитки в стаканчиках, которые они держат в руках на фото?
  • Это детский фотограф?
  • Это детская одежда?

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

Но мы в тестовых целях разберем пример до конца... Пару минут по рассматривав страницу (я напомню, что "рычаг" переключения с нашего сайта на YouTube или нечто другое, находится в руках пользователя, на расстоянии 2-х миллиметров от его пальца, и поэтому вашему сайту никогда не дадут возможность 2 минуты объяснять зачем он нужен) так вот, через 2 минуты я обнаружил такой текст:

Объясняющий текст "Детские шапочки для девочек".
Объясняющий текст "Детские шапочки для девочек".

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

Эта проблема стает еще более очевидной, если учесть где он находится:

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

Что конкретно я получу себе?
Понятия не имею, это все может значить что угодно…

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

Проблема #1
Сайт требует слишком много времени на то, чтобы разобраться зачем он нужен или "Куда я попал и зачем?"

Да, эти выводы - всего лишь то, как воспринял их один конкретный человек (я), и воспринимать это как "окончательный диагноз" было бы не разумно. Поэтому, чтобы расширить понимание, я проанализировал мнение некоторого количества людей, которым я показал этот сайт, и через 5-10 секунд попросил ответить на вопрос "Зачем этот сайт нужен?" (они видели его впервые)

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

Вот некоторые из них...

Первое впечатление людей, которые впервые увидели сайт и попытались понять зачем он нужен в течении 5-10 секунд:

  • Запомнилось "dembo shop", картинка с канатами и что указаны контакты… Сайт похоже о каких-то детских самоделках.
  • Увидел "dembo shop" детей, деревянную стену, что продают - не понял.

Проблема видна? Видна. Хорошо, что с этим можно сделать?

Решение проблемы "Куда я попал и зачем?" при открытии сайта на среднестатистическом ноутбуке

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

Продумываем понятные ответы на эти вопросы и формулируем их коротко и текстово, пока без дизайна:

Текстовая информация, которая дает ответы на 3 главных вопроса посетителя.
Текстовая информация, которая дает ответы на 3 главных вопроса посетителя.

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

Учитывая, что контакты справа чувствуют себя
Учитывая, что контакты справа чувствуют себя "тесно" — это пространство пустует неоправданно.

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

Решение

Переработанный дизайн «первого экрана» DEMBOshop, с учетом ошибок текущего варианта.
Переработанный дизайн «первого экрана» DEMBOshop, с учетом ошибок текущего варианта.

Это сработает в разы лучше чем то что есть…

Здесь есть ответы на 3 главных вопроса, которые правильно сориентируют пользователя, и расположены они таким образом, что  вам сложно будет просканировать взглядом страницу так, чтобы их не заметить, и вот почему:

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

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

А значит, первое что увидит наш посетитель в данном случае - это название магазина "DEMBOshop" и текст "Магазин шапочек и аксессуаров для Ваших детей".

Исходя из наблюдений опрошенных людей, и в соответствии с доступными результатами исследований движения глаз человека при просмотре сайтов, фокус внимания у пользователей будет передвигаться примерно так (за 5-10 секунд просмотра):

Последовательность элементов по которым пользователь будет «считывать» страницу.
Последовательность элементов по которым пользователь будет «считывать» страницу.

Что сказали опрошенные, посмотревшие эту версию 5-10 секунд:

  • Здесь продают детские шапки для мальчиков и девочек.
  • Увидел что это Dembo shop, что продают детские шапочки и их телефоны

Нам понятно что это, зачем это, и что конкретно я могу получить - значит этот вариант нам подходит.

Проблема #2
Дизайн не адаптирован под мобильные устройства или "Что если я зашел со смартфона?"

Процент людей, которые делают покупки в интернете с помощью смартфона сейчас настолько большой, что сайты просто ОБЯЗАНЫ быть адаптированным под экраны смартфонов, это даже не обсуждается.

Тем не менее, вот как сейчас выглядит сайт магазина, открытый на смартфоне:

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

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

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

Решение проблемы "Что если я зашел со смартфона?"

Адаптивность сайтов, по хорошему, заслуживает отдельного поста на много-много страниц, но основной принцип ее примерно такой:

Пример правильного отображения сайта на экране мобильного устройства (именно при таком подходе все блоки и элементы внутри них остаются читаемыми)
Пример правильного отображения сайта на экране мобильного устройства.

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

Решение

Верстка главной страницы под экраны мобильных устройств. (первый экран)
Верстка главной страницы под экраны мобильных устройств. (первый экран)

Проблема #3
Удлиненный путь от перехода на сайт до покупки или "Как мне дать вам денег побыстрее?"

Конечный пункт назначения покупателя на этом сайте - переход в свою корзину и оплата.

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

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

То, что просто для самого ленивого и невнимательного - будет просто и для всех остальных.
То, что просто для самого ленивого и невнимательного - будет просто и для всех остальных.

Знакомьтесь! - это Леня.

Леня 24 часа в сутки и 7 дней в неделю очень хочет развлекаться на YouTube, решать все свои проблемы "в один клик" и очень не хочет никаких усложнений (если я что-то захотел - то дайте мне это прямо сейчас таким способом, чтобы мне не нужно было думать)

Cейчас весь путь Лёни из пункта "А" (когда он только зашел на сайт и разбирается что здесь к чему) в бункт "В" (переход в корзину с целью оплатить заказ) выглядит примерно так:

 1. Зашел на главную страницу сайта

2. Перешел в раздел "для мальчиков"

3. Перешел на страницу нужного товара

4. Нажал "в корзину"

5. Перешел в корзину оплачивать

Хотя, мог бы выглядеть вот так:

1. Зашел на главную страницу сайта

2. Положил нужный товар в корзину

3. Перешел в корзину оплачивать

Решение проблемы "Как мне дать вам денег побыстрее?"

Чтобы упростить Лёнин путь от "А" до "В" - нужно чтобы на главной странице были возможности выбрать товар и положить его в корзину.

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

Дорабатываем карточки...

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

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

Решение

Главная страница, которая позволит сократить количество кликов до покупки.
Главная страница, которая позволит сократить количество кликов до покупки.

Ссылка на картинку в полном разрешении - Главная страница

Теперь все что Лёне нужно сделать чтобы быстро купить шапку своему сынку Леше:

Сайторазбор
Все действия, которые нужны для перехода к корзине и оплате.

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

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

Итоговое решение с исправленными главными ошибками дизайна выглядит так:

Доработанный дизайн сайта 
Доработанный дизайн сайта DEMBOshop.
Мое громкое обещание таково, что если вы будете делать дизайн своих сайтов четко по этому плану (последовательно "вести" внимание пользователя по ответам на 3 главных вопроса, исключая все возможности понять их двусмысленно или отвлечься) - вы будете выигрывать внимание заинтересованных в вашем продукте посетителей даже у YouTube.

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

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

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *