Люди, которые используют ваше мобильное приложение или сайт, преследуют определенную цель. Обычно то, что стоит между пользователем и его целью - это форма. Фактически, формы считаются финальным шагом в процессе достижения пользовательских целей. Вот почему так важно, чтобы пользователь заполнял форму максимально быстро и без каких-либо препятствий. Следуйте этим семи правилам для создания простых и понятных форм:
Правило №1: Формы должны быть совместимы с тем, как пользователь вводит свои данные
Убедитесь в том, что поля формы не перекрываются элементами интерфейса (например, клавиатурой). По мере заполнения пользователем полей формы, автоматически поднимайте поля вверх.
Правило №2: Минимизируйте количество полей ввода и необходимость пользователя печатать
Чем длиннее и сложнее выглядит форма, тем меньше вероятность того, что пользователи захотят заполнять пустые места, особенно на маленьких экранах. Уменьшив количество полей ввода, вы сделаете вашу форму менее загруженной, особенно когда вы запрашиваете у пользователя большое количество информации. 
Умные дефолты
Умные дефолты помогают пользователям быстрее и точнее заполнить все поля формы. Например, вы можете сделать предвыбор страны проживания пользователя на основе данных его геолокации. 
Радиобаттоны для схожих, но взаимоисключающих вариантов выбора
Когда перед пользователем стоит выбор из списка опций, рассмотрите возможность использования горизонтального списка тегов. Это позволяет более эффективно использовать доступное пространство экрана.
Слайдеры для минимальной/максимальной цены или диапазона бюджета
Подумайте об использовании слайдеров для полей, которые содержат цены или бюджет. Так пользователь сможет двигать слайдер к минимальному/максимальному значению. Слайдер легко перемещать по-горизонтали, а также можно запросто кастомизировать это действие при помощи визуальных подсказок. Но помните, что числа не должны скрываться при взаимодействии со слайдером (особенно при использовании большими пальцами). 
Правило №3: Заголовки формы должны находиться либо выше самих полей, либо быть плавающими
Заголовки говорят пользователю об основной цели поля и четкий текст является одним из главных способов сделать UI более доступным.
Почему никогда не стоит использовать текстовые заголовки внутри поля
Заголовки внутри поля (или плейсхолдер) - это текст, который находится внутри поля формы, который исчезает как только пользователь начинает вводить свои данные. 
Почему выравнивание заголовков полей по левому краю плохо для мобильных устройств
Главное, что необходимо учитывать при использовании заголовков, выровненных по левому краю, на мобильном устройстве - это размер экрана и соотношении сторон. Если заголовок слева стоит напротив поля, то при вертикальной ориентации экрана, у вас останется очень мало места для самого поля. Это создает определенную сложность в использовании потому, что остается недостаточно места для отображения того, что вводит пользователь. Невозможность увидеть введенный текст, создает проблему для пользователей потому, что это не дает возможности быстро заметить ошибку при вводе перед подтверждением формы. 
Заголовок сверху или адаптивный заголовок
Заголовки форм должны сверху полей формы так, чтобы пользователи видели, что они заполняют и как. Основное преимущество расположения заголовков форм над формой состоит в том, что вы можете растянуть форму по всей ширине экрана и сделать ее достаточно большой для ввода данных (например, с размером шрифта в 16 пикселей). Дополнительным преимуществом будет возможность написание четких и понятных заголовков (не ограничиваясь 1-2мя словами). 
Правило №4: Валидация поля формы должна происходить в режиме реального времени
В идеальном мире, пользователи заполнят форму необходимой информацией и успешно завершат эту задачу. В реальном мире, пользователи часто допускают ошибки. При этом пользователям не нравится то, что после всего процесса заполнения полей, они доходят до кнопки “отправить” и обнаруживают, что они сделали ошибку. Правильно будет сообщить пользователю об успехе/ошибки в поле сразу после его заполнения. Валидационное сообщение сразу информирует пользователя о корректности введенной информации. Такой подход позволяет пользователям исправить допущенные ошибки быстрее и без необходимости ждать отображения ошибок после нажатия сабмит кнопки. 
Правило №5: Отображение раскладки клавиатуры соответственно вводимым данным
Пользователи предпочитают соответствующую раскладку клавиатуры в приложении. Например, когда пользователю надо вводить номер кредитной карты, показывайте только ввод цифр для того, чтобы пользователь вводил цифры а не символы. Это увеличит скорость заполнения и уменьшит количество возможных ошибок ввода. 
Правило №6: Предоставляйте полезную информацию в контексте
Иногда, возникает необходимость предоставить релевантную и полезную информацию для упрощения процесса прохождения формы пользователем. Но такой сопроводительный текст должен использоваться только там, где он действительно необходим:
- При планировании дат, пользователи ценят контекст типа встроенного календаря для определения дней недели. Это снижает необходимость выхода из приложения для просмотра календаря, что снижает риск того, что пользователь отвлечется от своей основной задачи.
- Люди могут задумываться о безопасности своих данных, поэтому вам необходимо показать им, что их данные не будут переданы третьим лицам.
Правило №7: Используйте гибкий формат
Некоторые задачи требуют от пользователя очень точной информации. Но, в тоже время, требовать от пользователя предоставить информацию в конкретном виде, может идти врозь с принципами хорошего юзабилити. Если вы просите пользователя ввести цифровые данные (например, номер телефона) в форму, используйте гибкий подход и создавайте экраны, которые могут поддерживать разные форматы ввода и отображать информацию в наиболее удобном для пользователя виде для предотвращения ошибок. 
Вывод
У пользователя могут возникнуть разного рода сомнения при заполнении формы, поэтому вам следует постараться максимально упростить этот процесс. Все советы, описанные в данной статье, могут значительно повысить юзабилити форм. Спасибо!
Перевод статьи Nick Babich
Найстарші коментарі (0)