Текст интерфейса это тоже дизайн. Кнопка с неправильной подписью ломает сценарий так же, как кнопка не на своём месте. На собесе дают переписать ошибку или разобрать форму.
Принципы
- Ясно: слова пользователя, без жаргона и канцелярита.
- Кратко: главное в начале, без лишних слов.
- Полезно: что делать дальше.
- Последовательно: один термин для одного понятия. Если «счёт», то не «инвойс» на соседнем экране.
- По-человечески: без обвинений, тон по ситуации.
Кнопки
Кнопка называет действие и результат: «Удалить проект», «Оформить заказ», «Отменить заказ». «Да», «Нет», «ОК» требуют перечитать вопрос и провоцируют ошибки. Человек, прочитавший только кнопку, должен понять, что произойдёт.
Ошибки
Структура хорошей ошибки:
- Что случилось, простыми словами.
- Как исправить или что делать дальше.
- Рядом с местом ошибки, текстом и иконкой, а не только цветом.
Плохо: «Ошибка ввода», «Вы ввели неправильные данные!!!», «Error 401», «Обратитесь к администратору». Хорошо: «Введите дату в формате ДД.ММ.ГГГГ, например 05.03.1990».
Пустые состояния
Пустой экран это точка обучения: что здесь будет и главное действие. «Здесь появятся ваши заказы» и кнопка «Перейти в каталог» вместо «Нет данных».
Голос и тон
Голос постоянен (характер продукта), тон меняется по ситуации. Шутка уместна на экране успеха, но не при заблокированном платеже. В тревожной ситуации спокойно, с объяснением и конкретным шагом.
Формы
- Одна колонка: меньше пропусков, понятное направление.
- Подпись над полем, а не плейсхолдер вместо неё: плейсхолдер исчезает при вводе и обычно низкоконтрастный.
- Помечаем меньшинство: если необязательное одно поле, пишем «(необязательно)» у него.
- Правильная клавиатура и автозаполнение, телефон одним полем.
- Требования (например, к паролю) показываем заранее.
- Валидация при уходе из поля, а снимаем ошибку сразу после исправления. При отправке фокус на первое ошибочное поле.
- После ошибки сервера введённое не теряется.
- Галочки согласий на рассылку не ставим за человека.
Длинную форму (заявка на кредит) делят на смысловые шаги с прогрессом и сохранением черновика, начинают с ценности (калькулятор), подставляют известные данные.
Как работать с текстами
Писать настоящие тексты в макете с самого начала, вести глоссарий и редполитику, продумывать ошибки и пустые состояния самому, проверять формулировки на юзабилити-тестах. Эффект изменения текстов меряют так же, как любого изменения: A/B с целевой и защитными метриками.
Частые ошибки
- «Лорем ипсум» до последнего момента.
- «Вы уверены?» без описания последствий.
- Технические коды в тексте для пользователя.
- Разные слова для одного понятия.
Что спросят на собесе
- Перепишите это сообщение об ошибке.
- Какие подписи кнопок в диалоге удаления?
- Почему плейсхолдер не заменяет подпись?
- Когда показывать ошибку валидации?
- Как спроектировать длинную форму?