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

Следуйте этим семи правилам для создания простых и понятных форм:

Правило №1: Формы должны быть совместимы с тем, как пользователь вводит свои данные

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

Ввод данных

Правило №2: Минимизируйте количество полей ввода и необходимость пользователя печатать

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

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

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

Умные дефолты

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

Автоматическое определение локации Автоматическое определение локации позволит сэкономить время пользователю на поиск номера в гостинице

Радиобаттоны для схожих, но взаимоисключающих вариантов выбора

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

Радиобаттоны

Слайдеры для минимальной/максимальной цены или диапазона бюджета

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

Слайдер в форме AirBnB Слайдер в форме AirBnB для выбора цены

Правило №3: Заголовки формы должны находиться либо выше самих полей, либо быть плавающими

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

Почему никогда не стоит использовать текстовые заголовки внутри поля

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

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

Текст внутри поля является Текст внутри поля является не самой лучшей заменой визуального заголовка

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

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

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

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

Заголовок сверху или адаптивный заголовок

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

Адаптивный заголовок

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

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

Текст плейсхолдера

Правило №4: Валидация поля формы должна происходить в режиме реального времени

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

Валидация поля формы в реальном времени

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

Что нужно ввести и в каком виде

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

Строчная валидация

Правило №5: Отображение раскладки клавиатуры соответственно вводимым данным

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

Раскладка клавиатуры

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

Правило №6: Предоставляйте полезную информацию в контексте

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

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

ПОлезная информация в контексте

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

Безопасность данных

В качестве правила хорошего тона, не стоит растягивать объяснение на 100 символов.

Правило №7: Используйте гибкий формат

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

Гибкий формат ввода данных Не используйте фиксированный формат ввода данных

Вывод

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

Спасибо!