Я не вижу сильно большой разницы между дизайнерами и юкис- или юай-дизайнерами. То же самое с редакторами и юикс-писателями. Для меня все эти приставки юикс — это просто модные словечки и чаще всего попытка спрятаться за малопонятным английским термином. Есть исключения, их я укажу в конце статьи.
И хотя я ни разу не юикс-писатель и никогда специально не занимался интерфейсными текстами. Но попробую порассуждать на эту тему.
Вчера мы с коллегами запустили новый сайт Анимы. Изначально я должен был только помочь со структурой и текстами, но в итоге сделал дизайн и сверстал сайт на Тильде в нулевых блоках. Вот как это было.
Контекст
В январе руководство компании отказалась от сторонних проектов и сделала Аниму основным продуктом. На февраль запланировали обучение по продажам, а с марта — активное продвижение в соцсетях. Стало ясно: вести людей на старый сайт нельзя, нужен новый.
Задачу поручили другому сотруднику, но в итоге она скатилась в мою сторону. Я человек простой: вижу задачу, беру и несу. Так эта задача стала моей. И хотя я не люблю делать большие задачи в одиночку, именно они помогают расти и развиваться.
Расти можно только через боль.
Проблема: не видно продукта
Старый сайт был скучным и малоинформативным. На нём был всего лишь один экран с интерфейсом Анимы, пару этажей с описанием функций, справочная и краткий блок про услугу внедрения. Этот сайт мы собрали за неделю в ноябре, и он кое-как выполнял свои функции.
Такой сайт не привлечёт людей: глаз ни за что не цепляется, и что самое хреновое: пользователь не видит продукта. Единственный скриншот продукта выглядит скудно, особенно в мобильной версии. Неясно, как это работает.
Проблема: неинформативное описание функций
Тексты в предыдущей версия сайта не были плохими. Но в той вёрстке пользователю пришлось бы прочитать текст целиком, чтобы понять суть функции. Читать каждый абзац — утомительно, да и времени на это ни у кого нет.
Проблема: высокая нагрузка на поддержку
На старом сайте не было информации о демо-версии, условиях внедрения системы и обучении сотрудников. Из-за этого в поддержку и менеджерам продаж приходилось отвечать на одни и те же вопросы, даже если человек уже посещал сайт и был более менее знаком с продуктом.
Решение: показать функции крупным планом и сократить текст
Первая итерация нового сайта оказалась неудачной, я не буду показывать её здесь, дабы не тратить время. После неё я попросил помощи у Артёма Скворцва, арт-директора Анимы. Он указал на ошибки и привёл примеры того, как можно сделать хороший сайт о продукте.
Артём собрал несколько референсов и разобрал их для меня на составляющие. В итоге, было несколько идей, вокруг которых можно сделать сайт о продукте.
Сам продукт: его интерфейс, фотографии или изображение. Такой вариант был самым простым. Продукт уже готов, сделать скриншоты или отрисовать нужные экраны — это пару дней работы.
Иллюстрации: комикс или история в картинках. Для неё нужен иллюстратор и много времени. Нам этот вариант не подходил.
Продукт в использовании: гифки, видео и анимация. Самый красивый и эффектный вариант, но и самый трудозатратный. Поэтому мы сразу отправили его в корзину.
Решили, что главным на сайте будет интерфейс продукта, а текст будет лишь сопровождать его, пояснять функцию, которая изображена на экране.
Я отредактировал текст, и начал экспериментировать с компоновкой элементов на экране. Стало лучше, но здесь сразу две проблемы: цветная плашка выделяет скриншот и одновременно перетягивет внимание пользователя на себя, а текст на их фоне — теряется. Хотя польза уже стала заметнее.
Отдельной проблемой были разные цвета в каждом блоке. Это сбивало с толку, пользователю пришлось бы привыкать к каждому экрану заново и разбираться, что есть что. Это особенно заметно по чёрному блоку про внедрение ЦРМ-системы. Три картинки, внезапный зелёный цвет — такое никуда не годится.
Вдобавок, такое решение по-прежнему заставляло человека читать весь абзац, чтобы понять суть каждой функции. Помог один из референсов. На сайте Эпла нам понравился один приём, когда текст увеличивают, делают серым, а чёрным — выделяют самое главное.
Так мы привели все блоки к единообразию. А чтобы пользователь не устал и не заскучал, мы разнообразили каждый этаж, работая с сеткой. Этого легко добиться, например: поменять положение скриншотов, добавить фактоиды. От цветных плашек под интерфейсом мы отказались. Получилось то, что нужно.
Посмотреть весь процесс редизайна можно в Фигме. Там видно, как мы шли от проблемы в решению и как с каждой итерацией макет становился чище, понятнее и информативнее.
Тезисно
У нас была проблема: неинформативный сайт о ЦРМ-системе. Чтобы исправить это, мы вынесли продукт на первый план.
Показали интерфейс Анимы крупным планом, сделали его якорным элементом на всех экранах.
Сократили и переписали все тексты, выделили главное, чтобы не пришлось читать весь абзац.
Проиллюстрировали раздел о внедрении ЦРМ.
Ответили на частые вопросы клиентов.
Теперь все, кто придёт на сайт, смогут познакомиться с продуктом за несколько минут и понять его пользу для своего бизнеса. Именно в этом и заключается работа редактора. Не в каких-то волшебных формулах копирайтинга, а умении структурировать информацию, правильно расставлять акценты и провести читателя за ручку от проблемы в решению. Результат работы редактора — работающий продукт.
На пути к услуге клиент совершает огромное количество действий и прикосновений с брендом компании. Он общается с менеджерами, оставляет заявку или покупает что-то на сайте, отмечает компанию в соцсетях, пишет в поддержку. Из того, как проходит каждый этап, у человека складывается общее впечатление о сервисе компании. Это и есть бренд — ментальная оболочка компании.
Три года назад, мы вместе с женой поехали в первое совместное путешествие. Взяли билеты Тюмень — Москва на рейс Ютейра. И нам тогда знатно нахамили, а меня не пропускали на борт с рюкзаком до 5 кг в качестве ручной клади. Пришлось достать смартфон, открыть сайт Ютейра и ткнуть пальцем в нужный пункт правил перевозки багажа. Пропустили.
После того случая жена зареклась летать Ютейром. Мы летали Уральскими авиалиниями или S7. Потому что из одной ситуации на стойке регистрации нам были не рады. У нас было ощущение, что не один менеджер, а вся авиакомпания Ютейр не особо хочет, чтобы мы летели её рейсом. Звучит пафосно, но сервис работает именно так. Даже если это хуёвый сервис: одно неверное движение, не тот взгляд, не та фраза и впечатление испорчено.
Спустя два года, прошлым летом, мне пришлось лететь из Москвы в Казань рейсом Ютейра: других вариантов просто не было. И я офигел от того, как изменился сервис после ребрендинга. Поменялся не только логотип, а всё: то, как сотрудники разговаривают с вами во время регистрации, как здоровается стюардесса, как подают обед во время полёта, как удобно покупать билет на сайте, как выглядят посадочные талоны.
Я ещё раз убедился, что ребрендинг и брендинг в целом — это не про красивые картинки, редизайн логотипа или айдентики. Это огромное количество маленьких улучшений на каждом этапе взаимодействия с клиентом, когда на пути клиента к услуге было много«пойдёт» или«норм», а стало«охуенно». Это когда забота о человеке стоит на первом месте. У Ютейра получилось, можно брать пример.
Меня тут снова пытались развести на деньги. На почту пришло вот такое письмо.
В июне я продлил все домены на год вперёд, а сейчас декабрь. Год ещё не прошёл. Насторожило и то, что на оплату отвели всего один день. Обычно хостинг-провайдеры присылают такие письма за месяц-два до даты, когда закончится срок аренды домена.
Я решил перейти по ссылке, кликнул на кнопку и попал на форму«Яндекс.Денег». Мошенники рассчитывают на то, что текст в письме и страх потерять домен заставят человека паниковать и поскорее заплатить. И первое интуитивное желание — заполнить данные и нажать«Продолжить».
Я закрыл форму и снова заглянул в почту. Письмо было подписано официально — REG.RU. Именно так они подписывают все свои письма. Если раскрыть подробную информацию об отправителе, то мы увидим обычный имейл-адрес на совершенно другом домене.
В общем, чем дальше, тем изощрённее схемы по разводу. Главное правило: не паниковать, отключить эмоции и включить критическое мышление. Сложно, но по-другому от такой хуйни не защититься.
В статьях, где много фактов, несколько героев и локаций, сложно выстроить структуру. Ещё сложнее не пропустить опечатки, проблемные места и неуклюжие формулировки. Когда я понимаю, что материала много, я использую один трюк, который помогает справиться с большим форматом.
Разделить структуру и содержание
Чтобы было легче редактировать, я делаю так: в одном документе держу структуру, а в другом по очереди пишу текст блоков.
Представим, что в статье следующая структура: А, Б, В и Г. Я беру блок А, выношу его в отдельный документ и пишу: накидываю фактуру и структурирую информацию. Потом делаю то же самое с Б, В и Г. Так можно быстро превратить любой план в черновик.
Редактировать блоки по очереди
Когда черновик готов, я откладываю его на несколько часов. Потом возвращаюсь и так же отдельно редактирую блоки: меняю формулировки, вычищаю мусор, вычитываю на опечатки и двойные пробелы. Сделать это внутри одного блока легче, чем копаться в пятнадцатистраничном гугл-доке.
Если что-то не подходит к теме раздела — убираю лишний кусок текста в отдельный файл. Возможно, пригодится в другом месте. Но раз здесь он пока не нужен, думать о нём не стоит.
Когда все блоки готовы, собираю их в главном документе с общей структурой и редактирую начистовую.
Чем хорош такой подход
Достигать результата проще маленькими шагами. Так и редактировать текст легче небольшими блоками.
Метод помогает не думать обо всей структуре одновременно. Я навожу порядок в одном блоке и шлифую его, пока он не станет самодостаточным и информативным, и перехожу к следующему.
Работа внутри одного блока помогает исключить из него лишние понятия и оставить только то, что относится к подзаголовку.
Иногда задаёшь вопрос или пишешь просьбу, а тебе присылают в ответ что-то не в тему. С такими отписками есть несколько проблем.
Во-первых, это откровенное хамство и жутко бесит. Когда мне так отвечают, я читаю это так: «Что ты тут мне умные вопросы всякие пишешь, я же не тупой/тупая. Вот, смотри, у меня уже есть решение вообще-то!» Создаётся впечатление, что человек по ту сторону экрана считает себя умнее меня. Это неприятно.
Во-вторых, ответ мимо ставит вашего собеседника в идиотское положение. Непонятно, что делать дальше: задавать вопрос снова и снова, как дятел? Как-то глупо. Сорваться и «наорать» капсом в чатике? Это тоже вряд ли приблизит вас к решению задачи.
Здесь есть два решения: переформулировать вопрос или позвонить. Я выбираю второе. Потому что дальнейшая переписка вызовет ещё большее раздражение и закончится всеобщим психозом. А в телефонном разговоре люди всё же стараются подбирать интонацию и быть вежливыми. Не знаю, почему так, но это работает.
И, конечно, не нужно отвечать мимо, если вам задают вопрос. Вопрос означает, что собеседник чего-то не понимает или опасается. Если у вас есть решение, сначала ответьте на вопрос, а потом покажите решение. Не надо умничать.
Писать рецензию на эту книгу бесмысленно — она обязательна для всех, кто пишет тексты и делает дизайн. Книга раскрывает историю современной типографики и её проблемы, которые сохраняются до сих пор, особенно в России. Я выписал несколько главных мыслей.
• Суть формы — это количество цвета… Мы больше не можем компоновать цвета, как бог на душу положит, интуитивно стараясь сделать нечто«красивое» и «прекрасное». Нет, надо действовать научно, добиться, чтобы цвета вибрировали, как звуки. Мы должны исходить из принципа: плакат — не инструмент соблазна, нет, плакат — это вызов или сообщение. Нужно разрабатывать плакат именно в этом ключе. Не пытаться сделать более или менее заманчивую предметную картинку, а стремиться добиваться того, чтобы наше внимание было приковано к плакату при помощи более или менее сильных вибрирующих визуальных ощущений.
• Широкие полосы, линии, точки и т. д. должны быть функционально необходимы. Декоративные формы, характерные для старой типографики, всегда были дополнением. Полоски и т. д. в Новой типографике только тогда необходимы и важны, когда создают и подчёркивают нужный контраст.
• …Нужно признать, что подавляющее число предметов повседневного потребления гораздо в большей степени подчиняется закону чистой целесообразности, чем требованиям индивидуального вкуса.
• Ещё один важный, очень действенный приём, характерный для нового текстового плаката, — пустое пространство. Оно бросается в глаза, потому что обычно на афишных тумбах не бывает пустой бумаги. Традиционные текстовые плакаты, на которых запечатаны даже крохотные участки. производят слишком хаотичное впечатление и поэтому неэффективны.
• Использование орнамента(неважно, какого стиля и качества) — это всегда наивное ребячество. Человек, который не довольствуется четкой конструкцией предмета и начинает его украшать, тем самым оказывается во власти примитивных представлений(что, в сущности, свидетельствует о том, что он боится неприукрашенного предмета).
• Чем ниже в своём развитии народ, тем роскошней его орнаменты и украшения.
• Новая типографика отличается от прежней тем, что она впервые пытается конструировать внешнюю форму, исходя из функций текста.
• Прежде всего восприятие всегда должно быть непосредственным, а от любых схем необходимо отказываться. Если мыслить ясно, а к задаче подходить смело и уверенно, то вполне можно найти удачное решение.
• Сегодня мы поняли, что искусство состоит не во внешнем подражании природе, а в формотворчестве, которое выводит свои законы из тектоники природы, а не из внешних её проявлений.