|
|
|
|
|
Мы все знаем, что профессиональный веб дизайн и конверсия идут рука об руку. Но это конкретно объединяет эти 2 понятия?
Многие маркетологи ошибочно воспринимают сайт как статическое образование, вроде обложки книги. На самом деле сайт это гораздо больше. Он интерактивен, через него происходит процесс взаимодействия с пользователем. Поэтому сделать красивый сайт это далеко не вся работа. К счастью, был проведен целый ряд исследований, отслеживающие движения глаз посетителей при первом попадании на сайт.
Воспользуйтесь этими данными и вы оставите своих конкурентов далеко позади. Начнем с моего самого любимого.
1. Заголовки действительно играют важную роль.
В одном из исследований посвященному дизайну, исследовалось насколько важны заголовки. Ответ: чрезвычайно важны.
Как оказалось, на заголовки смотрят даже чаще, чем на картинки. Можно сказать, что посетителя на домашней странице интересуют исключительно заголовки. Что еще интереснее, у вас есть только 1 секунда, что бы привлечь внимание пользователя.
Это означает, что в заголовке вам надо предельно точно отразить всю суть. Кроме того, заголовки должны бросаться в глаза и заставлять людей читать и кликать.
Из-за временных ограничений, важно выделять слова жирным цветом и использовать нумерацию. Статьи использующие в своем заголовке цифры очень хорошо работают в блогах, заставляя читателя читать дальше.
В своем недавнем посте The Marketer’s Guide to Cult Addiction я создал заголовок таким образом, что он в первую очередь привлек внимание целевой аудитории, а затем поддержал интерес эмоционально окрашенным словом Cult (культ).
Мне очень понравилось, как мой коллега Рафал Томал оформил домашнюю страницу Copyblogger. После прочтения заголовка всем сразу становится ясно какие продукты и услуги они предоставляют.
Без четко сформулированной концепции вашего бизнеса вы потеряете многих потенциальных клиентов. Насколько хорошо ваши заголовки отражают то, что вы предлагаете?
2. Выделяем самое главное.
Любой профессиональный дизайнер скажет, что цвета на сайте должны сочетаться и быть в единой цветовой гамме. Но должны ли быть на сайте яркие цветовые акценты?
В своих работах Ресторфф открыл эффект, названный в его честь, когда объект, выделяющийся из ряда сходных однородных объектов, запоминается лучше других.
Дарек Халперн на основе этого исследования попытался выяснить, какой цвет лучше влияет на конверсию. Как оказалось, лучше всего повышает конверсию тот цвет, который выделяется на остальном фоне.
Как вы видите из скриншота, мы сделали кнопку, предлагающую 15 дневную бесплатную версию ярко зеленой, на на обычном бело-синем фоне. Ее просто невозможно не заметить. А это именно то, что нам и надо.
Прежде всего, нужно определиться с основной цветовой гаммой и акцентами.
Затем нужно подобрать цвет, который будет с ними контрастировать. Это и будет ваш призыв к действию.
Так, если вы придерживаетесь центрально-зеленой гаммы, кнопку призывающую к действию можно сделать ярко оранжевой. Например, как у Mint.
3. Используем пробелы.
Уже упоминавшее выше исследование Eyetrack III подтверждает идею, высказанную в книге Сьюзан Вейншек «Neuro Web Design»: старое доброе разделение на параграфы все еще работает и помогает выделить главное.
Оба эти источника, утверждают, что посетители гораздо охотнее начнут чтение (и закончат) если текст будет разделен на облегчающие восприятие параграфы. Это принципиальный момент при создании лэндинга. Ведь если люди не будут читать ваши тексты, ни о какой конверсии речь уже не идет.
В приведенных ниже примерах Рафал Томал показывает, как с помощью нехитрых приемов можно улучшить читабельность текста.
Важность пробелов при оформлении текста: чтобы люди продолжали чтение, нужно выделить заголовки жирным шрифтом и сделать абзацы короче.
Важность пробелов при написании текста: при увеличении интервалов между строками и параграфами, текст легче воспринимается.
Если вы присмотритесь к таким сайтам как Smashing Mag и NBC news, то заметите что и они применяют эти приемы. Не бойтесь пустоты, совсем не обязательно быть поклонником минималистского дизайна, чтобы использовать разумное количество пробелов и разделение на параграфы, для улучшения читабельности текстов.
4. Правильное использование картинок.
Сегодня в мире правит изображение и его можно более умело использовать применив такой известный дизайнерский прием как «направленный взгляд».
Он был впервые описан в работе Джованни Гальфано исследовавшего то, как мы реагируем на взгляды других.
Он выяснил 2 простые вещи:
1. Люди всегда проследят за направленным взглядом другого лица, даже если оно изображено схематично.
2. Люди очень восприимчивы к стрелкам и иным направляющим сигналам.
Возможно, этот пример с Chemistry.com покажется вам очень знакомым.
Типичный пример использования приема «направленный взгляд». Вероятно, он действительно работает, если его используют уже столько времени.
Я сам отметил значительный рост конверсии, когда применил это прием на сайте Sparring Mind… Несмотря на то, что это было лишь схематическое изображение лица.
Как я уже говорил, Гальфано исследовал и влияние направляющих сигналов вроде стрелок (они лишь слегка уступают лицам по силе воздействия).
Я знаю, многие дизайнеры не любят стрелки, считая, что они слишком навязчивы, но тот же Томал применил их с большим вкусом при разработке дизайна для Криса Брогана.
Скромно, но эффективно.
5. Побудить людей к действию.
Как показали исследования, заголовок и первый параграф имеют первостепенное значение и именно от них зависит, продолжит ли человек дальнейшее чтение.
При этом возникает проблема: как как побудить человека к чтению, не ухудшив при этом качество контента?
В этом отношении мне нравится подход Дерека Халперна «Единственная цель вашего вступительного слова - добиться, чтобы его прочитали. Вот и все».
И это правда! Именно от первых предложений зависит, продолжит ли человек дальнейшее чтение контента или нет. А в потрясающей статье Мэри Дайсон, находится ответ как этого добиться.
Люди быстрее читают длинные строчки, но предпочитают короткие.
Почему бы не дать им и то, и другое?
Можно начать статью или текст лэндинга с коротких строк, а затем, по мере захвата внимания перейти к более длинным.
Небольшой совет: этого можно добиться с помощью изображения расположенного справа.
Это позволит оправдать более короткие вводные строки вначале и переход к более длинным в конце. Не нужно больше пугать людей «стеной текста»!
Оригинал статьи на английском языке: http://unbounce.com/conversion-rate-optimization/5-conversion-studies/ |
|
|
|
|
|
| Спасибо за качественный перевод, очень полезная инструкция! О некоторых моментах узнал только сейчас. |
|
|
|
|
|
|
|
| А ещё посетители часто ищут информацию, которую не могут найти. Так раздражают сайты со статьями, в названиях которых стоит одно, а в текстах отражается совсем другое. И да: выделение отдельных (лучше всего наиболее важных мыслей) другим цветом или шрифтом многим сайтам пошло бы на пользу. А то когда читаешь подряд одну и ту же перерерайченную информацию и пытаешься найти в ней что-то новое, очень напрягает в сто первый раз перечитывать то, что и так уже знаешь. |
|
|
|
|
|
| Цитата: |
| А ещё посетители часто ищут информацию, которую не могут найти. Так раздражают сайты со статьями, в названиях которых стоит одно, а в текстах отражается совсем другое
|
А я когда что-нибудь ищу, на новом сайте использую быстрый поиск на странице Ctrl + F. Здорово помогает экономить время.
Кстати, по статистике 90% людей не знают про Ctrl+F  |
|
|
|
|
|
| Цитата: |
Кстати, по статистике 90% людей не знают про Ctrl+F
|
Вообще не понимаю как я ещё года два назад обходился без этого  |
|
|
|
|
|
А я раньше не знал, что пробел прокручивает страницу вниз, а shift + пробел — вверх.
Интересно, сколько людей сейчас начнет нажимать на пробелы?  |
|
|
|
|
|
| Miss Content писал(а): |
А я когда что-нибудь ищу, на новом сайте использую быстрый поиск на странице Ctrl + F. Здорово помогает экономить время.
|
Я знаю эту фишку. Но я то ищу как раз то, чего ещё не находила у других. И я не знаю, что это! В том-то и прикол. То есть, я знаю, какая тема меня интересует, но я не хочу в сотый раз читать про А и про Б, а как пишется следующая "буква" я пока не знаю, поскольку именно это-то я и ищу. В этом и проблема.  |
|
|
|
|
|
|
|
Классная разработка для удобства контент-менеджеров - Twitter Bootstrap. Русская локализация - http://bootstrap.veliovgroup.com.
Я в принципе люблю красиво и правильно оформленный и отформатированный текст. Miss Content, в вашей статье, кстати, можно значительно улучшить форматирование. Например - увеличив заголовки.
Мы анализировали поведение пользователей на нашем сайте. Там много текстов, но сейчас стараемся уменьшать их объем и добавлять изображения. Вот пример последней адаптированной страницы - http://7version.com/company/why.php . Раньше было много умных фраз, зато теперь - все просто и понятно. |
|
|
|
|
|
| Цитата: |
| Miss Content, в вашей статье, кстати, можно значительно улучшить форматирование. Например - увеличив заголовки.
|
спасибо, учту на будущее. |
|
|
|
|
|
всему виной туннельное восприятие и ни чего более, в моби девайсах это остро ощутимо  |
|
|
|
|
|
| TREVERS писал(а): |
|
всему виной туннельное восприятие и ни чего более, в моби девайсах это остро ощутимо
|
Вот статейка в эту тему
Часто пользователи не видят элементы сайта, которые находятся прямо перед ними на экране. Избирательное внимание приводит к тому, что люди пропускают вещи, находящиеся вне зоны их интереса.
Но как же люди могут пропустить то, что находится прямо перед ними? Если вы когда-либо наблюдали за юзабилити-исследованием, у вас неоднократно появлялся повод задать себе этот вопрос.
Дело в том, что пользователи не рассматривают весь экран целиком. Они часто остаются сосредоточенными на той части экрана, с которой взаимодействуют, или той, которая, по предположению пользователя, содержит ответ на его проблему.
Пример тунельного восприятия из этих последних исследований – лишь один из тысячи примеров, которые мы заметили за последние годы. Мы зарегистрировали бесчисленное множество других примеров в одной только области баннерной слепоты.
Избирательное внимание вызвано настоящим инстинктом выживания: если бы люди обращали внимание на все раздражители в окружающей среде, они бы не смогли довести до конца ни одного дела. Также они могли бы пропустить что-нибудь важное: например, зубастого хищника, крадущегося в их сторону.
http://www.jetstyle.ru/novosti/2012/9/10/18859 |
|
|
|
|
|
Мне про направленный взгляд очень понравилось. Не первый раз чувствую на себе этот приём, но впервые понял как он работает. Теперь думаю как бы его применить в своей работе  |
|
|
|
|
|
| Цитата: |
| Мне про направленный взгляд очень понравилось
|
Согласен, любопытно было прочитать. |
|
|
|
|
|
|
|
|
