Делаем крутые мобильные формы.

Делаем крутые мобильные формы.

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

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

Используйте сегментированные элементы управления вместо выпадающих меню

Делаем крутые мобильные формы.

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

Объединяйте несколько выпадающих списков в одно поле

Делаем крутые мобильные формы.

Да, это не всегда возможно, но самый яркий пример — выбор даты. Нам нужно ввести день, месяц и год, это означает, что при использовании выпадающих меню вы в конечном итоге вам необходимо выполнить, как минимум, 3 взаимодействия в четыре шага, который в сумме добавляет до 12 взаимодействий. Это много. Используя одно поле для всей даты всю процедуру можно проделать за пять шагов — открыть, выберите день, выберите Месяц, Год выберите, нажмите установить.

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

Делаем крутые мобильные формы.

Переключатели можно использовать для реализации бинарного ввода. Например, при выборе «Показать» или «Скрыть». Между прочим, это очень удобный и интуитивный UX — элемент.

Ползунки

Делаем крутые мобильные формы.

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

Избегайте многоколоночности

Делаем крутые мобильные формы.

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

Используйте степперы вместо выпадающих списков

 

Делаем крутые мобильные формы.

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

Показывайте ошибки рядом, а не группируйте их

 

Делаем крутые мобильные формы.

Показывайте ошибки в контексте (рядом с полем). Это очень важно, поскольку в большинстве случаев, список ошибок находится вне области просмотра экрана, поэтому держать пользователей в курсе «прямо на месте» — это важно.

Не выделяйте необязательные поля

 

Делаем крутые мобильные формы.

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

Группируйте!

Делаем крутые мобильные формы.

Группировка схожих полей помогает людям воспринимать информацию быстрее. Разделяй и властвуй!

Позаботьтесь о размере элементов

Делаем крутые мобильные формы.

Не делайте кнопки и сенсорные зоны слишком маленькими. Поймите уже! На телефонах нажимают на кнопки не курсором мыши, они используют свои пальцы!

Остаайтесь верными платформе

С мобильными версиями сайтов и, особенно, в приложениях стараюсь быть верным платформе. Используйте устоявшиеся схемы взаимодействия, если это возможно, и обеспечивайте пользовательский интерфейс, знакомый пользователям. Люди имеют одинаковое ожидание от кнопки «назад» в любом приложении, выполняется на любом устройстве, не зависимо от того, это будет iOS, Android или Windows.

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