в какой поле вводится название приложения
Проектируем идеальные текстовые поля: понятность, доступность и минимум усилий
В любое приложение или веб-сервис пользователь вводит свои данные: где-то в начале использования, где-то на протяжении всего взаимодействия. Поэтому продуктовые дизайнеры, разработчики и менеджеры продукта должны искать и реализовывать самые оптимальные способы ввода данных в продукт.
В этой статье мы поговорим о текстовых полях и рассмотрим ключевые факторы, способные улучшить процесс ввода данных. Помните, что это просто общие рекомендации — у всех правил есть исключения.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Текстовое поле
Текстовое поле — это базовый элемент управления текстом, который позволяет пользователю ввести определенное количество данных. Какое приложение ни возьми — во всех можно найти небольшое поле, куда вас просят ввести личные данные. Даже когда вы вводите запрос в Google — вы тоже заполняете форму с одним единственным текстовым полем.
Понятность
Понятное название поля
Пользователь хочет знать, какую информацию нужно вводить в поле: именно поэтому у поля должно быть понятное название (лейбл). Конечно, иногда назначение поля можно понять по иконке (например, изображение лупы дает понять что перед нами поле поиска), но в большинстве случаев нужно четкое, всегда видимое название каждого поля.
Понятные названия полей придают пользователю уверенности: значит, он все правильно понимает и совершает правильные действия.
Короткое название поля
Название поля — это не подсказка. Название должно быть краткими, лаконичными и описательными ( слово или пара слов), чтобы пользователь мог быстро просканировать содержимое. Если хотите предоставить дополнительную информацию, подсказать или погрузить в контекст — добавьте подсказки, но не нужно перегружать название.
Правильный размер поля
Размер поля должен соответствовать предполагаемому объему данных — так пользователям будет проще и понятнее. Поле должно быть такой длины, чтобы в него полностью помещалось большинство возможных вариантов ввода.
Фокус поля ввода
Когда поле в фокусе, это нужно подчеркнуть визуально: поле должно поменять цвет, или рамка должна подсветиться, или курсор должен моргнуть — что угодно.
Подсказки для полей
Данные бывают разного формата. Конечно, в идеале нужно проектировать так, чтобы пользователю было удобно вводить свои данные. Но это не всегда возможно.
К примеру, номер телефона можно ввести через “+”, или через код страны, или через местный код, или вообще без кодов. Чтобы решить эту проблему, можно добавить инструкцию, пример или подсказку — и пользователь сам поймет, в каком формате вводить номер. Есть несколько способов решить проблему формата телефонных номеров:
Полезная информация
Полезную информацию (или сопроводительный текст) нужно использовать только если это необходимо: например, объяснить, зачем запрашиваем данные кредитки, или как будет использована информация о дате рождения, или чтобы дать ссылку на “Условия предоставления услуги”. Сопроводительный текст — отличный способ развеять сомнения пользователя и предотвратить ошибки ввода. Только есть такое правило: объем текста не должен превышать 100 слов.
Только для мобильных: тип клавиатуры должен соответствовать формату поля
Пользователи приложений любят, когда тип клавиатуры, которая появляется при нажатии на поле, соответствует данным, которые нужно ввести. На примере ниже мы видим, что пользователю слева придется дополнительно нажать на кнопку с цифрами, чтобы открыть цифровую клавиатуру и ввести нужное число.
Доступность
Цель: Чтобы всем пользователям (вне зависимости от их физических возможностей) было проще сканировать/заполнять поля.
Не пишите названия заглавными буквами
Никогда не используйте все заглавные — такое название будет очень сложно прочитать, и еще сложнее просканировать, потому что все буквы одной высоты.
ЗАГЛАВНЫЕ БУКВЫ сложнее читать, потому что у всех заглавных одинаковая прямоугольная форма, а для нашего восприятия это непривычно.
Размер шрифта
Шрифт должен быть достаточно крупным, чтобы текст легко читался. Безопасный вариант — 16 px для основного текста. Конечно, размер шрифта зависит от контента и от других элементов на странице, но если вы сомневаетесь — выбирайте более крупный вариант.
Цвет текста в названии
Цвет названия должен соответствовать цветовой палитре вашего приложения, но в то же время должен быть достаточно контрастным (не слишком темным, не слишком ярким). В руководстве W3C предлагается такое соотношение для основного текста:
Сделайте удобные тап-зоны
В наше время можно сказать с уверенностью: кто-то из ваших пользователей открывает сайт/приложение на сенсорном устройстве. При проектировании мобильного интерфейса важно продумать удобные тап-зоны: они должны быть достаточно большими, чтобы нажать пальцем. Общепринятый размер тап-зоны — 45–57px, но если подгонять поля под этот размер, то на мобильных они будут казаться огромными. Поле размером 32px — 40px не выглядит слишком большим, и при этом достаточно удобно для нажатия пальцем.
Высота поля в Bootstrap 3 по умолчанию 34px — и это хороший базовый размер. Не стоит делать поля меньше.
Только для десктопов: задействуйте клавиатуру
Настройте форму так, чтобы пользователь мог заполнять все поля с клавиатуры. Опытные пользователи часто все делают при помощи клавиатуры: позаботьтесь, чтобы они могли легко переключаться между полями и заполнять их, не отрывая рук от клавиатуры. Подробные рекомендации по взаимодействию через клавиатуру вы найдете здесь.
Минимум усилий
Цель: Чтобы пользователь вводил как можно меньше данных.
Автозаполнение с умом
Вводить данные в поля совсем не весело. Поэтому вы можете облегчить пользователю этот процесс и автоматически заполнить некоторые поля. Например, можно определить штат по введенному ранее индексу. Еще можно предложить варианты, которые пользователь уже вводил ранее.
Еще пример: можно определить страну пользователя по IP-адресу. WhatsApp существенно облегчает ввод телефонного номера. Если вы заходите в приложение из США, код страны заполняется автоматически.
Автозаполнение и автопредложение
Автозаполнение предлагает варианты ввода в режиме реального времени — это помогает пользователям заполнять форму точнее и эффективнее. Это особенно актуально для малограмотных и иностранных пользователей.
Автопредложение — это отображение списка ключевых слов и фраз по теме, которые могут соответствовать (а могут и не соответствовать) введенному запросу. Если автозаполнение помогает пользователю закончить начатую фразу, то автопредложение выдает несколько разных вариаций этой фразы.
Если автозаполнение и автопредложение работают правильно, они значительно ускоряют процесс заполнения полей. В Google используются обе функции, чтобы опыт взаимодействия с поиском был максимально отзывчивым.
В заключение
Процесс ввода данных нужно сделать максимально простым. Даже небольшие изменения — такие как вспомогательный текст и уточнение типа информации в каждом поле — могут существенно поднять юзабилити полей, а, значит, и качество UX в целом.
Изначально опубликовано на babich.biz
Если вам понравилась статья и перевод, дайте нам знать — нажмите ♡
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Мобильное приложение «Заметки о психике» | Mental Notes
Полезный инструмент для встряхивания мозгов. Подкидывает идей как привлечь, удержать и направить внимание пользователя
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Шкатулка с секретами. Поля ввода
Это первая статья об элементах интерфейса из серии под названием «Шкатулка с секретами». Она посвящена очень простому на первый взгляд элементу, который есть практически на любом сайте и в любом приложении. Он — основа для получения обратной реакции от пользователя. То, как он сделан, сильно влияет на пользовательский опыт. Этот компонент — поле ввода.
Зачем я пишу эту статью? В процессе работы над интерфейсами я пыталась найти информацию о полях ввода и поняла, что это задача не из простых: информации крайне мало, она разбросана по источникам и почти не переведена на русский язык. Поэтому я решила, что такая статья точно будет полезной другим дизайнерам. Она отражает не только мой опыт, но и опыт моей любимой команды.
Начнем с определения
Input (поле ввода) — базовый компонент интерфейса, предназначенный для ввода небольшого объема текста.
Самое простое поле ввода содержит Label (лейбл или заголовок) и Text field (область для ввода текста). Чтобы пользователям было удобнее работать с полем ввода, базовый комплект может быть сильно расширен — об этом расскажу ниже.
Состав
Поле ввода — простой компонент, но он состоит из множества частей. Даже в базовом состоянии вам нужно будет определиться с:
Эти части создают единое целое, они задают ритм и задействуют все базовые элементы стиля.
Cостояния
На мой взгляд, самое важное при создании поля ввода — продумать все необходимые состояния. Об этом часто забывают: возможно, потому что знания о таких вещах доходят обрывками.
Базовое активное состояние поля ввода, когда пользователь с ним не взаимодействует, но может сделать это в любой момент.
Нужно только для веб-интерфейсов, где есть мышь или тачпад. Поле ввода может визуально реагировать на это событие. Например, немного менять цвет обводки в области для ввода текста.
Это активное состояние поля ввода, когда пользователь с ним взаимодействует — заполняет данные. Фокус появится, если нажать на поле ввода или переключиться на него с помощью клавиатуры. По умолчанию в браузере уже встроен дизайн состояния фокуса, но его можно изменить.
Неактивное состояние, когда пользователь не может взаимодействовать с полем. Чаще всего у неактивного поля снижен контраст, а область ввода залита серым.
Состояние, которое показывает, что текст поля не проходит по требованиям и его нельзя отправить. Ошибки возникают, когда поле валидируется — проверяется, что все новые данные отвечают требованиям.
Если возникла ошибка, поле ввода должно среагировать на это событие — чаще всего обводка области ввода становится красной. Может измениться и заливка: например, стать розовой. Рядом с полем ввода появляется сообщение для пользователя: так он понимает, что произошло и как исправить ошибку.
Про доступность
Создавая доступный интерфейс, вы заботитесь о том, чтобы им мог пользоваться любой человек — независимо от того, какие у него особенности.
Что стоит учитывать дизайнерам:
Документация для поля ввода
С этими знаниями вы сможете грамотно подготовить компонент. Ваша документация должна содержать все необходимые состояния для передачи в разработку.
Дополнительные компоненты в поле ввода
Кроме базовых элементов, о которых я говорила в начале статьи, у поля ввода может быть большое количество вспомогательных. В статье я не могу охватить все, но постараюсь рассказать о самых распространенных и полезных.
Пример заполнения (placeholder)
Предзаполненный текст внутри поля ввода показывает, что можно написать. Этот текст пропадает при начале ввода, поэтому его нельзя (даже если очень хочется) использовать вместо лейбла.
Дополнительная текстовая строка — самый частый спутник поля ввода. Используется, если нужно дать пользователю больше информации.
Подсказки могут быть примитивными или более сложными по структуре. Сложные варианты встречаются при создании логина или пароля, когда надо учесть много условий: например, может появиться шкала сложности и надежности пароля.
Текстовый скелет, который помогает людям понять, в каком формате вводить данные. Часто маску можно встретить на полях для ввода даты, номера карты или телефона. Маска может самостоятельно ставить пробелы, точки или другие символы, чтобы упростить и ускорить процесс заполнения.
Чаще всего защиту делают в виде иконки глаза, при клике на который можно скрыть или показать заполненные данные. Такая иконка почти всегда есть около поля с вводом пароля.
Технология автозаполнения поисковой строки работает по статистике самых популярных запросов. Это очень распространенное дополнение, поэтому его можно встретить на сайте любого поисковика. Варианты подтягиваются из базы данных вертикальным списком — пользователь может выбрать что-то из этого списка, а может и не выбирать. После клика на любой пункт открывается новая страница.
Очень похоже на саджест, так как по сути у них одна цель. В отличие от саджеста, автозаполнение просто заполняет строку текстом. Показательный пример — автоматическое заполнение полного адреса, когда человек ввел только одну основную часть.
Есть случаи, когда саджест и автозаполнение применяются одновременно.
В этой ситуации при клике на словосочетание откроется новая страница — сработает саджест. Если кликнуть на иконку справа, поле ввода автоматически заполнится — сработает автокомплит.
Есть и другие дополнительные опции для полей ввода: например, виртуальная клавиатура или возможность голосового ввода. Они применяются редко, но бывают крайне полезны в определенных обстоятельствах.
Браузерные дополнения
Браузеры научились помогать людям быстрее и проще взаимодействовать с полями ввода. Они могут добавлять различные дополнительные элементы управления внутрь поля. Важно помнить об этом, потому что такие дополнения могут влиять на размер поля ввода и перекрывать его элементы.
Это зависит от конкретного браузера и даже от его версии. Когда frontend-разработчик делает поле ввода, он может задать ему определенное назначение. Полный список элементов можно посмотреть тут. Есть поля, предназначенные для пароля, даты, телефона, цифр и прочего. Все браузеры реагируют на поля ввода по-разному, внешний вид этих вспомогательных элементов от вас не зависит — только от операционной системы и браузера. В некоторых браузерах на эти элементы можно влиять, в других — нет.
На картинке выше показаны примеры одного и того же поля ввода в разных операционных системах и браузерах.
Если в вашем поле ввода уже есть иконка, но для поля установлено назначение, то вы можете наблюдать разные интересные ситуации, например, дублирование.
Поле ввода Input
Поле ввода дает возможность указать значение с помощью клавиатуры.
Когда использовать
Используйте поле ввода для коротких текстовых или цифровых значений без предсказуемого формата.
Если нужно ввести больше 5 слов — используйте многострочное поле ввода.
Если вводимое значение имеет определенный формат, используйте специальную версию поля:
В HTML5 поле ввода может быть разных типов — color, date, email, password, text, url и т.д. В сервисах Контура используйте только типы text и password. Остальные типы либо не поддерживаются основными браузерами, либо предлагают плохой пользовательский интерфейс и валидацию, которая будет отличаться по дизайну от нашей.
Название
Название поля пишется с заглавной буквы.
Называйте поле ввода существительным, указывающим что нужно ввести. Избегайте в названии слов «ваш», «введите» и подобных — они не несут смысла.
Не ставьте двоеточие после названия: без него все понятно, оно только создает лишний визуальный шум.
Описание работы
Плейсхолдер
Если из названия не очевидно, как заполнять поле, используйте плейсхолдер – подсказку, которая отображается внутри поля, пока оно не заполнено.
Плейсхолдер (от английского placeholder) — местозаполнитель. Часто используют синоним «ватермарк», но плейсхолдер — более правильное название, т.к. совпадает с соответствующим атрибутом тегов input и textarea.
При получении полем фокуса плейсхолдер становится светлее, при вводе первого символа исчезает.
Плейсхолдер не должен подсказывать конкретное значение, которое нужно ввести в поле.
Если поле вычисляемое и вы рассчитали значение — используйте автополе:
Если вы предполагаете значение — предзаполните поле, пользователь сможет его отредактировать:
Не используйте плейсхолдер для указания формата структурированных значений. Для этого есть поле с маской.
Помещать название поля в плейсхолдер можно в исключительных случаях: когда нужно сэкономить место, или предназначение поля очевидно:
Не используйте плейсхолдер для указания названий полей во всей форме. В заполненном состоянии такая форма становится «слепой»:
Очистка поля
Если пользователю нужно часто очищать поле и вводить новое значение — используйте для этого специальную кнопку-крестик.
Крестик показывается, когда в поле введен хотя бы 1 символ. Крестик показывается даже когда фокус находится вне поля.
При клике на крестик фокус переходит в поле, введенное значение стирается:
Для иконки используется символ из шрифта Kontur Iconic. При наведении иконка становится темнее:
Область для нажатия по высоте равна полю ввода, по ширине 28 px:
Internet Explorer 10 рисует свой крестик для любого поля ввода в фокусе. Чтобы этот крестик не перекрывал нашу иконку, нужно дописать стиль:
Счетчик количества введенных символов
Счетчик введенных символов в обычном инпуте работает так же, как и в многострочном поле. Располагается справа, на той же строке, что и вводимый текст:
Не реализовано в библиотеке React UI — #2208
Смотрите подробное описание работы счетчика в гайде по многострочному полю.
Размер и расположение
Поле ввода, как и кнопка, может быть трех размеров. Используйте средние и большие поля ввода в том случае, если это главные контролы на странице. Например, поле поиска в справочнике. В средних полях размер шрифта — 16 px, а в самых больших — 18 px.
Название поля должно выравниваться по базовой линии текста в поле:
Название поля в несколько строк должно выравниваться по базовой линии первой строки:
В многострочном поле название должно выравниваться по базовой линии первой строки введенного в поле текста:
Ширину поля делайте соответствующей ширине вводимого значения. Это подсказывает пользователю какое значение от него ожидают, помогает пользователю убедиться, что он правильно заполнил поле.
В рамках одной формы нужно выбрать 3-4 ширины для полей. Так форма выглядит проще и аккуратнее.
Фокус и работа с клавиатурой
При клике по полю и при переходе табом поле выглядит одинаково: появляется синяя рамка, которая сохраняется до потери фокуса.
Cиняя рамка фокуса не появляется если поле находится в состоянии ошибки или предупреждения, до тех пор пока значение в поле не будет изменено.
Допустимо переносить фокус на следующее поле при нажатии клавиши Enter в поле — иногда такое поведение удобно и интуитивно понятно для пользователя. Если поле последнее в форме, переход фокуса по Enter не должен происходить на кнопку отправки формы.
Валидация
Поле с ошибкой подсвечивается красной рамкой.
О поведении полей ввода с ошибками читайте в гайде по валидации.
Дизайн
Верхняя граница поля чуть темнее, чем остальные. У поля есть внутренняя однопиксельная тень. В рамке поля используется чисто черный цвет с прозрачностью — так поле достаточно контрастно выглядит на серых и цветных фонах.