Всем нам известно, что отличный веб-дизайн и конверсия идут рука об руку, но что их связывает?
Многие специалисты по маркетингу не могут понять, что веб-сайт — это не обложка книги, а, скорее, «впечатления пользователя»: когда люди пользуются вашим сайтом, они вступают с ним во взаимодействие. Так что «сделать красиво» — не единственная ваша задача.
К счастью, вы можете получить информацию с помощью целого ряда исследований, посвященных отслеживанию движений глаз посетителей, которые расскажут вам о том, как на самом деле клиенты видят ваш сайт.
Воспользуйтесь результатами этих пяти исследований, и вы опередите своих конкурентов. Наука рулит!
Давайте начнем с некоторых моих любимых тем:
1. Заголовок имеет значение… большое значение
В одном из моих самых любимых исследований, посвященных дизайну, Eyetrack III, демонстрируется, насколько важны заголовки в дизайне. Ответ: очень важны.
Собственно говоря, на домашней странице смотрят именно на заголовки. Даже чаще, чем на изображения! Что еще интереснее, чтобы заголовки были эффективными, они должны привлекать внимание за 1 секунду.
Это значит, что крайне важно изложить суть своего предложения. Это также значит, что заголовки должны выделяться на странице и заставлять людей читать и кликать.
В связи с ограничением по времени лучше всего ставить важные слова жирным шрифтом в самом начале. Это одна из причин, по которой статьи с нумерованными списками так хорошо работают в блогах: сначала идет цифра, побуждающая читать дальше.
Недавно я написал статью под названием «The Marketer’s Guide to Cult Addiction», и заголовок был построен таким образом, чтобы было ясно, что в первую очередь эта статья предназначается специалистам по маркетингу. Затем следовало сильнодействующее слово («культ»), которое зацепило бы их.
Мне понравилось, как мой коллега Рафал Томал сделал домашнюю страницу Copyblogger — вы точно знаете, какого рода товары и услуги они предлагают, и это всего лишь после прочтения заголовка.
Не имея кратко выраженной концепции предложения своей компании, вы растеряете многих потенциальных покупателей. Насколько хорошо ваш заголовок отражает то, что вы делаете для своих клиентов?
2. Когда нужно выделяться
Всем нравится дизайн веб-страницы, который хорошо «сочетается» с нужной цветовой гаммой и едва заметной текстурой, однако должно ли что-либо вообще выделяться на веб-странице?
Согласно исследованию, ваш призыв к действию должен однозначно приводить к явно выраженному эффекту фон Ресторффа (названному по имени ведущего исследователя, именно то, что «изолировано» от всего остального, замечают в первую очередь.
Дерек Халперн удачно использует это исследование, чтобы подчеркнуть глупость вопроса «Какой цвет лучше использовать для повышения конверсии?». В недавнем посте он заявляет: лучший цвет — тот, который выделяется на фоне всей страницы.
Для привлечения внимания к 15-дневной пробной версии на обычном бело-синем фоне нашего сайта Help Scout мы используем зеленую кнопку, потому что она торчит, как бельмо на глазу. А нам как раз это и нужно.
Прежде всего необходимо разобраться с цветовой гаммой фона и акцентными цветами:
Затем нужно подобрать цвет, который будет выделяться из этих цветов. Это и будет цвет вашего призыва к действию.
Если ваш сайт выполнен в нейтральной бело-зеленой гамме, для призыва к действию можно взять большую оранжевую кнопку. Посмотрите, как это делает Mint, и вы увидите, что необязательно это будет уродливым!
Обратите внимание на два оранжевых элемента: один из них — призыв к регистрации, а другой — приглашение получить дополнительную информацию.
Используйте свой «цвет призыва к действию» только для действий, не позволяйте ему смешиваться с другими цветами, иначе это приведет в замешательство ваших посетителей.
3. Отделяйте призыв к действию интервалами
Данные Eyetrack III подтверждают идеи, высказанные в книге Сьюзан Вейншек «Neuro Web Design»: дизайнеры могут выделить действие, применив то, что любит глаз — старый добрый интервал.
Оба эти источника указывают, что посетители сайта с гораздо большей вероятностью обратят внимание на контент (и дочитают текст до конца), разделенный приемлемым количеством облегчающих его восприятие интервалов. Таким образом, при создании отпадной посадочной страницы это главный элемент: вам не светит никакая конверсия, если люди не будут читать ваши тексты.
И снова на помощь приходит Рафал Томал — на этих простых иллюстрациях видно, как можно улучшить текстовый контент с помощью пары простых приемов:
Важность интервалов при расположении текста: чтобы люди не прекращали чтение, необходимо разделять текст заголовками, выделенными жирным шрифтом, и делать абзацы короче.
Важность интервалов для контента: Рафал рекомендует увеличить интервалы между строками и абзацами текста.
Если вы посмотрите на серьезные сайты вроде Smashing Mag и даже NBC news, то обнаружите, что они применяют к своему контенту этот прием — «шрифт + интервалы».
Не бойтесь пользоваться интервалами: совершенно необязательно использовать минималистский дизайн для встраивания разумного количества интервалов, облегчающих восприятие вашего искусно составленного текста.
4. Более умелое использование изображений
Сегодняшним миром правит изображение, и существует несколько способов гораздо более умного использования иллюстративного материала. В их основе лежит очень простой дизайнерский трюк, известный как «направление линии взгляда».
Эту информацию мы почерпнули из статей исследователя Джованни Гальфано о нашей реакции на пристальный взгляд других людей.
Он обнаружил два очевидных факта, касающихся изображений:
- Мы не можем не проследить за направлением взгляда другого лица, даже если это лицо ненастоящее.
- Мы очень восприимчивы к указывающим направление стрелкам и прочим направляющим сигналам.
Этот пример от Chemistry.com может показаться знакомым:
Это типичный образец применения метода «направление линии взгляда». Этот прием, должно быть, весьма эффективен, коль скоро они используют его уже довольно продолжительное время.
Я также отметил значительный рост конверсии, когда применил метод «направление линии взгляда» на сайте Sparring Mind… несмотря на то, что лицо было ненастоящим.
Гальфано выяснил, что направляющие сигналы также сильно влияют на то, куда мы смотрим, находясь на странице, (они лишь чуть менее эффективны, чем лица).
Я знаю многих дизайнеров, которые неодобрительно относятся к вещам вроде стрелок, потому что они вызывают отторжение своей «назойливостью». Тем не менее, их можно реализовать с большим вкусом, как, например, это сделал Рафал в потрясающе переработанном дизайне Криса Брогана:
Неброско, зато эффективно.
Применяете ли вы направляющие сигналы в своем дизайне?
Вы должны это делать.
5. Как побудить людей начать знакомство с вашим сайтом
В результатах исследования Eyetrack III отмечается, что заголовок и вводный абзац имели решающее значение при принятии людьми решения о том, дочитывать ли текст до конца (что бы это ни было: статья в блоге, посадочная страница и т.д.).
Следовательно, проблема в следующем: как заставить посетителей приступить к чтению вашего контента не в ущерб качеству последнего?
Мне нравится, как к этому вопросу подошел Дерек Халперн: «Единственная задача вашего вступительного текста — добиться, чтобы его прочитали. Вот и все».
Это действительно так. Как оказалось, именно результаты чтения первой пары строк определяют, закончит ли посетитель чтение всего контента или нет.
Благодаря великолепной статье Мэри Дайсон, у нас, в конце концов, есть ответ на вопрос «Что делать?»:
Люди быстрее читают длинные строки, но предпочитают более короткие.
Итак, почему бы не дать им оба варианта?
Начав статью в блоге или текст посадочной страницы с более короткой строки, вы можете увеличить исходную «липкость» вашего контента, а затем, когда пользователь начнет читать, можно вернуться к более длинным строкам.
Проще всего осуществить это с помощью изображения, расположенного по правому краю:
Это позволит получить более короткие строки, которые как раз нам и нужны (как это было выяснено в исследовании Мэри), и вернуться к более привычной длине строк по мере развития текста.
Просто завершите вводную часть статьи около изображения, а оставшаяся часть пусть выглядит как обычно. И не нужно больше пугать людей «стеной текста»!
