Вы читаете перевод статьи Николая Бабича “Designing Perfect Text Field: Clarity, Accessibility and User Effort”. Над переводом работали Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
В любое приложение или веб-сервис пользователь вводит свои данные: где-то в начале использования, где-то на протяжении всего взаимодействия. Поэтому продуктовые дизайнеры, разработчики и менеджеры продукта должны искать и реализовывать самые оптимальные способы ввода данных в продукт.
В этой статье мы поговорим о текстовых полях и рассмотрим ключевые факторы, способные улучшить процесс ввода данных. Помните, что это просто общие рекомендации — у всех правил есть исключения.
Текстовое поле
Текстовое поле — это базовый элемент управления текстом, который позволяет пользователю ввести определенное количество данных. Какое приложение ни возьми — во всех можно найти небольшое поле, куда вас просят ввести личные данные.
Даже когда вы вводите запрос в Google — вы тоже заполняете форму с одним единственным текстовым полем.
Понятность
Понятное название поля
Пользователь хочет знать, какую информацию нужно вводить в поле: именно поэтому у поля должно быть понятное название (лейбл). Конечно, иногда назначение поля можно понять по иконке (например, изображение лупы дает понять что перед нами поле поиска), но в большинстве случаев нужно четкое, всегда видимое название каждого поля.
В поле поиска в Apple iOS есть и иконка лупы, и заметное название поля
Понятные названия полей придают пользователю уверенности: значит, он все правильно понимает и совершает правильные действия.
Короткое название поля
Название поля — это не подсказка. Название должно быть краткими, лаконичными и описательными (слово или пара слов), чтобы пользователь мог быстро просканировать содержимое. Если хотите предоставить дополнительную информацию, подсказать или погрузить в контекст — добавьте подсказки, но не нужно перегружать название.
В предыдущей версии формы регистрации на Amazon было много лишних слов, а в результате страдала конверсия. Текущая версия гораздо лучше — названия стали короче.
Правильный размер поля
Размер поля должен соответствовать предполагаемому объему данных — так пользователям будет проще и понятнее. Поле должно быть такой длины, чтобы в него полностью помещалось большинство возможных вариантов ввода.
Фокус поля ввода
Когда поле в фокусе, это нужно подчеркнуть визуально: поле должно поменять цвет, или рамка должна подсветиться, или курсор должен моргнуть — что угодно.
Форма регистрации на Amazon дает пользователю четкие визуальные подсказки. Очевидно, что поле email сейчас в фокусе. Источник картинки: Amazon.
Подсказки для полей
Данные бывают разного формата. Конечно, в идеале нужно проектировать так, чтобы пользователю было удобно вводить свои данные. Но это не всегда возможно.
К примеру, номер телефона можно ввести через “+”, или через код страны, или через местный код, или вообще без кодов. Чтобы решить эту проблему, можно добавить инструкцию, пример или подсказку — и пользователь сам поймет, в каком формате вводить номер. Есть несколько способов решить проблему формата телефонных номеров:
- Авто-форматирование поля с номером. Это снимает любые вопросы и сомнения пользователя.
- Заглушка с описанием или примером. У заглушки один недостаток — она исчезнет, как только пользователь начнет заполнять поле.
Полезная информация
Полезную информацию (или сопроводительный текст) нужно использовать только если это необходимо: например, объяснить, зачем запрашиваем данные кредитки, или как будет использована информация о дате рождения, или чтобы дать ссылку на “Условия предоставления услуги”. Сопроводительный текст — отличный способ развеять сомнения пользователя и предотвратить ошибки ввода. Только есть такое правило: объем текста не должен превышать 100 слов.
Краткие пояснения у полей “Телефон” и “Дата заезда/дата выезда” помогают пользователям двигаться вперед. Источник картинки: thinkwithgoogle
Только для мобильных: тип клавиатуры должен соответствовать формату поля
Пользователи приложений любят, когда тип клавиатуры, которая появляется при нажатии на поле, соответствует данным, которые нужно ввести. На примере ниже мы видим, что пользователю слева придется дополнительно нажать на кнопку с цифрами, чтобы открыть цифровую клавиатуру и ввести нужное число.
Если планируете использовать этот прием, убедитесь, что он работает во всем приложении, а не только в отдельных полях. Источник картинки: thinkwithgoogle
Доступность
Цель: Чтобы всем пользователям (вне зависимости от их физических возможностей) было проще сканировать/заполнять поля.
Не пишите названия заглавными буквами
Никогда не используйте все заглавные — такое название будет очень сложно прочитать, и еще сложнее просканировать, потому что все буквы одной высоты.
ЗАГЛАВНЫЕ БУКВЫ сложнее читать, потому что у всех заглавных одинаковая прямоугольная форма, а для нашего восприятия это непривычно.
Названия, написанные “капсом” очень сложно читать.
Размер шрифта
Шрифт должен быть достаточно крупным, чтобы текст легко читался. Безопасный вариант — 16 px для основного текста. Конечно, размер шрифта зависит от контента и от других элементов на странице, но если вы сомневаетесь — выбирайте более крупный вариант.
Цвет текста в названии
Цвет названия должен соответствовать цветовой палитре вашего приложения, но в то же время должен быть достаточно контрастным (не слишком темным, не слишком ярким). В руководстве W3C предлагается такое соотношение для основного текста:
- Для мелкого текста соотношение контрастов должно быть не менее 4,5:1 по отношению к фону.
- Если текст крупный (жирный 14pt или обычный — от 18pt и выше) контраст с фоном должен быть не менее 3:1.
Чтобы названия читались, они должны быть достаточно контрастными по отношению к фону.
Сделайте удобные тап-зоны
В наше время можно сказать с уверенностью: кто-то из ваших пользователей открывает сайт/приложение на сенсорном устройстве. При проектировании мобильного интерфейса важно продумать удобные тап-зоны: они должны быть достаточно большими, чтобы нажать пальцем. Общепринятый размер тап-зоны — 45–57px, но если подгонять поля под этот размер, то на мобильных они будут казаться огромными. Поле размером 32px — 40px не выглядит слишком большим, и при этом достаточно удобно для нажатия пальцем.
Высота поля в Bootstrap 3 по умолчанию 34px — и это хороший базовый размер. Не стоит делать поля меньше.
Источник картинки: Mono company
Только для десктопов: задействуйте клавиатуру
Настройте форму так, чтобы пользователь мог заполнять все поля с клавиатуры. Опытные пользователи часто все делают при помощи клавиатуры: позаботьтесь, чтобы они могли легко переключаться между полями и заполнять их, не отрывая рук от клавиатуры. Подробные рекомендации по взаимодействию через клавиатуру вы найдете здесь.
Даже самое простое поле выбора даты должно отвечать требованиям руководства W3C. Источник изображения: Salesforce
Минимум усилий
Цель: Чтобы пользователь вводил как можно меньше данных.
Автозаполнение с умом
Вводить данные в поля совсем не весело. Поэтому вы можете облегчить пользователю этот процесс и автоматически заполнить некоторые поля. Например, можно определить штат по введенному ранее индексу. Еще можно предложить варианты, которые пользователь уже вводил ранее.
Еще пример: можно определить страну пользователя по IP-адресу. WhatsApp существенно облегчает ввод телефонного номера. Если вы заходите в приложение из США, код страны заполняется автоматически.
Автозаполнение и автопредложение
Автозаполнение предлагает варианты ввода в режиме реального времени — это помогает пользователям заполнять форму точнее и эффективнее. Это особенно актуально для малограмотных и иностранных пользователей.
Автопредложение — это отображение списка ключевых слов и фраз по теме, которые могут соответствовать (а могут и не соответствовать) введенному запросу. Если автозаполнение помогает пользователю закончить начатую фразу, то автопредложение выдает несколько разных вариаций этой фразы.
Если автозаполнение и автопредложение работают правильно, они значительно ускоряют процесс заполнения полей. В Google используются обе функции, чтобы опыт взаимодействия с поиском был максимально отзывчивым.
Поиск Google
В заключение
Процесс ввода данных нужно сделать максимально простым. Даже небольшие изменения — такие как вспомогательный текст и уточнение типа информации в каждом поле — могут существенно поднять юзабилити полей, а, значит, и качество UX в целом.
Спасибо!
Подписывайтесь на UX Planet: Twitter | Facebook
Изначально опубликовано на babich.biz