Контактные формы - ключевой компонент многих веб-сайтов. Хотя они, как правило, просты, вы должны убедиться, что ими легко пользоваться, если вы хотите собирать потенциальных клиентов и оставаться на связи со своими пользователями. Обычно это не проблема с офисным трафиком, но использование форм может быть затруднено, если вы используете мобильное устройство.
В этом уроке мы немного поговорим о важности разработки удобных для мобильных устройств форм. Далее мы дадим вам пять советов, как убедиться, что ваши формы бесперебойно работают на мобильных устройствах.
Давайте работать!
Почему для ваших форм важно быть мобильным
Формы бывают всех форм и размеров. Чаще всего вы будете иметь дело с контактными формами:
Формы регистрации (подписки) также очень популярны, поскольку они позволяют собирать электронные письма и настраивать их таргетинг во время кампаний:
Однако формы можно использовать для любых других целей. Например, вы можете собирать информацию, используя онлайн-опрос или вопросник , и в этом случае вам понадобятся формы, позволяющие пользователям вводить ответы.
Другими словами, формы очень универсальны, и почти все сайты так или иначе используют их. Следовательно, важно, чтобы ваши формы были простыми в использовании (если вы не хотите, чтобы ваши посетители разочаровывались).
Использовать формы с настольного или портативного компьютера обычно очень просто. У вас есть полноценная мышь и клавиатура, поэтому выбор поля, которое вы хотите использовать, и ввод данных не должны быть проблемой. Однако просмотр веб-страниц со смартфона или другого компактного устройства имеет сложности.
При работе пальцами на маленьком экране взаимодействие с формами иногда может быть затруднительным из-за плохих дизайнерских решений. Этого вам следует избегать в ваших собственных проектах. В конце концов, если мобильные пользователи не могут взаимодействовать с вашими формами, вы можете потерять конверсии, потенциальных клиентов или просто раздражать посетителей.
Также важно понимать, что мобильный трафик сейчас, если не больше, важнее, чем настольные источники. Фактически, мобильный трафик в последние годы уже обогнал последних. Это означает, что создание удобного для мобильных устройств веб-сайта должно быть вашей основной целью при запуске нового проекта.
Советы 5 по разработке простых в использовании мобильных форм
К счастью, создание удобных для мобильных устройств форм не так сложно, как вы можете себе представить. В большинстве случаев вам просто нужно иметь в виду некоторые основы и тщательно тестировать свои формы, прежде чем использовать их. Поговорим о том, как это сделать!
1. Удалить все ненужные разделы
Чем больше полей содержит ваша форма, тем сложнее ее будет использовать на мобильных устройствах. Действительно, использовать формы на мобильном телефоне просто сложнее. Уменьшая количество полей или разделов, включенных в ваши формы, вы можете максимизировать свои шансы на то, что посетители заполнили их.
Вот краткий пример Контактная форма с некоторыми дополнительными полями, которые не нужны на мобильных устройствах:
В большинстве случаев все, что вам нужно для отличного Контактная форма это имя, адрес электронной почты и текст сообщения, которое вы хотите получить. Все остальное зависит от типа используемого вами веб-сайта и от того, пытаетесь ли вы собирать потенциальных клиентов.
В конечном итоге, чем меньше полей в форме, тем легче мобильным посетителям будет их использовать. В конце концов, выбрать поле с помощью сенсорного экрана может быть сложно, независимо от того, насколько хорошо он спроектирован, чтобы свести к минимуму количество прыжков, которые пользователи должны совершать.
На этом этапе ваша цель - просмотреть существующие формы на вашем сайте. Просмотрите каждый из их разделов и определите, действительно ли вам нужны какие-либо дополнительные поля, кроме упомянутых ранее. Если есть лишнее поле, просто удалите его.
2. Используйте выпадающие списки, если это возможно
Большинству из нас удобно печатать на мобильных устройствах и пользоваться сенсорными экранами. Однако, отправив сообщение другу и заполнив Контактная форма это два совершенно разных опыта. При этом есть большая вероятность, что вы расстроитесь, если вам придется вводить много информации.
Один из способов облегчить жизнь вашим мобильным посетителям — упростить выбор элементов вашего сайта. Чтобы дать вам представление о том, о чем мы говорим, давайте воспользуемся нашим предыдущим примером бронирование ресторан:
Сделать бронирование, вам, вероятно, потребуется оставить имя, адрес электронной почты, телефон et укажите время, а также количество присутствующих. Существует два способа создания поля формы для проверки времени суток. бронирование:
- Настройте поле, которое принимает только числовые записи.
- Создайте раскрывающийся список со всеми доступными временами для бронирования.
Как вы понимаете, последний более удобен для мобильных пользователей. При таком подходе им не нужно вводить числа, и они могут просто выбрать то, что лучше всего подходит для них, из предложенных вами вариантов.
Идея для вас взглянуть на свои формы и увидеть, содержат ли они поля, которые вы могли бы заменить раскрывающимися меню. Это не всегда так, поскольку вы не можете использовать раскрывающиеся меню для сбора имен или электронных писем, но можно использовать другие параметры.
Каким бы ни был их вариант использования, вы должны убедиться, что в раскрывающихся меню есть параметры, которые легко выбрать с мобильных устройств. Другими словами, сделайте меню достаточно большим, чтобы кому-то не приходилось клевать, чтобы выбрать правильный вариант.
3. Убедитесь, что ваши кнопки отправки легко нажимать
Этот совет довольно прост, но его все же следует упомянуть. Каждая форма, которую вы разрабатываете, должна включать способ, позволяющий пользователям подтвердить, что они хотят отправить введенные данные. В большинстве случаев это означает создание кнопки отправки:
При использовании обычного компьютера нажатие кнопки отправки - самое естественное в мире. Однако мы встретили несколько форм на мобильных устройствах, в которых намного сложнее нажать кнопку.
Если ваши посетители не могут отправить информацию, которую они ввели в ваши формы, все ваши усилия будут потрачены зря. Кроме того, ничто не выглядит так непрофессионально, как кнопка послать это не работает, как ожидалось.
Чтобы создать лучшие кнопки отправки для мобильных устройств, рассмотрим три совета:
- Убедитесь, что они достаточно большие, чтобы вы могли легко нажимать на них на мобильном устройстве.
- Не размещайте кнопки слишком близко к другим элементам, чтобы пользователи не касались их должным образом.
- Выделите кнопки, например, контрастными цветами или креативной типографикой.
Вдобавок ко всему, вы также захотите протестировать свои кнопки, прежде чем ваш сайт будет запущен. Мы более подробно рассмотрим, как это сделать через минуту. А пока поговорим о производительности.
4. Убедитесь, что ваши формы загружаются быстро
Мы много говорим о производительности веб-сайтов во многих наших статьях, и это не потому, что нам нужна скорость. Дело в том, что большинству людей не нравятся медленные сайты, что вполне логично.
С более высокой скоростью Интернета может быть трудно ждать, пока веб-сайт загрузится слишком долго. Кроме того, скорость мобильного интернета может значительно отличаться от скорости обычного домашнего подключения. Это означает, что ваш веб-сайт должен быть сильно оптимизирован для мобильных устройств, если вы хотите, чтобы эти пользователи были довольны, поскольку не все из них будут иметь доступ в Интернет (то есть быстро).
Этот совет можно применить ко всему вашему веб-сайту, но он также важен для мобильных страниц, на которых отображаются ваши формы. Если эти части вашего сайта загружаются слишком долго, вы потерять конверсии и возможности связаться с вашими посетителями.
Обычно веб-сайт загружается не более двух секунд. Как только вы превысите этот предел, показатель отказов, как правило, резко возрастет, что для вас ужасная новость, и, учитывая характер просмотра мобильных устройств, лучше всего сохранить это время как можно ниже. .
Имея это в виду, существует множество способов улучшить общую производительность вашего сайта. Например, вы можете перейти на более выгодный план.Hébergementиспользуйте адаптивную тему, оптимизированную для скорости и сжимать изображения. Конечно, это поможет всем пользователям, но будет особенно полезно для тех, кто использует устройства меньшего размера.
5. Проверьте свои формы перед публикацией
Учитывая, что формы являются ключевой частью большинства веб-сайтов, имеет смысл тщательно протестировать их перед публикацией. В WordPress этот процесс довольно прост. Вы можете разработать определенные страницы для отображения ваших форм и не публиковать их, пока вы не протестируете их полностью.
Конечно, плагин или тема, которую вы хотите использовать, зависит от вас (если это может помочь в разработке мобильных сайтов). Однако, когда дело доходит до фазы тестирования, мы рекомендуем сохранять простоту и использовать такие инструменты, как инструменты развития Chrome делать работу.
Давайте быстро рассмотрим пример. Если вы используете Chrome, просмотрите страницу с формой, которую хотите протестировать. Затем щелкните правой кнопкой мыши в любом месте этой страницы и выберите вариант инспектировать . Chrome отобразит набор инструментов, которые вы можете использовать для просмотра и редактирования исходного кода страницы справа и слева, вы можете предварительно просмотреть его внешний вид с мобильного устройства:
В верхней части экрана вы можете использовать меню для переключения между различными разрешениями. Chrome включает настройки для нескольких популярных мобильных устройств, но вы также можете указать собственное разрешение.
На этом этапе вы должны проверить внешний вид и поведение вашей контактной формы на нескольких устройствах. Возьмем пример ниже - форма работает нормально, но вы можете видеть, что она не подходит так хорошо, как должна. Обратите особое внимание на текст и, в частности, значки, которые расположены слишком близко к краю экрана:
Один из способов предотвратить эту проблему - сделать ваши формы простыми, как мы упоминали в первом совете. В приведенном ниже примере форма использует несколько раскрывающихся списков и требует только трех полей. Это упрощает использование и, что еще более важно, форма настолько проста, что идеально подходит для всех устройств:
Если у вас есть какие-либо проблемы с какой-либо из ваших форм, вам, очевидно, необходимо немедленно их решить. В противном случае вы рискуете оттолкнуть свою мобильную аудиторию, чего мы стараемся в первую очередь избегать!
Заключение
Убедитесь, что ваш веб-сайт совместим с мобильными устройствами, это ключ к удержанию трафика и не разочарованию посетителей. В частности, ваши формы должны быть простыми в использовании на мобильных устройствах, если вы не хотите пропустить получение сообщений или сбор ценных потенциальных клиентов.
Когда дело доходит до разработки мобильных форм, вот пять советов, которые упрощают вашу жизнь:
- Удалите все ненужные разделы.
- Используйте выпадающие списки, если это возможно.
- Убедитесь, что ваши кнопки отправки легко нажимаются.
- Убедитесь, что ваши формы загружаются быстро.
- Проверьте свои формы перед публикацией.
