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

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

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

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

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

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

Разговорный стиль в пределах разумного

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

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

Читать также:  6 опасностей, которые несут мобильные гаджеты

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

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

Вежливый и позитивный тон повысит доверие к компании.

По возможности используйте одно поле для ввода данных

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

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

Автоматическое предварительное заполнение полей

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

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

Читать также:  Битва титанов

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

Сокращение форм путем сведения их к самой необходимой информации

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

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

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

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

Разделение длинных форм на этапы

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

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

Сообщения об ошибках оптимизированы для интеллектуальных мобильных устройств

Читать также:  6 полезных трюков в поисковике Google, когда вы не знаете, что именно ищете

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

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

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

Они обязательно должны быть выполнены в стиле бренда.

Избегайте длинных выпадающих списков

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

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

Выводы

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

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?