в какой поле вводится название приложения
Анатомия текстового поля
Полная инструкция о том, как проектировать UI/UX дизайн текстовых полей и создавать регистрационные формы. Лучшие советы и рекомендации сформировавшиеся за долгий опыт эволюции веб дизайна и развития мобильных приложений.
Тарас Бакусевич написал подробную статью о дизайне текстовых полей и форм. Он разбирает их на ключевые элементы и выделяет несколько типов в зависимости от заполняемой информации. Также он рассматривает поведение и состояния текстовых полей, их положение и количество на странице, и многое другое.
Текстовые поля позволяют пользователям вводить текст в интерфейс. Обычно они появляются в формах и диалоговых окнах. Компонент текстового поля должен обеспечивать четкую возможность взаимодействия, делая поля обнаруживаемыми в макетах, эффективными для заполнения и доступными.
Ключевые элементы обычного текстового поля:
1. Контейнер – интерактивная область ввода
2. Вводимый текст– текст, набираемый в текстовом поле
3. Текст метки – сообщите пользователям, какая информация принадлежит данному полю формы.
4. Текст-плейсхолдер – это описание или пример требуемой информации, которая заменяется текстом, напечатанным пользователем
5. Вспомогательный или проверочный текст (необязательно) – предоставляет дополнительный контекст или проверочное сообщение
6. Иконка перед полем (необязательно) – опишите тип ввода, который требуется для текстового поля
7. Иконка после поля (необязательно) – дополнительный контроль над вводимым текстом, например, скрыть / показать текст и т. д.
Типы текстовых полей
Большинство из них основаны на обычных текстовых полях, которые были изменены, чтобы лучше соответствовать определенным типам информации, например, номерам кредитных карт. Ниже представлено лишь несколько примеров типов полей ввода, которые чаще всего используются в создаваемых нами интерфейсах:
(Мы специально не говорим о таких типах полей ввода, как флажки и переключатели, о которых мы расскажем позже в этой серии статей)
Используйте тип поля ввода, соответствующий данным, которые вы собираете
Выбор правильного типа текстового поля для запрашиваемых данных поможет пользователям вводить информацию в правильном формате и позволит избежать ошибок, что сделает процесс заполнения максимально простым и эффективным.
Текстовые поля должны изменять внешний вид в зависимости от состояния и взаимодействий пользователя
Это можно сделать, предоставив визуальные подсказки, которые будут сообщать о состоянии текстового поля. Поля ввода могут иметь одно из следующих состояний: неактивно, наведение курсора, отключено, фокусировка, проверка, ошибка. Все состояния должны быть четко отделены друг от друга и согласованы по всей форме и применению. Лучше следовать устоявшимся практикам, чтобы не противоречить сформировавшимся пользовательским ментальным моделям.
Выбор лучшего стиля текстового поля
Обычно у вас будет три основных варианта расположения метки: над полем и с выравниванием по левому или правому краю. Выбор стиля будет зависеть от ключевых целей и размеров формы, библиотеки компонентов и платформы, для которой вы проектируете. Все они имеют свои преимущества и недостатки.
Подчеркнутое поле ввода, популяризированное рекомендациями Material design – не лучший выбор. Этот вариант был пересмотрен в результате большого исследования «Evolution of Material Design», которое я рекомендую вам прочитать. Это же исследование показало, что пользователи предпочитают поля ввода с закругленными углами.
Метки, выровненные по левому краю
Хороший выбор, когда запрашиваемые данные не знакомы пользователям.
Метки, выровненные по правому краю
Время заполнения полей формы почти в два раза быстрее по сравнению с метками, выровненными по левому краю
Метки над полем ввода
Самое быстрое время заполнения формы и лучший выбор для большинства случаев. Хорошо работают на мобильных устройствах, так как не требуют много горизонтального пространства
Вы можете узнать больше по этой теме в статье Люка Вроблевски «Лучшие примеры дизайна форм» и публикации Матео Пензо «Размещение меток в формах»
Длина текстового поля должна быть пропорциональна информации, ожидаемой от пользователя
Использование одинаковой длины поля ввода для всех текстовых полей в ваших формах сделает их визуально приятнее, но их будет сложнее заполнить.
Плейсхолдеры не являются заменой меток
Исчезающий текст-плейсхолдер напрягает кратковременную память пользователей. Без меток пользователи не могут проверить заполненную информацию перед отправкой формы. Если вам нужен очень минималистичный дизайн формы, вы можете использовать плавающие метки.
Текст-плейсхолдер внутри формы иногда может запутать пользователей, лучше использовать текстовую подсказку вне поля.
Помогите пользователям заполнить формы
Используйте встроенную проверку
«Проверка в реальном времени» – это проверка достоверности данных, введенных пользователем в режиме реального времени по мере заполнения формы, в отличие от одноразовой проверки данных при отправке формы. Реализуйте это правильно, чтобы не нанести вреда:
Уменьшите количество полей
Это снимет визуальную и когнитивную нагрузку, и форма будет выглядеть намного проще.
Скрывайте нерелевантные поля
Раскрывая информацию постепенно, мы показываем только самое необходимое и помогаем пользователям справляться со сложностью, когда это необходимо.
Используйте условную логику
Условная логика позволяет автоматически показывать или скрывать поля и пропускать страницы в форме, основываясь на ответах посетителей. Такой подход не только сократит количество полей, но и сделает процесс заполнения более персонализированным и похожим на разговор.
Группируйте связанные поля
Один из самых простых способов упростить сложные формы – начать группировать связанные поля. В гештальтпсихологии существует несколько принципов группирования, которые помогают предметам казаться связанными: близость, сходство, непрерывность, завершенность и связность. Группирование десятков неструктурированных полей в несколько управляемых наборов значительно повысит юзабилити формы.
Избегайте использования нескольких столбцов
Один столбец макета создает для пользователя четкий путь заполнения формы. При использовании нескольких столбцов пользователи могут пропускать поля, вводить данные в неправильные поля или просто останавливаются, что может привести к отказу от заполнения формы.
Разбейте сложные формы на несколько простых шагов
Иногда даже после удаления всего ненужного некоторые формы могут быть огромными. Разбивая огромные задачи на ряд меньших задач, формы выглядят намного проще и мотивируют пользователей выполнять процесс до конца.
Минимизируйте возможность навигации за пределами мастера
Если форма достаточно велика, чтобы разбить ее на несколько этапов, она заслуживает отдельного четко сфокусированного пространства для работы с ней. Предоставление общей навигации или любых ссылок, которые могут нарушить процесс, просто создаст путаницу. Я бы также советовал не использовать многошаговые формы в маленьких всплывающих окнах.
Показывайте соответствующий тип клавиатуры
Android или iOS предоставляют несколько разных типов клавиатуры, каждый из которых предназначен для облегчения заполнения информации разного типа. Чтобы упростить ввод данных, клавиатура, отображаемая при редактировании текстового поля, должна соответствовать типу содержимого поля. Помните, где клавиатура появится. Чтобы без необходимости не добавлять скролл, расположите текстовые поля в верхней области.
Шкатулка с секретами. Поля ввода
Это первая статья об элементах интерфейса из серии под названием «Шкатулка с секретами». Она посвящена очень простому на первый взгляд элементу, который есть практически на любом сайте и в любом приложении. Он — основа для получения обратной реакции от пользователя. То, как он сделан, сильно влияет на пользовательский опыт. Этот компонент — поле ввода.
Зачем я пишу эту статью? В процессе работы над интерфейсами я пыталась найти информацию о полях ввода и поняла, что это задача не из простых: информации крайне мало, она разбросана по источникам и почти не переведена на русский язык. Поэтому я решила, что такая статья точно будет полезной другим дизайнерам. Она отражает не только мой опыт, но и опыт моей любимой команды.
Начнем с определения
Input (поле ввода) — базовый компонент интерфейса, предназначенный для ввода небольшого объема текста.
Самое простое поле ввода содержит Label (лейбл или заголовок) и Text field (область для ввода текста). Чтобы пользователям было удобнее работать с полем ввода, базовый комплект может быть сильно расширен — об этом расскажу ниже.
Состав
Поле ввода — простой компонент, но он состоит из множества частей. Даже в базовом состоянии вам нужно будет определиться с:
Эти части создают единое целое, они задают ритм и задействуют все базовые элементы стиля.
Cостояния
На мой взгляд, самое важное при создании поля ввода — продумать все необходимые состояния. Об этом часто забывают: возможно, потому что знания о таких вещах доходят обрывками.
Базовое активное состояние поля ввода, когда пользователь с ним не взаимодействует, но может сделать это в любой момент.
Нужно только для веб-интерфейсов, где есть мышь или тачпад. Поле ввода может визуально реагировать на это событие. Например, немного менять цвет обводки в области для ввода текста.
Это активное состояние поля ввода, когда пользователь с ним взаимодействует — заполняет данные. Фокус появится, если нажать на поле ввода или переключиться на него с помощью клавиатуры. По умолчанию в браузере уже встроен дизайн состояния фокуса, но его можно изменить.
Неактивное состояние, когда пользователь не может взаимодействовать с полем. Чаще всего у неактивного поля снижен контраст, а область ввода залита серым.
Состояние, которое показывает, что текст поля не проходит по требованиям и его нельзя отправить. Ошибки возникают, когда поле валидируется — проверяется, что все новые данные отвечают требованиям.
Если возникла ошибка, поле ввода должно среагировать на это событие — чаще всего обводка области ввода становится красной. Может измениться и заливка: например, стать розовой. Рядом с полем ввода появляется сообщение для пользователя: так он понимает, что произошло и как исправить ошибку.
Про доступность
Создавая доступный интерфейс, вы заботитесь о том, чтобы им мог пользоваться любой человек — независимо от того, какие у него особенности.
Что стоит учитывать дизайнерам:
Документация для поля ввода
С этими знаниями вы сможете грамотно подготовить компонент. Ваша документация должна содержать все необходимые состояния для передачи в разработку.
Дополнительные компоненты в поле ввода
Кроме базовых элементов, о которых я говорила в начале статьи, у поля ввода может быть большое количество вспомогательных. В статье я не могу охватить все, но постараюсь рассказать о самых распространенных и полезных.
Пример заполнения (placeholder)
Предзаполненный текст внутри поля ввода показывает, что можно написать. Этот текст пропадает при начале ввода, поэтому его нельзя (даже если очень хочется) использовать вместо лейбла.
Дополнительная текстовая строка — самый частый спутник поля ввода. Используется, если нужно дать пользователю больше информации.
Подсказки могут быть примитивными или более сложными по структуре. Сложные варианты встречаются при создании логина или пароля, когда надо учесть много условий: например, может появиться шкала сложности и надежности пароля.
Текстовый скелет, который помогает людям понять, в каком формате вводить данные. Часто маску можно встретить на полях для ввода даты, номера карты или телефона. Маска может самостоятельно ставить пробелы, точки или другие символы, чтобы упростить и ускорить процесс заполнения.
Чаще всего защиту делают в виде иконки глаза, при клике на который можно скрыть или показать заполненные данные. Такая иконка почти всегда есть около поля с вводом пароля.
Технология автозаполнения поисковой строки работает по статистике самых популярных запросов. Это очень распространенное дополнение, поэтому его можно встретить на сайте любого поисковика. Варианты подтягиваются из базы данных вертикальным списком — пользователь может выбрать что-то из этого списка, а может и не выбирать. После клика на любой пункт открывается новая страница.
Очень похоже на саджест, так как по сути у них одна цель. В отличие от саджеста, автозаполнение просто заполняет строку текстом. Показательный пример — автоматическое заполнение полного адреса, когда человек ввел только одну основную часть.
Есть случаи, когда саджест и автозаполнение применяются одновременно.
В этой ситуации при клике на словосочетание откроется новая страница — сработает саджест. Если кликнуть на иконку справа, поле ввода автоматически заполнится — сработает автокомплит.
Есть и другие дополнительные опции для полей ввода: например, виртуальная клавиатура или возможность голосового ввода. Они применяются редко, но бывают крайне полезны в определенных обстоятельствах.
Браузерные дополнения
Браузеры научились помогать людям быстрее и проще взаимодействовать с полями ввода. Они могут добавлять различные дополнительные элементы управления внутрь поля. Важно помнить об этом, потому что такие дополнения могут влиять на размер поля ввода и перекрывать его элементы.
Это зависит от конкретного браузера и даже от его версии. Когда frontend-разработчик делает поле ввода, он может задать ему определенное назначение. Полный список элементов можно посмотреть тут. Есть поля, предназначенные для пароля, даты, телефона, цифр и прочего. Все браузеры реагируют на поля ввода по-разному, внешний вид этих вспомогательных элементов от вас не зависит — только от операционной системы и браузера. В некоторых браузерах на эти элементы можно влиять, в других — нет.
На картинке выше показаны примеры одного и того же поля ввода в разных операционных системах и браузерах.
Если в вашем поле ввода уже есть иконка, но для поля установлено назначение, то вы можете наблюдать разные интересные ситуации, например, дублирование.
UI-элементы и жесты в мобильных приложениях
Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.
А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.
Splashscreen — изображение, «заставка», которую пользователь видит во время загрузки приложения.
Заглушка — название говорит само за себя: это элемент, сигнализирующий о какой-то проблеме(отсутствует интернет-соединение, сервер временно недоступен, ведутся технические работы, по вашему запросу ничего не найдено и т.п.). Обычно заглушка отображается там, где должен быть контент, но по каким-то причинам он не был получен.
Webview — компонент, который позволяет отобразить страницы веб-сайта в приложении. Например, webview «Как получить бонусы»:
Popup — всплывающее окно, которое появляется внезапно, без запроса пользователя, и отображается поверх экрана, на котором находился пользователь. Не стоит путать с диалоговым окном, которое появляется при совершении пользователем какого-либо действия.
Action menu — кнопка, которая представляет собой три точки, и при нажатии (тапе) на которую открывается меню с несколькими action’ами.
Tab — вкладка; обычно переключение между табами осуществляется нажатием (тапом) на нужный таб или смахивание (свайпом) вправо/влево.
Toast — всплывающее уведомление, не блокирующее работоспособность приложения и плавно исчезающее спустя несколько секунд. Может сообщать о какой-то ошибке, о совершении какого-то действия (например, публикация каких-то изменений). Обычно тоаст содержит текстовую информацию, но может содержать и картинку.
Progress Bar — индикатор степени выполнения какого-либо действия (например, показывает оставшееся время работы активности «продвижение товара»).
TabBar — панель вкладок в нижней части экрана, позволяющая быстро переключаться между разделами приложения.
AppBar (Android) / NavBar (iOS) — панель инструментов в верхней части экрана, содержащая кнопки управления текущим экраном.
Alert — оповещение, которое передает важную информацию, связанную с состоянием приложения или устройства, и часто запрашивает обратную связь. Алерт состоит из заголовка, необязательного сообщения, одной или нескольких кнопок.
Toggle switches/Тумблер — переключатель между двумя состояниями вкл/выкл.
Bottomsheet — информационная панель, появляющаяся снизу экрана поверх текущего состояния при совершении какого-нибудь действия. Может содержать информацию, а также какие-либо действия.
Bubble — овальный элемент выбора какого-либо параметра, чаще всего используется в фильтрах.
Строка поиска — поле ввода для поискового запроса.
Placeholder — текстовая заглушка в поле ввода, подсказывающая, что можно туда ввести (на скринах — текст «Поиск объявлений»).
Page Controls — элемент управления, который отображает текущее положение экрана в плоском списке страниц (на скринах — точки над кнопкой, отображающие текущее положение через изменение цвета).
Counter — точка или число, обозначающее количество непросмотренных уведомлений (например, количество непрочитанных сообщений).
Overlay — перекрывающий слой, который позволяет затемнить или осветлить элемент, на который он был наложен.
Tooltip — всплывающее сообщение, которое завязано на элемент и обучает использованию той или иной части приложения.
Onboarding — обучающая функциональность в приложении, появляющаяся при первом запуске для ознакомления пользователя с продуктом.
Suggest List — выпадающий список, состоящий из подсказок; появляется при вводе букв, слов или символов в поле ввода. Или список ранее совершенных поисковых запросов. Отдельный пункт из этого списка — Suggest.
Checkbox — элемент интерфейса, позволяющий выбрать любое количество опций (ни одной, одну или несколько).
Status Bar — строка состояния, содержащая общую информацию об устройстве: время, дату, сеть, уровень заряда и т.п.
Slider — горизонтальная шкала с элементом управления, по которой скольжением пальца можно управлять состоянием или значением характеристики (в нашем случае — расстоянием от указанного адреса):
Жесты
Тап — касание, нажатие на сенсорный экран. Чтобы открыть любое приложение на смартфоне — мы тапаем на его иконку.
Double tap — два коротких касания, двойной тап.
Мультитап — три и более тапов подряд по одному элементу.
Лонгтап — нажатие с удержанием на несколько секунд. Позволяет открыть дополнительные опции там, где они есть.
Скролл — вертикальное пролистывание содержимого скольжением пальца по экрану сверху вниз или снизу вверх.
Свайп — смахивание вниз, вверх, вправо или влево. Похоже на скролл, только с «легким», коротким касанием.
Pull to refresh (p2r) — дословный перевод: «потяни для обновления».
Drag&Drop — изменение положения элементов интерфейса с помощью перетягивания: как говорит нам название — «тащи и бросай»!
Pinch — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.
Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?