Меня зовут Влад и вместо длинных вступлений я сразу дам вам проверенный ответ на вопрос "Что нужно показывать на моем сайте?", который я, уже много лет, в разной форме слышу от своих клиентов (восновном это предприниматели, которые имеют классную идею, классный бизнес и хорошо понимают, что им нужен сайт):
Заходя на адекватный сайт, который дает (вместо того чтобы отбирать) возможность купить то, что на нем продают, посетитель на протяжении первых 5 секунд четко и недвусмысленно понимает 3 вещи:
- Что это?
- Зачем это нужно?
- Что конкретно я получу?
У вас может быть крутая идея, крутой бизнес, но ваш сайт может "отрезать" львиную долю клиентов, потому что большинство людей заходя на сайт ищут (чаще всего бессознательно) ответы на эти 3 очень важных вопроса.
Самая первая ошибка большинства владельцев бизнес-сайтов в том, что они вообще никак не отвечают своим посетителям на эти вопросы, и тем самым "отбирают" возможность у них купить - сейчас мы это разберем *по косточкам*...
На первый взгляд, когда есть конкретные вопросы, на которые нужно ответить пользователю - все кажется очень просто... Но как же добиться чтобы все посетители смоги правильно "считать" нужные им ответы до того как истечет их "кредит внимания" (за 5 секунд) ?
Поэтому, давайте обозначим задачу этой статьи следующим образом:
После того как вы дочитаете эту статью до конца, у вас будет конкретный план и пример того, как улучшить сайт, сделав его таким, который "с порога" громко и красиво говорит заинтересованному посетителю, что здесь есть то, что он сейчас ищет и дает возможность легко купить это.
Если этого не произойдет - в обязательном порядке нужно излить все свои возмущения и комментариях.
Итак, чтобы разобраться с нашими тремя наиболее часто встречающимися ошибками, мы вначале рассмотрим "удачный" пример сайта, с объяснением почему он удачный. Потом проанализируем "неудачный" пример, разберемся в чем его проблемы и я конкретно на нем покажу, как можно изменить дизайн, чтобы он стал успешнее конвертировать посетителей в покупателей.
Важный момент... Почему так важно мгновенно ответить пользователю на вышеназванные вопросы? - Потому что чаще всего, мы даже не осознаем, что есть нашим конкурентом в борьбе за внимание пользователя в интернете…
В последнее время, например, на YouTube очень сложно не наткнуться на очередное домашние видео, где кто-то делает какие-то полностью безбашенные трюки или проводит эксперименты, в прямом смысле, рискуя своей жизнью. Вот то, с чем нам прийдется конкурировать за внимание, а не с тем, с чем мы думаем мы конкурируем.
Если прибавить к вышесказанному тот факт, что современным людям, чем дальше тем сложнее концентрировать внимание и не отвлекаться - у вашего сайта есть, в лучшем случае 5 секунд на то, чтобы дать понять пользователю: Что это? Зачем это нужно? Что конкретно я получу? (теперь понятно почему такие рамки?..)
Хорошая новость в том, что люди всегда имеют проблемы, и им нужно искать их решение. Именно поэтому на своем сайте мы должны как можно быстрее дать пользователю понять что у нас есть то, что он сейчас ищет.
Пример страницы Apple
Предъявим этой странице наши вопросы:
1. Что это?
Большой текст говорит мне что это iPad - революционное устройство, которое я тут же вижу на картинке.
2. Зачем это нужно?
Изображение устройства показывает - эта штука позволяет заходить в интернет, без компьютера.
3. Что конкретно я получу?
Я получу все эти продвинутые технологии, в виде магического устройства по невероятной цене - от $499
Несколько секунд и мне понятно что здесь происходит. Очень конкретно и лаконично. Мои шансы отвлечься от ответов на самые главные вопросы практически сведены к нулю.
Все очень очевидно и просто, но как мы увидим из следующего примера (и в чем я постоянно убеждаюсь на практике), для большинства людей это не так просто сделать...
Пример страницы Украинского производителя
Предлагаю обсудить вот такой сайт - внимание на экран (кстати на все картинки в этом блоге можно нажимать, чтобы увеличить):
Большинство людей сразу скажет, что это довольно симпатичный, яркий и минималистичный дизайн, и я с этим согласен. Это однозначно далеко не самый худший вариант дизайна, и вместе с этим, здесь есть что обсудить.
Приступим…
Что это?
Shop = магазин, хорошо, понятно. (это в том случае если посетитель, который скорее всего украинец, достаточно знает английский язык)
Зачем это нужно?
Если это магазин - значит, чтобы что-то купить, хорошо. Но что именно? - Я понятия не имею. Вижу детей, пункты меню "Девочкам", "Мальчикам". Мои варианты:
- Это какие-то стаканчики, или напитки в стаканчиках, которые они держат в руках на фото?
- Это детский фотограф?
- Это детская одежда?
- …
У меня множество вариантов что это может быть. Здесь, если по-хорошему - то все, я уже закрыл сайт…
Но мы в тестовых целях разберем пример до конца... Пару минут по рассматривав страницу (я напомню, что "рычаг" переключения с нашего сайта на YouTube или нечто другое, находится в руках пользователя, на расстоянии 2-х миллиметров от его пальца, и поэтому вашему сайту никогда не дадут возможность 2 минуты объяснять зачем он нужен) так вот, через 2 минуты я обнаружил такой текст:
Ага, здесь продают детские шапочки! Отлично, на странице есть текст, который дает понять зачем мне может быть нужно остаться на нем. Но почему этот текст, который должен быть первым, что я вижу на странице, такой мелкий и второстепенный?
Эта проблема стает еще более очевидной, если учесть где он находится:
Что конкретно я получу себе?
Понятия не имею, это все может значить что угодно…
С точки зрения удержания посетителя на странице, такие "ответы" на самые первые бессознательные вопросы - это "криминал". Это первая ошибка, которую мы будем исправлять.
Проблема #1
Сайт требует слишком много времени на то, чтобы разобраться зачем он нужен или "Куда я попал и зачем?"
Да, эти выводы - всего лишь то, как воспринял их один конкретный человек (я), и воспринимать это как "окончательный диагноз" было бы не разумно. Поэтому, чтобы расширить понимание, я проанализировал мнение некоторого количества людей, которым я показал этот сайт, и через 5-10 секунд попросил ответить на вопрос "Зачем этот сайт нужен?" (они видели его впервые)
Вот некоторые из них...
Первое впечатление людей, которые впервые увидели сайт и попытались понять зачем он нужен в течении 5-10 секунд:
- Запомнилось "dembo shop", картинка с канатами и что указаны контакты… Сайт похоже о каких-то детских самоделках.
- Увидел "dembo shop" детей, деревянную стену, что продают - не понял.
Проблема видна? Видна. Хорошо, что с этим можно сделать?
Решение проблемы "Куда я попал и зачем?" при открытии сайта на среднестатистическом ноутбуке
Итак, задача в том чтобы из дизайна, который не отвечает на 3 главных вопроса сделать такой, который отвечает, и отвечает понятно.
Продумываем понятные ответы на эти вопросы и формулируем их коротко и текстово, пока без дизайна:
Это то, чего на сайте сейчас не хватает. Нам нужно, без разрушения всего ценного что уже есть в дизайне, внедрить эти ключевые ответы. Внедряю, и по пути, так же исправляю некоторые недочеты в дизайне, которые меня смущают. Например, большие композиционные "дыры" в макете:
И еще изменяю акцентный цвет с красного (который вроде бы и резонирует с чем-то модным, и вместе с этим, не совсем "детский" ) на оранжево желтый, и поправляю другие мелочи...
Решение
Это сработает в разы лучше чем то что есть…
Здесь есть ответы на 3 главных вопроса, которые правильно сориентируют пользователя, и расположены они таким образом, что вам сложно будет просканировать взглядом страницу так, чтобы их не заметить, и вот почему:
Последовательность ключевых элементов, на которые обратит свое внимание пользователь в большинстве случаев определяется, в первую очередь, привычным движением глаз во время чтения (слева направо и сверху вниз). Это самая сильная привычка "считывать" какую-либо информацию.
Да, кроме этого есть еще второстепенные "направители" нашего взгляда, такие как "визуальный вес" и контраст элемента, или, например, то место, куда смотрят изображенные на сайте люди (мы сразу, не отдавая себе в этом отчет, следим за их взглядом)… Но в первую очередь наше внимание направляет именно привычка чтения.
А значит, первое что увидит наш посетитель в данном случае - это название магазина "DEMBOshop" и текст "Магазин шапочек и аксессуаров для Ваших детей".
Исходя из наблюдений опрошенных людей, и в соответствии с доступными результатами исследований движения глаз человека при просмотре сайтов, фокус внимания у пользователей будет передвигаться примерно так (за 5-10 секунд просмотра):
Что сказали опрошенные, посмотревшие эту версию 5-10 секунд:
- Здесь продают детские шапки для мальчиков и девочек.
- Увидел что это Dembo shop, что продают детские шапочки и их телефоны
Нам понятно что это, зачем это, и что конкретно я могу получить - значит этот вариант нам подходит.
Проблема #2
Дизайн не адаптирован под мобильные устройства или "Что если я зашел со смартфона?"
Процент людей, которые делают покупки в интернете с помощью смартфона сейчас настолько большой, что сайты просто ОБЯЗАНЫ быть адаптированным под экраны смартфонов, это даже не обсуждается.
Тем не менее, вот как сейчас выглядит сайт магазина, открытый на смартфоне:
Если даже я очень захочу попытаться воспользоваться магазином с телефона, я не смогу попасть даже в нужный мне раздел...
Решение проблемы "Что если я зашел со смартфона?"
Адаптивность сайтов, по хорошему, заслуживает отдельного поста на много-много страниц, но основной принцип ее примерно такой:
Именно при таком подходе все блоки и элементы внутри них остаются читаемыми. Соответственно принципу, перестраиваем наш дизайн под узкие мобильные экраны:
Решение
Проблема #3
Удлиненный путь от перехода на сайт до покупки или "Как мне дать вам денег побыстрее?"
Конечный пункт назначения покупателя на этом сайте - переход в свою корзину и оплата.
Здесь ключевую роль играет наше представление о пользователе, потому что, в основном, никто понятия не имеет для кого создает сайт...
Так вот, сейчас я покажу вам ту модель поведения пользователя, которая показывает ситуацию немного утрировано (на самом деле намного менее утрировано, чем вы можете подумать), и в которую нам будет очень выгодно верить, что сайт делается именно для него...
Знакомьтесь! - это Леня.
Леня 24 часа в сутки и 7 дней в неделю очень хочет развлекаться на YouTube, решать все свои проблемы "в один клик" и очень не хочет никаких усложнений (если я что-то захотел - то дайте мне это прямо сейчас таким способом, чтобы мне не нужно было думать)
Cейчас весь путь Лёни из пункта "А" (когда он только зашел на сайт и разбирается что здесь к чему) в бункт "В" (переход в корзину с целью оплатить заказ) выглядит примерно так:
1. Зашел на главную страницу сайта
↓
2. Перешел в раздел "для мальчиков"
↓
3. Перешел на страницу нужного товара
↓
4. Нажал "в корзину"
↓
5. Перешел в корзину оплачивать
Хотя, мог бы выглядеть вот так:
1. Зашел на главную страницу сайта
↓
2. Положил нужный товар в корзину
↓
3. Перешел в корзину оплачивать
Решение проблемы "Как мне дать вам денег побыстрее?"
Чтобы упростить Лёнин путь от "А" до "В" - нужно чтобы на главной странице были возможности выбрать товар и положить его в корзину.
Для этого нам понадобятся карточки товаров из страницы "каталог" текущего сайта, доработанные так, чтобы с их помощью можно было без лишних кликов узнать все что нужно о товаре и положить его в корзину.
Дорабатываем карточки...
Есть хорошие карточки. Теперь делаем более полноценный фильтр для списка товаров и добавляем блок со всеми товарами магазина и фильтром прямо на главную страницу. В итоге имеем вот такую главную страницу:
Решение
Ссылка на картинку в полном разрешении - Главная страница
Теперь все что Лёне нужно сделать чтобы быстро купить шапку своему сынку Леше:
"Не правда! чтобы что-то покупать мне нужно сразу изучить целую кучу информации о товаре, посмотреть много фото ультравысокого качества и тд... Как я смогу это все сделать в этой маленькой карточке товара?"
Это разумный вопрос. Всегда есть часть аудитории, которая долго и внимательно изучает перед тем как покупать. И вместе с этим, есть другая часть, которая рада возможности покупать все в один клик. Эта карточка товара дает возможность быстро купить для вторых, а так же для тех, кто уже по изучал все что можно, но не купил, а сейчас решил купить. И, конечно же, она не отменяет полноценной страницы продукта, на которой все будет "по полной программе" - большие фото, длинное и детальное описание и тд.
Итоговое решение с исправленными главными ошибками дизайна выглядит так:
Мое громкое обещание таково, что если вы будете делать дизайн своих сайтов четко по этому плану (последовательно "вести" внимание пользователя по ответам на 3 главных вопроса, исключая все возможности понять их двусмысленно или отвлечься) - вы будете выигрывать внимание заинтересованных в вашем продукте посетителей даже у YouTube.
Каждый месяц я выбираю 2 сайта из тех, которые мне присылают и индивидуально разбираю ошибки, которые "отрезают" посетителей. Как итог - присылаю владельцу отчет с вариантами улучшения на почту.
Чтобы подать заявку на разбор своего сайта (пока это бесплатно) - нажмите синюю кнопку и вы перейдете на страницу с формой заявки...
