Руководство для начинающих по конвертации мобильных пользователей

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

Скорее всего, вы не заметили. Это цель — предоставить пользователям интуитивно понятный интерфейс, который позволит им легко заполнить форму и продолжить свой день.

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

Оглавление

Мобильный и десктопный дизайн форм

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

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

Почему важен дизайн мобильной формы?

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

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

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

Почему дизайн мобильной формы должен отличаться от дизайна десктопа?

«На мобильных устройствах все работает по-другому, поэтому маркетологи должны убедиться, что любые элементы их веб-сайтов всегда оптимизированы для мобильных устройств», — говорит Лайлах Буллок, отмеченный наградами маркетолог и стратег.

«И это, конечно, включает в себя формы — тем более, что вам постоянно приходится заполнять формы на мобильном устройстве».

В частности, подумайте о разнице в размерах дисплея или экрана между мобильными устройствами, такими как Apple iPhone, размер которых обычно варьируется от 4,7 до 6,7 дюймов; и ноутбук или настольный компьютер Mac, размер которого обычно составляет от 13 до 24 дюймов. Можно с уверенностью предположить, что форма, которая подходит для экрана iPhone, не будет идеально подходить для экрана настольного компьютера.

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

Что такое адаптивный веб-дизайн?

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

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

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

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

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

Дизайн мобильных форм: 11 рекомендаций по UX

«При разработке мобильных форм, — объясняет Буллок, — важно, чтобы все было просто и максимально быстро. [Формы] сложнее заполнять на мобильных устройствах, и все кажется, что это занимает больше времени, чем должно».

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

1. Минимизируйте количество полей формы.

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

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

Чтобы упростить процесс, вы также захотите четко и лаконично пометить поля формы и пометить необязательные поля как «необязательные» или поставить звездочку рядом с обязательными.

Источник изображения

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

2. По возможности автоматизируйте ввод.

Если вы случайно напечатаете свой почтовый адрес и форма исправит написание за вас, форма автоматически исправит ваш ответ.

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

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

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

Источник изображения

3. Используйте одноколоночный макет.

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

Источник изображения

Макеты формы с одним столбцом:

а. Легче читать.

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

б. Менее устрашающий.

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

в. Быстрее завершить.

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

Взгляните на эту регистрационную форму на веб-сайте HubSpot, если смотреть с настольного компьютера или ноутбука.

Источник изображения

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

Источник изображения

Этот макет с одной колонкой позволяет глазу двигаться естественно, предотвращая беспорядок на компактном мобильном экране.

4. Постоянство имеет значение (как и внешний вид).

Как закрыть папку или открытую вкладку на ноутбуке?

Нажав кнопку «х» в правом верхнем углу.

Но что, если кнопка не появилась в определенном приложении? Что бы вы почувствовали, когда бы пошли закрывать окно?

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

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

Последовательность в дизайне форм относится не только к стилю (цвета, типографика, логотип и т. д.), но и к общепринятым соглашениям, к которым привыкли люди.

Вот несколько советов, чтобы обеспечить постоянный опыт:

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

Источник изображения

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

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

5. Помните о сенсорном опыте.

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

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

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

Вот несколько советов, о которых следует помнить:

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

Источник изображения

6. Используйте ограничения ввода.

Ограничения ввода ограничивают тип ответа, который человек может ввести в поле формы. Это может включать в себя ограничение на количество слов (скажем, при заполнении формы заявления о приеме на работу) или возможность ввода только цифр (в случае номера телефона).

Это видно в форме ниже, где появляется цифровая клавиатура, когда человек вводит свой номер телефона.

Источник изображения

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

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

Вот еще один пример ограничения ввода.

Источник изображения

7. Создайте понятные кнопки действий.

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

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

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

Источник изображения

8. Предоставьте сканеры карт для платежей.

Пробовали вводить данные своей кредитной карты в форму через смартфон? Ввод набора цифр на маленьком экране с маленькой клавиатурой может быть утомительным процессом.

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

Источник изображения

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

9. Объясните потребность в конкретной информации.

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

Это обычное явление во всех типах форм (не только мобильных). Просить у кого-то личную или другую конфиденциальную информацию без объяснения необходимости в ней может показаться схематичным.

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

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

Источник изображения

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

10. Соберите подтверждения и отзывы.

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

Проверка позволяет людям узнать, верна ли введенная ими информация (или нет). Обратите внимание на зеленые галочки в полях формы ниже.

Источник изображения

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

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

Источник изображения

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

Источник изображения

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

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

Вот пример страницы успеха на HubSpot, которая появляется после регистрации пользователя для получения бесплатного комплекта Google Реклама.

Источник изображения

11. Сделайте формы доступными.

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

Вот некоторые конкретные рекомендации по созданию специальных форм из Инициативы веб-доступности консорциума World Wide Web, WebAIM и контрольного списка проекта A11Y).

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

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

Вернуться к вам

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

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

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

Примечание редактора: этот пост был первоначально опубликован в декабре 2018 г. и был обновлен для полноты картины.