Татьяна Бублик написала об основах продуктовой колористики.

— Модель OKLCH удобнее RGB, так как сложно задавать цвет, меняя количество красного, зелёного и синего;
— Также она поддерживает расширенный набор цветов P3, что актуально для современных устройств, которые поддерживают на 30% больше цветов, чем есть в RGB;
— Стоит придерживаться схемы процентного соотношения цветов в продукте 3-17-80 (или её вариаций), где 3% — бренд-цвет для всех самых главных акцентов, 17% — остальные хроматические цвета, 80% — белый, чёрный и оттенки серого (ахроматические);
— Так акценты не будут теряться в макетах;
— В серый и чёрный можно подмешивать хрому бренд-цвета, чтобы усилить восприятие бренда, сделать их комфортнее и интереснее;
— Лайфхак: делать длинную тоновую растяжку (25–30 цветов). Это даст при любом изменении или масштабировании подобрать нужный тон.

Копия на Dsgners. #color

Андрей Шапиро написал книгу о рабочих историях и карте реализации историй.

— Общее представление о них можно получить из опубликованной ранее статьи;
— В книге рассмотрены недостатки User stories, Job stories и некоторых других шаблонов (шаблон вопроса, похоже, используется в Модели информационных ожиданий «Собаки Павловой»);
— Например, они могут наводить на одно конкретное решение, которое часто оказывается неверным, так как задача ещё слабо изучена, либо проблема лишь подразумевается и формулируется в виде решения-кандидата;
— Оперировать альтернативами в разработке крайне важно, так как время и деньги ограничены, и непонятно, какое решение уложится в срок и бюджет;
— Они не описывают предметную область, что нередко приводит к последующему перепроектированию;
— Рабочая история как текстовая модель построена таким образом, чтобы этих недостатков избежать;
— Её состав: цель действия (зачем?), носитель (кто или что выполняет действие), ситуация (контекст, когда происходит действие), способ действия (каким образом что-то делается), объекты оперирования (с чем взаимодействует носитель, что получается в итоге);
— Кроме шаблона истории, инструкции по его заполнению, примеров из многолетней практики и разбора потенциальных ошибок при составлении историй в книге есть даже примеры бесед с заказчиком, в ходе которых история появляется и обрастает деталями;
— Карта реализации историй, подобно User story map, собирает все истории вместе и помогает увидеть всю картину, а также позволяет дополнить истории информацией о возможных формах их реализации (варианты технических решений) и составе блоков соответствующего интерфейса;
— Можно сначала записать «кнопку», которую хочет добавить стейкхолдер, и потом разобраться с её первопричиной и контекстом. Главное, чтобы все слои в конце концов оказались согласованы.

#book #user_story

Ольга Свистунова написала, как работают UX-редакторы в Госуслугах и каких правил придерживаются.

— Метрики: доля незаконченных заявлений, доля отказов ведомств предоставить услуги, среднее время заполнения заявлений, число обращений в поддержку, процент дизлайков к ответам на частые вопросы, CSI после получения услуг;
— Полезные вопросы: не разъясняет ли текст очевидные вещи, нет ли в нём избыточности и повторов, не потерялся ли смысл после редактуры, не пропал ли нужный для понимания контекст;
— Важно понимать, кто его будет читать. Например, несовершеннолетним пользователям стоит напомнить о получении согласия законного представителя;
— Любой текст подчиняется редполитике. В ней есть словарь терминов, чтобы не путать пользователей синонимами одного и того же понятия;
— Достижению единообразия также способствует коллекция шаблонов. Шаблоны и редполитику верифицирует правительственная комиссия, что помогает убеждать заказчиков: писать надо так, а не иначе;
— Краткость: длинные слова меняют на короткие, отглагольные существительные на глаголы, очищают текст от метафор, эвфемизмов, речевых штампов и вводных слов («наверное», «безусловно»);
— Пишут не в чём ошибка, а как должно быть: «Заполните поле», «Допустимы русские буквы и цифры»;
— Если действия необратимы, пишут, что произойдёт при нажатии на кнопку;
— Сложные юридические, технические и внутренние термины заменяют на понятные пользователю. Потенциально незнакомые аббревиатуры расшифровывают при первом упоминании;
— Ссылки ставят на слова, которые объясняют, куда ссылка приведёт. Например: «Подтверждённую биометрию регистрируют в центрах обслуживания»;
— Находящийся перед глазами текст должен быть понятен без контекста и ранее пройденного пути;
— Текст в кнопках однообразен, чтобы не путать: «Верно» (подтверждение данных), «Закрыть» (закрытие справочных попапов), «Продолжить» (переход к следующему экрану), «На главную»;
— Заголовок должен быть максимально информативен, так как часто пользователь внимательно читает только его. Заголовок должен быть связан по смыслу с кнопкой;
— В первую очередь пишут для большинства. Нет смысла погружать всех в нюансы, которые важны для небольшой категории людей или в нестандартных ситуациях;
— Поэтому можно не искать гендерно независимые формулировки, если услуга рассчитана в основном на женщин или мужчин;
— Фигма-плагин Text Prettier автоматически проставляет неразрывные пробелы, меняет «е» на «ё», "кавычки" на «ёлочки», дефис на тире и наоборот.

#writing

Андрей Богданов написал книгу «Дизайн-стройка. Как создать команду мечты за 90 дней», и вот что там было о ревью макетов лидом и другими дизайнерами:

— Созваниваться с дизайнером и вместе пробегаться по макетам оказалось плохой идеей;
— Если макеты оформлены плохо, дизайнер может их пояснить, но всем остальным придётся иметь дело с непонятным артефактом;
— Непроработанные ветки сценариев, корнер-кейсы, используемые компоненты во время беседы выпадают из фокуса внимания;
— Из-за невозможности как следует подумать рекомендации иногда получаются необдуманными;
— В некоторых компаниях встречается кросс-ревью (дизайн-чек в Альфа-Банке), когда макеты смотрит не лид, а другие дизайнеры (в том числе из других команд);
— Эта практика позволяет разгрузить лида и прокачать навыки ревью у дизайнеров;
— Но она не должна замещать ревью дизайн-лида, так как последний отвечает за качество дизайна в своей команде. Без ревью он теряет связь с продуктом и выпадает из контекста;
— Если будете внедрять кросс-ревью, подумайте, как обеспечить ответственный подход ситуативных ревьюеров и разумный контроль со стороны лида.

#design_check #management

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

— В списке товаров пользователь получает первую информацию о них. Фильтр, сортировка, теги с популярными запросами клиентов, доп. информация при наведении курсора помогают быстрее находить нужное, не перемещаясь на страницу товара;
— Карточка товара — компромисс между желанием показать больше параметров товара (разным людям важно разное при выборе) и уместить больше товаров на странице;
— В ней всегда должны быть универсальные характеристики товара: изображение (несколько переключающихся изображений), название (и тип), цена (и перечёркнутая старая, размер скидки), вариации товара (цвета, размеры, материалы);
— Изображения подбирайте с учётом специфики. Иногда надо показать товар в интерьере, разъёмы крупным планом, содержимое матраса в разрезе;
— В смешанных списках надо отображать тип товара. Название «Тинейджер» не говорит о том, что продаётся комплект детского постельного белья;
— Если товар продаётся упаковкой, для удобства сравнения показывайте также цену за штуку, за килограмм;
— Индивидуальные характеристики: рейтинг, совместимость с другими товарами («подходит для ноутбуков 15,6 дюйма»), размеры, рекомендации (на какой возраст ребёнка рассчитано), особые характеристики (для специфичных товаров), артикул;
— Рейтинг без количества оценок пользователи считают бесполезным. Он полезен в нишах, где сложно совладать с многообразием выбора (электроника, бытовая техника);
— Артикул полезен в нишах, где ищут конкретные модели;
— Где возможно, чтобы не перегружать карточки, заменяйте текст на понятные иконки, не пишите названия характеристик. В карточке бутылки вина понятно, что «0,7 л» — объём бутылки;
— Функция быстрого просмотра — зачастую лишь костыль для магазинов с плохой реализацией списка товаров. Надо кликнуть, дождаться загрузки модального окна. Иногда его принимают за страницу товара (и не находят там нужных параметров);
— Выделяйте в списке просмотренные товары (удобнее продолжить поиск при возвращении к списку товаров) и добавленные в корзину (чтобы найти совместимые товары, не покидая список).

#list

Анна Труфанова поделилась рекомендациями по дизайну интерфейсов для цеха.

— Тёмная тема — стандарт безопасности, так как не слепит оператора;
— Начертания Light и Regular на цеховых мониторах рассыпаются. Только Medium и Bold;
— Для цифр используйте моноширинный шрифт;
— Интерфейс в цеху — набор датчиков. Оператор должен считывать их за доли секунды, видеть критические показатели периферическим зрением. Для этого контраст делайте не 4,5:1, а 10:1 (ГОСТ Р ИСО 9241-303);
— Чтобы не перегружать пользователя и не приучать его игнорировать сигналы, интерфейс не должен начинать мигать красным при малейшем отклонении параметров. Не все отклонения одинаково критичны (ANSI/ISA-18.2);
— Дублируйте цветовое кодирование формой (ISO 9241), так как у 8% мужчин встречается дальтонизм. Красный треугольник — критическая авария, немедленная остановка. Жёлтый ромб — предупреждение, требуется внимание;
— Важна мышечная память. Не меняйте положения кнопок, особенно если их нажимают в аварийных ситуациях;
— Улучшайте эффективность через сокращение шагов: сохраните кнопку в привычном месте, но превратите 3 клика в 1;
— Всё для оперативного управления размещайте на расстоянии клика;
— Если датчик показывает проблему, интерфейс должен сам подтянуть кнопку действия в зону видимости;
— Располагайте ключевые индикаторы так, чтобы они попадали в естественную траекторию взгляда, а не в слепые зоны экрана.

#industrial

Александр Овчаренко написал о проектировании физических панелей управления.

— Смотреть на чужие решения на картинках недостаточно, надо взаимодействовать с ними. Трогайте устройства предыдущих поколений, синтезаторы и MIDI-контроллеры в музыкальных магазинах, панели в автомобилях и яхтах. Требуйте от начальства оплаты посещения выставок;
— У каждого элемента есть невидимая часть, находящаяся под поверхностью панели, со своими габаритами и идущими к ней проводами. Это влияет на их расположение;
— Место под поверхностью панели занимает печатная плата, сама панель может крепиться разными способами. Из-за этого могут появиться места, где нельзя размещать контроллеры;
— Габариты часто зависят от внешних факторов. Например, от размера предыдущей версии панели, чтобы можно было одну заменить на другую;
— Компоновка согласно эргономическим и пользовательским требованиям → Совместно с инженерами приближенная к реальности версия;
— Делайте физические прототипы из картона и бумаги или с помощью 3D-принтера, чтобы получить объёмность макета в реальном размере;
— Для оценки выбора положения и размера поворотных ручек подходят любые крышки (от газировки, зубной пасты). Они сделаны так, чтобы было удобно крутить, что лучше любых абстрактных цилиндров;
— Подойдут ручки и колпачки с другого оборудования. Главное, не приклеивать намертво;
— Если панель предполагает наличие типовой клавиатуры или трекбола, в картонной основе можно сделать вырез для них и вставить заподлицо;
— Цена ошибки высока: панель даже из типовых компонентов часто дороже сенсорного экрана с HMI;
— Внимательнее относитесь к крайним случаям использования панели, так как элементы управления статичны;
— Настаивайте на участии в предпроизводственных этапах. Инженеры могут что-то не так понять или отойти от вводных из-за объективных причин (запланированные энкодеры оказались недоступны).

#industrial

Егор Краснопёров и Ира Моторина обсудили поиск работы со стороны нанимающего менеджера.

— Портфолио делайте понятным и доступным, без длинного текста (на него нет времени). Не в виде файла или ссылки на Гугл Диск;
— Покажите в нём, что умеете доносить ценность. К дизайнеру, который этого не умеет, возникают вопросы;
— Для дизайнерского портфолио важен внешний вид: аккуратность, визуальная привлекательность;
— В резюме пишите и что делали (зоны ответственности) и что сделали (результаты). Не пишите только первое по 15 пунктов для каждой работы;
— Пишите сопроводительные письма, если их принимают там, где откликаетесь: чем интересна компания и вакансия, с какими задачами поможете, исходя из болей в описании вакансии;
— Если в текст можно подставить название любой компании без потери смысла, это плохое, шаблонно письмо. Это видно;
— Пишите не слишком формально и не панибратски. Попробуйте найти блог дизайн-команды и посмотреть, как они сами говорят (заодно узнаете больше о культуре компании);
— Коммуникация — хардовый скил. Перестрахуйтесь: проверьте наушники с микрофоном и интернет (имейте резервный канал). Если опаздываете, предупреждайте хотя бы за 5 минут;
— На созвоне с HR (шаг после отсмотра резюме и портфолио) оценивают и мотивацию. Если не подготовиться, может сложиться впечатление, что эта вакансия вам не особо интересна;
— На техническое интервью и обсуждение кейсов (после встречи с HR) приходят несколько специалистов с нанимающим менеджером для объёмной оценки (вдруг кто-то один слишком очаруется кандидатом);
— Готовьте презентации и тренируйтесь рассказывать. О себе: быстро и ёмко, чтобы хотелось нанять. О кейсах: в рамках выстроенной истории, без мельтешения в Фигме, по схеме STAR (Situation, Target, Action, Results);
— Можно потренироваться в специальных сервисах. Преимущество AI-сервисов: они сразу дают обратную связь;
— Отсутствие вопросов показывает невовлечённость, отсутствие интереса к конкретной компании и вакансии. Даже шаблонные вопросы подойдут;
— В ответ вы лучше узнаете компанию. Может, там хаос в процессах и вам это неприемлемо (и изменить это нельзя). Лучше узнать это на интервью. Ключевая причина расставания сразу после найма — несовпадение ожиданий;
— Оффер — не конец, его можно обсуждать. Если зарплата меньше, чем хотели, узнайте, что может покрыть разницу: бонусы, индексация;
— Шаблон с подсказками и задачами для онбординга также помогает новичку синхронизироваться с командой и стейкхолдерами. Ещё лид может проводить 1-на-1 каждую неделю и транслировать обратную связь;
— В нормальной компании все заинтересованы, чтобы новичок прошёл испытательный срок. Особенно нанимающий менеджер;
— На время онбординга могут назначить бадди (более опытного коллегу или чуть выше грейдом). Он разгружает менеджера, с ним можно обсудить то, что неловко спрашивать у руководителя;
— Лидам непросто искать работу. Рассказывайте о своём опыте, делитесь наработками с сообществом, менторьте, чтобы стать привлекательнее для компаний. Хорошо, если можете сами контрибьютить, а не только настраивать процессы;
— Иногда лиды откликаются на вакансии на 1–2 грейда меньше, но с возможностью получить международный опыт;
— Если компания отказывает человеку с опытом лида, чтобы он не норовил заняться не своим делом (найти боль и думать, как её исправить), то может и незачем туда идти;
— Чтобы расти в компании, делитесь результатами. В компании не видят всего, что происходит. Так вы прорекламируете команду и завоюете доверие стейкхолдеров;
— Берите задачи лидов, до которых не доходят руки (может, где-то процессы наладить). Вы поможете компании и покажете, что у вас горят глаза. Через полгода-год после начала работы дизайнеры обычно входят в колею.

#career #job_interview

Светлана Диденко написала о требованиях российских законов к интерфейсам российских веб-сервисов.

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

#laws

Дмитрий Ваницкий поделился основными уроками из книги Криса Восса о переговорах «Договориться не проблема».

— Стремление к компромиссу часто приводит к плохим результатам. Зачем выбирать среднее решение, которое не даст многого пользователям, но может быть быстро разработано?
— Надо выяснять, почему разработчики предлагают компромисс. Может быть, причина не в техническом ограничении, а в страхе сорвать сроки, непонимании, как сделать, или просто лени;
— Развивайте тактическую эмпатию — способность понять чувства и мотивы оппонента не для того, чтобы испытать к нему симпатию и согласиться с ним, а чтобы понять, как повлиять на его решение;
— Легко установить контакт с помощью отзеркаливания: повторяйте последние 1–3 слова собеседника. Так вы покажете, что внимательно слушаете, и создадите ощущение раппорта, а собеседник может захотеть раскрыть мысль и дать больше информации;
— Называйте эмоции своими именами, чтобы разрядить обстановку и показать эмпатию. Негативную эмоцию это ослабит («Похоже, вы обеспокоены тем, что…»), а позитивную — усилит;
— Перечислите претензии респондента к вам. Это его обезоружит и покажет вашу адекватность: «Вы считаете, я затянул сроки, просиживал штаны, ничего не делал, а теперь буду просить больше денег…»;
— В начале переговоров можно выдвинуть непомерные требования, с которыми оппонент не согласится. Когда он увидит спокойную реакцию на отказ и готовность продолжать диалог, он почувствует себя в безопасности;
— Используйте открытые вопросы. «Как?» и «Что?» в переговорах работают лучше нашего любимого «Почему?», так как оппонент может не знать, почему, и начать придумывать. А ещё такой вопрос может звучать как обвинение;
— Торгуйтесь эффективно: определите целевую сумму, сначала предложите 65% от неё, уступайте с уменьшающимся шагом (85%, 95%, 100%), итоговая сумма должна быть некруглой, чтобы было видно, что это предел. Добавьте неденежный бонус, чтобы показать, что вы выжали всё возможное.

#negotiation

Игорь написал об адаптации интерфейса android-приложения под увеличенный системный шрифт.

— Кроме размера системного шрифта на размер текста также влияет масштабирование экрана;
— Можно увеличить Display size и тогда, например, квадрат со стороной 48 dp будет отрисовываться не 132 физическими пикселями, а 144 (и станет больше);
— Комбинирование настроек может сделать важную информацию недоступной или ухудшить впечатление от интерфейса. В продукте Игоря 45% пользователей увеличивают текст;
— Текст можно обрезать: в начале, середине или конце. Скрытая часть заменяется многоточием;
— Можно сократить: заменить 99 000 000 на 99 млн. Но это не вариант там, где важна точность;
— Бегущая строка считается антипаттерном и применяется редко, если остальные способы не подходят;
— Перенос строк — через атрибут android:breakStrategy можно указать способ разбивки текста. Важно убедиться, что контейнер с текстом подстраивается под высоту контента;
— Авторазмер текста — текст меняет размер в зависимости от доступного пространства. Можно задать минимальное и максимальное значение, а также шаг изменения;
— Также можно добавить прокрутку внутри контейнера или вовсе использовать динамическую вёрстку, когда расположение элементов зависит от отображаемой информации;
— Приложение может вовсе запрещать увеличивать текст (это, конечно, ухудшает пользовательский опыт), либо делать это в собственных настройках (Телеграм);
— Это менее удобно пользователям и идёт вразрез с рекомендациями Material Design, но даёт разработчикам больше контроля и обеспечивает единообразие на разных устройствах.

#font #accessibility

Дмитрий Сергушкин написал об окнах подтверждения действий.

— Такое окно прерывает сценарий, чтобы пользователь дополнительно подумал о совершаемом действии и избежал ошибки;
— Это полезно, если действие необратимо, ведёт к серьёзным последствиям (финансовые транзакции) или эффекту домино (влияет на множество связанных объектов), совершается редко (и пользователь не помнит всех последствий) или требует явного согласия;
— В остальных случаях, а также для частых действий его лучше не использовать, чтобы пользователь не стал подтверждать всё на автомате;
— Если возможно, лучше сделать действие обратимым и сразу показывать результат его выполнения, чтобы пользователь мог отреагировать;
— Также можно уменьшить потребность в окнах подтверждения, отделяя серьёзные действия от остальных и разделяя их запуск на несколько шагов;
— В заголовке пишите, что пользователь собирается сделать: «Удалить ваш аккаунт навсегда?»;
— На кнопках — конкретные действия: «Удалить аккаунт», «Оставить аккаунт»;
— Добавьте визуальные подсказки вроде иконки корзины или красного цвета кнопки, подтверждающей деструктивное действие;
— Для критически важных действий можно добавить препятствие вроде поля, в которое надо, например, ввести название удаляемого пространства или слово «Delete»;
— Есть приём «Hold to confirm», когда для подтверждения действия надо нажать на кнопку и удерживать её нажатой;
— Можно показывать окна подтверждения только при обнаружении аномалий вроде необычной суммы транзакции или получателя.

In English. #modal

2/2

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

#process

Мы с Дмитрием Ваницким поговорили о творчестве и дизайне, и креативности в жизни продуктового дизайнера. В UX Notes был анонс трансляции, теперь можно прочитать отредактированный транскрипт и посмотреть запись. А вот основные тезисы:

— Дизайн, как и другая работа в IT, хорошо оплачивается и достаточно интересен, но для входа требует знаний и навыков. Барьер для джунов сейчас довольно высок, учитывая AI и текущий рынок труда;
— Новички часто ошибочно считают, что дизайнер — креативный гений, занимающийся творчеством и самовыражением, когда вздумается, несколько часов в день;
— Поработав в реальных проектах, понимаешь, что это не так. Бывает, что в проектах самовыражается заказчик;
— Работать 4 часа в день реально — всё остальное время митинги (есть доля шутки). Считается, что дизайнер продуктивен до 6 часов в день — студии закладывают столько в сметы;
— Творчество — создание чего‑то нового, чего не было раньше. Чувственного самовыражения и конкретной задачи в нём может и не быть. И дизайн, и перестановка мебели — творчество;
— В психологии выделяют «самодеятельность», когда человек творит, но только в рамках своего мира. То есть делает перестановку, но не делится своими методами и никак не влияет на домен перестановок;
— Дизайн решает задачу и обычно это процесс проектирования, создания чертежа, по которому впоследствии уже и появится конечный объект;
— Стремление к созданию и любопытство заложены в нас природой и развиты эволюционно. Не страшно, если кого-то в этом ведут низменные мотивы (получение лайков);
— У разных дизайнеров и у разных специализаций свой творческий диапазон. Минимальный уровень свободы — оператор Фигмы;
— При этом нормально, когда 70% времени занимает рутина. А ещё новым может быть не получившийся артефакт, а процесс, благодаря которому он появился;
— Дизайн-процесс (вроде Стэнфордской 5-ступенчатой модели) не сильно отличается от творческого процесса, как его описывает, например, музыкальный продюсер Рик Рубин;
— Описание — лишь тень идеи. Чтобы по‑настоящему оценить, насколько идея хороша, её надо воплотить, насколько это возможно (Рик Рубин). В дизайн-процессе это этап прототипирования;

1/2

2/2

— Делать карьеру — это компетенция. Люди, у которых она есть, иногда не очень-то умеют работать. Надо прокачивать и то, и то;
— При поиске сотрудника есть понимание, какие задачи он будет закрывать и какие компетенции для этого нужны. Неважно, что ещё он умеет;
— Но так нанимают не все: задают шаблонные вопросы по фреймворкам. Если это так, попробуйте сами задать вопросы, чтобы выяснить, какие конкретно задачи перед вами стоят;
— Опыт больше 10 лет почему-то для многих работодателей — красный флаг. Приходится скручивать опыт. Если был лидом и готов работать руками — убирать опыт лида из резюме. Оставляйте опыт, максимально релевантный вакансии. Говорите, что остальное — не релевантно;
— У синьора 2 пути: управление и повышение экспертизы. Кому-то может быть некомфортно не работать руками: не видишь результата своей работы, мозг не получает подкрепления;
— Должность дизайн-директора — клеймо, когда готов работать руками. Будущие руководители могут опасаться, что такой соискатель будет метить на их место, иметь своё мнение, будет сложнее заработать авторитет в его глазах;
— Есть и эйджизм. Из-за культа достигаторства есть представление, что к 25 годам люди должны становиться невероятными специалистами, а обычный специалист в 40 выглядит неудачником;
— Играя по этим правилам, кроме скрутки опыта, можно попробовать продать себя как более компетентного специалиста: провести разведку, узнать больше о компании и понять, как это сделать;
— Есть надежда, что со временем рынок станет более зрелым по среднему возрасту кандидатов;
— В условиях кризиса, если у компании есть возможность нанимать дешевле, она будет так делать. За 5 лет на 20% выросли зарплаты, а инфляция выросла больше;
— Чтобы найти работу, в компании должна быть капасити, потребность в дизайнерах. Надо выяснить, какие именно задачи должны быть решены, и показать свой опыт в решении конкретно таких задач. Конкуренцию выиграют компании, которые будут нанимать таким образом.

#career

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

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

1/2

Артемий Талалуев написал о повышении эффективности работы продуктовых дизайнеров.

— Когда обратить внимание на эффективность дизайнера?
— Тот использует устаревшие подходы и инструменты;
— Демонстрирует низкую дисциплину и самоорганизацию: опоздания, несоблюдение дедлайнов, отсутствие планов на день, неделю или месяц, хаос в макетах;
— С трудом объясняет решения и коммуницирует с командой;
— Нет инициативы: не предлагает улучшений, слабо участвует в обсуждениях, перекладывает задачи на других;
— После проверки лидом его макеты постоянно требуют доработки, часть комментариев теряется, решения не соответствуют требованиям или предоставляются не полностью, не продуманы пограничные случаи;
— 2–3 месяца работы дизайнера не привели к заметному улучшению метрик или UX-показателей. Значит, он не стремится решать пользовательские проблемы, выжидает, берёт минорные задачи;
— Лид должен фиксировать примеры перечисленного. Когда станет ясно, что это не разовые ошибки, следует встретиться с дизайнером;
— На встрече: обозначьте зону ответственности и ожидания от работы, KPI или OKR, критерии качества работы и покажите, где дизайнер не соответствует;
— Можно запустить Performance Improvement Plan (PIP): зафиксировать проблемы и измеримые критерии их исправления, дать от 2 до 6 недель на это;
— Например, критерий при проблемах с инициативой: «Дизайнер каждый месяц предлагает не менее 4 идей по улучшению продукта»;
— Не оставляйте дизайнера один на один с проблемами. Компания и лид могут помочь, например, предоставить доступы к курсам;
— Неисправление проблем в рамках PIP может быть поводом для увольнения в соответствии с Трудовым кодексом РФ. Для этого по каждому нарушению запрашивайте у дизайнера письменное объяснение;
— PIP можно использовать для развития, а не только как антикризисный инструмент.

#management

В Markswebb написали, как интернет-магазины снижают количество возвратов.

— 4 из 5 причин возврата связаны с неправильным выбором товара. В 2024 году в мире возвращали каждый 6-й товар;
— В России в категории одежды и обуви (критичны размер и посадка) возвращают 30–45% заказов на маркетплейсах и 15–25% на сайтах брендов;
— В категории мебели и товаров для дома (важны габариты и стиль) — высокие средние чеки и дорогая транспортировка возвратов, поэтому их минимизация тоже актуальна;
— Lamoda показывает замеры, когда пользователь выбирает размер в карточке товара. Например, M/46 — обхват груди 92 см, талии 72 см, рост 170 см;
— ASOS автоматически выбирает размеры для пользователей, которые указали в профиле рост, вес и предпочтения по посадке для верхней и нижней части тела;
— Walmart предлагает примерить вещь на виртуальной модели с похожим телосложением. В Zalando для этого из 2 фото можно создать свой 3D-аватар;
— IKEA не только даёт посмотреть на мебель в своей комнате в AR, но может удалить из помещения текущую мебель;
— Обобщение информации из отзывов с помощью ИИ позволяет быстро узнать важные детали, плюсы и минусы (BestBuy);
— В Amazon есть поиск по отзывам — можно проверить характеристики, которые важны пользователю для выбора;
— ASOS ещё и визуализирует на диаграммах клиентские оценки, насколько вещь соответствует размеру, комфортна и качественна;
— В Wildberries можно просматривать только отзывы с фото или с видео, чтобы можно было быстро оценить, как товар выглядит в реальности;
— В маркетплейсе возврат по причине «Нашёл дешевле» можно снизить, показав в карточке товара, что есть варианты дешевле от других продавцов.

#retail #product_page

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

— Такие продукты прилагаются к рабочему месту, и пользователи не могут от них отказаться, даже если продукт неудобен;
— От них может зависеть безопасность производства, персонала и окружающей среды, и было бы здорово, чтобы интерфейс сам по себе не добавлял проблем;
— Nielsen Norman Group предложили оценивать удобство таких продуктов с помощью фреймворка CASTLE;
— Cognitive load — сколько когнитивных усилий надо для выполнения задачи. Метрики: NASA Task Load Index, количество обращений в службу поддержки;
— Advanced feature usage — насколько активно люди используют продвинутые функции;
— Satisfaction — помогает ли продукт решать рабочие задачи. Метрики: System Usability Scale, Single Ease Question (сразу после выполнения задачи спрашиваем, насколько легко было её выполнить), Customer Effort Score (похоже на SEQ, но спрашиваем, как много усилий пришлось приложить);
— Task efficiency — как быстро и успешно пользователи справляются со своими рабочими обязанностями с помощью продукта. Метрики эффективности: Time on Task (время выполнения задачи), Task Success Rate (процент успешного выполнения задач), Number of Steps to Complete a Task (количество действий для выполнения задачи);
— Learnability — насколько легко новые пользователи осваивают продукт;
— Errors — частота и критичность совершаемых ошибок, и насколько пользователю легко исправить свою ошибку;
— Для сбора данных можно логировать ключевые действия в системе, а также интервьюировать пользователей и наблюдать за ними в естественной среде;
— Полезно отслеживать частоту использования обходных путей и дополнительных инструментов: держат ли пользователи калькулятор, выгружают ли данные, чтобы обработать в Excel?
— Ценность улучшений для бизнеса: увеличение скорости обучения новых сотрудников и производительности, уменьшение количества ошибок и связанных с ними потерь и текучки.

#metrics #industrial

Илья Безделев написал об одно- и двусторонних дверях при принятии продуктовых решений.

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

#prioritization

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

— Например, кто-то называет переключатель тогглом (toggle), а кто-то свитчем (switch). Нижнюю панель навигации в мобильных приложениях Material Design называет Nav bar (Navigation bar), а Human Interface Guidelines — Tab bar;
— Аккордеон отличается от коллапса (позволяет свернуть и развернуть часть контента) тем, что состоит сразу из нескольких блоков, которые можно разворачивать и сворачивать. Аккордеон часто используют для FAQ (часто задаваемых вопросов), а коллапс — для блока «Показать ещё»;
— Пагинация (pagination) позволяет перемещаться между разделённым на порции (страницы) контентом. Классический вид — перечень номеров страниц, но также есть вариант с кнопкой «Загрузить ещё» (нажатие приводит к загрузке следующей порции) и бесконечным скролом (следующая порция загружается автоматически при прокрутке страницы);
— Кроме бургерного меню есть ещё кебаб (3 вертикальные точки), фрикадельки (3 горизонтальные точки) и бенто (2×2 или 3×3 точек или квадратов). Кебаб (чаще в Android) и фрикадельки (iOS) обычно открывают меню с дополнительными действиями или настройками. Бенто — меню приложений или сервисов;
— Табы — элемент навигации, позволяющий переключаться между контентом, находясь на одной странице, не используются для ввода пользовательских данных;
— Выпадающий список (dropdown) — это панель, которая отображается после нажатия на селект, мультиселект или кнопку и включает список вариантов для выбора;
— Textarea правильно произносится «текстэреа»;
— В поле для ввода пароля текст по умолчанию скрыт и отображается иконка открытого глаза, нажатие на которую позволяет увидеть введённый текст;
— Если операция длится больше 3–5 секунд, вместо лоадера (показывает, что система выполняет какую-то операцию) лучше отображать прогресс-бар (показывает, насколько продвинулось выполнение какой-либо операции);
— Тост (toast notification) в отличие от уведомления (notification) должен исчезнуть спустя 3–5 секунд, поэтому в нём мало текста и нет кнопок для дополнительных действий.

Илья Безделев написал, что делать с дизайн-долгом (papercuts).

— Дизайн-долг — места в интерфейсе, где что-то получилось криво по незнанию или неумению или где срезали углы, чтобы сделать быстрее;
— По отдельности проблемы вроде лишнего шага или немного кривой валидации формы не смертельны, как порез бумагой;
— Но если нанести слишком много порезов, может случиться «death by a thousand papercuts» — продукт перестанет приносить пользователям радость;
— В каждом цикле планирования выделяйте время на исправление мелких недочётов;
— Их можно закидывать в планы с низким приоритетом как бонусные задачи. Сделал большое дело, можно заняться мелочью;
— В командах с полноценными онколл-ротациями у разработчиков может быть свободное время онколла, когда не надо тушить пожары. Они могут заниматься papercuts;
— Хакатон-фиксатон — на неделю отложить работу над фичами и заняться фиксом дизайн-долга.

#design_debt

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

— Перед релизом новой версии вы могли переживать, что пользователи её не примут, и негативные отзывы (даже если их несколько) подтвердят ваши сомнения;
— Чтобы уменьшить эффект подтверждения, когда мы принимаем только аргументы, подтверждающие нашу исходную позицию, перед чтением отзывов изучите объективные данные (например, продуктовые метрики);
— Можно привлечь независимого аналитика или автоматически кластеризовать отзывы по темам (BERTopic, GPT-based summarization), чтобы оценить тренды без влияния предположений команды;
— Чтобы уменьшить негативное искажение, делите отзывы на позитивные, негативные и нейтральные и смотрите на их баланс. Тональность отзывов помогают определять RoBERTa и BERT-based модели;
— Смотрите на частоту проблем: сколько пользователей пишет об одном и том же;
— Но учтите, так сложнее заметить отдельные отзывы, которые сами по себе могут стать проблемой. Например, негативные публикации инфлюенсеров;
— Стоит отделять отзывы о временных негативных или позитивных событиях. Если сервер лежал несколько часов, будет много негатива, но это проблема не продукта, а инфраструктуры;
— Один яркий запоминающийся кейс из саппорта может создать впечатление, что это значимая проблема (эвристика доступности);
— Систематизируйте отзывы по сценариям, чтобы не принимать редкие проблемы за типичные. С этим помогает LDA, BERTopic и GPT-топики. Полезно иметь базу типовых пользовательских сценариев, чтобы ссылаться на них и лучше понимать контекст отзыва;
— Чтобы снизить эффект авторитета, не указывайте статус автора;
— Но иногда полезно наоборот сегментировать отзывы по авторам: эксперты, инфлюенсеры, новички, обычные пользователи. При развитии продуктов для узких сегментов отзывы экспертов критически важны;
— Тон отзыва влияет на интерпретацию. Учитесь не вестись на манипулятивный, эмоциональный, экспертно-уверенный стиль высказываний.

#feedback

Энтони Ценг написал о форме ввода данных банковской карты.

— До того, как пользователь откроет эту форму, покажите логотипы платёжных систем, карты которых принимаются;
— После ввода первых цифр номера карты отобразите логотип платёжной системы, чтобы показать, что пользователь вводит правильный номер;
— Группируйте вводимые цифры так же, как они отображаются на карте, чтобы легче было их сверять;
— Для ввода срока действия карты не используйте выпадающие списки, не давайте вводить номер месяца одной цифрой, а год четырьмя. Используйте маску MM/YY;
— Подпись для поля «Name on card (Имя на карте)» понятнее, чем «Cardholder name (Имя держателя карты)»;
— Подпись «Security code (Код безопасности)» для цифр с обратной стороны карты понятнее, чем аббревиатуры вроде CVV или CVC (встречаются и другие варианты);
— Порядок полей: Номер карты, Срок действия, Код безопасности, Имя на карте;
— Поля «Срок действия» и «Код безопасности» можно сделать уже, чтобы подчеркнуть, что в них можно ввести меньше символов;
— Валидируйте поле для ввода номера карты после того, как пользователь закончил ввод, чтобы не пугать его раньше времени;
— Отображайте сообщения об ошибках под соответствующими полями, чтобы была чёткая взаимосвязь;
— Кнопка в такой форме не всегда приводит к платежу. Пишите в кнопке, что произойдёт при нажатии. Например: «Continue to review order».

#form #payment

Александр Букин написал, как упростить поиск актуальных макетов и ответственных за них в большом продукте.

— Иногда работа дизайнера связана с экранами, за которые отвечает другая команда. К кому обратиться за актуальными макетами?
— Создали схему структуры департамента дизайна и исследований (меняется реже структуры продуктовых команд);
— Для каждого дизайнера показаны главные экраны фич, за которые он отвечает (для визуального ориентира), добавлены ссылки на макеты и даты скринов;
— Иногда дизайнеры переходят между командами, и тогда на схеме можно найти их лидов или руководителей направления, чтобы уточнить авторство и актуальность макетов;
— Если за экран отвечает несколько команд, на нём выделяют зоны ответственности разных дизайнеров;
— С ростом карты добавили оглавление со списком ссылок на самые популярные экраны: главный, каталог, корзина, чекаут и несколько других;
— Когда кто-то из дизайнеров переходит из команды в команду или меняет зону ответственности, лид сообщает оунеру карты, который правит схему. (Лид может и сам внести правки.)

#management

Оля Ходаковская написала об измерении успешности дизайна с помощью UX-бенчмаркинга.

— Иногда метрики вроде количества зарабатываемых денег не подходят. В B2B успехи сильно зависят от отдела продаж (выиграли тендер, привели хороших лидов). Да и продукты могут быть бесплатными;
— Ключевые метрики юзабилити: результативность (effectiveness), эффективность (efficiency), удовлетворённость (satisfaction);
— В технически сложных продуктах эффективность или time on task (время выполнения задачи) падает при добавлении новых фич. Они увеличивают путь пользователя (например, время конфигурации сервера), но привлекают клиентов;
— Результативность — task completion rate, насколько успешно пользователи справляются с задачей. Обычно задачи состоят из 2–5 шагов, на микрозадачи нет смысла смотреть из-за высокой конверсии;
— UX-бенчмаркинг — сравнительное количественное исследование. Можно сравнивать показатели продукта в этом и прошлом периоде (или до и после редизайна), разных продуктов компании, конкурирующих продуктов (сложно и дорого);
— Проводя его регулярно, надо выбрать период, который будет учитывать сезонные колебания и длину цикла разработки (чтобы успевали накопиться изменения в продукте);
— Показатели у разных задач могут отличаться. Базовые уровни в Селектеле: 48% для ключевых сервисов, 33% для базовых вспомогательных, 20% для сложных и тех, которые нужны только определённым сегментам клиентов;
— Для сбора данных используют self-hosted PostHog. UX-дизайнеры проектируют все события и единообразно по шаблону их называют: Источник события_Продуктовое направление_Продукт или фича_Объект и действие с ним;
— При сборе данных надо фильтровать внутренних и тестовых пользователей, учитывать только уникальных пользователей (2 раза прошёл сценарий = 1 справившийся с задачей пользователь);
— Также надо подобрать окно конверсии. Например, человек мог 2 недели заходить в форму и уходить подумать, что-то согласовать с коллегами, но в итоге выполнить задачу. Это тоже будет посчитано как 1 успешное прохождение сценария;
— Сравнивать показатели можно с первым замером, известными значениями у аналогичных продуктов, целевым значением, выбранным как OKR, например, которого хочется достичь после релиза нового дизайна;
— Зная значение метрики, можно на неё влиять, внося изменения в продукт и его интерфейс. Можно количественно оценивать эффективность своих решений;
— Промо метрики: ежеквартальные встречи для обсуждения итогов очередного бенча и шагов по оптимизации метрики, публикация итогов в корпоративном канале, рассказ о процессе и подключение к нему новых продуктов и сценариев, ссылки на метрику при обсуждении со стейкхолдерами.

#metrics

Андрей Шапиро написал о вопросах, направляющих проектирование.

— Вопрос — коммуникационный инструмент направленного размышления;
— В проектировании чаще всего имеют дело с вопросами исследовательскими (определение области, которую надо изучить подробнее) и проблематизирующими (постановка задачи);
— В начале проекта, когда идёт снятие задачи, проектировщики иногда не понимают, куда двигаться дальше;
— Чтобы задать качественные вопросы, надо начать исследование и минимально погрузиться в предметную область;
— Основа мышления — создание в голове схем, отражающих модели реальности. Обнаружив отсутствие важных деталей или нарушение логики в построении схем, мы можем это исправить;
— Вопросы позволяют подсветить себе или проектной группе эти проблемные места. Белое пятно — полное отсутствие понимания (по аналогии с картами до великих географических открытий). Серая зона — место, где понимание туманно, и мы это знаем;
— Есть практики ненаправленного интуитивного творческого поиска (вроде поиска образа в каракулях), но в проектировании нужны более надёжные направляющие;
— Ими могут быть следующие артефакты, уточняющие устройство человеческой деятельности: структура потоков, процессы как цепочки последовательных действий и событий, типичные ситуации и способы принятия решений в них, структура внутреннего устройства объекта, структура взаимодействий объектов и так далее;
— Получив новую порцию знаний в диалоге с экспертами и представителями заказчика, проектировщик обновляет картину и подсвечивает вопросами новые моменты для уточнения;
— Беглость приходит с опытом. Не страшно, если новая пачка вопросов появляется между встречами;
— Шаблонные вопросы позволяют снизить неопределённость на старте. Всегда есть фаза предварительного анализа замысла, выяснения сути задачи, её границ и целей заказчика;
— Всегда важно, как будут построены отношения, каковы у сторон ожидания друг к другу, из чего будет строиться процесс, как будет достигаться результат;
— Примеры вопросов о бизнесе клиента: Как вы работаете? На чём зарабатываете? Где вы берёте клиентов? Какой канал продаж самый эффективный?
— Есть ещё вопросы, демонстрирующие проблемы, когда вы уже увидели проблему, а собеседник — нет;
— Большую часть времени проектировщик задаёт вопросы сам себе. Это проблематизирующие вопросы, в которых сформулирована задача. Например: «Как проверяющий узнает, что по портфелю заново запущена проверка?»;
— Шаблоны таких вопросов: Как сделать так, чтобы появился <отсутствующий пока желаемый эффект> или исчез <наблюдаемый нежелательный эффект>? Как или за счёт чего будет работать <отсутствующий пока механизм> с <таким-то результатом на выходе>? Что, где и как поменять в системе, чтобы удовлетворить <новому требованию>?

#analysis

Анастасия Зайцева написала об отличиях в поведении возрастных пользователей.

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

#old

Дмитрий Подлужный написал о проектировании интерфейсов интерактивных экранов.

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

#interactive_display

Павел Шерер написал о подходе к приоритизации PoDPR.

— Формула: (Pain ÷ Difficulty) × Probability × Reversibility;
— Боль — выраженность проблемы для пользователя или бизнеса. Сложность — стоимость реализации. Чем больше боль и меньше затраты на её устранение, тем лучше;
— Probability — насколько вероятно, что изменение даст целевой результат. Должно основываться не на вере, а на данных, экспериментах и обратной связи;
— Reversibility — насколько легко откатить решение при провале. Чем выше обратимость, тем смелее можно проверять гипотезы;
— Формула прямо наказывает дорогостоящие, слабообратимые и плохо подтверждённые затеи;
— В статье есть критика других способов приоритизации (MoSCoW, RICE, ICE, Kano Model, WSJF, Value vs Effort Matrix, User Story Mapping, Impact Mapping) и советы, как дополнить их с помощью PoDPR;
— PoDPR не задумывался как жёсткая формула, его сила в способности адаптироваться под контекст компании;
— Например, если важно считать охват новых фич, как в RICE, то Pain можно разложить на Severity (серьёзность проблемы) × Frequency (частота возникновения) × Reach (охват);
— Если критично время, можно добавить аналог Time Criticality из WSJF. PoDPR = (Pain ÷ Difficulty) × Probability × Reversibility × Urgency;
— Если важно учесть масштаб возможного ущерба — коэффициент Blast Radius;
— Если важно выбирать устойчивые и лёгкие в поддержке решения (для платформенных изменений) — коэффициент Sustainability;
— Добавляя коэффициенты, важно задокументировать, кто оценивает, какие источники данных используются, какие артефакты должны подтверждать оценки;
— Возможные значения коэффициентов фиксируются в шкалах с описанием и примерами, какое значение выбирать. Например, для оценки Urgency должны быть конкретные критерии: срок до дедлайна, сезонность, ограниченность окна возможностей;
— Изменения в шкалах допустимы не чаще, чем раз в квартал, чтобы не превращать формулу в инструмент для политических игр.

#prioritization

Виктория Филиппова написала о возрастной маркировке.

— Это отметки вроде 6+, 12+. Они указывают, с какого возраста рекомендуется просмотр контента, участие в мероприятии или использование предмета;
— В России, согласно федеральному закону 436-ФЗ, маркировка должна быть на афише, объявлении или билете и занимать не менее 5% их площади;
— Роскомнадзор и суды считают афишей любой публичный визуальный элемент, который информирует о событии и побуждает к просмотру, участию или покупке билета. То есть это и баннер, и карточка события на сайте;
— Отметка должна быть заметной, то есть её нельзя прятать внутри текстового описания мероприятия или размещать в углу страницы без видимой связи с событием;
— Если на странице мероприятия есть и его описание, и постер, для полного соответствия закону маркировка должна быть и в описании, и на постере (да, получается дублирование);
— В статье есть примеры маркировки на Яндекс Афише, Афише, МТС Live, Кинопоиске, Кассире, Киномониторе, а также на иностранных ресурсах;
— Брать пример с конкурентов не всегда хорошая идея, так как они могут закон не соблюдать, беря на себя риск;
— Не стоит делать маркировку настолько незаметной, насколько позволяет закон. Это полезная информация о мероприятии, которая должна быть доступна наравне с прочей информацией. Благодаря ней родители могут понять, что подходит их детям (особенно актуально для родителей малышей), и сделать правильный выбор.

#laws #entertainment

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

— В основном молодые специалисты сейчас — зумеры. Принято считать, что они не хотят работать. Проблема в том, что именно они (зачастую впервые в жизни) сталкиваются с сильно просевшим за последние годы управленческим дизайном;
— Они стремятся к гибкости (удалённый и гибридный формат, большая автономия, фриланс) и благополучию (снижение стресса, забота о себе, работа на себя, а не мерседес для акционера);
— Их лояльность работодателю не безусловна, а зависит от среды: отношения в команде, соблюдение личных границ, возможность развиваться, забота со стороны компании, ясность ожиданий;
— Универсалии труда — понятные цели, забота и развитие — важны всем независимо от возраста и системно провалены. Процессы надо адаптировать под контекст компании, а не просто брать «из мемов» (пример с адаптацией дизайн-ревью);
— Решение проблемы с онбордингом: список ролей в компании, шаблоны артефактов, чеклисты, чтобы понимать, как выглядит хороший результат, фидбек через 30, 60 и 90 дней испытательного срока;
— Метрики: Time-to-Value новичка, NPS онбординга, доля задач без эскалаций до руководителя за 30, 60, 90 дней;
— Ритуалы, которые не улучшают координацию или качество решений, надо отменять или проводить асинхронно (как повысить эффективность встреч). Иначе они превращаются в прокси-контроль, вызывают усталость и недоверие процессам;
— Метрики: доля снятых блокеров за спринт, удовлетворённость митингами, MTTR по инцидентам;
— Возврат в офисы снижает гибкость, повышает стресс. Решение: решать в офисе сложные синхронные задачи, проводить плановые парные ревью, живые разборы и сессии наставничества, когда присутствие = рост;
— Конструируйте гибрид: автономия в обмен на прозрачные требования к результатам и времени реакции в каналах связи;
— Если работодатель делегирует результат вместо задач, важна ясность ожиданий и доступность ресурсов. Тогда будет расти ответственность и скорость. Если этого нет, появляется микроменеджмент и выгорание;
— Для повышения ясности опишите дерево ценности: бизнес-метрика → результат работы команды → задачи и критерии их хорошего выполнения;
— Нормируйте нагрузку и убирайте скрытую работу, на 1:1 спрашивайте о нагрузке, достаточности ресурсов, рисках и как сотрудник себя чувствует;
— Обеспечивайте доступ к поддержке ментального здоровья, снижайте стигматизацию через явные политики и обучение лидеров;
— Учитывайте рыночные ожидания по гибкости и льготам, чтобы не терять их просто потому, что конкуренты предлагают ×2.

#management

Дима Мохамад тоже написал о Chrome DevTools, можно немного дополнить статью Юрия Герыша.

— Во вкладке Elements можно выделить конкретный элемент кода страницы и увидеть отступы;
— Они бывают внутренними (paddings) — отступы между содержимым элемента и его границами (например, между текстом внутри карточки и её краями) — и внешними (margins) — отступы до соседних элементов, например, между разными карточками;
— Так на дизайн-ревью можно точно сказать фронт-разработчику, какой отступ сейчас в коде и каким он должен быть;
— Через DevTools можно скачивать изображения, защищённые от скачивания через «Сохранить как…»;
— Для этого во вкладке Network в фильтре надо выбрать Img, обновить страницу, в появившемся списке всех загрузившихся изображений найти нужное, нажать правой кнопкой мыши и выбрать «Save image as…»;
— В статье есть понятные иллюстрации и инструкции, как найти и включить разные функции вроде Styles, Computed, Responsive Design Mode и так далее.

#chrome_devtools

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

— Понадобится NodeJS, Expo, Git и редактор кода Cursor;
— Expo даёт набор инструментов для создания кроссплатформенных приложений (мобайл и веб) на базе React Native;
— Прототип можно запускать через Expo Go на телефоне как обычное приложение (на любой операционной системе) с нативным поведением, виброоткликом, гироскопом и так далее;
— Git нужен для сохранения всей истории изменений файлов проекта. Полезно при вайбкодинге, так как Курсор может откатить изменения только в пределах одного контекстного окна;
— У Курсора есть Rules and Memories, где можно указать место хранения SVG-ассетов и выбранную библиотеку для анимации (например, React Reanimated). Правила могут распространяться на конкретный проект Project Rules и на все проекты User Rules;
— Пропишите в правилах, что приложение будет в связке React Native и Expo. Возьмите в Фигме personal access token и укажите его в настройках MCP. Так Курсор сможет ходить в Фигму за макетами;
— Если не работаете с дизайн-системой, потратьте время на нормальное именование элементов в Фигме. Так можно будет обращаться к конкретным элементам, а ИИ даже сможет предугадывать ваши желания при создании прототипа;
— Создайте шаблонный проект приложения со стандартной структурой, сбросьте шаблон, чтобы получить чистый проект;
— Начать эксперименты лучше с файла index.tsx, который отвечает за главную страницу;
— Скопируйте в чат ссылку на фрейм главной страницы в Фигме и скажите использовать функцию get_code (команда изучить структуру фрейма), чтобы ИИ воссоздал макет в коде;
— Так можно проверять решения без разработчиков, лучше разобраться в терминологии и логике кода.

#ai #prototype

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

— С неполными вводными на старте минимально нужно 40 часов, чтобы заложить основу будущего проекта;
— Даже работая по схеме Time and materials клиент хочет знать примерный срок, бюджет и что он получит;
— Сначала надо собрать и систематизировать вводные (от 5 часов): презентации и текстовые описания, внутренние документы, скриншоты, фото с доски, наброски от руки и так далее;
— Иногда вводные приходят в созвонах, переписках и голосовых, что требует дополнительной обработки и структурирования;
— Может появиться список недостающей информации (метрики, списки конкурентов), а также нераскрытых или двусмысленных описаний, которые требуют конкретизации;
— В итоге получится структурированный список вводных, ссылок на документы, описание проекта (цель, задачи, целевая аудитория, контекст, заявленные проблемы), глоссарий;
— Удобно собрать всё в одном месте, например на FigJam-доске;
— Туда же можно добавить саммари по созвонам, кто за что отвечает в команде заказчика, план проекта, который потом дополнится ссылками на артефакты и их статусами, отчёт о потраченном на проект времени;
— Анализ занимает от 20 часов и зависит от количества и полноты вводных, числа ролей и ключевых сущностей, сложности бизнес-логики, а также желаемого набора артефактов (не все они нужны заказчикам);
— Сильно влияет степень вовлечённости заказчика — как быстро он отвечает на вопросы;
— Артефакты: описание функциональности (возможности и зависимости), схемы бизнес-процессов (последовательность операций, перемещение и обработка данных, граница между онлайном и офлайном), описание пользовательских ролей (чем занимаются, как принимают решения и взаимодействуют друг с другом), сущностей (ключевые объекты, их свойства, связи с другими объектами), сценарии (user stories), список внешних процессов, матрица «Роль × действие × сущность» и базовые правила доступа (CRUDL);
— В процессе анализа фиксируются ключевые требования к интерфейсу, предварительные предложения и решения по дизайну, появляются вопросы;
— Ответы на некоторые вопросы могут требовать времени. Чтобы не тормозить процесс, иногда можно договориться с командой о временных гипотетических ответах;
— Проектирование занимает от 15 часов (зависит от количества сценариев и ролей) и опционально. Артефакты: информационная архитектура (карта экранов), юзерфлоу, опционально мокапы и вайрфреймы.

#process #analysis

Соня Соуза написала о странице с нулевыми результатами поиска в интернет-магазине.

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

#search #empty_state

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

— Эффект эстетичности: люди склонны воспринимать красивый дизайн как более удобный. Но работает это только для небольших недочётов;
— Эффект приманки: если к 2 равнозначным вариантам добавить 3-й, заметно проигрывающий одному из них, люди чаще выбирают выигрывающий на его фоне вариант;
— Например, можно добавить чуть лучший, но намного более дорогой вариант, чтобы склонить к среднему по цене варианту;
— Эффект каскада доступной информации: чем чаще повторяется утверждение, тем сильнее становится вера в него. Так работает массовая реклама;
— Эффект победителя: люди склонны перенимать поведение, которого придерживается множество других людей. Это конформизм и желание быть частью общества. В электронной коммерции его используют социальные доказательства: отзывы и оценки;
— Эффект обратного победителя: люди избегают определённого поведения, если считают, что так поступает масса других людей;
— Пример одновременного действия этих эффектов: люди стремятся вместе со всеми купить новую модель айфона и при этом не покупают андроид, чтобы не быть «как все»;
— Эффект якоря: на оценки и суждения человека влияет первоначальная информация;
— Например, стоимость дорогих товаров, которые оказались в начале списка при сортировке «от дорогих к дешёвым», или обычная цена при наличии немного более низкой цены по карте покупателя;
— Эффект предпочтения статус-кво: люди желают, чтобы всё оставалось примерно тем же самым. Поэтому они плохо воспринимают революционные редизайны;
— Эффект неприятия потерь: люди воспринимают потерю более чем в 2 раза сильнее, чем приобретение того же самого. Потерять 500 рублей неприятнее, чем найти 1000. Или не получить то, на получение чего уже настроился;
— Используется в бесплатных пробных версиях и акциях 3 по цене 2: даже если 3-я единица товара не нужна, отказаться от неё тяжело;
— Эффект фрейминга: подача информации влияет на её восприятие;
— Например, автодилеры пишут не «скидка», а «выгода». Скидка 5000 рублей выглядит весомее, чем 5%, даже если это одна и та же скидка. Но если цена товара небольшая, лучше работают проценты;
— Эффект авторитета: люди больше верят оценкам авторитетных фигур (врачам, людям в униформе). На эффект рассчитаны рекомендации экспертов в описании товаров.

#psychology #ecommerce

Александр Горчаков написал об отложенном дизайн-ревью.

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

#review

Виктория Филиппова написала об улучшении доступности интерфейса для пользователей с дальтонизмом.

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

#color #accessibility

Илья Бирман написал о переключателях (segmented control) и выпадающих списках (select).

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

#segmented_control #select

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

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

#test_task