{"id":4725,"title":"\u041c\u0430\u0441\u0442\u0435\u0440-\u043a\u043b\u0430\u0441\u0441: \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0438 \u0432\u0435\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0433\u043e\u0432\u043e\u0440\u044b","url":"\/redirect?component=advertising&id=4725&url=https:\/\/vc.ru\/promo\/269679-korotko-interaktivnyy-master-klass-o-komandnoy-rabote-i-masterstve-peregovorov&hash=10609550b909bb5be9e2454a472e95a790a4f1279029e657ec1c7baeac51ec09","isPaidAndBannersEnabled":false}
Дизайн
Ivan Shvets

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Логика

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

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

Структура

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

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

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

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

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

Наглядность

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

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

Гигиена

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

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

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

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

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

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

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

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

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

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

{ "author_name": "Ivan Shvets", "author_type": "self", "tags": [], "comments": 0, "likes": 0, "favorites": 6, "is_advertisement": false, "subsite_label": "design", "id": 111736, "is_wide": true, "is_ugc": true, "date": "Wed, 11 Mar 2020 18:28:50 +0300", "is_special": false }
0
0 комментариев
Популярные
По порядку
Читать все 0 комментариев
«Таблетка для ума»: зачем принимают глицин и может ли он помочь организму на самом деле

Как простая пищевая добавка E640 превратилась в лекарство для «стимуляции мозга» — в материале издания Reminder.

Возможности, как в корпорации, а гибкость, как у стартапа. Что думают о своей работе сотрудники DiDi

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

Подделал картин на $21 млн, отсидел четыре года и живёт в Швейцарии: история фальсификатора Вольфганга Бельтракки Статьи редакции

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

Не верю в себя и свои силы: что делать? Простое упражнение для поднятия ресурса

Бывало ли с вами такое, что ты как будто белка в колесе? Целыми днями чем-то занят, но кардинально ничего не меняется. Так незаметно проходят дни, недели, месяцы. Однажды, ты просыпаешься и смотришь на календарь. Сегодня уже июль, а цели, которые ты запланировал в Новый год, так и остались только на бумаге. Возникает ощущение полной…

Восточная Техника успешно автоматизирует процессы управления складами на базе решения Columbus-WMS
«Стартап-полка»: Самокат набирает производителей альтернативных продуктов

Онлайн-ритейлер Самокат совместно с Ассоциацией Производителей Альтернативных Пищевых Продуктов объявляют сбор заявок от инновационных производителей продуктов для участия в «стартап-полке» Самоката. Лучшие продукты попадут в постоянный ассортимент Самоката в раздел «Супермаркет» уже этой осенью.

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

В Тинькофф — 28 000 сотрудников, и у каждого своя история. Кто-то легко справляется с работой, и после всех задач спокойно отключается и идет отдыхать. Другим все может даваться труднее, даже сложно в уйти в отпуск — думает, «как я всё здесь брошу». Мы начинаем серию статей от лица наших сотрудников, которые делятся своим опытом: какие появлялись…

​Instagram Reels для бизнеса

Формат “барабанов” появился в начале осени 2020 года, в большинстве стран его открыли в июле 2021. Компании восприняли формат негативно, «Зачем нам второй Тик Ток?».

IPO Robinhood, Duolingo и Riskified

Мои скромные прогнозы и идеи по участию. Freedom Finance на этой неделе одобрило 3 IPO. Давайте их рассматривать по новой схеме.

На конференции «B Word» Илон Маск в очередной раз поменял свою позицию по биткоину

В ходе конференции где также присутствовали Джек Дорси и Кэти Вуд, Маск отметил, что он является владельцем биткойнов не только через баланс Tesla и SpaceX, но и лично владеет биткойнами, эфиром и Dogecoin.

Ключевые события и новости недели Wildberries, Ozon, «Яндекс.Маркет» и AliExpress. Дайджест #1

Период новостной сводки: с 19.07.21 по 25.07.21

https://t.me/wildbox_news
null