Оптимизация посадочных страниц

Мобильная революция - самое большое изменение в истории сети Интернет. Но стоит задаться вопросом какой процент составят пользователи смарт-устройств, посетивших вашу страницу, в этом или в следующем году.

Оптимизация посадочных страниц

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

Оптимизация посадочных страниц

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


Масштабировать дизайн

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

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

Выберите содержание

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

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

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

Размер имеет значение

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

В сети Интернет существует много сервисов, кототрые помогут вам определить скорость загрузки вашей страницы для мобильных и десктоповых пользователей. Одним из самых разпространенных я бы назвал Google Speed Test.В противном случае, вы потеряете много пользователей.

В идеале, ваша страница должна быть чрезвычайно легкой и простой, менее 20-30 килобайт. Все изображения, которые вы хотели бы использовать на посадочной странице должны быть максимально оптимизированы для быстрой загрузки. Если возможно используйте спрайты и CSS это поможет значительно снизить время загрузки контента. Держите весь свой код красивым и аккуратным, используйте спрайты изображений, если это необходимо, и используйте CSS вместо изображений, где это возможно.

Сократите до минимума количество запросов, которые делает ваша посадочная страница при загрузке контента. Объедините файлы стилей в один общий файл или даже добавте стили в начало страницы. Такую же оптимизацию стоит провести и со скриптами, задействованными на странице, тем самым сократив количество запросов на сервер.

Местоположение

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

В зависимости от размера и объема вашего проекта вы также можете адаптировать основной контент к геолокации пользователя.

Читабельность

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

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

Нажатие пальца

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

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

Формы и ввод информации

Если вы планируете использовать форму на посадочной странице, то ее стоит сделать очень простой и компактной. Формы, которые требуют большого количества ввода информации от пользователя, не заполняются пользователем и получают более низкий коэффициент конверсии, чем более простые формы (до 4 полей ввода). Итак, сделайте в вашей форме как можно меньше полей для ввода информации.

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

Навигация

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

Тестирование

Тщательно проверьте посадочную страницу, чтобы она эффективно работала на мобильных устройствах. Рассмотрите A / B -тестирование, которое, как было показано, увеличивает число потенциальных клиентов до 40% в некоторых случаях.

Для A / B тестирования создаете два проекта одной и той же страницы, один назовем проект A, другой B. Трафик будет разбиваться между каждой конструкцией, для того чтобы увидеть, какая из страниц лучше всего работает. Используйте наиболее важные показатели для проекта, такие как коэффициент конверсии, продажи, показатель отказов. По окончании теста перейдите к тому проекту, который работал лучше всего, и вы окажетесь на полпути к проверенному дизайну.

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

Количество кликов для достижения цели

Чем больше кликов или действий пользователь вашей псадочной страницы должен педпринять, тем меньше вероятность, что он достигнет до вашей цели. Позвольте людям добраться из точки A в точку B за 1-2 действия. Сделайте каждый пункт в навигации и призывы к действию простым и общедостубными.

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


вконтакте
google+
linkedin
запинить
john

no John Lemon

Локация: В самолете

Дизайнер с большим стажем в области разработки пользовательских интерфайсов и макетов сайтов. Работал в крупных фирмах и сам на себя. Большой поклонник операционной системы Linux. Каждодневно использую продукты с открытым исходным кодом и верю в обмен знаниями. Пишу краткие статьи на различные тематики.