Виталий Филатов

о тексте, смысле и красоте

Позднее Ctrl + ↑

Как написать статью, если вы не писатель (методичка)

Базовые советы для тех, кто не занимается текстом профессионально. Советы помогут сделать 80 % работы редактора: выбрать полезную тему, выстроить логичную структуру и написать понятный текст.

Методичка собрана для авторов блога StringConcat.com в 2021 году. Получился очередной пересказ «Пиши, сокращай», но я постарался выделить самое важное и подобрать забавные примеры.

⚠ Содержит много букв!

Тема и полезное действие

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

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

Польза важнее оригинальности. Тема может быть старой, но всё ещё актуальной. Если у вас есть хорошие примеры и опора на жизненный опыт, статья будет приносить пользу.

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

Как освоить веб-разработку

Как стать разработчиком на Ангуляр

Как выучить Ангуляр и найти работу за три месяца (никак)

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

Принцип «пользу вперёд»

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

Не стоит начинать с общих слов или отвлечённых рассуждений. Так появляются рыхлые статьи копирайтеров:

Плохо

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

Хорошо

С 2021 фрилансеру достаточно быть самозанятым

Структура статьи

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

Базовых структур две: параллельная и последовательная.

Параллельная состоит из нескольких равноценных блоков с повторяющейся логикой. Например, обзор холодильников, сравнение туров на Байкал или гайд по самодельным ракетам.

Как выбрать двигатель для ракеты

Введение и отказ от ответственности

Двигатель на твёрдом топливе

— Устройство

— Предел тяги

— Получение топлива

— Как он вас убьёт

Керосин и кислород

— <...>

Гидразин и фтор

— <...>

Выводы

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

Структуру внутри разделов не обязательно делать одинаковой. Если какой-то части не хватает, подраздел с ней можно пропустить или заменить другим.

Чем фотографировать пришельцев

Мыльница

— Качество

— Режимы съёмки

Зеркалка

— Качество

— Режимы съёмки

— Оптика

Смартфон

— Качество

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

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

Марсу нужны девопсы

[1] Зачем туда лететь

[2] Чем там заниматься

[3] Как подготовиться

[4] Кого не возьмут

[5] Пункты вербовки

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

Позитивный пример

Допустим, статья о сетевых протоколах, раздел о стеке TCP/IP. В разделе будет только о TCP/IP, а другие протоколы описаны отдельно или упоминаются в связи с основной темой. Например, как TCP/IP вытеснил IPX/SPX.

Структура может быть смешанной. Например, в комплексной статье с последовательной структурой вполне может жить фрагмент с параллельным изложением. Главное, чтобы это помогало читателю.

Меняем проводку в хрущёвке

[1] Как понять, что проводка не справляется

[2] Готовим квартиру

[3] Собираем инструменты

[4] Выбираем провода

— Алюминиевые

— Медные многожильные

— Медные одножильные

— Китайские загадочные

[5] Предупреждаем соседей

<...>

Старайтесь не вкладывать разделы в друг друга без крайней необходимости. Такую структуру называют вложенной и читать её труднее. Идеально — один уровень вложенности:

Заголовок статьи → Разделы → Темы в начале абзацев

Если требуется больше, у вас что-то не так со структурой. Возможно, стоит сузить тему, сократить текст или разбить статью на несколько коротких.

Заголовки

Заголовки бывают трёх типов: статьи, раздела и абзаца. Заголовки статьи и раздела делают крупнее и ставят на отдельной строке, а заголовок абзаца выделяют жирным.

Заголовок статьи — первое, что замечает читатель. По заголовку читатель оценивает потенциальную пользу и решает, стоит ли читать. Поэтому формулировка заголовка должна раскрывать тему и полезное действие.

Заголовки бывают назывные и транзитивные. Назывные описывают содержание материала, транзитивные передают основную мысль.

Как бросить саморазвиваться и начать жить — назывной

Самодельный фторовый двигатель вас убьёт — транзитивный

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

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

Практикум. С чего начать рефакторинг, если проект уже не дышит

10 правил безопасности данных от Кевина Митника

Патент или НПД: какой налоговый режим выбрать фрилансеру

Заголовок — самостоятельная сущность и не должен быть связан с первым предложением.

В конце заголовков не ставится точка.

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

Плохо

Как спаять два провода

Стриппер — это не то, о чём вы подумали

Ах, этот запах канифоли по утрам

Осторожней с брызгами!

Хорошо

Как спаять два провода

Зачищаем место пайки

Обезжириваем и прогреваем

Убираем лишний припой

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

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

Твердотопливный двигатель можно собрать даже в гараже

Стартовый стол. Разместите ракету на ровной поверхности…

Лид-абзац, введение и выводы

Лид-абзац — подводка, краткое описание темы статьи. Им можно дополнять заголовок статьи, выводить в предварительном просмотре для соцсетей и мессенджеров.

Лид нужен простой и бойкий. Картинка привлекает внимание, заголовок описывает содержимое, а лид «продаёт» статью, раскрывая пользу.

Ещё один нож в спину алгоритмических задачек

Разберём, из-за каких особенностей нашего мозга алгоритмические задачи поджигают задницу и как это прекратить.

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

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

Плохое введение

Хотите открыть интернет-магазин? Не работать на дядю и быть сами себе хозяевами? Увлекательная картина, не правда ли? А ведь это не так просто…

Все в детстве любили сливочное мороженое и пинать мячик…

Как-то весной в московском офисе «Рогопыта» раздался звонок…

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

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

Нормальное введение

Мозг — сложная штука. Мы привыкли считать, что размышления полностью подчиняются сознательным усилиям, но не всё так просто. Согласно недавним исследованиям…

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

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

Как убедить менеджеров, что рефакторинг необходим уже сейчас

Управление проектом — сложная и неблагодарная работа. Менеджер зажат между заказчиком и командой, его не любят и считают основной причиной плохого продукта…

Выводы. Статью хорошо заканчивать выводами — тем, что читатель точно запомнит из всего прочитанного. Хорошие выводы объясняют, что теперь с этим всем делать на практике.

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

Запомнить

Статью нельзя заканчивать иллюстрацией или таблицей.

В конце должен идти обобщающий вывод.

Если выводов нет, можно перечислить основные мысли.

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

Разделы

Раздел или модуль — самодостаточная группа абзацев на одну тему. Раздел можно прочитать в отрыве от статьи и всё будет понятно.

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

В последовательной структуре разделы идут в порядке раскрытия темы.

Марсу нужны девопсы

[1] Зачем туда лететь

[2] Чем там заниматься

[3] Как подготовиться

[4] Кого не возьмут

[5] Адреса пунктов вербовки

Каждый раздел длиннее пяти абзацев начинается с объяснения своей пользы и заканчивается краткими выводами.

Абзацы

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

Если тема раскрывается в двух предложениях, дописывать абзац до трёх не нужно. Если мысль укладывается в одно — оставьте одно.

Абзац в начале этого раздела состоит из 3 предложений: основной мысли, пояснения и вывода.

Абзацу про тему для полноты мысли хватает двух предложений.

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

Максимальная длина абзаца — девять предложений, оптимально 3—5. Если на вёрстке абзац занимает больше 8 строк, попробуйте разделить его на два.

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

Предложения

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

Чтобы предложение было сильным, ему нужны действующее лицо и действие. Ищите, кто или что может совершать действие.

Тролль гнёт ель

Разработчики выкатывают релиз

Крупные корпорации уходят от ответственности

Активное действие добавляет жизни:

Заявление принимается заполненным от руки → Заполните бланк от руки

Регистрация требует подтверждения → Подтвердите регистрацию

Дети будут находиться под присмотром сотрудника центра → Инструктор присмотрит за детьми

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

Дом сдан вовремя — важно, что он готов, а не то, что его кто-то строил

К аудиту всё готово — важно, что мы пройдём проверку

Не используйте парцелляцию — дробление полноценного предложения для усиления интонации. Не надо. Не дробите.

Не начинайте предложение с цифр. Измените формулировку или напишите числа словами.

30 % подписчиков — боты → Треть подписчиков — боты

5 29-дюймовых мониторов → Пять 29-дюймовых мониторов

Упрощайте-сокращайте.

Значительно выросла сумма задолженности → Долг вырос

Осуществление работ по разработке → Разрабатывать

В целях, во избежание, посредством → Чтобы

По причине, в связи → Из-за

В течение 2-х летнего срока → За два года

Лучший знак препинания в предложении — точка.

После смайлика точку ставить не нужно;-)

Базовая гигиена

Жирный и наклонный шрифт. Не выделяйте жирным слова в середине предложения. Для этого лучше использовать наклонный шрифт или выделение маркером. Жирным можно выделять главные мысли в начале предложения.

Кавычки. Правильные кавычки для русского языка — «ёлочки». Набираем Alt+0171 и Alt+0187 на цифровой клавиатуре в Виндоус.

Внутри первых кавычек используем „“.

«Общественное объединение „Тролль гнёт ель“»

Тире в русской типографике два: длинное (Em-dash) и короткое (En-dash).

Длинное тире разделяет слова в предложении и даты с месяцами, короткое — числовые диапазоны. Дефис разделяет составные слова: Петров-Водкин, стоп-кран.

Правильное длинное тире — Alt+0151. Короткое — Alt+0150. Дефис и минус не тире.

Длинное тире

Пренебрежение вёрсткой — моветон

Дефис и короткое тире

Какие-то клиенты, 2—3 человека

Диапазоны дат пишем с коротким тире, если нет названий месяцев.

12—20 августа

12 января — 20 апреля

Числа от десяти тысяч в сплошном тексте разделяем по разрядам, по три знака с конца:

1000

10 000

52 125 333

Большие числа можно округлять, если масштаб важнее точности:

1134 человека на место → тысяча человек

10 542 заявки в час → 10 тысяч заявок

52 125 333 плохих приложений → 52 миллиона

Диапазоны разбиваем коротким тире:

1000—1500 Мгц

2000—2020 годы

Дробную часть отделяем запятой.

36,6 ℃

Полезные ссылки

Инструменты

Главред — ищет в тексте лишние слова. Убирать всё не надо, но обратить внимание стоит. Достаточно семи баллов.

Орфограммка — проверяет орфографию и пунктуацию. Обязательно проверьте текст перед публикацией.

Драйзер — помогает перенести текст из гугл-доков в Вордпресс и Эгею.

Типограф Лебедева — готовит текст для публикации: расставляет неразрывные пробелы, правильные тире и кавычки.

Карта слов и выражений русского языка

Ещё о редактуре

Как побороть писательский ступор — разобраться в задаче, собрать материал и поспать.

Как ставить ссылки — скриншот редполитики, но вполне читаемый.

Не вставляйте картинки из гугл-доков — если исходный документ удалить, картинки по ссылкам из него пропадут навсегда.

Как использовать эмодзи в тексте — знайте меру и следите за смыслом.

Ответ клиенту такси

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

Текст попался в чате для подписчиков UX-рассылки Иры Моториной. Говорят, это фрагмент тестового задания Яндекса, поэтому задача без контекста.

Исходный текст, орфография сохранена:

Обращение

День добрый! Заказ оплачивал наличными. Подскажите как можно получить чек по поездке?

Ответ

Здравствуйте!

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

Чтобы получить отчет, привяжите адрес почты в боковом меню приложения. Для этого нажмите на аватарку, выберите «Добавить почту» и подтвердите адрес в ответном письме. Потом вернитесь ко мне — я вышлю отчет.

Разберём ситуацию, проблемы ответа и попробуем сделать лучше.

Ситуация

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

Проблемы

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

Структура. Текст содержит подробности, не имеющие прямого отношения к вопросу, а суть располагается в середине абзаца. Из-за этого текст придётся читать целиком. Если сделать текст лаконичнее, пользователь быстрее получит ответ и потратит меньше времени на тревогу.

Экономия времени, внимания и усилий — проявление заботы

Задача

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

Решение

Разберём первый абзац по единицам смысла, чтобы найти избыточность. Для этого разбиваем текст по предложениям и удаляем всё не по делу.

Разбиваем:

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

Это значит: чек вы получить не сможете.

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

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

Отжимаем:

вы платили наличными, а чеки доступны при оплате картой

чек вы не получите — повтор, но мы его пока оставим

вместо чека можно получить отчёт о поездке с необходимой информацией

Вынесем суть в начало и перепишем:

Мы не выдаём чеки при оплате наличными, но можем отправить отчёт о поездке с необходимой информацией

Модальность «можем отправить» оставим, отчёт отправляется по запросу.

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

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

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

<…> с обязательными реквизитами для бухгалтерии

Обязательные — избыточность, реквизиты и так значат необходимые сведения. Но все привыкли, поэтому оставим для узнаваемости. Если пользователь слышал про квитанции от бухгалтеров, наше определение сработает лучше корректного, но незнакомого термина.

Немного сократим второй абзац:

Чтобы получить отчёт, привяжите адрес почты: нажмите на аватарку, выберите «Добавить почту» и подтвердите адрес в ответном письме. Потом напишите сюда, я вышлю отчёт на указанный адрес.

В идеале пользователь должен получать отчёт без обращения в поддержку, а приложение — знать, указана ли почта. Но мы примем, что менять логику приложения нельзя.

Для наглядности соберём всё в условном макете.

СМС с рекламой сервиса

Немного редакторского процесса на примере СМС колл-центра. Вникаем в задачу, упрощаем сценарий и пишем текст под особенности формата.

TLDR. 860 слов о том, как написать 200 символов.

Скриншот результата в мокапе iPhone SE. Для фотографии мой телефон слишком потёрт :3

Ситуация

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

Чтобы клиенты чаще искали ответы сами, колл-центр решил отправлять им СМС с рекламой чат-бота и Помощи ВТБ Бизнес. Вот оригинал:

Переходите по ссылке https://db.vtb.ru/faq в раздел «Помощь». Здесь вы найдете много полезной информации по правилам работы Интернет банка ВТБ Бизнес. Еще у нас есть чат-бот, который подскажет ответы на самые актуальные вопросы.

Чат-бот живет в правом нижнем углу экрана https://db.vtb.ru под названием «Чат». Особенно хорошо чат-бот разбирается в вопросах входа в систему. Напишите ему Ваш вопрос, он расскажет план действий.

Оператор будет отправлять это сообщение после консультаций, если у клиентов нет жестких технических проблем. Но по нескольким вопросам клиенты будут получать по два СМС: сначала ссылку на конкретную статью, а потом рекламу.

Очевидно, что текст можно сделать короче, а сценарий точнее.

Задача

Колл-центр редактуру не заказывал, так что поставим задачу сами.

  1. Упорядочим сценарий отправки. Нужно учитывать тему и настроение клиента. И два СМС подряд — это перебор.
  2. Напишем лаконичнее, с пользой в мире клиента и конкретикой. Сейчас непонятно, чем Помощь и чат-бот удобнее общения с оператором.

Начнём со сценария, чтобы выстроить предсказуемый контекст. Чем больше мы узнаем о ситуации клиента, тем точнее напишем. Обратное тоже верно: без знания ситуации вместо работы со смыслом получится перестановка слов.

Сценарий

Проблемы первоначального сценария:

  • не учитываются настроение и суть вопроса клиента;
  • реклама отправляется при любом вопросе;
  • иногда клиент получает два похожих СМС.

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

К счастью, операторы вправе решать, что и кому отправлять. Договариваемся, что рекламу шлём при условиях:

  • вопрос о работе в новом интернет-банке;
  • оператор посоветовал полезное;
  • у клиента нет негатива и технических проблем;
  • клиент ещё не получал рекламу.

Ограничимся одним СМС. Когда отправляем ссылку на конкретную статью, считаем, что клиент оценит пользу Помощи самостоятельно.

Текст

Теперь сценарий формирует предсказуемый контекст и мы знаем о ситуации клиента следующее:

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

Не исключено, что хорошее впечатление от работы оператора клиент распространит на Помощь и чат-бота.

Начнём с позитивного:

Мы рады, что смогли вам помочь!

Сформулируем полезное действие: зачем обращаться к Помощи и чат-боту вместо живого оператора? Например, чтобы не ждать в очереди.

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

Сократим заход про звонки. Нужно быстрее переходить к сути: пока операторы заняты, попробуйте поискать ответ в Помощи.

К сожалению, операторы часто не могут быстро ответить. Если у вас возникнут новые вопросы, посмотрите раздел «Помощь» или спросите у чат-бота.

Уже лучше, но не лаконично. Сократим вступление и допишем остальное.

Надеемся, мы смогли вам помочь!

Наши операторы не всегда могут быстро ответить. Если у вас возникнут новые вопросы, посмотрите раздел «Помощь» или спросите у чат-бота. Мы собрали там много полезного.

Бот открывается по кнопке «Чат» в правом нижнем углу интернет-банка. А раздел «Помощь» располагается по адресу: https://db.vtb.ru/faq

Нормально, но что-то смущает. Вспоминаю, что СМС ограничено 140 байтами. Латинские символы занимают 1 байт, кириллица — 2, поэтому в одном СМС не больше 70 кириллических символов. Длинные сообщения приходят пачкой СМС, которые телефон показывает как одно.

В нашем тексте 333 символа, на 5 сообщений. Если сократим, сэкономим внимание пользователя и деньги банка.

Попробуем сжать до двух СМС — 140 кириллических символа. Уберём про рады помочь, следующий раз, полезное и располагается. В процессе приходит в голову, что когда оператор занят, клиент ждёт на линии.

Чтобы не ждать на линии, посмотрите «Помощь» (https://db.vtb.ru/faq) или спросите у чат-бота — кнопка «Чат» в правом нижнем углу интернет-банка

Получилось 143 символа, можно ещё сократить, но звучит отрывисто. Хочется естественнее: объяснить причину и выразить отношение, как в разговоре с живым человеком. Попробуем уложиться в три смски.

К сожалению, наши операторы не всегда могут быстро ответить. Чтобы не ждать на линии, посмотрите «Помощь» (https://db.vtb.ru/faq) или спросите у чат-бота — кнопка «Чат» в правом нижнем углу интернет-банка

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

Не всегда быстро отвечают — словно так и устроено

Не всегда могут быстро ответить — может и хотят, но возможности нет

Спорно, но на тот момент ничего лучше не придумал. Пишите в комментариях, что думаете. А пока пойдём дальше.

После сокращения выходит 204 символа. В интернете узнаю, что длинные СМС тарифицируются по 67 символов. Следовательно, нужно не больше 201.

Убираем скобки, всё равно адрес подсветится. Чат-бота назовём просто ботом, там рядом про кнопку «Чат». Останется место написать посмотрите в Помощи вместо смотрите Помощь. Результат на 200 символов:

К сожалению, наши операторы не всегда могут быстро ответить. Чтобы не ждать на линии, посмотрите в «Помощи» https://db.vtb.ru/faq или спросите у бота — кнопка «Чат» в правом нижнем углу интернет-банка

Вариант не без проблем, например, в предпросмотр почти не влезает польза про ожидание на линии. Но в колл-центре текстом оказались довольны и назвали самым красивым из всех 237 шаблонов.

 437    1 комментарий   2022   UX   ВТБ   кейс

Как ставить ссылки

Написал фрагмент редполитики ВТБ Бизнес о ссылках в тексте. Тема хорошо освещена, так что просто покажу макет со статьёй.

Cвёрстано в Фигме по дизайн-системе банка

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

Нейминг и иконки пакетов курса по бэкенду

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

Получилось так:

Противоядие, лечилка и комбо-поушн в разделе Стоимость

Как так вышло.

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

Простой → Средний → Сложный — обесцениваем первый вариант, нагнетаем в третьем.

Учиться → Уметь → Творить — создаём противопоставление: учиться не уметь, уметь не творить.

Перебрали кучу вариантов, от экзотики с названиями редкоземельных металлов до стёба типа «деревянный — стеклянный — оловянный», но остановились на классике:

  1. [Некий упрощённый]
  2. Базовый
  3. Индивидуальный (со своим же проектом)

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

Картинки. Вот тут пришлось подумать. Смотрите, какой набор условий:

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

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

Иконки не должны выстраиваться от простого к сложному или от дешёвого к премиальному. И они не должны создавать лишних смыслов, как в примерах названий выше.

Иконки должны быть просто разными, но с общей темой.

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

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

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

Почти все известные мне программисты играли в третьих Героев и Диабло, поэтому можно взять за базовый образ поушн — склянку с зельем.

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

Экспресс — избавляет от яда неведения, поэтому противоядие.

Базовый — полноценно лечит, поэтому просто склянка лечения. К тому же это самый частый вид зелий в играх.

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

Ляйсан собрала референсы и нарисовала несколько вариантов. Подобрала форму склянок, чтобы было не слишком похоже, проработала силуэты и сочетание цветов, а в конце добавила клёвые блики. Найс!

А теперь почитайте, как согласовать иконки в последовательность :3

Ляйсан в Инстаграме

Редакторический стикер

Мы с Ulv Vind выпустили собственный стикер, посвященный профессиональной работе с текстом.

Виниловая плёнка с матовой ламинацией, 50×50 мм. Устойчив к истиранию, почти не мокнет и приятно зернист на ощупь :3

Стикер настолько преисполнен символизмом и аллегорической метаиронией, что требует пояснений.

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

  • Карандаш изображен ластиком вниз, потому что редактор чаще стирает, чем пишет.
  • Топор символизирует решительное и безжалостное отсечение лишнего и вредного.
  • Рыбий скелет олицетворяет структуру, рыбу в значении временного бессмысленного контента, а также отсылает к поговорке о начале гниения с головы. Все вместе означает, что информационный продукт без структуры и осмысленного контента обречен изначально.

Замыкает круг образов редакторический девиз:

Lorem ipsum — para bellum

Девиз состоит из первых двух слов знаменитого рыбного текста Lorem ipsum и второй части латинского афоризма Si vis pacem, para bellum. Вольный перевод:

Видишь бессмысленную копипасту — готовься к войне

Форма стикера отдалённо напоминает песочные часы, что символизирует конечность жизни и времени, как самого ценного ресурса.

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

Заказать эту невыносимую красоту можно в ВК-паблике Ulv Vind.

Никодим и утекающие абстракции

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

Картинка Ulv Vild

Никодим устроился в IT-корпорацию писать высоконагруженный бэкенд. Его перевезли из провинции, встретили в фойе небоскрёба и отвели в переговорку на 21 этаже. Эйчар улыбалась и онбордила Никодима без умолку.

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

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

Никодим очень хотел работать и остался в здании. Спал в зоне отдыха на 55 этаже, мылся в душевой спортзала на 34, питался йогуртами и снеками из кофепоинтов. Потом курьер принёс зарплатную карту, Никодим купил бритву и стал заказывать еду из ресторанов.

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

По ночам Никодим ходил по отделам, оставлял заметки на столах, писал на досках и клеил стикеры. Днём вёл отвлечённые беседы, подводя собеседников к нужным выводам. Знакомил людей в лифте и кафетерии, создавал альянсы, играл на тщеславии лидеров. Когда удавалось подсмотреть чужой пароль, тайком поднимал упавшие билды и коммитил.

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

В конце испытательного срока Никодим получил письмо с паролем от лифта, который привёз его куда-то между 88 и 89 этажом.

— Привет, я — ведущий теневой зодчий, — представился незнакомец.

— Тебя нет в оргструктуре, — ответил Никодим, — это ты мой руководитель?

— Верно. Я следил за твоей работой и очень доволен. Тебе пора выходить к нам.

— Нет, — твёрдо ответил Никодим. — Тогда я окажусь в одной из вертикалей и не смогу ничего сделать.

В лифте Никодим обернулся.

— Почему гостевой пропуск не привязан к дате?

— Из-за безопасников. Они готовят их от недели до месяца и никогда не попадают в даты визита. Только так мы и смогли тебя протащить.

Никодим кивнул и двери лифта закрылись. Больше зодчий его не видел.

Анализ сайта DocsHouse

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

Продукт и задача

DocsHouse — платформа управления контентом (CSP). Это такая система корпоративного электронного документооборота на открытых библиотеках, микросервисах и облачных решениях.

На сайт заходят из поиска и по рекламе, но главная его задача — поддерживать прямые продажи. Потенциальные клиенты заходят на сайт после презентаций и конференций, чтобы убедиться в преимуществах платформы и надёжности компании. Убеждаться им нужно основательно, поскольку проект внедрения стоит от 5 до 200 миллионов рублей.

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

Заказчик опередил меня с уточняющими вопросами :3

Моя задача: посмотреть, сравнить с конкурентами и дать экспертную оценку, которая поможет определить целесообразность и задачи редизайна.

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

На момент анализа сайт выглядел так:

Общее впечатление

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

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

Основные проблемы

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

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

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

Сайт рассказывает о том, насколько платформа крута, а не о том, как она решает конкретные проблемы бизнеса. Чтобы оценить пользу решения, нужно ориентироваться в IT и суметь перенести прочитанное в свой контекст.

Например, какую конкретную пользу даёт парадигма CSP? Понятно, что она составляет описание продукта, но термину не хватает наглядного объяснения. Например, парадигма позволяет be agile уже на этапе внедрения.

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

Иконки слишком абстрактны и не согласуются с текстом

Например, «Современное решение <...>, построенное на открытых технологиях» ничего толком не говорит. Чем открытые технологии лучше проприетарных? Все ли открытые технологии актуальны? Как это помогает в управлении предприятием? Техническому директору это понятно, но финансовому уже нет.

Другой пример: «100% отечественное решение, входит в Реестр ПО, разработано лидером ИТ-рынка компанией ЛАНИТ». Значит ли это, что в коде нет ни одной библиотеки, написанной иностранными разработчиками? Почему тогда используется Vue.js? Что означает 100 % отечественность?

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

Например, схема функциональных блоков не сильно помогает понять, насколько платформа покрывает потребности бизнеса. Сложно представить масштаб и взаимосвязи. Что и для чего нужно, с чего можно начать, насколько легко подключить потом?

Что такое Паутина, зачем нужна Связанность, что за Мониторы. Как это поможет мне снять десяток филиалов с иглы Битрикса? — может подумать читатель

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

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

Выглядит прямолинейным сбором базы

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

Предлагаемое решение

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

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

Для этого можно собрать вопросы, которые потенциальные покупатели задают на демонстрациях, найти в них ключевые проблемы и поэтапно рассказать о каждой с иллюстрациями. Если это сделать правильно, читатель самостоятельно придёт к нужному выводу и будет считать его своим.

Можно составить несколько сценариев, под разные типы аудитории: финдиров, техдиров, CEO и т. д. Главная страница будет кратко рассказывать о платформе вообще, а дополнительные страницы — объяснять суть конкретным группам.

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

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

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

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

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

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

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

Проработать мелочи. Согласовать иконки с текстом, убрать со скриншотов неинформативные детали, уделить внимание типографике и вёрстке.

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

Крупные бренды часто используют эмоции для создания нужного образа продукта. Наглядный пример — Apple и производители техники для видеопродакшена Black Magic.


Анализ и составление отчёта заняли 4 часа, уточнение задачи и согласование ещё полтора.

Заказчик положительно отозвался о результате и переслал мой отчёт маркетингу. Маркетинг согласился с частью выводов, а часть забраковал, как непригодные в B2B. Наверняка из-за упоминания Apple. Сейчас я бы привёл в пример Confluence.

Если вам нужен такой анализ, напишите мне в Телеграм: @vitalyfilatov

Заглушка для сервисных работ

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

Ситуация

В Дехабе сделали страховой калькулятор для Росгосстраха. Заказчик запланировал обновление серверной части и просит подготовить заглушку.

Текст на заглушке такой:

ВНИМАНИЕ!

6 марта 2021 года с 20.00 до 23.59 по московскому времени на сайте будут проводиться технические работы.

К сожалению, оформить полис в это время будет невозможно.

Приносим извинения за временные неудобства.

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

Задача

Написать человечнее, с заботой и конкретикой.

Контекст

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

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

В нашем случае удалось выяснить следующее:

  • Заказчик вводит в эксплуатацию отказоустойчивую схему базы данных
  • Работы займут четыре часа, в это время вместо калькулятора пользователь видит заглушку
  • Заглушка привязана к дате и времени работ
  • На время работ отключится внутренний сервис расчёта полисов, поэтому страховку нельзя будет оформить по телефону или в офисе
  • Работы перенесли на вечер воскресенья, калькулятор заработает в час ночи понедельника

Текст

Дальше дело техники. Собираем всё в кучу и составляем сообщение по схеме:

Что произошло → Почему → Что делать

Выбрасываем «Внимание!», заглушка привлекает внимание сама по себе. Вынесем суть в заголовок:

⚠ Оформление полиса временно не работает

В причине начинаем с указания времени:

Сегодня с 20:00 по Москве...

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

Чтобы работы не проводили сами себя, добавляем действующее лицо — мы (Росгосстрах). Формулируем вескую причину, как косвенно полезную для пользователя. Это может снизить досаду от неработающего калькулятора:

...мы повышаем надёжность сервиса...

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

...поэтому расчет и оформление полиса недоступны.

Вряд ли кто-то будет звонить в офис ночью, поэтому про телефон и офис не говорим. Не работает и всё, нужно ждать. Скажем, когда приходить:

В 2:00 понедельника всё вновь заработает.

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

Всё вместе:

⚠ Оформление полиса временно не работает

Сегодня с 20:00 по Москве мы повышаем надёжность сервиса, поэтому расчет и оформление полиса недоступны. В 2:00 понедельника всё вновь заработает.

Страховой калькулятор и заглушка в работе:

Досадная мелочь: в макетах я перенёс «И» на следующую строку, привязав её неразрывным пробелом к следующему слову. На вёрстке на это не обратили внимания и предлог остался висеть :(

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

Советы

  1. Сформулируйте задачу: зачем и кому писать, какую задачу существующий текст не решает. Возможно, он путанный или туманный, а может, достаточно добавить указание на московское время.
  2. Соберите контекст: всё, что относится к ситуации и пользователю. Знание контекста помогает отобрать важное и преодолеть писательский ступор.
  3. Отвечайте на вероятные вопросы пользователя. Если это сообщение об ошибке, скажите, что произошло, почему и что делать. Если о плановых работах, то какая от них польза, когда всё заработает и как решать задачу, пока сервис не доступен.
  4. Если вы менеджер, вас засыпет вопросами. Чтобы писатель меньше вас дёргал, соберите материалы по теме в постановке задачи.

Согласуем иконки тарифов

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

Иконка диагностики откровенно плохая, но её мы трогать не будем :-)

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

Почему это важно. Мы так устроены, что сначала смотрим на картинки, а потом читаем. Можно сказать, что картинки легче понимать, поэтому мозг отдаёт им предпочтение. Если картинки складываются в нежелательный ребус, человек путается и плохо проводит время.

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

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

Движение мысли такое:

Чтобы открыть корпус большинства бытовых приборов достаточно отвёртки.

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

Для сложного ремонта понадобится целый набор: паяльник, плоскогубцы, кусачки, мультиметр и молоток.

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

Конечно, отвёртка нужна крестовая, но у плоской более узнаваемый силуэт, это важно

Картинки были в векторном формате SVG, поэтому я закинул их в Фигму, развернул ключ и прилепил его поверх отвёртки. Так отвёртка сохранила наклон, а мы подчеркнули идею добавления нового инструмента.

Получилось так:

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

Выводы.

  1. Давайте редактору макеты или доступ в Тильду. Редактор работает со всеми смыслами в продукте, а не только с текстом. Что-то сделает сам, что-то передаст дизайнеру.
  2. Векторные иконки — благо: масштабируются, мало весят, можно редактировать в Фигме. Одни плюсы.
  3. Согласованные иконки добавляют красоты и помогают передать комплексный смысл без слов.
Ранее Ctrl + ↓
UX