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

— Такие продукты прилагаются к рабочему месту, и пользователи не могут от них отказаться, даже если продукт неудобен;
— От них может зависеть безопасность производства, персонала и окружающей среды, и было бы здорово, чтобы интерфейс сам по себе не добавлял проблем;
— 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