Небольшой конспект по юикс текстам
"Собака Павлова" поделилась новым кейсом по одной из моих любимых тем - интерфейсным текстам. Разработка велась для Сбербанка, мне так понравилась логика и некоторые моменты, что я аж конспект себе сохраню, чтоб не потерялось нигде.
По специальности я филоло-журналист, а по знаку зодиака грамар-н.. зануда. Так что про тексты я люблю.
В моем проекте, который на всякий случай оставлю без освещения, используется некоторое количество различного рода ошибок, уведомлений и подсказок. Удобнее всего их для начала структурировать, а потом написать логику разработки для каждого типа. Я ещё не знаю, насколько много работы потребуется, если в дальнейшем придётся менять элементы структуры, как это всё отразится на разработанной логике для каждого элемента. Возможно я буду громко ругаться и стучать ногой - время покажет.
Отталкиваться я начала от оценки типа уведомления:
- сообщает дополнительную информацию - Подсказки
- сообщает какой-то результат по итогам чего-то - Уведомления (которые изначально назвала общим словом "Ошибки", но вскоре поняла, что такую же логику несут в себе сообщения об успехе, так что пришлось переиграть.
Пока что у меня есть условные два типа, которые можно разбивать на более мелкие кусочки.
Подсказки
- Всплывающие подсказки
Цель - расшифровка и пояснение терминов, значений, аббревиатур и других данных.
Обязательные подсказки будут располагаться в паре с иконкой (? или !) в тех местах, где у 60%+ пользователей продукта возникают сложности. Остальное же будем внедрять пока к обычным ссылкам по мере тестирования. В дальнейшем такие подсказки вырастут в Подсказки по процессу.
2. Подсказка-подстрочник
Его также можно объединять с ошибками и предупреждениями ввода по принципу расположения. Возможно в итоговой документации так и будет, посмотрим.
3. Подсказка по процессу
Объясняет логику проведения того или иного процесса. Важное сообщение, которое не блокирует и не ограничивает дальнейшие шаги пользователя в системе. Отображает важные моменты, которые пользователь может забыть, не знать, не перепроверить и так далее. Делаем акцент на всех больных темах, чтобы снизить общие итоговые страдания.
Вид - пока я не включала их в дизайн систему, и можно подумать. Скорее всего - text style Body / Caption с основным темным цветом на лёгком фоне. Самое главное - не перемягчить с цветом фона: он должен быть заметен и не теряться в базовой ui-палитре. Пока оставлю на подумать синий, жёлтый.
Уведомления / Ошибки
- Ошибки и предупреждения ввода (подстрочник у инпута)
Используется с соответствующей иконкой
2. Ошибки и предупреждения по процессу
Ошибка или предупреждение, которые блокируют или ограничивают дальнейшие шаги пользователя в системе.
Вид - надо подумать и посмотреть в контексте всей дизайн-системы. Отличие от Подсказки по процессу в плане визуала - наличие заголовка. Все остальное же будет либо:
- аналогично Подсказке по процессу, только фон будет ~15% opacity от основных саппорт-цветов; заголовок - 100% opacity основных саппорт-цветов
- рамка саппорт-цвета, фулл подложка под заголовок, заголовок инверс
Страницы успеха
Это могут быть отдельные страницы - в случаях, где совершается глобальный переход между этапами процесса. Это могут быть и модальные окна.
Являют собой последний шаг операции. Когда операция завершена, нам нужно кратко подытожить процесс и ответить на все возможные вопросы пользователя. Рассказать, какие этапы пройдены и что нужно сделать/хорошо бы сделать для дальнейших шагов.
К примеру, была создана Смета - оповещаем об этом используя приоритетную информацию (имя контрагента, дата, номер и проч.), предлагаем следующие шаги - создать на её основе другой документ, добавить платёжку и что-то в таком духе.
- Какая операция завершена?
- Что именно было сделано? (для польз-ля, контрагента, клиента)
- Требуется ли что-то прямо сейчас? (от польз-ля, контрагента, клиента)
- Требуется ли что-то в дальнейшем? (от польз-ля, контрагента, клиента)
- Возможные шаги применительно к конкретной ситуации (андер констракшн)
- Что дальше делать сотруднику?
Итог
По-хорошему надо составить табличку с ошибками под каждый тип, в которой собственно писать, пока не получится. Но так как на данный момент у меня нет кроме идеи этой структуры ничего на руках, оставлю на будущее.