Аня учится пилить проекты

Привет! 💚 Обо мне. Я Аня Акулова, продуктовый редактор в Авито: отвечаю за финтех, занимаюсь интерфейсами и рассылками, вместе с дизайнерами проектирую пользовательский опыт. До этого была тимлидом в Ozon Marketplace: мы с командой писали все тексты интерфейсов в b2b-направлении и статьи в Помощь для продавцов. Узнать больше можно в интервью для «Кто студента» Канал. Он про тексты в интерфейсе, работу в большой компании и все, что помогает сделать ее комфортнее. Навигация. Вот какие теги тут сейчас есть: #подсмотрела_у_других — скриншоты приложений и мои заметки о них. Некоторые дополняю тегами вроде #тут_ошибка #тут_лендинг #тут_пустое_состояние #тут_экран_ожидания #тут_онбординг #про_лайфхаки — разные приемчики и размышления о том, как писать классно, работать продуктивно и вот это все #про_книги — мои рекомендации или то, что я только планирую почитать с пользой для работы #про_фигму — любимые плагины, виджеты и настройки, которыми я пользуюсь #чужой_опыт — заметки из статей, подкастов и выступлений Добро пожаловать 🐱

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

Синтаксис интерфейса на примере «Хочу скидку» На Озоне есть прикольная функция: если товар кажется дорогим или планируется оптовая закупка, можно попросить скидку у продавца. А он уже примет решение: отклонит, согласует или предложит другую сумму — например, скинет 200 вместо 500 руб. Со смыслом тут все хорошо, а вот заголовки полей в форме меня зацепили своей неоднородностью: «моя цена», но «планируете купить». На мой взгляд, здесь стоит: 📍 сделать заголовки однородными, ведь поля в анкете — это тот же список; 📍 остановиться на втором лице, потому что с точки зрения синтаксиса поля ввода — это скорее дополнение. В отличие от кнопки, их не принято делать в виде реплики пользователя. #подсмотрела_у_других

​​📝 Когда звать в проект UX-редактора Мне тут попалась статья в блоге Практикума о том, что такое UI- и UX-дизайн. И там была вот такая схема, глядя на которую я задумалась.  Дизайнера, который занимается интерфейсами, обычно называют UX/UI-дизайнером. Это потому, что он работает сразу над UX и UI — то есть ведет проект от этапа получения задачи до тестирования прототипа. Редакторов, которые пишут для интерфейсов, называют UX-редактором. Само название подсказывает, что это специалист, который работает над пользовательским опытом — User Experience. Как это примерно выглядит: 📍 получение задачи — разбирается в проблеме, задает вопросы бизнесу 📍 исследование — изучает боли пользователей, смотрит на решения конкурентов, ищет подходящее позиционирование 📍 прототипирование — вместе с дизайнером прорабатывает логику, ищет подходящее решение 📍 проектирование визуальной части дизайна — пишет текст, фиксирует договоренности в редполитику/гайд/глоссарий проекта 📍 проверка решения — провести свое исследование или сходить на юиксы, увидеть столкновение своего текста с реальностью, что-то переделать 📍 разработка — ответы на вопросы команды, быстрая поддержка, если чего-то не хватает или сломалось Все вот это можно делать, только если начинать работу вместе с дизайнером. А значит, важно подключаться как можно раньше, а не когда уже готовы макеты — по крайней мере до тех пор, пока профессия не будет называться UI-редактор.

Классный виджет для статусов в Фигме При работе в Фигме у меня есть две привычки: — сохранять разные варианты — оставлять заметки на стикерах Сегодня я столкнулась с еще одной болью — когда вариантов много, хочется как-то пометить свой фаворит. Можно сделать стикер и на нем написать, но... Я нашла виджет, в котором уже предустановлены куча статусов. Например, драфт, есть риски, нужна помощь, готово и проч. Все разных цветов, с иконками и даже можно поставить фотоподпись. Пока не знаю, приживется ли, но все равно оставляю ссылку 👉 StatusStamp #про_фигму

Оказывается, свои дизайн-системы были даже у книгопечатников Первая датированная книга, напечатанная в России, это «Апостол». На некоторых четных страницах там были гравюры со святыми. Изготовление их — дело трудоемкое, и Иван Федоров придумал, как облегчить процесс. Секрет в том, что гравюры были составные. Для фигуры святого делали одну доску, а для триумфальной арки, в которой он находится, другую. Так можно где угодно использовать ту же арку, а менять только человеческие фигуры. Ну чем не прообраз компонентов в Фигме? Этот факт я узнала на экскурссии по музею книги в Ленинке. Кроме него там проводят по библиотеке, показывают каталоги, читальные залы и устройства для перемещения книг. Советую сходить.

Случайно ткнула в рекламу на Озоне и увидела милую шторку с объяснением, что это за штука такая. Мне понравился текст и сам подход: вот у нас есть реклама, она помогает продавцам, а вот кстати, кто заказал именно этот баннер. Еще и с пользой для части аудитории: если ты продавец и тоже хочешь на главную приложения, вот тебе ссылочка. Ради интереса пошла проверить, как такой же блок оформили на Маркете. Оказалось — практически никак. И вроде сказали все, что попросили юристы, но на контрасте как-то грустненько. #подсмотрела_у_других

📒 Всегда сохранять все варианты Как-то мне пришлось делать интерфейс для оплаты через СБП. Особенность оплаты через СБП в том, что она за пределами нашего биллинга: мы как бы отправляем запрос и ждем ответ от банка, подтвердил человек платеж или нет. На нашей стороне есть окно ожидания, а на нем — стрелочка для выхода из всего сценария. Например, если пользователь устал ждать. Интерфейс делали на базе уже существующего флоу, поэтому часть решений переиспользовали. Одно из них оказалось спорным: при клике на эту стрелочку интерфейс почему-то спрашивал «Отменить заказ?». Хотя на самом деле оплата еще может пройти. Так мы создавали неверные ожидания, и я предлагала изменить текст на что-то вроде «Закрыть окно? Мы сообщим, если оплата пройдёт». Но в итоге решили оставить существующий текст, чтобы не повлиять на результаты AB-теста. Спустя время проблема с этим экраном вернулась и мы стали думать, что же делать: убрать стрелочку совсем, поменять формулировки или что-то еще. Собрали целую встречу, чтобы это обсудить. И вот тут я как фокусник из цилиндра достала текст, сделанный еще для предыдущей итерации. Мы согласовали его за 5 минут, и задачка быстро ушла в прод. 💡 Вывод: всегда полезно где-то у себя в драфтах сохранять отброшенные варианты. Какие-то просто не попали в релиз, какие-то не прошли по требованиям — но в любом случае может возникнуть необходимость к ним вернуться. #про_лайфхаки

Еще один залипательный пример обнаружился у Яндекс Доставки. Тут правда ездят машинки и ходят курьеры 📦 #подсмотрела_у_других #тут_ошибка

Страница 404 у Яндекс Дзена Мне кажется, это одна из самых сложных задач — придумать такую страницу. Вроде и пользы мало можно дать, разве что ссылку на главную. И страница не так важна, чтобы бизнес вкладывал в сложные решения. И креативить не всем дано и не всем нужно, будем честны. А вот Дзен постарался. Забавные фразочки, разные иллюстрации и целый набор экранов для 404 — кайф. Правда я не знаю, может вечно можно не только смотреть на эту страницу, но и обновлять ее?) #подсмотрела_у_других #тут_ошибка

Как Сбер обрабатывает ошибки Похоже, банк пытается бороться со своим имиджем строгого и заплесневевшего гиганта: вон и словечки разговорные, и иконки веселенькие... Хотя как по мне, начинать надо с процессов — тогда и tone of voice подтянется. #подсмотрела_у_других #тут_ошибка

Интересно следить, как Яндекс Маркет экспериментирует с блоком для Сплита. Особенно зацепила вариация на 6 месяцев. Вижу два недостатка: 🔹 вроде цифры привлекают, но 152×6 сбивает с толку — порядок отличается от бейджика, поэтому как будто чуток выбивается из ряда 🔹 фраза «далее 6 платежей ежемесячно» дает ощущение, что нужно каждый месяц делать по 6 платежей Но в любом случае это отличный пример емкой конструкции. Мы как раз решаем подобную задачку, поэтому сохраняю в копилку. #подсмотрела_у_других

А вот как другие компании используют эмодзи в интерфейсах: 🔹 Вкусвилл добавляет их в навигацию 🔹 приложение Шедеврум (это нейросеть Яндекса) ставит в конце некоторых текстов На мой взгляд, в обоих случаях это уместно. #подсмотрела_у_других

💩 Про эмодзи в интерфейсе Мы в Авито любим эмодзи — они делают текст более живым, привлекают внимание и добавляют дополнительные смыслы. При этом это еще и дешевый способ разбавить текст, в отличие от авторского пака иконок, к примеру. В общем, это отличный инструмент, если руководствоваться правилами. Вот какие выработали для себя мы. 🤩 Используем сдержанно и учитываем контекст. Например, если что-то упало или заблокировано, никакой эмодзик не спасет — может наоборот бесить. 👹 Ищем не заезженный вариант. Хлопушки, конфетти, огонечки и сердечки — это хорошо, но не цепляет внимание. 😩 Проверяем год появления и отображение на разных устройствах. Потому что они могут выглядеть по-разному или вообще не показываться, если пользователь не обновил операционную систему. Смотрим это на emojipedia.org и ориентируемся на эмоджи до 2019 года включительно. 🧐 Отказываемся от эмодзи с неясным смыслом. Даже привычные всем эмодзи люди могут воспринимать по-разному, что говорить про такие варианты 🤲 🤙 🙇‍♂️

📝 Как Кинопоиск запрашивает данные Спокойно и уверенно, мне понравилось. А еще вот это «Яндекс ID — ключ от всех сервисов» 💔 #подсмотрела_у_других

Для меня идеал интерфейсного текста — который не замечаешь. Когда тогда ты не отвлекаешься от своей задачи, просто идешь по флоу и делаешь то, за чем пришел. Такой текст не обязательно вызывает эмоции и заставляет кайфовать. Потому что какие эмоции, если ты не вчитываешься? Заметьте: тебе не нужно вчитываться — и это ок. При этом здорово, если будет какая-то фишечка, которая зацепит. Вот в Телеграме для меня такой стала функция «Разжаловать админа». Весь интерфейс нейтральный и спокойный, а тут это. И ты сразу себя чувствуешь королем 🤴 #подсмотрела_у_других

💡 UX и UI — в чем разница на примере Яндекс Афиши На эти выходные у нас с мужем были билеты на Stand up, которые мы купили на Яндекс Афише. Но так вышло, что мы приболели, и вот я захотела вернуть билеты. Мне очень понравился процесс оформления возврата: кнопка нашлась быстро, понятно объяснили про сроки, даже предупредили, где ждать ответа и что не нужно брать штурмом поддержку. Вот это все и есть UI (User Interface — «пользовательский интерфейс») — то есть то, как интерфейс выглядит. Потом мне пришло письмо, что для возврата я должна прислать справку от врача или больничный лист. И это шок: я даже в вуз при пропусках их не носила, а тут понадобился отчет сервису по продаже билетов. В конце концов, я взрослый человек, а такие поход к врачу оттягивают до последнего. Вся эта история со справкой уже UX (User Experience — «пользовательский опыт») — то есть то, как продукт работает. И это отличный пример, когда плохой UX сводит на нет всю радость от хорошего UI. #подсмотрела_у_других

Как сказать «за три шага» без штампов Понравился блок на лендинге Альфа-Банка. Здесь рассказывают, как устроена оплата через сервис «Подели». Считывается легко, культурная отсылка — респект 👍 #подсмотрела_у_других #тут_лендинг

📚 Книги для развития вкуса. Подборка от ведущего дизайнера Авито Мне кажется очень важным для UX-редактора формировать насмотренность — это поможет и удачные решения подмечать, и с дизайнерами общаться. Когда я обсуждала с нашим дизайн-лидом, что хочу прокачаться и развивать вкус, он посоветовал мне три главные книги. Сама пока не читала, но оставлю эту подборку здесь: 📗 про цвет — Иоханнес Иттен «Искусство цвета» 📕 про типографику — Эмиль Рудер «Типографика» 📘 про структуру и модульность — Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне» Эти три книги — классика дизайна. Правда, в последней мало пользы для цифрового мира, зато она дает общее представление о модульности. Если в этом всем разобраться, останется только наслаивать на этот фундамент специфику вроде правил интерфейсов и особенностей мобильной верстки. #про_книги

Про пустые состояния у Яндекс Путешествий Обычно на экране пустого состояния текст строится по простой формуле: 🔹 Заголовок: «Здесь будет вот это» или «У вас пока нет вот того» 🔹 Подпись о том, как заполнить экран данными: «Сделайте вот это, тогда сможете вон то» 🔹 Кнопка с призывом к действию: «Добавить...», «Открыть...», «Выбрать...» У Яндекс Путешествий попались две вкладки с пустым состоянием. Забавно, что на одной текст написан как по учебнику UX-редактуры (если бы такой был). А вот на второй простой, но эффектный отход от шаблонов. #подсмотрела_у_других #тут_пустое_состояние