​​📝 Когда звать в проект UX-редактора

Мне тут попалась статья в блоге Практикума о том, что такое UI- и UX-дизайн. И там была вот такая схема, глядя на которую я задумалась. 

Дизайнера, который занимается интерфейсами, обычно называют UX/UI-дизайнером. Это потому, что он работает сразу над UX и UI — то есть ведет проект от этапа получения задачи до тестирования прототипа.

Редакторов, которые пишут для интерфейсов, называют UX-редактором. Само название подсказывает, что это специалист, который работает над пользовательским опытом — User Experience.

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

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

Синтаксис интерфейса на примере «Хочу скидку»

На Озоне есть прикольная функция: если товар кажется дорогим или планируется оптовая закупка, можно попросить скидку у продавца. А он уже примет решение: отклонит, согласует или предложит другую сумму — например, скинет 200 вместо 500 руб.

Со смыслом тут все хорошо, а вот заголовки полей в форме меня зацепили своей неоднородностью: «моя цена», но «планируете купить».

На мой взгляд, здесь стоит:
📍 сделать заголовки однородными, ведь поля в анкете — это тот же список;
📍 остановиться на втором лице, потому что с точки зрения синтаксиса поля ввода — это скорее дополнение. В отличие от кнопки, их не принято делать в виде реплики пользователя.

#подсмотрела_у_других

А вот как такая же фича сделана в Авито. Делала этот экран не я, так что отсылку к примеру считаю честной 🌟

#подсмотрела_у_других

Привет! 💚

Обо мне. Я Аня Акулова, продуктовый редактор в Авито: отвечаю за финтех, занимаюсь интерфейсами и рассылками, вместе с дизайнерами проектирую пользовательский опыт.

До этого была тимлидом в Ozon Marketplace: мы с командой писали все тексты интерфейсов в b2b-направлении и статьи в Помощь для продавцов.

Узнать больше можно в интервью для «Кто студента»

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

Навигация. Вот какие теги тут сейчас есть:

#подсмотрела_у_других — скриншоты приложений и мои заметки о них. Некоторые дополняю тегами вроде #тут_ошибка #тут_лендинг #тут_пустое_состояние #тут_экран_ожидания #тут_онбординг

#про_лайфхаки — разные приемчики и размышления о том, как писать классно, работать продуктивно и вот это все

#про_книги — мои рекомендации или то, что я только планирую почитать с пользой для работы

#про_фигму — любимые плагины, виджеты и настройки, которыми я пользуюсь

#чужой_опыт — заметки из статей, подкастов и выступлений

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

Добро пожаловать 🐱

📈 Про метрики и A/B-тесты

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

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

📍 Порой кажется, что все эти цифры — это что-то далёкое, но на самом деле даже самое маленькое изменение вроде перекрашенной кнопки или замены слова может сильно повлиять на метрики.

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

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

📍 Не всегда цель эксперимента — это рост метрик. Иногда для выкатки достаточно, чтобы они не упали.

📍 В стартапах от одного эксперимента можно получить рост на 10-20-30%, а большие компании борются за каждый 0,1%. Представьте, сколько это от месячной аудитории Авито в 62,3 млн?

💡 Про языки дизайна

Любую мысль можно донести с помощью языка. Он не обязательно вербальный — например, иногда проще нарисовать интерфейс, чем долго описывать его словами. Таких языков довольно много: например, Женя Арутюнов в книге «Сложный дизайнер» выделил пять.

🔷 Язык композиции
Он довольно универсальный: везде есть такие понятия, как масштаб, ритм, акцент, цвет, контраст, равновесие. С их помощью можно управлять вниманием и выявлять взаимосвязи.

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

🔷 Язык взаимодействия
Он помогает фокусироваться на процессе использования и смотреть на все, как на интерфейс. В этом смысле придумать правила конкурса или механику отклика на вакансию — тоже задачи на взаимодействие.

🔷 Язык букв
Он чуть ли не самый главный, потому что дизайна без текста не бывает. Любой визуальный формат можно заменить текстом: вместо иконки — подпись, вместо фото — описание. Нужно короче — пожалуйста, длиннее — не вопрос.

🔷 Язык мемов
Этот язык самый капризный и в то же время самый сильный — ему сложно противостоять. Его основная функция — сделать отсылку к кусочку информации, событию, персоне, или шире — к стилистике, эпохе, культурному явлению или тренду. И задействовать ассоциации, которые у человека уже есть.

***
Зачем это всё UX-редактору
Будет ошибкой думать, что мы работаем только с вербальным языком. Я бы сказала, что мы мало влияем лишь на язык композиции, а все остальное как раз инструментарий редактора.

Чем больше из этих языков редактор знает — тем больше разного может сказать.

Интересно наблюдать, как Тинькофф Банк меняет степень нажима — спустя месяц нейтральное предложение меняется на крик, а в ход идет тяжелая артиллерия в виде оранжевого цвета и батареи сторис по ссылке «Что нового в Тинькофф».

#подсмотрела_у_других

🔍 Как исследовать текст в интерфейсе 

Подходящий метод зависит от того, что именно мы хотим проверить. Сохранила список возможных вариантов из статьи Анны Мурашовой, UX-исследователя М.Видео-Эльдорадо. 

🔹 Встраивание текста в процесс → этнография или дневниковое исследование

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

🔹 Время на задание и долю ошибок → опросник с вопросами о тексте

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

🔹 Понятность → highlighter test или cloze test

Во время highlighter test пользователи одним цветом размечают понятный текст, а другим — непонятный. А при cloze test нужно заполнить пропуски в текстах — обычно это каждое 6 слово. 

🔹 Субъективная удовлетворенность → опросник после прочтения

Nielsen Norman Group предлагает оценку по шкале от 1 до 10 по 4 критериям: воспринимаемое качество, простота использования, привлекательность и влияние на пользователя. 

🔹 Запоминаемость → вопросы после прочтения или 5-секундный тест

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

🔹 Ассоциации и соответствие tone of voice → карточки реакций и семантический дифференциал

Тесты похожи, но первый предполагает выбор карточки с прилагательным, а второй — расположить реакцию на шкале (например, «простой» — «сложный»).

#чужой_опыт

Как Яндекс Музыка рассказывает об изменениях

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

🔶 техническая кнопка вроде «Ясно», «Понятно» и «Закрыть» — неплохое место для самовыражения редактора продуктового голоса.

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

🔶 как только поставила эти два экрана на одну картинку, так не могу избавиться от желания поменять кнопки местами: к коллекциям нейтральное «Хорошо», а к лого — про красоту 😃

#подсмотрела_у_других
#тут_онбординг

👩‍🎓 Про развитие дизайнеров и редакторов

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

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

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

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

🔵 Похожий подход к презентации проекта. Достаточно посмотреть на портфолио UX-редактора — обычно оно сильно напоминает дизайнерское по структуре и подаче. 

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

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

Недавно показывала, как Тинькофф предлагает обновить приложение. Сегодня пример поинтереснее — на этот раз от СберБанка.

Я не знаю, это просто поехала верстка или такой дезигн, но проблемки в любом случае.

Если смотреть только на смысл
Здесь нет никаких аргументов скачать новую версию. Ну устарело приложение, и что? Работает же!

Если смотреть только на форму
Я здесь сначала заметила часть заголовка «Ваше приложение сильно», потом кнопку «Скачать». Потом прочитала белую часть дескрипшена. И только когда ничего не поняла, увидела остальной текст.

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

#подсмотрела_у_других

Если в «РЖД Пассажирам» смотришь расписание на ту же дату, на которую куплены билеты, приложение об этом напомнит ненавязчивым блоком. Там можно открыть детали и перейти к самим билетам. По-моему, удобно.

#подсмотрела_у_других

📅 Как я готовлюсь к полугодовому ревью

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

🔹 Делать заметки на продуктовых встречах
Здорово, когда получается подсветить в ревью, как твоя работа повлияла на цели продукта или команды. Мне в этом помогают синки, где продакты обсуждают цели и результаты квартала. Я записываю все в блокнотик, потому что потом эти цели декомпозируются в задачи на дизайн-команду. Например, мы хотели увеличить долю оплат через СБП, что потом вылилось в мои тултипы и подсказки.

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

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

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

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

🔹 Сохранять себе удачные примеры
Если на этапе оценки коллег мне нравится чье-то описание задачи, структура или прием, сохраняю себе скриншот. Потом такие референсы помогают справиться со страхом белого листа.

#про_лайфхаки

📋 Как в Госуслугах научились оцифровывать качество контента

Для этого ребята сделали калькулятор в Excel-таблице — по факту это такой интерактивный чек-лист. Узнала о нем из подкаста «Наташин UX» с Варварой Тихоновой и Наталией Богатырёвой. 

🔷 Какую задачу решали
Важная метрика Госуслуг — индекс качества FAQ или соотношение лайков и дизлайков. Нужно было снизить количество дизлайков, тогда понадобился инструмент для объективной оценки. 

🔷 Как делали калькулятор
В первую очередь ребята сформулировали обязательные и дополнительные критерии хорошего текста. Их много, но все они складываются из 10 требований:
📍 Решение проблемы пользователя — должна быть четкая инструкция, что делать, какие документы нужны и сколько это стоит. 
📍 Визуальная подача — заголовки, подзаголовки, схемы. 
📍 Точка выхода — кнопка или ссылка, где человек решит свою задачу. 
📍 Простой и понятный язык — без канцелярита и бюрократии. 
📍 Оформление по редполитике — правильные кавычки, тире, названия и прочее. 
📍 Сбалансированный объем — какая оптимальная длина у всего FAQ, отдельного предложения и подзаголовка.
📍 Пояснения на примерах — где это возможно.
📍 Полнота — на случай перехода не из сервиса, а из поиска. 
📍 Честность — написано как в жизни, а не в регламенте из ведомства (!).
📍 Актуальность — соответствует законодательству на дату проверки. 

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

🔷 Что в итоге
За год работы над FAQ с таким калькулятором удалось снизить количество дизлайков на всем портале в 3 раза.

🔷 Где узнать больше про калькулятор
Вот пост про него в канале «Коллеги, вам самим-то нравится» — его ведут ребята из Госуслуг. В конце есть ссылка на сам калькулятор, а следующим постом идет презентация с подробностями.

#чужой_опыт

🍊 Мандариновое настроение в Авито

Да, в этом году мы бросаем всем новогодний вызов.

А вообще, хотела поделиться статьей о том, как делать хорошие чейнджлоги — ее написал автор текста с этого скрина. Она старая, но актуальности не теряет. Прочитать на Хабре

#подсмотрела_у_других

Плагин для синхронизации Фигмы и гугл-таблиц

Чтобы все сработало, нужно настроить у таблицы доступ по ссылке для всех, а слои в фигме назвать по принципу «#заголовок_столбца». Останется запустить плагин и добавить в него ссылку.

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

Попробовать плагин 👉 Google Sheets Sync

#про_фигму

🚪 В чем состоит работа UX-редактора на примере двери


В выходные читала на Т-Ж дневник трат UX-редактора, где героиня очень классно объясняет суть свой работы. Не могу это не сохранить 🤩

Представим, что мой продукт — это дверь. Моя задача — сделать так, чтобы пользователи ее легко, безболезненно и желательно с первого раза открывали. Так как мой рабочий инструмент — это тексты, я пишу табличку: «От себя».

Проходит время, ко мне приходят аналитики и говорят: так и так, у 90 из 100 пользователей не получается открыть нашу дверь. Проблема определенно есть, надо понять, почему она возникает. Тогда я смотрю, как люди сами ее формулируют, и прихожу к новому решению: пишу на двери вместо «От себя» — «Толкай».

Через время смотрю аналитику снова и замеряю эффект от изменений. Если теперь с проблемой сталкивается только 50 пользователей из 100 и нас это устраивает, задачу закрываю. Если не устраивает, придумываю что-то еще.

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

Скажите, здорово? Возможно, такая бытовая аналогия поможет мне наконец-то объяснить маме, чем я занимаюсь 😃