Чёткий

Чёткие текстовые метки

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

Окно поиска в Apple iOS помещает как ярлык, так и значок увеличительного стекла

Четкая маркировка позволяет пользователю быть более уверенным в себе, правильно понимать и правильно работать.

Короткие текстовые метки

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

Ранее страница регистрации Amazon была медленной из-за чрезмерно длинного текста тега.Текущая версия намного сильнее.

Разумный размер поля ввода

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

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

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

Введите запрос

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

Например, существует несколько способов ввода номера телефона, например,“+7", и в других случаях вы можете ввести строку из 11 цифр номера мобильного телефона, а стационарный номер более сложный, некоторые люди привыкают к коду города, а люди этого не делают. Столкнувшись с этой сложной ситуацией, вы можете “отформатировать” ввод, создав поле ввода, добавив подсказку ввода. Или ввести номер телефона, например：

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

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

Справочная информация

Справочная информация (или соответствующий текст) должна появляться там, где это необходимо, например, в форме, в которой указывается, почему необходимо ввести номер кредитной карты, льготы после даты рождения или наличие ссылки ”условия обслуживания". Они появляются своевременно, чтобы помочь пользователям объяснить некоторые запутанные вопросы. Как правило, в такой справочной информации лучше не превышать 100 слов.

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

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

Доступность

Цель: обеспечить доступность и удобство навигации и заполнения полей ввода для пользователей в разных ситуациях

Избегайте использования текстовых меток в верхнем регистре

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

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

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

Цвет этикетки

Цвет этикетки должен соответствовать общей цветовой гамме вашего приложения или веб-страницы, а также обеспечивать контрастность (не слишком темную и не слишком яркую). W3C имеет следующие требования к контрастности основного текста：

* Меньший текст должен обеспечивать соотношение контрастности не менее 4,5:1 между фоном

·более крупный текст (14pt Bold,18pt Regular) должен обеспечивать коэффициент контрастности между фоном и 3: 1

Обеспечивает удобную зону щелчка

Независимо от того, разрабатываете ли вы веб-страницу или приложение, вы должны учитывать опыт пользователей, когда они нажимают на экран на своем телефоне. Вам нужно убедиться, что область триггера достаточно свободна и удобна, когда пользователь нажимает на поле ввода, а не трудно нажимать. Как правило, область триггера большого пальца должна контролироваться от 45 до 57 пикселей, но на мобильных устройствах элементы управления выглядят слишком неудобно, поэтому высота вашего текстового поля должна быть рассчитана на 32 ~ 40 пикселей, чтобы она выглядела достаточно дружелюбной и не слишком большой.

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

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

Расходы пользователей

Цель: минимизировать пользовательский ввод

Умные пресеты

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

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

Автозаполнение и автоматическое предложение

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

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

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