5 советов по созданию удобных для мобильных устройств форм

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

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

Давай приступим к работе!

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

Формы бывают всех форм и размеров. Чаще всего вы будете иметь дело с контактными формами:

Формы регистрации (или подписки) также чрезвычайно популярны, поскольку позволяют собирать электронные письма и настраивать их таргетинг во время кампаний:

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

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

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

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

Также важно понимать, что мобильный трафик сейчас не менее - если не более - важен, чем настольные источники. Фактически, мобильный трафик уже превзошел последний за последние несколько лет. Это означает, что создание удобного для мобильных устройств веб-сайта должно быть вашей основной целью при запуске нового проекта.

5 советов по созданию удобных для мобильных устройств форм

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

1. Удалите ненужные разделы.

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

Вот краткий пример контактной формы с несколькими дополнительными полями, без которых можно обойтись:

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

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

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

2. По возможности используйте раскрывающиеся списки

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

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

Чтобы сделать заказ, вам, вероятно, нужно будет оставить имя, адрес электронной почты, телефон и указать время, а также количество людей, которые будут присутствовать. Есть два способа создать поле формы для проверки времени бронирования:

1. Настройте поле, которое принимает только числовые данные.
2. Создайте раскрывающийся список, включающий все время, доступное для бронирования.

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

Идея для вас взглянуть на свои формы и посмотреть, содержат ли они какие-либо поля, которые вы можете заменить раскрывающимися меню. Это не всегда так, поскольку вы не можете использовать раскрывающиеся меню для сбора имен или электронных писем, но есть другие варианты, где они могут работать.

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

3. Убедитесь, что кнопки отправки легко нажимаются.

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

Когда вы используете обычный компьютер, нажатие на кнопку отправки - самое естественное в мире. Однако мы встретили несколько форм на мобильных устройствах, в которых нажатие кнопки намного сложнее, чем должно быть.

Если ваши посетители не могут отправить информацию, которую они ввели в ваши формы, все ваши усилия будут напрасными. Кроме того, ничто не выглядит так непрофессионально, как кнопка « Отправить» , которая не работает должным образом.

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

1. Убедитесь, что они достаточно большие, чтобы их можно было легко нажимать при использовании мобильного устройства.
2. Не размещайте кнопки слишком близко к другим элементам, чтобы пользователи не нажали не ту кнопку.
3. Выделите кнопки каким-либо образом, например, используя контрастные цвета или креативную типографику.

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

4. Убедитесь, что ваши формы загружаются быстро.

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

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

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

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

5. Протестируйте свои формы перед их публикацией.

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

Конечно, плагин или тема, которые вы хотите использовать, зависит от вас (если они могут помочь в разработке мобильных сайтов). Однако, что касается фазы тестирования, мы рекомендуем вам сохранять простоту и использовать что-то вроде инструментов Chrome Dev Tools, чтобы выполнить свою работу.

Давайте быстро рассмотрим пример. Если вы используете Chrome, просмотрите страницу, содержащую форму, которую вы хотите протестировать. Затем щелкните правой кнопкой мыши в любом месте этой страницы и выберите параметр « Проверить» . Chrome покажет вам набор инструментов, которые вы можете использовать для просмотра и редактирования исходного кода страницы вправо и влево, вы можете увидеть предварительный просмотр того, как он будет выглядеть на мобильном устройстве:

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

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

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

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

Заключение

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

Когда дело доходит до разработки удобных для мобильных устройств форм, вот пять простых советов, которые сделают вашу жизнь проще:

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

У вас есть вопросы о том, как создавать удобные для мобильных устройств формы с помощью Divi? Спросите в разделе комментариев ниже!

Миниатюра статьи Ирины Адамович / shutterstock.com.