December 25, 2018

Небольшой конспект по юикс текстам

"Собака Павлова" поделилась новым кейсом по одной из моих любимых тем - интерфейсным текстам. Разработка велась для Сбербанка, мне так понравилась логика и некоторые моменты, что я аж конспект себе сохраню, чтоб не потерялось нигде.


По специальности я филоло-журналист, а по знаку зодиака грамар-н.. зануда. Так что про тексты я люблю.

В моем проекте, который на всякий случай оставлю без освещения, используется некоторое количество различного рода ошибок, уведомлений и подсказок. Удобнее всего их для начала структурировать, а потом написать логику разработки для каждого типа. Я ещё не знаю, насколько много работы потребуется, если в дальнейшем придётся менять элементы структуры, как это всё отразится на разработанной логике для каждого элемента. Возможно я буду громко ругаться и стучать ногой - время покажет.


Отталкиваться я начала от оценки типа уведомления:

  • сообщает дополнительную информацию - Подсказки
  • сообщает какой-то результат по итогам чего-то - Уведомления (которые изначально назвала общим словом "Ошибки", но вскоре поняла, что такую же логику несут в себе сообщения об успехе, так что пришлось переиграть.

Пока что у меня есть условные два типа, которые можно разбивать на более мелкие кусочки.

Подсказки

  1. Всплывающие подсказки

Цель - расшифровка и пояснение терминов, значений, аббревиатур и других данных.

Обязательные подсказки будут располагаться в паре с иконкой (? или !) в тех местах, где у 60%+ пользователей продукта возникают сложности. Остальное же будем внедрять пока к обычным ссылкам по мере тестирования. В дальнейшем такие подсказки вырастут в Подсказки по процессу.

2. Подсказка-подстрочник

Его также можно объединять с ошибками и предупреждениями ввода по принципу расположения. Возможно в итоговой документации так и будет, посмотрим.

3. Подсказка по процессу

Объясняет логику проведения того или иного процесса. Важное сообщение, которое не блокирует и не ограничивает дальнейшие шаги пользователя в системе. Отображает важные моменты, которые пользователь может забыть, не знать, не перепроверить и так далее. Делаем акцент на всех больных темах, чтобы снизить общие итоговые страдания.

Вид - пока я не включала их в дизайн систему, и можно подумать. Скорее всего - text style Body / Caption с основным темным цветом на лёгком фоне. Самое главное - не перемягчить с цветом фона: он должен быть заметен и не теряться в базовой ui-палитре. Пока оставлю на подумать синий, жёлтый.

Уведомления / Ошибки

  1. Ошибки и предупреждения ввода (подстрочник у инпута)

Используется с соответствующей иконкой

2. Ошибки и предупреждения по процессу

Ошибка или предупреждение, которые блокируют или ограничивают дальнейшие шаги пользователя в системе.

Вид - надо подумать и посмотреть в контексте всей дизайн-системы. Отличие от Подсказки по процессу в плане визуала - наличие заголовка. Все остальное же будет либо:

  • аналогично Подсказке по процессу, только фон будет ~15% opacity от основных саппорт-цветов; заголовок - 100% opacity основных саппорт-цветов
  • рамка саппорт-цвета, фулл подложка под заголовок, заголовок инверс

Страницы успеха

Это могут быть отдельные страницы - в случаях, где совершается глобальный переход между этапами процесса. Это могут быть и модальные окна.

Являют собой последний шаг операции. Когда операция завершена, нам нужно кратко подытожить процесс и ответить на все возможные вопросы пользователя. Рассказать, какие этапы пройдены и что нужно сделать/хорошо бы сделать для дальнейших шагов.

К примеру, была создана Смета - оповещаем об этом используя приоритетную информацию (имя контрагента, дата, номер и проч.), предлагаем следующие шаги - создать на её основе другой документ, добавить платёжку и что-то в таком духе.

  1. Какая операция завершена?
  2. Что именно было сделано? (для польз-ля, контрагента, клиента)
  3. Требуется ли что-то прямо сейчас? (от польз-ля, контрагента, клиента)
  4. Требуется ли что-то в дальнейшем? (от польз-ля, контрагента, клиента)
  5. Возможные шаги применительно к конкретной ситуации (андер констракшн)
  6. Что дальше делать сотруднику?

Итог

По-хорошему надо составить табличку с ошибками под каждый тип, в которой собственно писать, пока не получится. Но так как на данный момент у меня нет кроме идеи этой структуры ничего на руках, оставлю на будущее.