{"id":14279,"url":"\/distributions\/14279\/click?bit=1&hash=4408d97a995353c62a7353088166cda4ded361bf29df096e086ea0bbb9c1b2fc","title":"\u0427\u0442\u043e \u0432\u044b\u0431\u0435\u0440\u0435\u0442\u0435: \u0432\u044b\u0435\u0445\u0430\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u0438\u043b\u0438 \u0437\u0430\u0435\u0445\u0430\u0442\u044c \u0440\u0430\u043d\u044c\u0448\u0435?","buttonText":"","imageUuid":""}
Дизайн
Ivan Shvets

Редактура интерфейсных текстов

Мы в Райте спроектировали интерфейс банкоматов сети СБС. Проект получился интересным и послужил источником для отдельных публикаций про подбор цвета для людей с нарушениями зрения и автоматизацию переводов. На очереди продолжение — материал о том, как научить банкомат быть дружелюбным.

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

Основная задача текста — помочь пользователю взаимодействовать с банкоматом без лишних усилий, не совершать ошибки и экономить время. Для этого надо привести в порядок пять составляющих:

  1. логика;
  2. структура;
  3. формулировки;
  4. наглядность;
  5. гигиена.

IKEA назвала бы такой алгоритм ЛОСТФОНАГ, но мы не будем заморачиваться с определениями, а просто применим эту последовательность действий к содержимому одного экрана. Чтобы не отвлекаться, пример рассмотрим в отрыве от интерфейса, а потом перейдем к настоящим макетам с пояснениями.

Исходное сообщение:

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

Логика. Деньги сами себя не изымают, добавляем действующее лицо:

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

Структура. Ключевое сообщение выносим вперед и разбиваем сообщение на блоки:

Банкомат изъял деньги.

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

Формулировки. Переписываем сообщение, чтобы суть была яснее:

Банкомат изъял деньги.

Возможные причины: превышено время, которое отведено на снятие наличных, или произошел технический сбой.

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

Банкомат изъял деньги.

Возможные причины: превышено время, отведенное на снятие наличных, или произошел технический сбой.

Попробуйте еще раз или обратитесь в банк, обслуживающий банкомат.

Гигиена. Следим, чтобы текст был оформлен по правилам. В данном случае убираем точку из заголовка:

Банкомат изъял деньги

Возможные причины: превышено время, отведенное на снятие наличных, или произошел технический сбой.

Попробуйте еще раз или обратитесь в банк, обслуживающий банкомат.

Что получилось в итоге:

С алгоритмом разобрались, теперь рассмотрим больше примеров.

Логика

Делаем так, чтобы в тексте не было разночтений. В случае с банкоматами для этого пришлось следить за тем, чтобы:

  • действующие лица были понятными,
  • фразы на экране не имели дополнительных значений.
​Сказать, что карточка изъята недостаточно, потому что непонятно по чьей инициативе. Четко указываем действующее лицо
В этом примере хорошо видно, как неаккуратные формулировки наделяют сообщения разными смыслами. Конечно, такая формулировка не приведет к ошибкам, связанным с деньгами, но отсылка к фильму «Пила» в интерфейсе неуместна​

Структура

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

В исходном тексте ключевое сообщение говорит об отмене операции, но поскольку задача пользователя — снять деньги, акцент делаем на том, как их получить​
Купить рекламу Отключить
Разделяем текст на смысловые блоки, вводим иерархию элементов и выравниваем левым флагом, чтобы помочь пользователям быстрее считать сообщение​

Формулировки

Стараемся не заставлять пользователя думать и убираем мельтешащие элементы:

  • избавляемся от ребусов,
  • удаляем очевидное,
  • откидываем несущественное.
В исходном тексте есть одно сообщение и два уточнения, получается ребус. Пользователю надо сначала представить, что он хочет сделать, потом применить к задаче ограничения. Чтобы было проще, делаем важное ограничение частью сообщения, менее важному отводим роль пояснения​
​Лишаем банкомат возможности оценивать что успешно, а что нет. Он констатирует факты, за остальное отвечает графика
«Главное меню» не сообщает ничего ценного, удаляем. «Вид операции» сокращаем. Избавляемся от скобок, но оставляем само сообщение про отмену. Уточняем, где эта кнопка расположена, чтобы пользователи не искали ее на экране​
Проблемы на экрана: информации много, список слишком плотный, сайты отваливаются от банков. По-другому разделяем список на колонки, чтобы он легче воспринимался. Выкидываем формы собственности, убираем подчеркивания и ставим названия сайтов ближе к банкам

Наглядность

Чтобы снять с пользователя нагрузку и не заставлять его думать, вместо инструкций приводим примеры, даем советы и показываем куда смотреть.

Показываем, в каком виде банкомат ждет от пользователя номер​
Объясняем понятие простого ПИН-кода конкретными вариантами​
Уточняем, где искать кнопку «Отмена», которой нет на экране​

Гигиена

В финале контролируем, чтобы мелочи в оформлении текста не портили восприятие интерфейса. Как оформлять текст подробно рассказано в книге Аркадия Мильчина «Справочник издателя и автора».

​Следим за точками в заголовке и приводим к общему виду пункты в списке.

Бонус. Как мы решали вопросы с вежливостью

В исходном тексте было достаточно много извините-спасибо-пожалуйста, поэтому придумали для себя систему:

1. На экранах, которые демонстрируются пользователям в разгар работы, убираем все лишнее.

2. На экранах, которые встречают пользователя в начале работы или, скорее всего, означают конец сеанса, оставляем.

Чек-лист для текста в интерфейсе

Чтобы подготовить нормальный текст для интерфейса:

  1. Проверяйте каждый экран на однозначность.
  2. Создавайте иерархию текстовых элементов.
  3. Работайте над формулировками, пока не станет хорошо. А потом сделайте еще пару подходов.
  4. Приводите примеры и. давайте подсказки.
  5. Соблюдайте правила оформления текста.

p.s. Если делаете большой и сложный интерфейс, почитайте на сайте Райта, с чем еще мы сталкивались при проектировании интерфейса банкомата:

1. Как адаптировать цвета в интерфейсе для людей с нарушениями зрения.

2. Как автоматизировать переводы.

0 показов
291 открытие
0
Комментарии
Написать комментарий...
-3 комментариев
Раскрывать всегда