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

1 708

03 апреля 2019

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

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

Три ключевых отличия пользовательского интерфейса создают проблемы для дизайна мобильных форм:

1. Соотношение сторон

Около 80–90% случаев использования смартфонов происходит в портретной ориентации, что делает ширину ценным товаром: вертикальное пространство больше, а вертикальная прокрутка более интуитивна.

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

2. Сенсорная навигация

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

3. Ограниченная клавиатура

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

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

2. Общесистемные соображения

Однострочный дизайн

Мы обнаружили, что формы с одним столбцом обеспечивают более быстрое заполнение по сравнению с формами с несколькими столбцами:

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

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

Многошаговые формы

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

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

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

Размер шрифта

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

В исследовании MIT, в котором измерялась скорость чтения, сравнивались два размера шрифта (10 пикселей и 8 пикселей), а также разные регистры и ширина букв. Их результаты предлагают базовые рекомендации для текста меньше среднего:

Не используйте размер шрифта ниже 10 пикселей.
Используйте все заглавные буквы.
Поддерживайте стандартную ширину надписи.

Размер сенсорной мишени

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

7 мм в центре экрана.
9 мм по краям.
12 мм по углам.

Рекомендации по обеспечению доступности дизайна материалов предлагают аналогичную рекомендацию: 7–10 мм для сенсорных целей.

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

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

Что касается заполнения между сенсорными целями — опять же, не видимыми кнопками, а невидимыми сенсорными целями, окружающими их — руководящие принципы проектирования материалов рекомендуют минимум 1,3 мм.

Поля формы

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

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

Некоторые поля формы предварительного преобразования могут быть перемещены:

Создание аккаунта

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

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

CAPTCHA

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

Развертывание формы

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

Google определяет три приемлемых типа вставок :

Те, которые информируют пользователей об использовании файлов cookie.
Те, которые требуют проверки возраста.
Те, которые используют «разумное количество места на экране».

3. Полевые соображения

Автоматизация

Автоматизированные функции смартфонов предлагают риск и вознаграждение . HTML-теги включают и выключают автоматические функции в зависимости от поля ввода:

Автокоррекции. Автозамена может ошибочно исправить информацию в полях с собственными существительными (например, имя, адрес).
Автозаполнение. Автозаполнение может быть полезно для заполнения известного адреса электронной почты, но оно может ошибочно попытаться заполнить номер заказа номером телефона или наоборот. Вы можете предложить подсказки в коде (например, autocomplete = ”address-line1 ″), чтобы повысить точность автозаполнения. (Почтовый индекс также может автоматически заполнять город и штат — до тех пор, пока пользователи сохраняют возможность редактировать случайную ошибку.)

Автозаполнение может сэкономить время пользователей при правильном развертывании.

Автоопределение. Запрашивать тип кредитной карты не нужно; автоопределение идентифицирует кредитную карту на основе первых четырех чисел, что требует от заполнителей форм выполнения еще одной задачи.
Обнаружение местоположения. Определение местоположения может идентифицировать страну пользователя (как минимум) или, используя API Google Places или другой API геолокации, более конкретное место, например, ближайший аэропорт. Тщательно продумайте свой запрос информации о местоположении: если вы запрашиваете доступ до того, как пользователи увидят релевантность, они могут отклониться.

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

Всплывающие формы

Степперы

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

Сегменты

Когда параметры ограничены, сегментированный элемент управления позволяет пользователю видеть все доступные варианты сразу:

Слайдеры

Слайдеры могут использоваться для больших диапазонов или для тех, которые имеют переменную Min-Max:

Выбор даты

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

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

Примечательно, что исследование Люка Вроблевского показало обратный эффект — сборщик с одной датой работал лучше. (Выводы: не все средства выбора даты созданы равными; пользователи различаются; одно исследование не является неизменной; лучший вариант — это тестирование.)

Для большей ясности после выбора рассмотрите общее время и дни недели, которые выбрал пользователь:

Для больших диапазонов, которые плохо подходят для вышеупомянутых альтернатив, таких как состояние пользователя в США, поля прогнозирующего ввода (форма автозаполнения) могут быстро сузить длинный списокпосле того, как пользователь вводит первую или две буквы.

Полевые маски

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

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

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

Как утверждает Люк Вроблевски, маски должны также:

Быть видимым с самого начала. Если маска раскрывается постепенно, пользователи все еще гадают от ввода к вводу, находятся ли они на правильном пути.
Не включать заполнитель текста. Это может привести к тому, что пользователи пропустят поле, так как оно выглядит предварительно заполненным. Схема ожидаемого ввода, такая как «() -», может устанавливать ожидания, но также выглядит явно неполной. Если вы используете заполнитель текста, явно неправильный ответ «(XXX) XXX-XXXX» может привести к тому, что меньшее количество пользователей пропустит его.

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

Полевые метки

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

Одним из решений является плавающая метка, реализованная с помощью CSS или jаvascript. Метка формы первоначально отображается внутри поля более крупным шрифтом (повышая читаемость при сохранении места), а затем перемещается над полем (более мелким шрифтом), как только пользователь нажимает на него:

Решение сохраняет место на экране, сохраняя при этом постоянную метку поля.

Полевые клавиатуры

С момента своего выпуска в 2014 году HTML5 позволял разработчикам определять тип ввода (например, «электронная почта», «тел.», «Дата / время» и т. Д.), Чтобы возвращать соответствующую мобильную клавиатуру, когда пользователь нажимает на поле.

Типы клавиатуры предлагают очевидные (цифровая клавиатура для телефонных номеров) и тонкие (включение символа «@» для адресов электронной почты) удобства.

Типы клавиатуры по умолчанию для ввода «тел» и «электронная почта» соответственно. Обратите внимание на включение символа «@» для ввода электронной почты

Действующая проверка

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

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

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

Другие оптимизации

Форма автофокуса

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

Выбор размера поля

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

Отключение кнопки отправки

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

4. Инструменты для измерения производительности формы

Детальное измерение помогает определить проблемные места в формах:

Какие части формы заполняют пользователи дольше всего?
В какой момент пользователи чаще всего покидают форму?

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

Классы форм: gtm.elementClasses
Элемент формы: элемент gtm.element
Идентификатор формы: gtm.elementId
Цель формы: gtm.elementTarget
Текст формы: gtm.elementText

Заключение

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

Но они также облегчают выбор; не каждая форма «оптимизации» должна быть проверена. Поставка соответствующей клавиатуры для соответствующего поля — явный выигрыш. То же самое относится и к сенсорной цели разумного размера или к использованию маски поля для отклонения недопустимых вводов. Эти улучшения в UX являются незамедлительной возможностью для всех сайтов, а не только для сайтов с высоким трафиком.

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