Разработчики целевых страниц (их ещё называют посадочными страницами или лендингами — landing pages) постоянно находятся в поиске баланса между дизайном и функциональностью. А маркетологи недоумевают — почему же лендинг приносит такую низкую конверсию?
Найти оптимальное соотношение между этими двумя элементам не так-то просто. Недостаточно сделать целевую страницу просто привлекательной внешне. Независимо от того, как она выглядит, она должна выполнять ключевую задачу — конвертировать посетителей в клиентов.
Это вовсе не означает, что красота дизайна не поможет донести до посетителей ваш месседж. Это значит, что элементы дизайна целевой страницы должны подчёркивать сообщение, а не отвлекать от него.
Вот несколько тенденций в оформлении целевых страниц, использование которых может негативно повлиять на их конверсию.
Жизнь во «вселенной параллакса»
Технология под название “parallax scrolling” (прокрутка параллакс) получила широкое распространение среди разработчиков сайтов. Порой кажется, что она так же вездесуща, как и киоски с шаурмой в Москве. Популярность этой технологии росла в течение нескольких лет, достигла своего пика буквально несколько месяцев назад и, по данным Google Trends, продолжает сохранять актуальность и сейчас.
Основное внешнее отличие параллакса состоит в том, что при прокрутке страницы вниз её фон движется медленнее, чем изображения на переднем плане (вот пример параллакса).
При правильном использовании такой технологии на лендинге, она поможет удержать внимание пользователя и донести до аудитории нужное сообщение.
Тем не менее, веб-дизайнеров, использующих этот и другие новомодные приёмы, подстерегает одна опасность. Очень часто такие фишки внедряются только для того, чтобы на лендинге появился «вот такой крутой эффект», а не для выполнения реальных задач лендинга.
Дизайн лендинга всегда должен акцентировать ключевое сообщение, вести посетителей к действию (call to action — CTA) и дальнейшей конверсии.
Если параллакс помогает в решении этой задачи – значит, это правильный выбор. Если же он отвлекает посетителей от конверсии, то от него лучше избавиться.
Увеличение веса лендинга
Вы наверняка слышали о законе Мура, согласно которому «история вычислительной техники свидетельствует о том, что количество транзисторов в интегральных схемах удваивается примерно каждые два года». Другими словами, наши устройства чертовски быстро совершенствуются и становятся всё быстрее.
В ответ на это, дизайнеры добавляют ещё больше контента на целевые страницы, возможно, полагая, что они смогут воспользоваться преимуществами более высокой скорости интернета и самих устройств.
Конечно, процессоры и интернет-соединения становятся быстрее, чем когда-либо, но никто не отменяет одного из основных требований к целевым страницам – они должны загружаться очень быстро.
Данные аналитики HTTP Archive показывают, что в ноябре 2010 года средний вес веб-страницы составлял 702 килобайт. По состоянию на 1 марта текущего года этот показатель вырос до 2 мегабайт. Кроме того, выросли и средние размеры изображений, а CSS-файлы «потяжелели» в среднем на 3 килобайта.
Эта тенденция не может не коснуться целевых страниц, но их разработчики должны «умерить свои аппетиты». И вот почему.
Скорость загрузки лендингов является одним из факторов их эффективности. Увеличение этого показателя всего лишь на одну секунду может вызвать 7%-ное снижение конверсии целевой страницы. Около 40% посетителей покинут её, если она не загрузится в течение трёх секунд.
Добавляя лишние элементы на целевую страницу (например, изображения в высоком разрешении,не оптимизированные для веба), дизайнеры рискуют потерять конверсию.
Оптимизация страниц – сокращение времени их загрузки
Продолжая разговор о скорости загрузки целевых страниц, следует отметить, что необязательно жертвовать внешним видом страницы, чтобы достичь её быстрой загрузки. Для решения проблемы с размером страницы, а, следовательно, и с сокращением времени её загрузки, можно воспользоваться несколькими инструментами для оптимизации размера и времени загрузки отдельных элементов дизайна страницы.
Такие инструменты, как Photoshop и GIMP, дают возможность сохранять изображения для веб, которые будут выглядеть качественно, но иметь меньший размер.
Можно также уменьшить размер страницы, отказавшись от внешних элементов, например, необычных шрифтов и iFrame. Дополнительное время, затрачиваемое на их загрузку, может иметь решающее значение с точки зрения конверсии.
Сервис Pingdom является хорошим инструментом для оценки производительности страницы, показывает время её загрузки. Кроме того, он позволяет определить влияние элементов страницы на скорость открытия, показывая размер каждого из них. Благодаря этой информации можно устранить проблемы, изменив или удалив элементы целевой страницы, которые увеличивают время загрузки.
Помните, что главным назначением целевой страницы является конверсия, а не демонстрация крутизны дизайнера.
Призраки пугают, особенно на целевых страницах
Трудно объяснить, почему кнопки-призраки — неконтрастные кнопки с прозрачным фоном — так полюбились дизайнерам, но они всё больше встречаются на целевых страницах.
Так ли хорошо это выглядит? Возможно, для определенной категории пользователей. Вопрос в том, как этот приём влияет на количество переходов?
Сложно сказать, не проведя тестирования, но такие кнопки однозначно нарушают один из основополагающих принципов дизайна лендингов – контраст – который предполагает, что кнопка CTA должна чётко выделяться на фоне страницы.
Можно настроить эти кнопки так, чтобы они меняли цвет/прозрачность при наведении на них мыши. Но тогда придется надеяться на счастливую случайность, при которой посетитель попадет курсором на ни чем не отличающуюся область на экране.
Иногда они выглядят, как простой текст, а не кликабельная кнопка, как в этом примере:
Бывает, что такие кнопки просто не вызывают желания кликнуть на них, несмотря на призыв к действию, — как на этой странице:
Думайте о своих пользователях, и о том, что именно их привлечёт. Если вы уверены, что они оценят чистую эстетику призрачной кнопки — протестируйте и проверьте свои предположения. Протестируйте свою призрачную кнопку и сравните результат с традиционный контрастным видом. В любом случае, данные тестирования никогда не будут лишними.
Адаптивный дизайн
Данные сервиса MeanPath говорят о том, что только в 3% из более чем 146 млн запрашиваемых веб-страниц присутствует код, который отвечает требованиям мобильных браузеров для отображения страниц на экранах мобильных устройств.
Люди ищут информацию на своих мобильных устройствах в 80% случаев. Несмотря на это, дизайнеры по-прежнему игнорируют необходимость мобильной оптимизации своих сайтов.
Это открывает удивительные возможности для тех, кто осознает важность оптимизации целевых страниц для мобильных устройств.
Пользователи будут вам благодарны, если им не придётся увеличивать страницу на экране своего гаджета, чтобы найти нужную информацию. А вы получите преимущество над почти 97% владельцев сайтов, которые не сочли важным оптимизировать свои страницы под мобильные устройства в 2015 году.
Следует также учесть, что с 21 апреля 2015 года поисковая система Google в качестве одного из основных критериев ранжирования веб-страниц в поисковой выдаче применит наличие мобильной версии.
Это всё дизайн…
Главной задачей лендинга всегда является конверсия, и дизайн должен служить достижению этой цели. Неважно, какие технологии и приёмы используются в дизайне целевой страницы. Если это ведёт к повышению конверсии – вы на правильном пути.
Источник: unbounce.com
Это интересно
0
|
|||
Последние откомментированные темы:
-
Изменение ссылок
(1)
casham
,
01.02.2012
-
Плагин Special Text Boxes
(2)
Ирина
,
27.12.2011
-
Как закрыть ссылки от индексации быстро и красиво. Плагины WP-NoRef и WP No External Links.
(2)
-
Вышел WordPress 3.3 русская версия
(1)
casham
,
16.12.2011
-
Что нового в WordPress 3.3
(1)
casham
,
16.12.2011
20250214012251megr***@m*****.ru , 18.12.2011