Источник картинки: form-ux-tips

Проектируем идеальные текстовые поля: понятность, доступность и минимум усилий

Nancy Pong
Jul 26, 2017 · 7 min read

Вы читаете перевод статьи Николая БабичаDesigning Perfect Text Field: Clarity, Accessibility and User Effort”. Над переводом работали Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

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

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


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


Новое. Журнал для digital-дизайнеров. Посмотреть, что за зверь.


Текстовое поле

Понятность

Понятное название поля

В поле поиска в Apple iOS есть и иконка лупы, и заметное название поля

Понятные названия полей придают пользователю уверенности: значит, он все правильно понимает и совершает правильные действия.

Короткое название поля

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

Правильный размер поля

Фокус поля ввода

Форма регистрации на Amazon дает пользователю четкие визуальные подсказки. Очевидно, что поле email сейчас в фокусе. Источник картинки: Amazon.

Подсказки для полей

К примеру, номер телефона можно ввести через “+”, или через код страны, или через местный код, или вообще без кодов. Чтобы решить эту проблему, можно добавить инструкцию, пример или подсказку — и пользователь сам поймет, в каком формате вводить номер. Есть несколько способов решить проблему формата телефонных номеров:

  • Авто-форматирование поля с номером. Это снимает любые вопросы и сомнения пользователя.
  • Заглушка с описанием или примером. У заглушки один недостаток — она исчезнет, как только пользователь начнет заполнять поле.

Полезная информация

Краткие пояснения у полей “Телефон” и “Дата заезда/дата выезда” помогают пользователям двигаться вперед. Источник картинки: thinkwithgoogle

Только для мобильных: тип клавиатуры должен соответствовать формату поля

Если планируете использовать этот прием, убедитесь, что он работает во всем приложении, а не только в отдельных полях. Источник картинки: thinkwithgoogle

Доступность

Не пишите названия заглавными буквами

ЗАГЛАВНЫЕ БУКВЫ сложнее читать, потому что у всех заглавных одинаковая прямоугольная форма, а для нашего восприятия это непривычно.

Названия, написанные “капсом” очень сложно читать.

Размер шрифта

Цвет текста в названии

  • Для мелкого текста соотношение контрастов должно быть не менее 4,5:1 по отношению к фону.
  • Если текст крупный (жирный 14pt или обычный — от 18pt и выше) контраст с фоном должен быть не менее 3:1.
Чтобы названия читались, они должны быть достаточно контрастными по отношению к фону.

Сделайте удобные тап-зоны

Высота поля в Bootstrap 3 по умолчанию 34px — и это хороший базовый размер. Не стоит делать поля меньше.

Источник картинки: Mono company

Только для десктопов: задействуйте клавиатуру

Даже самое простое поле выбора даты должно отвечать требованиям руководства W3C. Источник изображения: Salesforce

Минимум усилий

Автозаполнение с умом

Еще пример: можно определить страну пользователя по IP-адресу. WhatsApp существенно облегчает ввод телефонного номера. Если вы заходите в приложение из США, код страны заполняется автоматически.

Автозаполнение и автопредложение

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

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

Поиск Google

В заключение

Спасибо!


Подписывайтесь на UX Planet: Twitter | Facebook

Изначально опубликовано на babich.biz


Если вам понравилась статья и перевод, дайте нам знать — нажмите ♡

А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Ольга Скулкина и Ринат Шайхутдинов.


Мобильное приложение «Заметки о психике» | Mental Notes

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

Скачать приложение в Appstore

Советы по проектированию интерфейса сайтов, мобильных приложений, и веб-сервисов

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

Translated from original by Nancy Pong.

Nancy Pong

Written by

Ольга Жолудова. Копирайтер и переводчик. Про копирайтинг: https://vk.com/copywriter.blog Про жизнь: https://www.instagram.com/nancypong4/

Советы по проектированию интерфейса сайтов, мобильных приложений, и веб-сервисов

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade