Микротекст в интерфейсе – это короткие текстовые фрагменты, которые помогают пользователю разобраться, что делать, куда кликать и что произойдет дальше. Это могут быть подсказки при наведении, сообщения об ошибках, уточняющие фразы рядом с кнопками или поля формы. Они работают в фоне, но если их нет или они написаны плохо, пользователь теряется.
| Что разберем | Что это даст |
| Виды микротекстов и их функции | Поймете, какой микротекст использовать в каждой ситуации |
| Где микротексты работают лучше всего | Узнаете, на какие элементы интерфейса обратить внимание в первую очередь |
| Как писать микротекст, чтобы он реально помогал | Сможете улучшить понятность вашего интерфейса без переделки дизайна |
| Частые ошибки в микротекстах | Научитесь избегать фраз, которые запутывают пользователя еще больше |
Основное определение и границы термина
Микротекст – это любой текст в интерфейсе, который занимает меньше одной строки и выполняет одну конкретную функцию: объясняет, направляет, предупреждает или подтверждает действие пользователя.
Главный признак микротекста: он не имеет самоценного содержания. Его единственная цель – помочь пользователю взаимодействовать с интерфейсом правильно и без путаницы. Если убрать микротекст, интерфейс станет непонятнее или пользователь совершит ошибку.
Микротекст отличается от других типов текста в интерфейсе:
- Основной контент – это статьи, описания товаров, инструкции. Они существуют самостоятельно и содержат полезную информацию.
- Микротекст – это служебный текст, который помогает взаимодействовать с интерфейсом, а не содержит основное сообщение.
Основные виды микротекстов
Label (подпись к полю)
Короткая фраза рядом с полем формы, которая объясняет, что в него вводить. Это самый частый вид микротекста.
Примеры:
- “Email адрес” рядом с полем для ввода почты
- “Телефон в формате +7 (XXX) XXX-XX-XX” – label с уточнением формата
- “Полное имя” рядом с полем регистрации
Placeholder (подсказка внутри поля)
Текст, который появляется внутри пустого поля и исчезает при начале ввода. Служит дополнением к label, но не заменяет его.
Примеры:
- Поле поиска с текстом “Введите название товара или артикул”
- Поле для комментария с текстом “Опишите проблему как можно подробнее”
Важно: Placeholder не должен заменять label. Если поле имеет только placeholder и пользователь начал вводить текст, он не видит, что это за поле. Placeholder – это усиление, а не замена.
Helper text (вспомогательный текст)
Текст, который находится под полем и уточняет требования, формат или дает совет.
Примеры:
- “Пароль должен содержать минимум 8 символов, хотя бы одну заглавную букву и одну цифру”
- “Используйте только буквы и цифры, без пробелов и спецсимволов”
- “Эта информация видна только вам”
Helper text особенно полезен, когда требования к вводу нестандартные или пользователь может ошибиться.
Error message (сообщение об ошибке)
Текст, который появляется, когда пользователь вводит неверные данные или совершает недопустимое действие.
Примеры:
- “Пароль слишком короткий”
- “Email уже зарегистрирован в системе”
- “Невозможно удалить последний администратора проекта”
Хороший error message не просто говорит “ошибка”, а объясняет, что произошло и как исправить.
Confirmation message (сообщение подтверждения)
Текст, который подтверждает, что действие прошло успешно или сообщает о результате.
Примеры:
- “Профиль обновлен”
- “На ваш email отправлена ссылка для восстановления пароля”
- “Заказ создан, номер: #12345”
Tooltip (подсказка при наведении)
Текст, который появляется при наведении курсора на элемент и исчезает при отведении. Используется для уточнения функции кнопки или объяснения непонятного элемента.
Примеры:
- Иконка с вопросом, при наведении на которую появляется “Это поле необязательно”
- Кнопка удаления с tooltip “Отправить элемент в корзину (можно восстановить в течение 30 дней)”
Call-to-action (CTA) текст на кнопке
Текст на кнопке, который говорит пользователю, что произойдет при клике.
Примеры хороших вариантов:
- “Отправить форму” вместо просто “OK”
- “Скачать отчет в PDF” вместо “Скачать”
- “Удалить и перейти в корзину” вместо “Удалить”
Примеры плохих вариантов:
- “Далее” – непонятно, что произойдет дальше
- “Применить” – к чему применить?
- “Отправить” – что отправить?
Empty state message (сообщение о пустом состоянии)
Текст, который появляется, когда в интерфейсе нет данных для отображения.
Примеры:
- “У вас еще нет заказов” с кнопкой “Начать покупки”
- “Нет результатов. Попробуйте изменить параметры поиска”
- “Корзина пуста”
Empty state message может не только объяснить, почему пусто, но и подсказать, что делать дальше.
Disclaimer (дополнительное условие или уточнение)
Текст, который уточняет условия, ограничения или важную информацию рядом с элементом.
Примеры:
- “Стоимость доставки рассчитывается при оформлении заказа”
- “Скидка не применяется к товарам из раздела ‘Распродажа'”
- “Это действие нельзя отменить”
Где микротексты критичны для понятности
Формы регистрации и авторизации
Здесь микротексты объясняют требования к паролю, формату email, почему нужны определенные данные. Пользователь может застрять и отказаться от регистрации, если не понимает, что вводить.
Что нужно указать:
- Формат введения (email, телефон, дата)
- Требования к паролю (если они нестандартные)
- Что произойдет после клика “Зарегистрироваться”
- Почему запрашивается та или иная информация
Процессы оплаты и оформления заказа
Пользователь тратит деньги – здесь микротексты особенно важны. Нужно объяснить, что входит в цену, какие комиссии будут добавлены, в каком статусе заказ.
Критичные микротексты:
- “Стоимость доставки: рассчитывается исходя из веса и адреса”
- “Комиссия платежной системы: 2%” (если добавляется)
- “Возврат возможен в течение 14 дней с момента получения”
Удаление, архивирование, опасные действия
Если пользователь может случайно удалить важное или совершить необратимое действие, микротекст должен предупредить и объяснить последствия.
Примеры:
- “Удаленные файлы нельзя восстановить”
- “Это отменит все изменения за последний час”
- “Пользователь потеряет доступ ко всем общим документам”
Поля с нестандартным форматом
Если поле требует специального ввода (телефон, дата, валюта, код), нужен микротекст с примером или уточнением.
Примеры:
- “Дата в формате ДД.ММ.ГГГГ” или пример “25.12.2024”
- “Телефон: +7 (XXX) XXX-XX-XX”
- “Сумма без пробелов и спецсимволов”
Фильтры и поиск
Пользователь может не понять, что делает фильтр или поле поиска, особенно если они работают по нестандартной логике.
Примеры микротекстов:
- “Поиск по названию, описанию и артикулу”
- “Выберите несколько категорий для расширенного поиска”
- “Цена указана с учетом скидок”
Как писать микротекст, чтобы он работал
Правило 1: Одна фраза – одна функция
Микротекст должен объяснять только одно. Если в одной фразе несколько разных смыслов, разделите на несколько микротекстов.
Неправильно: “Пароль минимум 8 символов, одна заглавная буква, одна цифра и спецсимвол, не совпадает с именем пользователя”
Правильно:
- Helper text: “Минимум 8 символов, одна заглавная буква, одна цифра”
- Отдельный микротекст ниже: “Пароль не должен совпадать с логином”
Правило 2: Говорите конкретно, не абстрактно
Микротекст должен объяснять конкретный случай, а не общие принципы.
Неправильно: “Введите корректные данные”
Правильно: “Email должен содержать символ @ и доменное имя (пример: user@example.com)”
Правило 3: Избегайте ошибок и технического жаргона
Пользователь не знает, что такое “синхронизация”, “кеш”, “API” или “регулярное выражение”. Если нужно объяснить техническое, переведите на простой язык.
Неправильно: “Невозможно выполнить операцию из-за конфликта в базе данных”
Правильно: “Этот товар уже добавлен в корзину. Измените количество в корзине”
Правило 4: Дайте пользователю решение, не только проблему
Если микротекст сообщает об ошибке или проблеме, объясните, как ее исправить.
Неправильно: “Ошибка валидации”
Правильно: “Email уже зарегистрирован. Восстановите пароль или используйте другой email”
Правило 5: Используйте активный залог
Активный залог понятнее и короче пассивного.
Неправильно: “Поле должно быть заполнено”
Правильно: “Заполните это поле”
Правило 6: Не повторяйте label в helper text
Если label уже объяснил, что такое поле, helper text должен добавить новую информацию, а не повторить.
Неправильно:
- Label: “Пароль”
- Helper: “Введите ваш пароль”
Правильно:
- Label: “Пароль”
- Helper: “Минимум 8 символов, одна цифра и одна заглавная буква”
Правило 7: Учитывайте контекст пользователя
Микротекст должен быть понятен целевой аудитории. Для новичка нужны более подробные объяснения, для опытного пользователя – краткие.
Для новичка в сервисе: “Категория – это раздел товаров (например, ‘Электроника’, ‘Одежда’). Выберите, где искать”
Для опытного пользователя: “Выберите категорию”
Правило 8: Будьте вежливы, но не слащавы
Микротекст не должен быть холодным или техническим, но и не должен переусложнять с эмодзи, шутками или излишней дружелюбностью.
Неправильно (холодно): “Некорректный формат электронной почты”
Неправильно (слащаво): “Ой, кажется, вы забыли про @! 😊 Давайте еще раз? 💌”
Правильно: “Email должен содержать @ (пример: user@example.com)”
Правило 9: Микротекст должен быть виден
Даже идеальный микротекст не поможет, если его не видно. Убедитесь, что:
- Контраст достаточный (текст хорошо отличается от фона)
- Размер шрифта не меньше основного текста (обычно 12-14px)
- Цвет не красный, если это не ошибка (красный ассоциируется с проблемой)
- Микротекст находится рядом с элементом, к которому относится
Частые ошибки в микротекстах
Ошибка 1: Слишком много микротекста
Если рядом с каждым полем висит по три микротекста, пользователь их просто не будет читать. Микротекст должен быть только там, где действительно нужно объяснение.
Когда микротекст не нужен:
- Когда label достаточно понятен (“Имя”, “Email”)
- Когда требования стандартные (email всегда требует @)
- Когда пользователь уже видел это в другой форме
Ошибка 2: Микротекст противоречит поведению интерфейса
Если микротекст обещает одно, а интерфейс делает другое, пользователь потеряет доверие.
Пример ошибки:
- Микротекст говорит: “Это поле необязательно”
- Но интерфейс показывает ошибку, если поле пусто
Решение: Либо сделайте поле действительно необязательным, либо измените микротекст на “Это поле обязательно”.
Ошибка 3: Микротекст скрывает важную информацию
Пользователи часто не читают helper text. Если это критичная информация, не полагайтесь только на микротекст.
Пример ошибки:
- Рядом с ценой висит микротекст “Стоимость доставки добавляется при оформлении”
- Пользователь видит цену, не читает микротекст, потом удивляется финальной сумме
Решение: Для критичной информации используйте более заметный элемент (выделение, иконку, предупреждение), а не только микротекст.
Ошибка 4: Ошибки в error message
Ошибка 4.1: Неточная формулировка
Неправильно: “Ошибка 404”
Правильно: “Этого товара больше нет в наличии”
Ошибка 4.2: Обвинение пользователя
Неправильно: “Вы неправильно ввели email”
Правильно: “Email должен содержать @ (пример: user@example.com)”
Ошибка 4.3: Error message без решения
Неправильно: “Невозможно выполнить операцию”
Правильно: “Невозможно удалить последнего администратора. Назначьте нового администратора сначала”
Ошибка 5: Микротекст на английском, когда интерфейс на русском
Это особенно раздражает русскоязычных пользователей. Если интерфейс на русском, все микротексты должны быть на русском.
Неправильно:
- Label: “Пароль”
- Helper: “At least 8 characters”
Правильно:
- Label: “Пароль”
- Helper: “Минимум 8 символов”
Ошибка 6: Микротекст, который не видно на мобильном
Микротекст может отлично выглядеть на десктопе, но быть невидимым или обрезанным на мобильном. Проверяйте адаптивность.
Ошибка 7: Placeholder вместо label
Некоторые разработчики убирают label и оставляют только placeholder. Это плохая идея: когда пользователь начинает вводить, он не видит, что это за поле.
Правильный вариант: Label + Placeholder + Helper text (если нужно).
Ограничения и особые случаи
Микротексты в мобильном интерфейсе
На мобильном экране меньше места. Микротексты должны быть еще короче, но не менее информативны. Используйте сокращения, если они понятны, и убедитесь, что текст не обрезается.
На десктопе можно: “Пароль должен содержать минимум 8 символов, одну заглавную букву и одну цифру”
На мобильном: “Мин. 8 символов, 1 заглавная буква, 1 цифра”
Микротексты для людей с ограничениями
Микротексты должны быть доступны для людей с нарушениями зрения (использование правильного контраста, размера шрифта) и слуха (если есть видео с микротекстом, нужны субтитры).
Микротексты в системах с автозаполнением
Если браузер или приложение автоматически заполняет поля (пароль, адрес), микротекст может быть перекрыт. Убедитесь, что он остается видимым или появляется при клике на поле.
Локализация микротекстов
Если интерфейс переводят на другие языки, микротексты должны быть переведены точно, а не машинным переводом. Пример форматирования, требования к вводу могут отличаться в разных странах.
Пример: В России телефон вводится как +7, в других странах может быть другой код. Микротекст должен отражать локальный формат.
Коротко о главном
Микротекст – это служебный текст в интерфейсе, который объясняет, направляет и предупреждает пользователя. Он включает labels, placeholders, helper text, error messages, tooltips и другие короткие фразы.
Микротекст работает только если:
- Он конкретен, а не абстрактен
- Он объясняет одно, а не несколько
- Он видимый и читаемый
- Он соответствует поведению интерфейса
- Он дает решение, а не только проблему
- Его не слишком много
Частые ошибки: слишком много микротекста, противоречие между текстом и поведением, неточные формулировки, использование технического жаргона, отсутствие решения в error message.
