5 марта, 2020

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

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

Ваня Швец
Редактирует всякое с 2017

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

Было

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

Стало

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

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

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

Логика

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

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

Сказать, что карточка изъята недостаточно, потому что непонятно по чьей инициативе. Четко указываем действующее лицо.

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

Структура

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

В исходном тексте ключевое сообщение говорит об отмене операции, но поскольку задача пользователя — снять деньги, акцент делаем на том, как их получить.

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

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

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

  • избавляемся от ребусов,
  • удаляем очевидное,
  • откидываем несущественное.

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

Лишаем банкомат возможности оценивать что успешно, а что нет. Он констатирует факты, за остальное отвечает графика.

«Главное меню» не сообщает ничего ценного, удаляем. «Вид операции» сокращаем. Избавляемся от скобок, но оставляем само сообщение про отмену. Уточняем, где эта кнопка расположена, чтобы пользователи не искали ее на экране.

Экран выглядит перегруженным: информации много, список слишком плотный, сайты отваливаются от своих банков, а по ссылкам невозможно перейти, банкомат как-никак. По-другому разделяем список на колонки, чтобы он воспринимался без усилий. Выкидываем формы собственности, убираем подчеркивания и ставим названия сайтов ближе к банкам.

Наглядность

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

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

Объясняем понятие простого ПИН-кода конкретными вариантами.

Уточняем, где искать кнопку «Отмена», которой нет на экране.

Гигиена

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

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

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

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

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

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

Чек-лист

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

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

Смотрите кейс целиком!

Интерфейс банкоматов сети СБС
БелВЭБ Интерфейс банкоматов сети СБС

Спроектировали удобное и лаконичное визуальное решение

Еще парочка клевых статей
Как меньше доверять глазам и сделать интерфейс доступным для людей с нарушениями цветового зрения
Как меньше доверять глазам и сделать интерфейс доступным для людей с нарушениями цветового зрения
Как меньше доверять глазам и сделать интерфейс доступным для людей с нарушениями цветового зрения

Паша Павлов рассказывает про работу с цветом в интерфейсе.

Старым видео добавили четкости
Старым видео добавили четкости
Старым видео добавили четкости

Старым видео добавили четкости, история Билла Митчелла, шаблоны сетки Tilda, Instagram пива с беляшами, истории о Covid-19, магазин Apple в Таиланде и сборка BMW на конвейере.