5 марта, 2020
- 6 августа, 2019
- 5174
Редактура интерфейсных текстов
Мы в Райте спроектировали интерфейс банкоматов сети СБС. Проект получился интересным и послужил источником для отдельных публикаций про подбор цвета для людей с нарушениями зрения и автоматизацию переводов. На очереди продолжение — материал о том, как научить банкомат быть дружелюбным.
Текст на экране терминала или мобильного приложения выглядит просто, потому что состоит из коротких сообщений и несложных формулировок. Однако за видимой простотой стоит работа редактора, корректора и юзабилиста. Один и тот же текст начинает лучше работать, если применить к нему пару редакторских заклинаний.
Основная задача текста — помочь пользователю взаимодействовать с банкоматом без лишних усилий, не совершать ошибки и экономить время. Для этого надо привести в порядок пять составляющих:
IKEA назвала бы такой алгоритм ЛОСТФОНАГ, но мы не будем заморачиваться с определениями, а просто применим эту последовательность действий к содержимому одного экрана. Чтобы не отвлекаться, пример рассмотрим в отрыве от интерфейса, а потом перейдем к настоящим макетам с пояснениями.
Деньги не были забраны в течение отведенного времени, либо произошел технический сбой. Деньги изъяты.
Деньги не были забраны в течение отведенного времени, либо произошел технический сбой. Банкомат изъял деньги.
Банкомат изъял деньги.
Деньги не были забраны в течение отведенного времени, либо произошел технический сбой.
Банкомат изъял деньги.
Возможные причины: превышено время, которое отведено на снятие наличных, или произошел технический сбой.
Банкомат изъял деньги.
Возможные причины: превышено время, отведенное на снятие наличных, или произошел технический сбой.
Попробуйте еще раз или обратитесь в банк, обслуживающий банкомат.
Банкомат изъял деньги
Возможные причины: превышено время, отведенное на снятие наличных, или произошел технический сбой.
Попробуйте еще раз или обратитесь в банк, обслуживающий банкомат.
Что получилось в итоге:
С алгоритмом разобрались, теперь рассмотрим больше примеров.
Делаем так, чтобы в тексте не было разночтений. В случае с банкоматами для этого пришлось следить за тем, чтобы:
Сказать, что карточка изъята недостаточно, потому что непонятно по чьей инициативе. Четко указываем действующее лицо.
В этом примере хорошо видно, как неаккуратные формулировки наделяют сообщения разными смыслами. Конечно, такая формулировка не приведет к ошибкам, связанным с деньгами, но отсылка к фильму «Пила» в интерфейсе неуместна.
Прорабатываем подачу, чтобы все важное первым бросалось в глаза, а детали дополняли картину.
В исходном тексте ключевое сообщение говорит об отмене операции, но поскольку задача пользователя — снять деньги, акцент делаем на том, как их получить.
Разделяем текст на смысловые блоки, вводим иерархию элементов и выравниваем левым флагом, чтобы помочь пользователям быстрее считать сообщение.
Стараемся не заставлять пользователя думать и убираем мельтешащие элементы:
В исходном тексте есть одно сообщение и два уточнения, получается ребус. Пользователю надо сначала представить, что он хочет сделать, потом применить к задаче ограничения. Чтобы было проще, делаем важное ограничение частью сообщения, менее важному отводим роль пояснения.
Лишаем банкомат возможности оценивать что успешно, а что нет. Он констатирует факты, за остальное отвечает графика.
«Главное меню» не сообщает ничего ценного, удаляем. «Вид операции» сокращаем. Избавляемся от скобок, но оставляем само сообщение про отмену. Уточняем, где эта кнопка расположена, чтобы пользователи не искали ее на экране.
Экран выглядит перегруженным: информации много, список слишком плотный, сайты отваливаются от своих банков, а по ссылкам невозможно перейти, банкомат как-никак. По-другому разделяем список на колонки, чтобы он воспринимался без усилий. Выкидываем формы собственности, убираем подчеркивания и ставим названия сайтов ближе к банкам.
Чтобы снять с пользователя нагрузку и не заставлять его думать, вместо инструкций приводим примеры, даем советы и показываем куда смотреть.
Показываем, в каком виде банкомат ждет от пользователя номер.
Объясняем понятие простого ПИН-кода конкретными вариантами.
Уточняем, где искать кнопку «Отмена», которой нет на экране.
В финале контролируем, чтобы мелочи в оформлении текста не портили восприятие интерфейса. Как оформлять текст подробно рассказано в книге Аркадия Мильчина «Справочник издателя и автора».
Следим за точками в заголовке и приводим к общему виду пункты в списке.
В исходном тексте было достаточно много извините-спасибо-пожалуйста, поэтому придумали для себя систему:
2. На экранах, которые встречают пользователя в начале работы или, скорее всего, означают конец сеанса, оставляем.
Чтобы подготовить нормальный текст для интерфейса:
Смотрите кейс целиком!
Спроектировали удобное и лаконичное визуальное решение
