UX Notes

20 самых популярных постов UX Notes в 2024 году в Телеграме:

1. Ирина Сильянова рассказала, как писать интерфейсный текст. 68 лайков (очевидно позитивные реакции минус очевидно негативные)

2. Я выписал тезисы из книги Скотта Беркуна «Дизайн всего». 67 лайков

3. Юля Кондратьева написала, зачем и как читать научные исследования по дизайну. 62 лайка

4. В Контуре подготовили гайд, как навести порядок в макете. 60 лайков

5. Александр Букин написал, с чем сталкивается дизайнер, которого повысили до лида. 60 лайков

6. Таня Юдина написала о найме дизайнеров с точки зрения нанимающего лида. 59 лайков

7. Илья Бирман написал, что ответить заказчику, который спрашивает, за что он платит, если он всё придумал за дизайнера. 52 лайка

8. Илья Полянский рассказал, как делать чистые градиенты. 50 лайков

9. Майя Азарова написала о хоторнском эффекте. 49 лайков

10. Дмитрий Якушин написал о тактильной обратной связи в мобильных приложениях. 48 лайков

11. Илья Кретов написал об интерфейсном тексте и типографике. 46 лайков

12. Я написал, как быстро сделать в Фигме прототип формы, поля которой можно заполнять в любом порядке. 45 лайков

13. Слава Соколов написал об основах BDUI для продуктовых дизайнеров. 44 лайка

14. Дарья Хуторянская написала, что проверить при передаче макетов разработчикам. 44 лайка

15. Михаил Озорнин поделился внутренним гайдом, как писать дату и время в интерфейсе. 44 лайка

16. Юля Кондратьева поделилась исследованиями тёмных паттернов из научных статей. 43 лайка

17. Маргарита Романова написала об управлении доступом к платным возможностям Фигмы. 43 лайка

18. Маргарита Романова написала первую статью из серии об эффективном прототипировании в Фигме. 42 лайка

19. Дмитрий Якушин написал о дизайн-токенах. 42 лайка

20. Исследователи из ВК рассказали о немодерируемых исследованиях. 41 лайк

При равном количестве лайков выше — более вовлекающие посты.

Станислав Хрусталёв написал, как с помощью Action button создать ещё одну точку контакта с продуктом.

— Action button заменила переключатель бесшумного режима в iPhone 15 Pro и всех версиях iPhone 16;
— Пользователь может привязать к ней любое действие. Например: то же переключение бесшумного режима или быструю команду (шорткат);
— В приложении «Команды» (Shortcuts) пользователь может создавать команды, запускающие разные последовательности действий в приложениях. Например: открыть музыкальное приложение и запустить любимый плейлист;
— Какие команды в каких приложениях доступны, зависит от разработчиков, всё это надо разрабатывать;
— В сегменте электронной коммерции в России команды в приложениях встречаются редко (ВкусВилл, Золотое Яблоко, AliExpress). Они не были популярны, так как запускать шорткаты можно было через Сири и Поиск;
— Разработчики могут создавать команды (намерения) на основе ключевых действий в своих приложениях, а клиенты — выбирать их в качестве быстрой команды и запускать выделенной физической кнопкой;
— Например, для банковского приложения таким намерением может быть открытие камеры для оплаты по QR-коду через СБП;
— Для такси — заказ такси на работу, когда ты дома, и обратно, когда на работе.

#mobile

В погоне за метриками компании разрушают сами себя

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

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

Если поговорить с корпоративными всякими продуктовыми дизайнерами, у них очень большое самомнение, потому что у них всё научно обосновано, везде исследования, графики, цифры. Они говорят всякие умные слова про то, что у них все решения неслучайны. Они обязательно считают себя в иерархии дизайнеров выше, чем «непродуктовые» дизайнеры, которые не смотрят на метрики с утра до ночи. Типа, те всё делают на глазок, а мы — по уму. Хотя их работа чаще всего сводится к тому, чтобы сидеть и не дышать на работающий продукт, который они ещё и не сами придумали.

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

Недавно у Грубера (daringfireball.net/2024/12/andy_grove_was_right) была заметка про Интел, который всё просрал за последние годы, очень показательно. Или вот Гугль. Когда-то был лучшим поиском, а сейчас — в основном рекламная помойка. Долгое время они не замечали, что занимаются фигнёй, потому что это приносило кучу денег. А сейчас, когда появился ЧатГПТ, вдруг поняли, что отстали от потребностей людей на десятилетие. Просто некому было сказать: «Ребята, у нас вроде как поиск, но мы занимаемся не повышением качества поиска». Люди, способные это сказать, не становятся ведущими менеджерами продукта. Потому что если кто скажет, его на смех поднимут с такой аргументацией.

Можно предположить, что вся эта ситуация — не ошибка, а нормальный, прагматичный бизнес-подход: сначала мы делаем могучий продукт, а потом выжимаем из него максимум бабла, пока можем. Какой смысл пытаться делать хорошо и зарабатывать на этом X, если можно делать кое-как и зарабатывать на этом 2X, пусть даже это и ведёт к гибели через сколько-то лет? В сумме-то всё равно поди больше заработаем!

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

Взять вот Эпл. Сейчас они совершенно не стесняются рекламировать свои дурацкие сервисы во всех дырах, а ведь когда-то это было невозможно представить. Я думаю, когда-то кто-то робко сказал, что рассказать об Эпл-музыке в приложении Айтюнса вполне «полезно» и «уместно». Или что рассказать про увеличенное место в Айклауде, когда кончается память, «релевантно». Не прорекламировать, боже упаси, а просто рассказать! Нет такого, что Эплы однажды приняли решение «ну всё, дальше вместо работы над качеством мы доим нашу корову». Скорее оно как-то само получилось, потому что все себя убеждали, что так можно. Ну и вот.

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

Рэйчел Краузе и Аврора Харли написали о шорткатах.

— Любой интерфейс — компромисс между простотой освоения и эффективностью взаимодействия. Если система предназначена для многократного использования, надо учитывать интересы и новичков и опытных пользователей;
— Шорткаты — функции, которые ускоряют взаимодействие или процессы и дополняют основные способы взаимодействия, делая систему более гибкой;
— Например: горячие клавиши, жесты (двойное нажатие для реакции), голосовые команды;
— Вопрос в том, когда именно знакомить с ними пользователя;
— Можно показывать лаконичные подсказки после того, как пользователь выполнил действие стандартным способом;
— Горячие клавиши можно подписать прямо в интерфейсе. В меню со списком действий — напротив действий, выровняв по правому краю и оформив их как второстепенную информацию. Для иконок-кнопок — в тултипе (не подойдёт для тач-интерфейсов);
— О возможности свайпа в списке карточек можно подсказать анимацией;
— Список всех шорткатов можно разместить в разделе «Справка»;
— Шорткаты добавляйте только для повторяющихся рутинных задач;
— Опытным пользователям можно дать возможность настраивать их самостоятельно;
— Шорткаты должны работать одинаково на всех платформах (веб, iOS, Android);
— При использовании шорткатов ещё важнее становится обратная связь. Информируйте о выполнении действия анимацией или всплывающими сообщениями. Предусмотрите возможность отменить такие действия.

In English. #power_users

Как в Авито исследуют свою аудиторию и создают стратегии, которые работают?

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

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

Читайте статью по ссылке, чтобы прокачать свои навыки!

Андрей Машковцев написал об ошибках в визуализации данных.

— Круговые диаграммы компактны и позволяют показать распределение категорий, когда в сумме получается 100%. Их легко воспринимать, когда подписи находятся рядом с секторами;
— Лучше всего подходят для небольшого количества категорий (2−3), сильно различающихся значениями;
— Смещение начала координат (когда изменение с 86 до 82 занимает почти весь график) сильно влияет на восприятие. Если без него динамика невыразительна, дополните график диаграммой с относительным приростом или замените его фактоидом;
— Избегайте применения логарифмической шкалы на привычных графиках, используйте её для улучшения схематичных (вроде воронки продаж), от которых люди не ждут точности и на которых не пытаются сравнивать размеры элементов;
— Линейный график лучше подходит, если данные собраны к конкретным датам. Если это данные за периоды, предпочтительнее столбчатые диаграммы;
— Особенно, если периоды отличаются. Например, сначала показаны данные по годам, а для последнего года — по кварталам. Шириной столбцов можно это подчеркнуть;
— Не стоит использовать график, если значения не показывают динамику (например, если это численность населения разных регионов).

#data_visualization

В этом году опубликовал 134 поста — 200к символов суммарно (1,5к в среднем на пост).

Они получили 875к просмотров (6,5к в среднем), 4,5к реакций (34 в среднем), из которых отрицательными были всего 2%, 13,6к пересылок (102 в среднем).

— Самый длинный пост — тезисы из книги Скотта Беркуна «Дизайн всего»;
— Самый просматриваемый — об ошибках в форме запроса консультации компании, написавшей статью об ошибках в форме запроса консультации;
— Самый залайканный (одновременно с этим самый короткий и самый вовлекающий) — репост с фотопримером хорошего UX для владельцев собак. Возможно, сыграл эффект Ресторфф;
— Самый смешной — гифка о взаимодействии с разработчиками;
— Самый комментируемый — опрос о визуальном отличии чекбоксов и радиокнопок;
— Самый пересылаемый — о базовых цветовых токенах;
— Самый вовлекающий (отношение реакций, комментариев и пересылок к просмотрам), если исключить репосты — об основах BDUI.

Собрать статистику, которой нет даже в ТГСтате, помог Егор. Обращайтесь к нему, если тоже хотите.

Мария Павленко написала об анкетах для немодерируемых тестов.

— Задания и вопросы теста зависят от цели исследования;
— Немодерируемым тестом можно проверить удобство и логичность навигации, конкретных функций (вроде добавления товара в корзину), отдельных флоу, сравнить два варианта интерфейса (парное сравнение), проверить понятность текста;
— В статье есть примеры вопросов для этих типов тестов;
— В любой анкете будет приветствие, скрининговые вопросы, инструкции к выполняемым заданиям, основные и заключительные вопросы;
— При тестировании флоу можно дать сценарное задание (например, сделать заказ) и после выполнения попросить оценить от 1 до 5: лёгкость выполнения задания, понятность процесса оформления заказа, скорость (от слишком долго до очень быстро);
— Открытые вопросы: какие трудности возникли при выполнении задания, как бы вы описали опыт выполнения задания, есть ли предложения по улучшению процесса оформления заказа, какие функции отсутствуют и могут улучшить опыт;
— Полезные вопросы, чтобы проверить текст: были ли фразы или слова, которых вы не поняли, укажите, какие; как бы вы описали основные идеи текста своими словами;
— Старайтесь, чтобы в формулировке вопроса не было скрыто двух вопросов;
— Проверяйте, насколько понятно, о каком элементе вы спрашиваете. Возможно, стоит взять его в рамку или указать на него стрелкой.

#unmoderated

Кейт Каплан написала о тестировании иконок.

— На удобство использования иконки влияют: 1) Узнаваемость, может ли человек связать форму с конкретным символом (похожа ли звезда на звезду); 2) Интерпретируемость, что значит этот символ в контексте (что значит звезда в этом интерфейсе);
— Например, иконку бургерного меню с обводкой человек может принять за иконку текстового документа;
— У всех свой жизненный опыт, поэтому иконки надо тестировать;
— Тестирование может быть внеконтекстным (когда иконки рассматриваются изолировано) и внутриконтекстным (в рамках конкретного интерфейса);
— Покажите иконку таймера и спросите, что человек видит. В контексте: то же самое с иконкой в интерфейсе;
— Спросите, что она может означать в интернет-магазине. В контексте: покажите интерфейс и попросите рассказать, что эта иконка делает или обозначает;
— Можно протестировать визуальную привлекательность (вне контекста): покажите иконку и попросите оценить привлекательность с помощью семантического дифференциала или шкалы Лейкерта. Либо предложите выбрать самый привлекательный вариант из нескольких;
— Проверить релевантность и заметность (в контексте): дайте связанную с иконкой задачу и посмотрите, как люди взаимодействуют с интерфейсом, быстро ли находят то, что нужно. Либо проведите а/б-тест с разными иконками.

In English. #icon

Эдвард Скотт написал о сложных паролях.

— 82% сайтов, исследованных Baymard Institute, заставляют придумывать сложные пароли;
— Людей это расстраивает. Негативный эффект проявляется не при регистрации, а при повторном входе. 18% пользователей с учётной записью отказываются от оформления заказа из-за проблем со сбросом пароля;
— Неподходящий пароль может сподвигнуть пользователей пробовать разные имейлы, если они точно не помнят, с каким имейлом регистрировались;
— Иногда люди придумывают один сложный пароль, который используют везде. Это небезопасно из-за утечек паролей;
— Волшебные ссылки (одноразовые ссылки для входа, присылаемые на имейл) — не панацея. Проблемы у них такие же как при восстановлении пароля: письма задерживаются, попадают в спам, у людей возникают проблемы с входом в почту;
— Для сайтов электронной коммерции эксперты NIST рекомендуют ограничить минимальную длину пароля (6−8 символов), не ограничивать максимальную, но не требовать конкретных символов;
— Пользователи смогут использовать сложные пароли без принуждения;
— Полезно также сделать максимум функциональности доступным без ввода пароля;
— Снижая требования к паролям, стоит внедрить дополнительные меры безопасности: ограничить количество попыток входа, показывать капчу при подозрениях на бота, добавить опциональную двухфакторную аутентификацию, отправлять имейл для подтверждения при входе с нового устройства;
— Приложение Target просит повторно ввести номер карты при выборе нового адреса доставки.

In English. #login #signup

🎁 Дарим Figma-клавиатуру. ЧТО? ДА!

А ещё две книги DesignWorkout для прокачки своих скиллов.

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

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

1. Лиза не врала — Лиза Рыбакина, продуктовый дизайнер в Wildberries
2. СОБЕС — проект Влада Воркель про карьерные пути дизайнеров 
3. Игорь Кузнецов о тёмных паттернах — CPO VK Знакомств на конкретных кейсах показывает, как продуктовый дизайн может манипулировать поведением юзера
4. О величии в дизайне — Никита Анисимов, продуктовый дизайнер в Авито
5. всё завтра — Булат Хазимуратов, продуктовый дизайнер в Альфа-Банке, ведущий подкаста Рокк Ебол
6. Продуктосуев — Даня Рукосуев, продуктовый дизайнер и лид в Т-Банке, ментор в Duo Sapiens
7. Кузнецов – дизайнер в Алисе — Senior продуктовый дизайнер в Яндекс Алиса, ex. SberDevices

Жми «Участвовать в розыгрыше»
Дождись 24 декабря — в 18:00 автоматический бот разыграет Figma-клавиатуру и две книги DesignWorkout.

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

Участвовать в розыгрыше
Участвовать в розыгрыше

Реклама. Хазимуратов Булат Искандарович ИНН 165120472887. erid: 2Vtzqve8cQR

Александр Клименков написал о личном руководстве по стилю.

— В изданиях есть руководства по стилю, которые помогают сохранять единообразие в тексте и его оформлении всех материалов издания;
— Например, они могут предписывать всегда писать букву «ё», вычищать её автозаменой на «е» или использовать только там, где без неё возникает путаница;
— Есть общие стандарты вроде The Chicago Manual of Style или ГОСТов для НИОКР;
— Свои руководства есть в некоторых организациях. Например: Microsoft Writing Style Guide;
— Если вы пишете текст для себя или организации, где такого руководства нет, полезно иметь свой набор правил, чтобы не принимать решения по оформлению каждый раз и не вспоминать, как делали раньше;
— Александр поделился своим набором. Не со всеми правилами можно согласиться, но статья полезна списком вопросов, на которые надо ответить, чтобы создать основу собственного руководства;
— Использование кавычек (включая кавычки внутри кавычек), когда какие чёрточки нужны (дефис, минус, среднее и длинное тире), когда нужен неразрывный пробел (в том числе ставить ли его перед «%»), когда использовать нумерованные списки и какие знаки препинания ставить в конце пунктов списка;
— Буква «ё», использование пассивного (страдательного) залога, когда выделять текст полужирным начертанием, курсивом, подчёркиванием, когда уместно зачёркивать текст, оформление таблиц (включая выравнивание в шапке и столбцах).

#writing

Якоб Нильсен ещё в 2004 году написал об использовании чекбоксов и радиокнопок.

— Радиокнопки нужны для выбора из двух и более взаимоисключаемых вариантов. Чекбоксы позволяют выбрать несколько вариантов или не выбрать ни одного;
— Одиночный чекбокс подписывайте так, чтобы было понятно, что будет, когда он выбран (опция включена) и не выбран (опция выключена). Если не выходит, замените его двумя радиокнопками с понятным описанием обоих вариантов;
— В группе радиокнопок один из вариантов всегда должен быть выбран. Если нужна возможность воздержаться от выбора, добавьте такой вариант в группу;
— Чтобы не заставлять пользователя целиться в графическую часть чекбокса (квадрат) или радиокнопки (круг), текстовую подпись тоже делайте кликабельной;
— Чекбоксы и радиокнопки не должны становиться кнопками и запускать различные действия. Используйте их для настроек, которые будут применены после сохранения формы. (Примечание: кажется довольно удобным применять фильтры сразу при нажатии на чекбоксы в интернет-магазинах, хоть это и противоречит рекомендации).

In English. #checkbox #radio_button

Тарас Бакусевич написал о повышении вовлечённости и удержании пользователей. В статье 21 рекомендация, здесь только часть:

— Можно достать пользователя пушами, а можно как Дуолинго ненавязчиво напоминать о себе виджетом на домашнем экране;
— Персонализированные триггеры эффективнее общих. Старбакс опирается на историю покупок и предпочтения клиента;
— Чтобы человек что-то сделал, сложность действия должна быть меньше оценки вознаграждения. Описывайте получаемую ценность (получить акции стоимостью $75 за прохождение теста) и само действие (тест займёт всего 3 минуты);
— Побуждайте пользователя брать на себя обязательства, не требующие больших усилий. Например: 7 дней подряд проходить уроки;
— Одной внешней мотивации (вознаграждения, баллов) мало. Продукт должен давать пользователю что-то для развития внутренней мотивации: чувство удовлетворённости, улучшение физической формы и так далее;
— Давайте обратную связь (сообщения об успехе, анимации, заполнение шкалы прогресса), особенно, если вознаграждение откладывается. В Тиндере пользователь свайпает сейчас, а матч происходит потом;
— Большие задачи делите на этапы и визуализируйте прогресс;
— Непредсказуемое вознаграждение вызывает интерес и предвкушение. Например: лутбоксы со случайными наградами;
— Позволяйте настраивать продукт под себя: плейлисты, предпочтения, настройка интерфейса;
— Создавайте условия для долгосрочного взаимодействия: новые достижения, прокачка персонажа, многоуровневая система лояльности;
— Можно также усложнять механики по мере того, как пользователь осваивается. Например: более сложные медитации и длинные сеансы в Headspace.

In English.

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

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

Преподаватели — опытные дизайнеры и иллюстраторы такие как: Федя Аброськин, Виталий Цыганков, Саша Ермоленко, Мина Милк, Илья Митрошин, Костя Новиков.

— Графический дизайн: уроки по композиции, типографике, айдентике.
— Иллюстрация и 2D-анимация: уроки по скетчингу, персонажке, комиксам, риллсам.
— UX/UI-дизайн: уроки по Figma, пользовательскому интерфейсу, продуктовому дизайну.
— Моушн-дизайн: уроки по кинетической типографике и анимации в After Effects.
— Карьера: уроки про резюме, собеседованию, испытательному сроку, зарплатам и поиску работы за рубежом.

Получить необходимый навык или новую карьеру

Реклама. ООО «Сила знания» ИНН 9701158240. erid: LjN8JykcK

Катя написала об артефактах модерируемого юзабилити-теста.

— Модерируемый тест позволяет исследователю ставить задачи и задавать вопросы респондентам напрямую. Это качественное исследование, так как модераторов не хватит на большую выборку;
— Есть сырые данные: записи тестов и их текстовые расшифровки;
— Расшифровки не особо нужны в случае с юзабилити-тестами. Вопросы и задания у респондентов повторяются, что позволяет легко формировать сводные таблицы;
— И заказчики исследований обычно не находят времени на чтение расшифровок;
— Таблица с оценкой успешности выполнения сценариев: в первом столбце — список заданий или вопросов на понимание, в остальных — оценка их выполнения каждым из респондентов (каждый столбец — респондент);
— Оценить выполнение или понимание можно от 1 до 3: не выполнил или не понял (1), выполнил или понял, но были ошибки (2), всё хорошо (3);
— Таблица с приоритизированным набором проблем и инсайтов: они сгруппированы по заданиям и вопросам, для каждой записи указывается критичность, частота (сколько респондентов с этим столкнулись), сегмент целевой аудитории, описание, подтверждающая цитата, рекомендация или решение, чья это зона ответственности;
— Главный итог исследования — презентация с основными выводами. Её обычно изучают заказчики и кладут в базу знаний.

#unmoderated

Таня Юдина написала о найме дизайнеров с точки зрения нанимающего лида. Получились советы и соискателям и нанимающим:

— Проще всего находить дизайнеров по рекомендациям коллег. С хорошим отзывом можно попасть на собеседование без резюме и портфолио;
— Если в компании постоянно ищут дизайнеров и проводят собеседования, на поиск дизайнера (middle+, senior) стоит закладывать от 1,5 месяцев;
— На рынке не так много опытных дизайнеров, которые активно ищут работу;
— У новичков тоже есть шансы. Важны софт-скилы (комфортность общения, умение слушать и задавать вопросы), мотивация попасть именно сюда, подход к решению задач (можно показать в презентации тестового);
— Фото соискателя в отклике помогает запомнить его и представить, с кем предстоит общаться;
— Кастомизируйте сопроводительное: объясните, почему хотите работать именно здесь, выделите релевантный опыт, кейсы и навыки;
— Узнать об опыте и знании продуктового процесса помогают вопросы соискателю: как был построен рабочий процесс, какими были задачи и команда, как взаимодействовали с продактами и разработчиками, какие использовали метрики успеха;
— Презентация кейса в Фигме помогает оценить вкус и подтвердить навыки, умение проектировать и работать с дизайн-системой. С сильным кейсом можно обойтись без тестового;
— Вопрос, чтобы понять, как кандидат решает сложные задачи: «Надо продать миллион страховок кредитных карт. Продакт хочет подключать их автоматически, а кнопку отключения запрятать. Что будете делать?»;
— Вопросы соискателя говорят о его мотивации и вовлечённости;
— Примеры вопросов: от кого приходят задачи и в каком виде, роль дизайнера в продуктовой команде, как устроен продуктовый процесс и из каких этапов состоит, насколько развита дизайн-система, как организовано дизайн-сообщество и какие в нём команды, возможности для развития в компании;
— Встреча в офисе позволяет показать атмосферу, познакомить с будущими коллегами и иногда склонить соискателя с несколькими офферами;
— Сделав оффер, не теряйте связь, так как вы можете быть не единственными. Начинайте подготовку к выходу: познакомьте с наставником, расскажите об онбординге, предоставьте материалы для изучения;
— В случае отказа давайте полезную обратную связь, чтобы у соискателя была мотивация прийти потом снова.

Копия статьи. #career #management

Как добавлять в Фигму реальную рыбу

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

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

Для этого в Фигме я пользуюсь двумя плагинами: FigGPT и Content Reel.

ФигЖПТ может делать супер дофига всего прямо в Фигме, начиная от рерайта текста, заканчивая генерацией и подстановкой контента. Он платный, 5 баксов в месяц.

📹 Детальнее, что умеет ФигЖПТ и как пользоваться можно посмотреть в видосе

Для тех, у кого уже есть ЧатЖПТ и кто не хочет платить доп. деньги, есть вариант с бесплатным плагином Content Reel.

Флоу работы выглядит так:
1. Пишу запрос в чатЖПТ на генерацию нужного контента столбиком без списков.
2. Добавляю «свой» контент в плагин (нужна регистрация), делаю его приватным.
3. Выделяю нужные поля и подставляю контент в макеты

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

Игорь Штанг написал о пользе повторов.

— В редактуре и информационном дизайне есть приём: вынести повторы за скобки, то есть не писать одно и то же несколько раз, а написать один раз, но чтобы было понятно, что там скрывается множество;
— Приём экономит место на макете и внимание пользователя;
— Но повторы наглядно показывают количество. Если написать «Я повесил первый светильник, я повесил второй светильник, я повесил третий светильник», сразу виден объём работы. В тексте «Я повесил три светильника» информация упакована. Иногда для распаковки требуются дополнительные усилия и возможны ошибки;
— Повторы упрощают чтение. В столбцах таблицы могут быть числа с разными единицами измерения. Если вынести их в шапку, не получится одним движением слева направо прочитать текст. Придётся смотреть вверх на заголовки;
— Избавляясь от повторов, проверяйте, не стал ли ваш текст и дизайн менее понятным.

#layout #writing

Канал о промдизайне в России

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

Здесь публикуют только самое важное:

⏺ отзывы реальных участников «Фабрики дизайна»
⏺ мнения экспертов о тенденциях развития индустрии
⏺ история культовых изобретений и открытий.

Подписаться на канал

Морган Пэн написала о балансе сложности интерфейса.

— Не все продукты созданы для нас;
— Если интерфейс кажется слишком сложным, не стоит сразу планировать редизайн, возможно, он просто ориентирован на экспертов;
— Эксперты решают задачи не так, как новички, так как обучались и практиковались в предметной области. У них есть ментальные модели решения этих задач;
— Уровни бизнес-экспертизы: низкий (как это сделать), средний (как сделать это эффективно), высокий (как оставаться в потоке);
— Уровни сложности интерфейса: низкий (крупный текст, воздух, прогрессивное раскрытие), средний (обычный текст и отступы, средний объём информации, шорткаты), высокий (больше информации, навигация клавиатурой, кастомизация интерфейса, расширенные настройки);
— Эти уровни должны соответствовать. Низкая сложность интерфейса и бизнес-экспертиза = массовые продукты;
— Высокая сложность интерфейса и средняя бизнес-экспертиза = устаревшие продукты, разработанные с расчётом, что на бухгалтерских курсах (например) будут обучать в том числе и работе с этими продуктами;
— Низкая сложность интерфейса и высокая бизнес-экспертиза = слишком примитивные продукты, пользователи которых лишены полезных функций и данных. Скорее всего, у дизайнеров таких продуктов был ограниченный доступ к пользователям;
— Некоторые продвинутые функции вроде шорткатов можно вводить довольно рано. Пользователи с низкой бизнес-экспертизой их просто проигнорируют;
— Не стоит ориентироваться исключительно на продвинутых пользователей, например, полагаться только на навигацию клавиатурой. Даже эксперты иногда забывают, как работают их инструменты.

#complicated

🔥Открываем тайны UX-лаборатории Авито!

В канале Любовь, дизайн и метрики в декабре будет 3 эфира, посвященных работе UX-лаборатории. 4 декабря в 18:00 приглашаем всех на первый эфир серии.

Расскажем:

🔴как мы масштабируемся и адаптируемся к росту,
🔴что такое «стримы» и как они меняют подход к исследованиям,
🔴с какими вызовами сталкиваемся и как их преодолеваем.

Не упустите шанс заглянуть за кулисы крупнейшей UX-лаборатории! Задавайте вопросы под этим постом.

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

— На примере ресторана: гость за столиком (клиент) заказывает карбонару (запрос), который официант передаёт на кухню (сервер). Повар берёт ингредиенты со склада (база данных) и готовит. Официант подаёт готовое блюдо (ответ);
— Возможны состояния: гость заказывает то, чего нет в меню, и об этом сообщает официант (ошибка пользователя), на складе закончился пармезан (ошибка сервера), официант приносит приборы (скоро появится ответ сервера);
— Всё, что видит пользователь в интерфейсе, — либо хардкод (неизменное содержимое вроде скатерти, солонки с перечницей и салфетницы), либо поступает с сервера (значит, потребуются дополнительные состояния);
— Чтобы понять, какие нужны состояния, спросите аналитика, какие отправляются запросы;
— Последовательные — данные загружаются один за другим, и состояние следующего блока данных зависит от предыдущего. Чаще всего они отправляются при инициализации экрана;
— Покажите, что данные загружаются. Если запрос упадёт, нужна полноэкранная ошибка;
— Параллельные запросы отправляются одновременно и не ждут друг друга. Каждому блоку данных нужен лоадер (спиннер или скелетон-шиммер) и состояние ошибки;
— Синхронный запрос в отличие от асинхронного блокирует интерфейс. После его отправки часто показывают блокирующий лоадер поверх затемнённого интерфейса;
— Обязательные запросы отвечают за ключевое действие на экране. Если они падают, пользователь видит полноэкранную ошибку с кнопкой повторной отправки;
— Необязательные загружают второстепенные данные. Например, похожие видео на Ютубе. Не страшно, если не загрузятся. Проблемные блоки иногда просто скрывают;
— Фоновые запросы происходят за кулисами. В случае ошибки пользователю часто ничего не показывают или отображают снек;
— Почти все коллекции контента подгружаются порциями по триггеру. Нужно состояние загрузки в том месте, где пользователь ожидает увидеть очередную порцию;
— Типовые ошибки: нет интернета, проблемы на сервере, тайм-аут, валидация;
— Важно понять, на клиенте или сервере происходит удаление, добавление и изменение порядка элементов, чтобы понять, когда показывать загрузку и ошибки;
— Спросите у аналитика, кешируются ли данные. Если да, то когда актуализируются. Возможно, потребуется определить, сколько единиц контента хранить в кеше, что если пользователь долистал их до конца, как отобразятся обновлённые данные.

#loader #error

Слава Соколов написал об основах BDUI для продуктовых дизайнеров (в зарубежных источниках можно встретить синоним SDUI).

— BDUI (backend driven user interface) — подход к разработке приложений, при котором бекенд управляет данными, внешним видом и поведением приложения;
— Он позволяет обновлять мобильное приложение без релиза его новых версий в сторах. Причём, обновлять целиком, включая состав и последовательность экранов в многошаговых сценариях;
— Продукты, чьи приложения удалены из сторов, могут сохранять актуальными их старые версии;
— Также он упрощает реализацию единой логики на разных платформах (веб, iOS, Android), проведение а/б-тестов и сокращает затраты на разработку фронтенда;
— Продуктовому же дизайнеру эта технология даёт набор ограничений и навык чтения контрактов в формате JSON;
— Компонент в дизайн-системе и его контракт ограничивают то, что можно настроить при его использовании (свойства и их значения). Нельзя быстро подкрутить стили на фронте, если настроек не хватает (нет свойства для настройки отступов или среди возможных размеров нет нужного), — придётся дорабатывать компонент и контракт;
— Чтобы не сломать существующие фичи и сохранить консистентность, для доработки потребуются обсуждения и согласования, а это время;
— Поэтому в компоненты закладывают максимум гибкости с самого начала;
— Сложную кастомную вёрстку позволяют сделать компоненты, состоящие из набора слотов, куда можно вставить любые другие компоненты (даже такие наборы слотов);
— Контракт в BDUI — главный источник истины;
— В JSON свойства называют ключами, это строковые переменные (например, «size»). Значения могут быть строковыми, числовыми и логическими переменными (true, false, required);
— Объект — список параметров сложного элемента, для описания которого нужно несколько ключей (порядок их перечисления не важен);
— Массив — тоже список, но порядок элементов в нём важен. Он может содержать список полей для отображения на экране;
— Часто описания значений выносят в отдельные файлы ($ref), чтобы было удобно ссылаться на них сразу из многих контрактов. Например, токены цвета в дизайн-системе;
— Ещё Слава рассказал о ключах required, enum и oneOf. Написанного в статье достаточно для чтения контрактов.

Видео в Ютубе и ВК.

Энтони Ценг написал о странице с сообщением о покупке.

— После оплаты товара люди хотят быть уверенными, что покупка состоялась, и они получат товар;
— Повторите адрес электронной почты, на который отправлено подтверждение заказа, и адрес доставки, чтобы пользователь удостоверился в их правильности;
— Добавьте зелёную галочку, чтобы без чтения можно было понять, чем закончился процесс заказа;
— Номер заказа даст покупателю ощущение, что покупка совершена (по крайней мере, система её зарегистрировала), а дата доставки — чувство контроля над ситуацией;
— Контролировать ситуацию поможет кнопка редактирования заказа. Если в адресе окажется ошибка, пользователь легко сможет её исправить;
— А если ошибок нет, акцентной кнопкой можно человека к чему-нибудь подтолкнуть, например, перейти в каталог (продолжить покупки);
— У покупателя может возникнуть проблема с заказом. Разместите ссылки на политику возврата и саппорт;
— Можно показать сопутствующие товары на случай, если покупатель о них забыл, а также поле для ввода пароля, чтобы новый пользователь мог создать учётную запись.

In English.

Дмитрий Якушин написал о тактильной обратной связи в мобильных приложениях.

— Тактильная обратная связь (haptic feedback) — использование вибрационных паттернов для передачи информации пользователю;
— Виброотклик — одна из её форм, а не синоним;
— Она позволяет снизить объём визуальной обратной связи (меньше отвлекает), добавить ещё один канал взаимодействия кроме визуального и аудиального (повышает доступность) и в целом сделать приложение более отзывчивым и живым;
— Можно использовать для подтверждения действий. Приложение Сбербанка коротко вибрирует при успешной отправке денег и длинно, если произошла ошибка;
— Чтобы выделить достижение конца списка. Яндекс Музыка реагирует, когда громкость на максимуме и увеличить её нельзя. Авито — когда пользователь прокрутил весь список фильтров;
— Чтобы сообщить об ошибке, например, если отправляемая форма заполнена некорректно;
— Чтобы выделить нажатия на значимые кнопки или переключатели. Самокат вибрирует, когда пользователь меняет адрес доставки или добавляет товар в корзину;
— Или выделить значимое изменение со стороны приложения. Яндекс Такси вибрирует, когда такси найдено. Авито — если пропал интернет;
— Давайте тактильную обратную связь не на все действия пользователя, а только на важные или вызываемые сложными жестами (тактильно можно подтвердить, что приложение восприняло жест);
— Не используйте только тактильную обратную связь;
— Следуйте тактильным паттернам операционной системы (как она показывает позитивное, негативное или нейтральное событие), к которым привыкли пользователи;
— Помните, что вибрация уменьшает заряд аккумулятора. Разрешите пользователям отключать её или уменьшать частоту.

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

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

#career

Все секреты стильного UI за час! 🔥 Большая бесплатная лекция от Евгения UPROCK о том, как создавать топовый дизайн!

Что узнаете? 👇

📌 Какие ошибки в UI делают ваши проекты слабее и что выдает новичков в дизайне.
📌 И наоборот, за счет каких деталей можно вывести даже визуально простую работу на высокий уровень.

А также, что вообще такое "стиль" и, самое главное, как уйти от шаблонных решений сохраняя функциональность.

Уже в этот четверг в 19:00 по мск вас ждет большое практическое пособие о том, как надо, а как не надо подходить к созданию дизайн-концепций.

⚡️ Зарегистрироваться на лекцию

Реклама. ИП Кузьмин Е.Л.
ИНН: 634502641730
erid: 2VtzqxMciSz

Поле обратной связи
#совет из старого фонда

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

Что у нас есть для этого в арсенале? Подпись, пространство, плейсхолдер.

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

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

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

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

Энтони Ценг написал, как в мобильных интерфейсах можно иногда отказаться от кнопки «Назад».

— В списке, чтобы посмотреть полную информацию по его элементам, надо на них нажимать, а затем возвращаться к списку с помощью кнопки «Назад» или свайпа вправо;
— Чем плохо: цели нажатия в списке находятся в разных местах экрана; возвращение назад добавляет тап; надо помнить, на какие элементы пользователь уже нажимал;
— Если список небольшой (например, список банковских карт), его элементы можно сделать карточками карусели, отображать полную информацию по текущему элементу и переключаться между элементами прокруткой карусели;
— Индикатор и части соседних карточек покажут, что карусель можно прокручивать и где пользователь сейчас находится, это привычный паттерн;
— Общее правило, которое подойдёт и для десктопа: обдумайте возможность добавления горизонтальной навигации, чтобы пользователь не был вынужден перемещаться между элементами одного уровня иерархии, возвращаясь на уровень выше.

In English. #navigation #mobile

Игорь Штанг написал, можно ли ставить заголовок на одинаковом расстоянии от верхнего и нижнего текста.

— Можно, примеры такого есть, но это рискованный приём, особенно, когда вы проектируете шаблон и не знаете, каким текстом он будет наполнен;
— Читатель поймёт, к какому абзацу относится заголовок (к нижнему);
— Проблема в том, что в определённом оформлении заголовок может походить на отдельный короткий абзац, подпись, врезку. И тогда, чтобы разобраться, придётся вчитываться в текст;
— Также группировка заголовка с нижним текстом даёт композиционную связку, вёрстка выглядит более собранной.

Копия в ЖЖ. #layout

На сайте большого форума по CX в финтехе CX FinTech Day, который состоится 3 декабря, опубликовали программу с темами.

Будет много выступлений о том, как реализуются возможности AI и ML в клиентском сервисе. Технологиями лидеров поделятся: Сбер, Альфа-Банк, МТС, ВТБ, Газпромбанк, Группа Самолёт, Медси и др.

В программе:

💰 Облака заботы. Как работают cloud-driven технологии для улучшения клиентского опыта в Райффайзенбанке

💰 Опыт Сбера. Как с помощью синергии В2U
(Business To User) и больших данных выйти на новый уровень взаимодействия с клиентом

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

💰 Как создавать вау-сервис для сотрудников и клиентов посредством ИИ-помощника. Кейс Совкомбанка

💰 Применение игровых механик как современный подход к управлению молодым поколением. Кейс ВТБ

💰Как работает Performance marketing в Газпромбанке и реализуются возможности применения ИИ в клиентском сервисе

💰Совместное выступление МТС: Customer Feedback Loop и Process Mining как драйверы трансформации digital-канала самообслуживания B2B

💰 Как с помощью машинного обучения и аналитических моделей выявить ключевые тематики негатива клиентов. Кейс Альфа-Банка

И многое другое.

В числе спикеров: Мария Косарева (Газпромбанк, вице-президент — начальник Департамента анализа данных и моделирования), Анна Кабанец (Альфа-Банк, директор по CX-стратегии), Александр Александров (Банк ВТБ, вице-президент, начальник Управления «Интернет-банк»), Полина Кузьмина (МТС, директор клиентского сервиса бизнес-рынка), Алексей Цыганков (СберМобайл, директор по клиентскому опыту), Илья Щиров (Райффайзенбанк, директор по продукту, руководитель направления по развитию AI и Support продуктов), Дарья Жаркова (Сбер, директор проектов СХ B2B, лидер направления разработки моделей машинного обучения по предсказанию удовлетворенности клиентов B2B) и другие.

Приходите 3 декабря в Старт Хаб на Красном Октябре на самую большую тусовку и выставку по СX в финтехе.

Программа и регистрация 👉 по ссылке

https://cx-day.ru/?rs=tg_cxday2024_uxnotes_anons-prog

Реклама, ООО «Регламент», ИНН 7708323273, erid: LjN8KQaeN

Вадим Митякин и Андрей Шапиро обсудили CJM и Карту процесса-опыта.

— В CJM представляют линейный путь пользователя, который решает какую-то задачу, разложенный на ключевые точки, где с потребителем происходит что-то важное;
— Даже если в этих точках мы, как создатели продукта, во взаимодействии не участвуем;
— Цель — понять, как создать для пользователя ценность, помочь ему с решением задачи на том или ином шаге с помощью функций нашей системы;
— Функции CJM: фиксация, формирование единого понимания участниками процесса, включение новых участников, управление процессом изменения;
— Нет какой-то единой или классической нотации CJM;
— Нотация BPMN фиксирует процессы. Люди там тоже есть, но они на периферии;
— CJM нужен, чтобы попасть в шкуру пользователя, что-то понять и перейти к созданию какого-то конкретного решения для определённой ключевой точки. Поэтому CJM часто остаются пылиться после создания;
— Карта процесса-опыта — результат эволюции гибридной нотации CJM и Service blueprint;
— Она позволяет соединить опыт потребителя (или других участников взаимодействия) с обеспечивающими этот опыт процессами;
— В отличие от CJM у неё есть конкретная нотация. В отличие от BPMN, нотация простая, с минимумом элементов, не требующая специальных знаний, чтобы её читать;
— Также в отличие от BPMN она учитывает, что это не программы, а живые люди, которые не всегда обязаны двигаться по процессу. Потребитель может просто уйти;
— Но если вы пришли на проект, где все говорят на языке BPMN, возможно, не стоит этого менять и лучше подстроиться;
— Карта процесса-опыта соединяет машины и людей, показывает связь бизнес-модели и инструментов, задействованных в ней.

Копия видео в ВК. #cjm #sb

Егор Камелев написал о проблеме неактивной кнопки при отправке формы.

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

#button #form

Настя Фальковская написала о пирамиде кайфовости интерфейсного текста.

— Аарон Уолтер в книге «Эмоциональный веб-дизайн» представил характеристики продукта в виде пирамиды: чем ближе к основанию, тем они важнее;
— Характеристики текста тоже можно представить в виде пирамиды. Нет смысла улучшать его более высокоуровневые характеристики, не проработав основные;
— В основании будет «Польза»: текст должен решать какую-то задачу. Какая у экрана цель, кто аудитория, что человек должен сделать после прочтения текста? Может оказаться, что текст вообще не нужен или его можно заменить графикой;
— Уровнем выше — «Грамотность»: ошибки показывают неаккуратность и невнимательность, что негативно характеризует продукт и то, как мы оказываем услуги;
— Затем «Удобство и понятность»: формулировки понятны и помогают пользователю не спотыкаться на пути к цели. Например, вместо «Выйти» на кнопке — текст, который подсказывает, что изменения будут сохранены. Антипример: «Не сохранять изменения? Да / Нет»;
— Далее «Красота и доступность»: деепричастия, страдательный залог и прочий канцелярит заменены на простые и лаконичные формулировки;
— На вершине пирамиды «Эмоциональность»: текст доставляет удовольствие, радует пользователя. Шутками, проявлениями заботы, отсылками и так далее. Не каждая надпись должна вызывать эмоции, но общее впечатление должно быть приятным и тёплым.

#writing

Хотите узнать, как команда UX-исследователей в Авито помогает разрабатывать лучшие решения для пользователей?

Руководитель департамента UX-исследований в Авито Наташа Спрогис в своей новой статье рассказывает о том, как устроена внутренняя кухня и на что именно влияют исследователи в Авито.

Подробности по ссылке.

Реклама. ООО «Авито Тех».

Никита Самутин написал, как начинающему дизайнеру выделиться, откликаясь на вакансии.

— Конкуренция сейчас высокая, начинающие учатся на одних и тех же курсах, поэтому их отклики выглядят похоже. Надо уметь подсветить свои сильные стороны;
— Сопроводительное письмо стоит персонализировать для каждой вакансии;
— Подумайте, как ваш опыт из других сфер может пригодиться в новой роли. Например, работа юристом развивает внимание к деталям и умение работать с большими документами. В дизайне продукта это поможет тщательно прорабатывать требования и не упускать ни одной детали;
— Большой плюс — работа в смежной области вроде копирайтинга или программирования;
— Постарайтесь написать, почему интересна именна эта вакансия. Может быть, вам нравится, что создаёт эта команда, и хотелось бы к ней присоединиться. Или вас заинтересовали их выступления, подскасты и статьи и вы хотите у них учиться;
— Отметьте релевантные для вас пункты из вакансии. Например, если в компании ждут, что у соискателя есть опыт работы над мобильными и веб-интерфейсами, напишите, что работали с ними (если работали, конечно);
— Чтобы показать, что вы на одной волне, изучите телеграм-канал или блог компании и напишите письмо в такой же стилистике. Старайтесь писать не слишком формально и не слишком непринуждённо;
— Не стесняйтесь говорить, что проекты учебные. Чтобы показать навыки, 2−3 кейсов достаточно;
— Указывайте цель, которую преследует ваше решение. Например: «Разработать дизайн приложения, в котором учитывается расписание и время приёма пищи, чтобы снизить число пропущенных приёмов лекарства»;
— Перечисляйте достижения как завершённые действия с конкретными результатами и цифрами, чтобы была понятна ценность проделанной работы. Например: «Создал 3 анимированных прототипа — изучил возможности Фигмы в анимации»;
— Выполненные тестовые тоже могут становиться кейсами;
— Если вы плохо справились с тестовым, проведите работу над ошибками и попросите ещё одно. Так можно показать интерес и инициативность и таким образом выделиться.

#career

Опубликованы видео с Дизайн-просмотра:

1. Егор Мызник, Plenum — Профессиональные заболевания дизайнеров

2. Данила Шорох, Всесмарт — Лопни свой социальный пузырь

3. Олег Баринбойм, TutkovBudkov — Как продавать креатив

4. Александр Лыгин — Что не так с вашими проектами

5. Сергей Гуров — Невидимый дизайн. Идиоматический подход

6. Александра Королькова, Paratype — Вся правда о шрифтовых парах

7. Михаил Кучин, М18 — Открытый дизайнер

8. Покрас Лампас — Новая Визуальная Культура

9. Леонид Ивахов, МТС — Развитие дизайн лидера и команды

10. Митя Осадчук, Иви — О смыслах дизайна и эффективности айдентики

11. Вова Лифанов, Супрематика — Что было после

😈 Страшно увлекательный Selectel UX & Research Meetup
 
7 ноября, 18:30, Санкт-Петербург
Темным-темным вечером в темной-темной комнате собираемся со всеми, кто занимается исследованием клиентского поведения: дизайнерами, проектировщиками, писателями.
 
Погружаемся в мир невыдуманных историй UX, о которых невозможно молчать:
•  Фасилитация результатов исследований
•  Инструменты для повышения эффективности UX-исследований
•  Ключевые признаки успешного продукта
 
🦖За лучший вопрос в оффлайне — наш фирменный Тирекс в подарок!
 
Онлайн-трансляция доступна по предварительной регистрации.
 
👻Участие бесплатное, регистрируйтесь по ссылке.
 
Реклама. АО «Селектел», ИНН 7810962785

Матеуш Литарович написал о когнитивной нагрузке.

— Внутренняя — обусловлена внутренней сложностью и новизной того, с чем столкнулся человек. Её уровень зависит от знаний и опыта человека (на что мы не можем повлиять). Впервые покупать что-то в интернет-магазине всегда сложнее, чем впоследствии. А настраивать сервер в облаке ещё сложнее;
— Релевантная — возникает, когда человек превращает информацию в знания и закрепляет их в памяти. Например, при изучении руководств, анализе информации и создании схем;
— Внешняя — связана с формой предоставления информации: отсутствие структуры, непонятные объяснения, нечитаемый текст, визуальный шум (избыточное оформление, мешающие уведомления). Это то, на что дизайнер может повлиять;
— Чем ниже нагрузка, тем быстрее, легче и с меньшим количеством ошибок пользователи выполняют свои задачи;
— Тем позитивнее люди воспринимают продукт и тем большее их количество может продуктом пользоваться (доступность);
— Некоторые рекомендации по снижению когнитивной нагрузки, которые не попадали раньше в заметки: контент должен быть лаконичным и понятным;
— Упрощайте формы: спрашивайте только то, что нужно для выполнения задачи, группируйте поля, делите процесс на шаги;
— Предоставляйте обратную связь, держите в курсе того, что происходит и почему;
— Выстраивайте чёткую информационную иерархию, чтобы люди понимали, что самое важное и что делать дальше;
— Визуализируйте данные в привычной форме. Используйте диаграммы и графики, которые помогут понять и усвоить информацию;
— Ограничивайте количество элементов, которые надо запоминать за один раз: оптимально от 4 до 7.

In English. #cognitive_load

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

— Баллы — это награда за совершённые действия, которая может принимать форму очков опыта, игровой валюты и прочего. Они хорошо работают для положительного подкрепления;
— Сложно определить, сколько баллов давать за те или иные действия;
— Чтобы пользователи ценили баллы, нужна возможность обменять их на что-то ценное, а это дополнительный бюджет, которого может на старте не быть;
— Баллы надо считать: сколько выдали и потратили. Без экономической модели и контроля механика быстро ломается;
— Это внешняя мотивация, которая работает хуже внутренней;
— Лидерборды разжигают соревновательность и азарт, показывают, кто самый крутой. Некоторые люди любят возглавлять разные рейтинги;
— Также они позволяют проводить разные турниры, делать посты в соцсетях и создают инфоповоды;
— Хороший лидерборд, который не будет демотивировать недостижимыми позициями лидеров, сделать непросто. Надо делить его на лиги, классы и разделы, отделять активных участников и остальных;
— И надо понять, по каким критериям его строить. С фитнес-приложениями понятно, а что делать интернет-магазинам?
— Плюс для построения лидерборда у пользователей должны быть профили, имена и аватары;
— Ачивки в геймификации бизнеса не работают и на метрики не влияют. От них можно получить пользу, но точно не на старте геймификации.

#gamification

Ксения Толокнова написала о мобильных клавиатурах.

— При проектировании мобильных форм стоит подумать о подходящих экранных клавиатурах;
— Клавиатура зависит от типа поля ввода, которых около 50 на iOS и 30 на Android;
— Например, для ввода имейла на iOS на клавиатуре с буквами появляются «.» и «@». Для ввода телефона используется цифровая клавиатура с символами «+», «*» и «#»;
— Есть более специфичные варианты, заточенные под ввод определённых наборов символов. Например, dectimalPad для ввода нецелых чисел;
— Можно скрыть строку с рекомендациями (при вводе имейла в ней может быть имейл пользователя), настроить действия при вводе, например: автозамену при орфографических ошибках, написание новых предложений с заглавной буквы;
— Во многих клавиатурах есть кнопка действия (может быть заблокированной). По умолчанию это Return, которая в зависимости от типа поля переключает на следующее поле, создаваёт новую строку, сворачивает клавиатуру;
— В iOS их 12 вариантов: Next переключает на следующий элемент ввода или шаг, Continue переводит на следующий шаг, Search запускает поиск;
— Если в вашей форме на кнопке написано Continue, здорово, если на экранной клавиатуре тоже будет Continue;
— Можно настроить, как скрывать клавиатуру (или не скрывать совсем, как в Ноушене). В iOS-приложении Телеграма она скрывается свайпом вниз, у Ютуба — минимальной прокруткой контента;
— Чтобы в тулбаре появлялись коды из смс, типом поля должно быть OTP;
— Над клавиатурой можно добавить кастомный тулбар (Ноушен, Твиттер). Их можно стилизовать под нативный с помощью серого фона (Google App, Revolut);
— Например, в приложении MyFitnessPal в тулбаре можно менять единицы изменения, одновременно с этим вводя числа в соответствующее поле.

Копия статьи. #mobile #form

Дизайнер vs маркетолог: кто прав? Почему сделать просто красиво недостаточно?

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

23 октября в 19:00 в школе дизайна Bang Bang Education пройдет бесплатный вебинар, в результате которого вы:
— научитесь отличать пользовательский опыт от потребительского;
— поймете, что такое атрибуты восприятия бренда и как расставлять акценты в коммуникации и макетах;
— разберетесь, как найти общий язык с маркетологами, построить дизайн-процессы и не сойти с ума.

Спикер — Саша Ермоленко, eх-дизайн-директор из VK. В прошлом директор по дизайну в Rambler Group, арт-директор «Яндекса» и BBDO Group.

В подарок всем участникам: Курс «Поведенческое проектирование».

→ Зарегистрироваться бесплатно

Реклама. ООО «Сила знания» ИНН 9701158240. erid: LjN8KJpQu

Евгений Бондковски написал об отличии дизайна, ориентированного на продукт (product-centric) и ориентированного на пользователей (user-centric).

— Product-centric подход смещает фокус с пользователя на баланс между потребностями пользователей и бизнеса и возможностями разработки;
— Продуктовый дизайнер учитывает задачи бизнеса и потребности пользователей (которые обычно конфликтуют) и предлагает дизайн-решения, которые легче всего реализовать (нужен постоянный диалог с разработчиками и вовлечение их на ранних этапах проектирования);
— Подходящее решение не всегда получается найти сразу. Можно использовать итеративный подход с постоянным сбором обратной связи и доработкой. Чаще всего в продуктовом дизайне надо не создавать продукт с нуля, а дорабатывать то, что уже есть;
— Например, поступила задача: добавить возможность оставить чаевые курьеру. Исследование показало, что 1% пользователей хочет оставлять чаевые, а 21% не любит этого делать. Если ориентироваться на пользователей, чаевые стоит разместить за второстепенной кнопкой на экране успеха, чтобы возможность была, но не мозолила глаза;
— Но в чаевых заинтересован бизнес: они повышают доход курьеров, которые не уходят к конкурентам (и даже переходят от конкурентов к нам). Значит, выбор размера чаевых стоит разместить на экране успеха;
— Обратная связь после тестового запуска показала, что функцией пользуются, но пользователи стали менее довольными: не нравится навязчивость, что просят заплатить ещё, непонятно, сколько из этой суммы получит курьер. Это можно итеративно улучшить;
— Учёт технических ограничений: варианты суммы чаевых вычислялись в процентах от заказа. Но разработать проще, если варианты будут фиксированными и заранее вычисленными из размера среднего чека.

#thinking #product

Александр Букин написал, с чем сталкивается дизайнер, которого повысили до лида.

— Лидерство — руководство отделом из нескольких человек;
— Сообщите подчинённым о своей новой роли. Хороший тон, если это сделает ваш руководитель в чате или на встрече;
— Кредит доверия вам в роли управленца в начале будет нулевым;
— Надо делом доказать команде, что вы на их стороне, а руководству, что команда действует в интересах бизнеса;
— Вежливое, конструктивное и уважительное отношение — залог доверительной коммуникации на старте и потом;
— Лучшее подтверждение навыков — ваши дизайн-решения. Делайте и показывайте отдельные задачи (не большие, на них не будет времени);
— Если в компании нет карты компетенций и регламентированного пути развития дизайнера, связанного с рыночными зарплатными вилками, займитесь этим;
— Кроме этого становитесь связующим звеном между бизнесом и дизайном (абстрактные хотелки → цели и задачи с метриками), улучшайте процессы, получайте бонусы для отдела;
— Чтобы вы завоевали доверие руководства, команда должна выдавать стабильный результат. Вашим результатом становится результат команды;
— В начале будет тяжело, адаптация может занять до шести месяцев. Чаще всего никто не станет объяснять, что делать;
— Смиритесь с тем, что не будете успевать всё. Используйте ICE для приоритизации дел. Делегируйте и примите, что результат будет отличаться от того, чего вы ожидали (это не значит, что он будет плохим);
— Планируйте квартал, месяц, спринт, неделю и день. Разметьте календарь повторяющимися встречами (планирование, груминги, один на один и прочее);
— Если раньше 70% времени вы занимались макетами и 30% коммуникациями, теперь будет наоборот. Постарайтесь поскорее доделать или передать задачи, где вы работаете с макетами. Познакомьтесь и наладьте связь со всеми, с кем будете взаимодействовать;
— В таск-трекере создайте доску для задач команды;
— Подумайте о процессе ревью макетов и перераспределении его на синьоров (чтобы не замыкать на себе);
— Вы будете улаживать конфликты, синхронизировать задачи, цели и файлы в Фигме для наиболее эффективной работы всего департамента и бизнеса в целом;
— Вопросы по дизайн-решениям вашей команды будут задавать не только авторам, но и вам как прямому руководителю. Будьте в курсе (как минимум, у кого что в работе и каков прогресс).

#management

Дизайнеры, последний шанс!

«Фабрика дизайна 3.0» запускает финальный поток в этом году. Успейте поработать с реальными заказчиками и заключить договор о дальнейшем сотрудничестве.
Проект станет важным этапом вашего профессионального развития. В этом году конкурс уже объединил более 300 дизайнеров.

Участие — совершенно бесплатно, вне зависимости от опыта и направления дизайна. Среди наших партнеров: «Фабрика игр», «Промобот», «Бомбора» и другие.

Заявки принимаются до 27 октября, все подробности — здесь.

До встречи на «Фабрике дизайна 3.0»!

Бен для UX Collective написал об ошибках и лучших практиках отмены подписки.

— Напомните, что пользователь потеряет, если отпишется: полезные функции, сохранённые данные;
— Canva персонализирует это сообщение, перечисляя функции, которые человек использовал чаще всего;
— Ещё они показывают, сколько он платит сейчас и насколько выросла подписка для новых клиентов;
— Покажите дату окончания подписки и напомните об экспорте данных со ссылкой на гайд, как это сделать;
— Попытайтесь понять, почему пользователи уходят. Это поможет сделать продукт лучше и уменьшить отток;
— Достаточно одного вопроса, где вариантами ответа могут быть в том числе: слишком дорого; технические или юзабилити-проблемы; найдено альтернативное решение. Дайте возможность указать другую причину;
— В зависимости от выбранного ответа можно пользователю что-то предложить. Например, если дорого, Hotjar предлагает скидку;
— Можно предложить бесплатный месяц подписки, чтобы дать дополнительное время для изучения продукта;
— Или приостановить подписку с сохранением всех данных, если у пользователя временно нет денег;
— Или предложить помощь, если возникли технические проблемы;
— Правило пика и завершения. Не стоит расставаться на грустной ноте («нам жаль» и грустные котики), пристыжать («Да, я хочу завершить мой профессиональный рост») и делать процесс отписки мучительно долгим и сложным. Как потом пользователь охарактеризует использование вашего продукта?
— Поблагодарите пользователя, пригласите вернуться позднее и оставаться на связи, подписавшись на блог компании в соцсетях.

In English. #offboarding

Опубликовали видео с Alfa Design Meetup #3:

1. Ваня Кунцевич — Редизайн сайта Альфа-Банка (копия в ВК)

2. Слава Соколов — У вас BDUI: как с этим жить (копия в ВК)

3. Вова Зимин, Райффайзен Банк — Дизайнер превращается в менеджера (копия в ВК)

4. Даша Положенцева — Панк не сдох (копия в ВК)

5. Боря Шилин, Щёлочь — Новые визуальные эстетики (копия в ВК)

Женя Перов написал о создании тёмной темы в мессенджере. Отдельные моменты:

— Установили правило глубины: то, что находится в перспективе ближе, — светлее;
— Цвет элементов можно регулировать прозрачностью (чем она выше, тем лучше через элемент виден чёрный фон), но тогда потребуются и чистые аналоги этих оттенков. Например, для поповера, чтобы через него не просвечивал нижележащий контент;
— Отдельно тестировали цвета на android-устройствах, так как цветопередача отличается от iOS и надо было проверить экраны от IPS до OLED;
— Снизили контрастность форматирования текста (цвет выделения текста из светлой темы был слишком ярким) и ссылок и упоминаний в сообщениях (чтобы подчеркнуть их место в иерархии относительно ссылки на комментарии к сообщению);
— Затемнение контента под попапом: если в светлой теме достаточно 50% от чёрного цвета, то в тёмной надо больше, например, 80%;
— Для десктопа снизили яркость текста, так как экран больше и поток белого света тоже больше;
— Тестирование показало, что линии недостаточно для отделения бокового меню от чата на десктопе. Фон меню сделали светлее;
— Плохо воспринималось изменение фона кнопки при ховере, стали менять цвет иконки и текста на голубой.

#dark_theme

💪 Интенсив по UX/UI: мощная прокачка за 4 дня с наставником

Школа UPROCK запустила уникальный бесплатный практический модуль для начинающих (и не только) дизайнеров.

В чем уникальность:
→ старт в любое время, никаких потоков;
→ индивидуальный подробный разбор каждой домашки в видеоформате;
→ реальная проверка работ: вам не скажут, что все хорошо, если все плохо 😉

А также большое количество бонусов:
⚡️большие бесплатные лекции по теории дизайна сразу после регистрации
⚡️полезные материалы для вашей работы в качестве бонусов
⚡️мощное комьюнити и поддержка от основателя школы

Начать учиться бесплатно ⬅️

Реклама. ИП Кузьмин Е.Л.
ИНН: 634502641730
erid: 2VtzqwCzJJd

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

— В Яндексе раз в полгода проходит ревью сотрудников. Если они превосходят ожидания, то могут повысить свой грейд;
— Превзойти ожидания — по собственной инициативе решить важные для бизнеса задачи. Для этого надо учиться понимать, что важно бизнесу;
— Они могут быть связаны не с продуктом, а с процессами компании. Коллеги могут с ними сталкиваться и даже пытаться решить;
— Используйте продуктовый подход и начните с поиска идей. Вспомните сложности, с которыми сами сталкивались, расспросите коллег об их рабочих болях;
— Приоритизируйте идеи по сложности реализации, ценности для компании и для вас. Задачи, где у вас пока мало опыта, ценнее, так как помогают развиваться;
— Валидируйте идеи, разговаривая с коллегами и разных отделов и руководителями (у них могут быть схожие задачи и направления работы). Не начинайте со своей гипотезы, спросите: что хочется исправить в первую очередь и зачем, что точно не стоит менять, какие цели ставят и как определяют, что достигли их;
— Тестировщик рассказал о частых визуальных багах после релиза. Оказалось, из-за большого количества уведомлений в почте дизайнеры часто пропускают ревью интерфейсов. В итоге сделали телеграм-бота, который напоминает о финальной проверке;
— Чтобы не выгореть, попробуйте для начала небольшой проект, ведь остальные ваши задачи никто не отменяет;
— Чтобы не жертвовать вечерами и выходными, попытайтесь соединить свои инициативу с рабочей задачей. Например, попробуйте прорабатываемое для одного раздела решение масштабировать на весь продукт;
— Либо убедите руководство сделать инициативу вашей официальной задачей;
— Работая над решением, периодически проверяйте, актуальна ли проблема;
— Привлекайте коллег к решению (им это тоже может пригодиться для повышения) и заранее узнавайте, как они отнесутся к предлагаемой перемене. Возможно, их придётся плавно к ней подвести;
— Даже если конкретный проект, о котором вы расскажете на очередном ревью, не приведёт к повышению, вы принесёте пользу команде, приобретёте новый опыт и навыки лидирования проекта. И у вас будет кейс.

Видео. #career

Влад Шиляев написал о синхронизации команды с помощью CJM.

— CJM может быть любой, её структура зависит от того, какую задачу вы решаете;
— Проблема постоянно развивающегося большого (когда разные команды дорабатывают разные части) продукта в том, что у отдельных специалистов (особенно тех, кто не связан с разработкой) нет полного понимания пользовательского пути;
— Иногда нельзя просто взять и пройти путь пользователя, чтобы это понимание получить (а если можно, это требует времени): ограничения разных типов клиентов могут влиять на флоу, не все сценарии могут быть доступны сразу, в них могут быть развилки, в которые за один подход не попасть;
— Стейдж — среда тестирования, которая точно повторяет прод и позволяет создавать тестовых пользователей. В идеале проходить сценарии на реальных устройствах, а не в Xcode или Android Studio;
— Описание всего пути от начала до выполнения поставленной цели позволяет увидеть общую картину и конкретные интерфейсы, найти слабые места и ошибки флоу, сгенерировать новые идеи;
— Структура: цели, шаги и действия пользователя, мобильный флоу (скриншоты интерфейса, по сути Screen flow), десктопный флоу, боли и барьеры, позитивные моменты, идеи по улучшению, отслеживаемые метрики;
— Дополнительно такая карта сокращает обращения к дизайнерам за нужными флоу (можно добавить ссылки на макеты), помогает найти нестыковки между макетами и продом и запланировать их исправление, а также адаптировать новых сотрудников;
— Стоит добавить оглавление с типами пользователей, рассмотренными сценариями, ответственными (к кому обращаться с вопросами и проблемами), а также логи обновлений, чтобы была ясна актуальность карты;
— Так как за стрелками следить сложно (и иногда их бывает слишком много), удобно вставлять блоки с развилками — описанием путей, по которым может пойти сценарий и якорными ссылками на соответствующие участки карты;
— Карта быстро устаревает, если её не обновлять. Обновление карты надо делать частью процесса разработки, выделять на это время в спринте.

#cjm

В Pathway подготовили минигайд, как проводить немодерируемые исследования. Некоторые рекомендации:

— Исследование должно давать новое знание, которого нет в лучших практиках и предыдущих исследованиях. Не надо проверять иконку лупы в контексте поиска, но можно узнать, понятно ли, что текст «Поехали» означает отправку поискового запроса;
— В общем случае для количественного исследования стоит привлекать 100 человек на сегмент. С уровнем значимости 95% максимальная погрешность будет ≈10%;
— Сценарное тестирование — вид теста, когда респондент совершает простое действие, ради которого нет смысла проводить модерируемое исследование. Пример задания: «Выберите способ оплатить доставку еды на этом экране»;
— В заданиях иногда нужен контекст, чтобы человек понял, что происходит на экране. «Купите ОСАГО» → «Представьте, что вы уже выбрали тариф, срок и вид ОСАГО, заполнили анкету. Пожалуйста, оплатите страховку»;
— Если предлагаете варианты ответа, добавьте вариант «Другое» с возможностью оставить комментарий. Иначе респондент может не найти подходящего варианта, и вы получите недостоверные данные;
— В вопросах не указывайте на элементы интерфейса. Если кнопка называется «Оформить подписку», нельзя спрашивать «Куда нажать, чтобы оформить подписку»;
— Не используйте термины и профессиональную лексику. «Чекаут», «точка входа», «футер» наверняка вызовут затруднения;
— Если возможно, не запускайте тест сразу на всю выборку. Пилотная версия на 20−30 респондентов позволит отловить и исправить проблемы;
— К немодерируемым можно отнести: тест первого клика, Preference-тест или Side-by-side, пятисекундный тест, карточная сортировка, сценарное тестирование;
— В Preference-тесте макеты должны различаться всего одной деталью, отличие должно быть заметным. Лучше не сравнивать похожие оттенки или шрифты, тексты уведомлений или кнопок;
— Перед пятисекундным тестом не предупреждайте об ограничении в 5 секунд и не говорите, на что надо обратить внимание.

#unmoderated

Максим Кононов написал о 13 базовых цветовых токенах (без токенов для ховеров).

— Блоки в интерфейсе — контейнеры для элементов и других блоков. Они должны выделяться на фоне родительского блока, создавая структуру слоёв;
— View (1) — блок, на котором отображается контент. Navigation (2) — блок с навигацией, который управляет тем, какие View отображаются;
— Border (3) может отделить два находящихся рядом блока, а также обвести немодальный блок, находящийся поверх остальных (плюс тень);
— Если блок модальный, для затемнения лежащего ниже контента — полупрозрачный Overlay (4);
— Элементы — всё остальное: текст, иконки, кнопки, поля ввода. Они управляют вниманием пользователя, выделяя важное, показывают состояние элемента;
— За внимание отвечают цвета элементов: Primary (5), Secondary (6) и Accent (7), перебивающий Primary;
— Характер задают: Danger (8), Success (9), Warning (10);
— Для фона кнопки — Background (11);
— Указанные выше яркие цвета можно применить не к тексту или иконке в кнопке, а к её фону. Тогда для её содержимого потребуется OnAccent (12);
— Кнопка в состоянии фокуса может иметь обводку с цветом Accent (с небольшим отступом, чтобы не сливаться, если у кнопки такой же фон), а в заблокированном состоянии — красить содержимое в цвет Disabled (13);
— Он же пригодится для плейсхолдера в поле ввода (логичнее было бы его назвать просто Tertiary);
— Также в статье есть о том, как подобрать цвета для этих токенов для светлой и тёмной темы.

Да, в заголовке статьи написано о 12 токенах, но это ошибка.

#color #design_system

Маргарита Романова написала первую статью из серии об эффективном прототипировании в Фигме.

— Нелинейный прототип позволяет пользователю отойти от идеального сценария, совершить ошибки. Взаимодействие становится реалистичнее, а инсайты — качественнее;
— Можно проверить интерфейсы, в которых к цели ведут несколько путей;
— В Фигме есть экшен Navigate to, но его лучше использовать для переходов между страницами, а не состояниями одной и той же страницы. Иначе получится куча связанных фреймов, и редактировать такой прототип больно;
— Для возвращения назад используйте экшен Back, он сразу добавляет обратную анимацию;
— Экшен Change to переключает инстанс компонента в заданное состояние. Его достаточно, когда взаимодействие ограничено этим инстансом. Например, пользователь навёл курсор на кнопку, и она изменила цвет;
— С помощью переменных, привязанных к слоям и компонентам, можно сделать так, чтобы действие запускало событие (экшен Set variable), которое будет определённым образом модифицировать эти слои и компоненты;
— Но в этом случае без Smart animate, только Instant;
— Один триггер (например, нажатие на элемент) может приводить к комбинации экшенов. Например, Navigate to и Set variable;
— Популярная ошибка: с помощью Change to настроить, чтобы нажатие на чекбокс ставило или снимало флаг. Если в конкретном сценарии нажатие на него должно делать что-то ещё (разблокировать кнопку), будет 2 конкурирующих набора экшенов, срабатывающих на один триггер (нажатие на чекбокс);
— В этом случае сработают экшены инстанса в сценарии, то есть кнопка в форме разблокируется, а флаг в чекбоксе не появится;
— Решение: сделать интерактивный компонент, но логику привязать к переменной, а не триггеру.

#figma #prototype

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

— Такая задача может возникнуть, если приходит много заявок, которые перегружают отдел продаж, но не приводят к сделкам;
— Добавьте полей в форму заявки, чтобы отсеять недостаточно заинтересованных пользователей;
— Форму можно усложнить, увеличив количество обязательных полей;
— Явно укажите цены на ваш продукт, чтобы фокусироваться на аудитории, готовой к вашим ценам;
— Для услуг можно добавить поле «Бюджет» с вариантами для выбора, из которых будет понятен минимальный бюджет: 10−30к, 30−40к, 40−50к, более 50к;
— Если у вас услуги для бизнеса, можно разместить логотипы крупных брендов, с которыми работали. Но сделайте это не в конце, как обычно делают, а в верхней части лендинга;
— Добавьте фильтрующий вопрос. Например, на лендинге обучающих услуг для детей добавили вопрос «Имя вашего ребёнка», чтобы получать заявки только от родителей. Видя это поле, дети теряются и покидают сайт, а родители спокойно заполняют;
— Оцените эффективность разных способов связи (форма на сайте, чат, звонок и так далее) и сделайте акцент на самых эффективных. Если это звонки, номер телефона сделайте заметнее, повторите несколько раз на странице, а форму заявки перенесите в конец страницы;
— Явно укажите условия, которые могут быть неприемлемыми для нецелевых клиентов. Например, длительные сроки изготовления или доставки, предлагаемые способы оплаты, необходимость предоплаты;
— Можно указать сегменты, с которыми работаете или не работаете. Например, что не работаете с индивидуальными предпринимателями или работаете только в определённых странах или городах;
— Сориентируйте клиента, что после заполнения формы ему надо будет пообщаться с менеджером. Например, это может быть текст кнопки «Запросить звонок менеджера» вместо «Оставить заявку».

#conversion

В Контуре подготовили гайд, как навести порядок в макете.

— Настройте автолейауты и констрейнты. Разработчик быстрее поймёт задумку и воспроизведёт её средствами CSS и HTML;
— Назовите слои единообразно и так, чтобы было понятно, что это за элементы. Multi-edit станет работать лучше;
— Размеры элементов задавайте так, чтобы было понятно, как они ведут себя при изменении содержимого и размеров контейнера. Произвольные размеры мешают понять, как работает макет;
— Группируйте элементы так, как они будут связаны в вёрстке. Можно показать область ховера, объяснить логику отступов между ними;
— В компонентах используйте варианты вместо скрытия слоёв или множества отдельных компонентов. Заполненные значения не будут сбрасываться, меньше нагрузка на компьютер;
— В их описаниях пропишите ключевые слова с синонимами, как люди называют такие элементы;
— Компонент, который используется только внутри других компонентов, можно сделать приватным, поставив _ в начале его имени. Он не будет опубликован в библиотеке;
— Как только начинаете использовать компонент в разных частях системы, переносите его в библиотеку и подключайте её к нужным макетам;
— В стили можно добавить не только цвета и типографику, но и изображения (например, аватарки), обводки, сетки, тени и другие эффекты;
— Старайтесь не использовать лишних элементов. Аватар можно сделать с помощью заливки фигуры картинкой вместо маски и 2 объединённых в группу элементов;
— Не дублируйте всю страницу целиком, чтобы описать поведение отдельного элемента. Чтобы показать, где происходит изменение, достаточно показать страницу один раз;
— Показывайте состояния элементов рядом, используйте подписи, если они нужны;
— Давайте осмысленные названия секциям. Они видны при зумировании, так проще найти нужные фрагменты макета.

#figma #delivery

Аня Попова рассказала о таком способе тестирования юзабилити как домашнее задание.

— Обычное модерируемое тестирование не подходит, если выполнение задачи занимает у пользователя более 2 часов, требует вникать в документацию и использовать другие сервисы;
— Домашнее задание — это задание, приближенное к рабочим задачам, которое пользователь выполняет в удобное время (и даже в несколько подходов), записывая экран и комментируя происходящее;
— В инструкцию для участников включите, как сделать запись экрана и что делать после завершения задания;
— Вводное интервью на 15 минут позволит лучше узнать профиль респондента, подробнее рассказать о процессе, согласовать сроки, ответить на вопросы;
— Важно донести, что вы не тестируете их навыки и компетенции, а хотите выявить проблемы при использовании продукта;
— Выполняя задание, респонденты будут задавать вопросы, поэтому предусмотрите, кто и через какой канал связи будет на них отвечать. Учтите, что часто это происходит в нерабочее время;
— Респонденты могут быть профи с загруженным графиком, из-за чего домашка отодвинется на второй план. Связывайтесь с ними во время исследования, чтобы напомнить о сроках и узнать, нет ли у них проблем с выполнением задания;
— Опыт Selectel: около 10% из них отвалится, сроки исследования сильно растянутся;
— Финальное интервью на 30 минут с участием продуктовой команды позволит респондентам поделиться общим впечатлением и основными сложностями, а вам — прояснить детали из видеозаписей;
— Небольшой опрос, суммирующий опыт респондента, поможет собрать более структурированную обратную связь;
— Плюсы: наблюдение за процессом целиком (походы на сторонние сайты за помощью, как люди вообще действуют, решая задачу) позволяет получить более глубокие инсайты, естественная среда, информативнее интервью, убедительно для команды;
— Минусы: задание ≠ рабочая задача, требует много усилий от респондента, долгий цикл исследования.

#unmoderated

Богдан Игнатьев написал, как проходить дизайнерский Whiteboard Challenge (частая практика в западных компаниях).

— Он позволяет в реальном времени оценить способности кандидата креативно мыслить, решать задачи, коммуницировать, презентовать, работать с ограничениями и неопределённостью;
— И всё это в стрессовых условиях: среди незнакомых людей, на важном собеседовании, за ограниченное время (час);
— Почему не тестовые задания: дизайнеры часто отказываются от неоплачиваемых тестовых, они занимают много времени, сложнее увидеть ход мыслей, кандидат может попросить кого-то помочь с тестовым;
— Как проходить. При постановке задачи записывайте. Так вы покажете, что активно слушаете и уделяете внимание деталям, и не забудете важные данные;
— Проговорите, как вы поняли задачу и что должно быть на выходе. Так вы убедитесь, что всё поняли правильно;
— Задавая уточняющие вопросы, объясняйте, чем вам поможет ответ;
— Будьте готовы разделить проект на части и выделить минимально необходимую функциональность;
— Расскажите об обязательных фичах, на реализацию которых вам не хватит этого часа;
— На этапе идеи (20 минут): чем больше идей и чем лучше они проработаны, тем лучше;
— Знайте свой инструмент (горячие клавиши и так далее). Чем меньше водите курсором по экрану, тем больше успеете сделать;
— Забудьте о красоте. В первую очередь оценивается UX и подход к поиску решения;
— На этапе обратной связи: если работодатель не говорит, что хорошо, что могло быть лучше, и можно ли считать, что задача решена, спросите сами;
— Говорите вслух, объясняйте ход своих мыслей;
— До собеседования: практикуйтесь в решении задач (например, UX Challenge или UX Tools) и быстрой и эффективной визуализации идей на белой доске.

#career #whiteboard_challenge

Виталий Фридман написал о хлебных крошках.

— Навигация бывает 3 типов: которая помогает двигаться вперёд, назад и вбок;
— Выделение текущей страницы в меню упрощает движение назад и вбок, если человек не смог решить на ней свою задачу;
— Хлебные крошки (Breadcrumbs) показывают, где пользователь находится в иерархии сайта, и позволяют двигаться не только назад, но и вбок (шаг назад и шаг вперёд);
— Они нужны, если у сайта 3 и более уровней в структуре. Вместо хлебных крошек, состоящих из одной ссылки, лучше разместить название раздела рядом с заголовком страницы. Но чтобы было похоже на ссылку, как в The Economist;
— Из поисковых систем люди часто переходят сразу на внутренние страницы сайта. Хлебные крошки помогают понять, куда человек попал и как организован сайт;
— Ссылки в хлебных крошках часто разделяют стрелками, направляют их обычно вправо;
— Располагайте хлебные крошки под основной навигацией сайта;
— Иногда встречаются дополнительные «хлебные крошки» над хедером, позволяющие перемещаться между связанными сайтами;
— Все названия страниц более высокого уровня должны быть ссылками и визуально отличаться от указателя текущей страницы;
— Иногда его не отображают. Можно не дублировать название страницы, если хлебные крошки рядом с заголовком. Но если далеко, этот текст поможет пользователям ориентироваться;
— Не сокращайте текст ссылок, иначе будет сложнее понять структуру. Если хлебные крошки не влезают, лучше раскрывать часть ссылок по нажатию на многоточие;
— На мобильных сайтах иногда отображают по одной ссылке (родительской) за раз, но лучше показывать столько ссылок, сколько возможно. Можно показывать всё, но с горизонтальной прокруткой.

In English. #breadcrumbs

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

В UX Notes с тегом #career есть уже немало материалов от ребят, которые искали работу и поделились своим опытом:

— Дима Марков рассказал о поиске работы дизайнером в Германии;
— Сергей Шандарин написал о поиске работы дизайнером за рубежом (после 24 февраля);
— Маргарита Романова написала о поиске работы продуктовым дизайнером в Европе;
— Ксения Стернина рассказала, что международные компании ценят в UX-специалистах;
— Ольга Шаврина написала о поисках работы UX-дизайнером в Барселоне.

Если у вас есть подобные статьи на примете, закидывайте в комментарии ↓

Илья Полянский рассказал, как делать чистые градиенты.

— Градиент — переход одного цвета в другой;
— Грязными принято называть градиенты, у которых в середине перехода можно увидеть серое пятно;
— Цветовую моделью RGB можно представить в виде куба, в ядре которого находятся оттенки серого;
— Поэтому все градиенты, проходящие через ядро (например, от жёлтого к синему) или рядом, будут довольно грязными;
— При переходе по поверхности куба (например, от жёлтого к зелёному) градиент будет чистым;
— Если нужен чистый переход именно от жёлтого к синему, можно добавить промежуточную точку или несколько;
— В цветовой модели HSB можно пропускать серые зоны, увеличивая значения Saturation и Brightness на 5−15 единиц. Hue не стоит увеличивать больше чем на 5 единиц, иначе появятся цвета, слабо связанные друг с другом;
— Есть сервисы, генерирующие радиальные переходы.

Копия статьи. #image #color

Юля Кондратьева написала о сложностях при создании интерфейсов для арабских пользователей.

— Неочевидная вещь: флоу экранов должен идти справа налево, иначе стрелочки постоянно огибают экраны и за ними неудобно следить;
— Несмотря на направление чтения, телефон часто держат правой рукой, поэтому в некоторых случаях не стоит механически переносить контролы справа налево;
— Арабский текст мельче английского того же кегля. Эппл арабские надписи программно увеличивает на 2 пункта, чтобы сохранить читаемость. Есть арабские шрифты с крупным очком, например, Al Khat;
— Большую часть гласных показывают символами над и под основным блоком текста, из-за чего уменьшать дефолтное межстрочное расстояние нельзя, можно только увеличивать. Из-за этого латинские блоки выглядят рыхлыми;
— Если вы не носитель и используете переводчики, смысл текста можно сохранить, но нюансы теряются. «Сохранёнки» из Ноушена и «Сохранённое» будут переведены одинаково;
— Масло — метафора выжимки, самого важного. Утка — провала на экзамене;
— Лучше не использовать людей-маскотов (изображение людей Коран не приветствует) и собак (их тоже не любят);
— Если подставлять в макеты нейтральное для неносителя имя Саддам, человек из Кувейта будет воспринимать его так же, как если бы в списке друзей были Маша, Петя и Адольф;
— Культурные отличия влияют и на функциональность. Среди учеников много девочек, которые не показывают лиц, поэтому нет функции загрузки аватарок;
— Из-за разделения полов нет общих видеокомнат для общения учеников одного года обучения.

#localization