25187
Чат читателей: @uxnoteschat В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads Включён в перечень Роскомнадзора: https://gosuslugi.ru/snet/67a9a56970de7b4d761a81ae
Ночной UX — цифровая вечеринка от Сбера
Необычные решения, творчество и ошибки делают нас уникальными в мире ИИ-слопа и сгенерированных картинок. Идём праздновать неидеальность на вечеринке 29 сентября!
Подготовили 3 кейса от Купера, Cloud․ru и Сбера. Как команды сделали всё неправильно — и правильно!
А после — вечернее шоу с шутками, конкурсами и шикарными гостями из Яндекс Еды, ВТБ и Альфа-Инвестиций.
Исследователи, редакторы и дизайнеры — приходите знакомиться и не стесняться своей неидеальности.
📆 29 сентября
📍Сбер.Среда
➡️ Регистрация открыта
Татьяна Бублик поделилась своей системой организации файлов в Фигме.
— Все макеты продукта могут находиться в одном файле;
— Из-за этого он может тормозить и даже перестать открываться, обновления дизайн-системы будут применяться ко всем макетам, даже архивным, команде сложно находить нужные макеты;
— В Фигме есть бранчи, но недоработки этого инструмента и ошибки дизайнеров могут принести больше проблем;
— Заведите папки: для файлов дизайн-системы (сюда можно отнести редполитику и любые вспомогательные материалы), для текущих задач (и шаблонов для новой задачи и мастер-файла), для каждой фичи или микросервиса;
— Макеты по отдельной задаче создаются в отдельном файле, в названии которого есть номер тикета, чтобы легко его находить;
— Появляется такой файл в папке для текущих задач. Дизайнер подключает к нему нужные файлы дизайн-системы;
— При передаче макетов в разработку размещает их на странице For dev;
— После успешного дизайн-ревью и завершения разработки перемещает файл в папку фичи;
— А макеты из файла задачи копирует в мастер-файл фичи, в котором отображаются макеты всех флоу фичи;
— Статусы задачных файлов отличаются от статусов задач в таск-трекере: In progress, Ready for dev, Design review, Freeze, Closed (закрыта, но ещё не перенесена в папку фичи), Archive (перенесена в папку);
— В архивных файлах дизайнер не принимает обновлений ДС, макеты выглядят так, как должны были быть разработаны, что важно разработчикам и тестировщикам;
— Мастер-файлы фич содержат макеты всех флоу, что позволяет команде быстро понимать актуальное состояние фичи;
— Система требует времени для поддержания порядка (час каждого дизайнера в спринт). Плюс команде требуется время, чтобы привыкнуть.
#figma #management
Кейт Каплан написала о контекстном меню.
— Контекстное меню включает набор действий, связанных с конкретным элементом или областью интерфейса. Оно помогает уменьшить визуальный шум и скрыть второстепенные действия;
— На десктопе оно может отображаться по нажатию правой кнопки мыши, но чаще всего используют иконку с тремя горизонтальными (митбол) или вертикальными (кебаб) кружками;
— Пользователи нормально их воспринимают. Но не используйте иконку бургера: она ассоциируется с основной навигацией;
— Минусы: по его внешнему виду не догадаться, какие действия доступны внутри. Если иконка мелкая, малоконтрастная и находится далеко от связанного объекта, её могут не заметить;
— Поэтому не размещайте в этом меню важные действия;
— Три кружка могут принять за индикатор прогресса или карусели (если они расположены рядом с картинкой, как в примере из статьи);
— Кнопку меню отображайте всегда, а не только при наведении курсора на связанный с ним элемент. Размещайте её рядом с этим элементом;
— Рядом можно разместить другие кнопки управления элементом, чтобы намекнуть пользователю на содержимое контекстного меню;
— Будьте последовательны: используйте иконку митбола или кебаба в своём интерфейсе только для контекстного меню. Даже для контрола раскрытия скрытой части текста не используйте «…»;
— Добавьте тултип, например с текстом «Действия с публикацией» или перечнем действий, как в Ноушене: «Style, export, and more…»;
— Если в меню мало действий (или вообще одно), попробуйте обойтись без контекстного меню.
In English. #menu
Илья Бирман написал о сценариях.
— Они предшествуют проектированию, позволяют понять, какие задачи и в каких обстоятельствах пользователь будет решать;
— Они не описывают действия пользователя в интерфейсе («нажимает на кнопку») и реакцию системы, включая ошибки, лоадеры и подобные детали;
— Они описывают действия человека в рамках его предметной области;
— Например, врач принимает пациента: выслушивает жалобы, смотрит его карточку и историю болезни, записывает результат приёма, выписывает рецепт или направление к другому врачу;
— Сценариев может быть много. Врач может также сдавать отчёт о работе за неделю, проводить инвентаризацию расходников;
— Приём нового пациента отличается от приёма того, кто уже обращался ранее. Это могут быть отдельные сценарии в группе «Приём пациента» или вариации внутри основного сценария, описывающего приём в общих чертах;
— При составлении сценария полезно представлять, зачем нужен продукт, кто и в какой ситуации будет им пользоваться, что пользователи знают и не знают, с какими трудностями сталкиваются;
— Полезно представить, где физически будет находиться пользователь, будет ли использовать продукт на ходу и одной рукой, между какими программами будет переключаться;
— Если заказчик говорит «нужен такой-то экран», предложите не придумывать интерфейс раньше времени и сначала разобраться, когда к нему будут обращаться;
— Сценарии могут быть связаны с определёнными ролями (врач, медсестра) или персонами (но без описания их ролей персоны бесполезны);
— Если сценариев выходит слишком много, можно с заказчиком (так как это продуктовое решение) выбрать те, что будут учтены в первой версии продукта. Те, что первыми пришли на ум и которые вы уже записали, обычно и являются самыми важными.
#scenario
Русалина Ушакова написала о том, когда удобный интерфейс мешает обучению.
— Десятилетия исследований памяти показывают: что даётся легко — запоминается хуже;
— Условия, в которых ученик показывает высокую производительность в моменте, часто приводят к слабому долгосрочному запоминанию, и наоборот;
— Метрики вовлечённости измеряют производительность. Нужны отдельные метрики запоминания, например, как ученик справляется с заданием через неделю без подсказок, а не сразу после урока;
— Запоминанию способствуют усилия при обучении: чем сложнее задание (при условии, что оно остаётся посильным), тем лучше;
— Если часть урока потратить на вспоминание материала вместо его перечитывания, долговременное запоминание резко растёт;
— Предложите сначала вспомнить ответ, прежде чем появится возможность выбрать из предложенных вариантов;
— Также лучше запоминается то, что ученик создал сам: ввод вместо выбора, достраивание вместо чтения, объяснение своими словами;
— Полезно смешивать разные типы задач, а не давать их однотипными блоками. Мозг учится каждый раз определять, какой приём применить. И это ближе к реальной жизни;
— Слегка отложенная обратная связь при ответе на вопрос лучше моментальной. У мозга есть время «додумать» и удержать усилие, что закрепляет эффект;
— Когда ученик был уверен в ответе, но ошибся, запоминается лучше, чем когда ученик сомневался. Уверенность можно определить по скорости и решительности ответа;
— Важно это использовать и при уверенных ошибках давать более заметную обратную связь, которая подчеркнёт контраст: думал так — вот как на самом деле.
#learning #principles
Помните шутку «почини принтер, ты ж программист»? А бывало у вас такое же с дизайном? Типа «нарисуй дракона, ты ж дизайнер» или «подскажи, какие обои лучше поклеить, ты ж дизайнер».
И смех смехом, но я помню времечко, когда неважно, какой ты дизайнер — ты и полиграфию делал, и фотки ретушировал, и иллюстрашки валил, и юзер-флоу, и упаковку… Почему помню? Потому что вчера это было. Я делал визитки. Очень, должен сказать, интересно было потрясти стариной.
Но это заставило меня задуматься, о скольких вещах нам нужно помнить, чтобы собрать правильный пользовательский опыт. Даже о таких, казалось бы, незначительных, как буквы в адресной строке.
Типа:https://www.example.com:8080/store/catalog/item.php?category=shoes&size=42#reviews
А с ними всё совсем не просто. Если почитаете оригинал вот этой статьи, то вам станет понятно, что URL состоит из многих частей, которые нужно упаковывать консистентно, сродни токенам дизайн-библиотеки, чтобы сделать его читабельным и продуцирующим меньше ошибок.
Вот несколько советов по работе с урлами, которые вы можете положить к себе в DoD или DESIGN.md для проверки:
— Путь (это домен и всякие слэши) должен указывать на постоянный ресурс или понятную иерархию. Все части пути пишем маленькими буквами и разделяем в едином стиле (например, всегда через дефис, иначе тётушка Клава задолбается переводить пробельчики в %20 и вводить адрес своими большими пальчиками) 💅.
— Если структура сайта поменялась, со старых публичных ссылок нужно обязательно настроить редиректы на новые адреса, иначе мы рискуем терять людей, которые заложили себе старый URL. 🔖
— Для идентификаторов (ID) и понятных названий в ссылках (slugs) стоит продумать логику, чтобы они не менялись со временем. Это про то, что https://www.megaman.com/blog/4533 (на конце ID) и https://www.megaman.com/blog/fight-for-juice (на конце slug) могут вести на одну и ту же страницу. Да и должны бы всегда это делать, даже если статью переименуют: slug изменится, а ID останется. 🔓
— Для дополнительных фильтров и настроек отображения используйте понятные и задокументированные параметры запроса (всё, что идёт после [?] ). Массивы в параметрах всегда передаются одним, чётко задокументированным способом. Все значения из параметров нужно аккуратно раскодировать, проверять на корректность и задавать для них разумные ограничения. 👩💻
— Фрагменты (с решёткой #) лучше оставить исключительно для навигации внутри страницы или работы с состоянием на стороне клиента. 🚫
— Ну и капитанское: В ссылках не должно быть никаких паролей, секретных токенов или личных данных — безопасность превыше всего. 🇺🇸
В общем, принимайте во внимание даже такие мелочи, чтобы сделать взаимодействие максимально приятным! И да пребудет с вами дизайнерская сила.
Чеклист: 50 ошибок в портфолио дизайнеров
Основано на разборе 1000+ портфолио.
Формфактор собрали ошибки, которые:
— портят первое впечатление от портфолио
— вызывают отторжение у лида
— убивают шансы на оффер
Актуально для рынка 2026.
Чеклист в закрепе @formfactor
Кейт Каплан написала о подсказках.
— Это небольшие полезные сообщения, отображающиеся при нажатии или наведении курсора на знак вопроса (?) или информации (i);
— Их привязывают к конкретным элементам интерфейса. В этом случае неважно, знак вопроса или айка — пользователи воспринимают их корректно;
— Они помогают сделать интерфейс чище, скрывая необязательную дополнительную информацию: объяснение терминов, причин запроса определённых данных в форме и так далее;
— Располагая в них информацию, предполагайте, что большинство пользователей её не увидят. Подсказки имеют значение для тех, кто столкнулся с вопросом, нуждается в разъяснении или успокоении;
— Если информация из подсказки полезна для прохождения сценария, размещайте её сразу в интерфейсе. Например, ограничения и правила заполнения полей, юридические соглашения и отказ от ответственности, инструкции и объяснения;
— Каждое взаимодействие с подсказкой — это дополнительные усилия. Не тратьте время пользователей и не подрывайте доверие к подсказкам, размещая в них очевидную и маркетинговую информацию или повторяя видимый контент и инструкции;
— При открытии подсказки пользователи ожидают увидеть немодальное окно с кратким сообщением. Подсказка не должна блокировать выполнение текущей задачи или открывать новую страницу;
— Подсказки должны быть краткими, контекстными и легко закрываемыми.
In English. #info_tip
CX/UX Конф — конференция о клиентском опыте и человекоцентричности
Почему одними продуктами хочется пользоваться снова, а другие забываются через минуту? Поговорим о том, как рождается клиентский опыт — от первых дизайн-решений до эмоций, которые остаются после взаимодействия с продуктом.
Разберём:
🔘как создавать продукты, которые подстраиваются под человека, а не наоборот
🔘как проектировать эмоциональный дизайн, к которому хочется возвращаться
🔘как визуальные решения влияют на доверие, привычки и впечатления пользователей
🔘как превращать ограничения в источник сильных и неочевидных решений
🔘как персонализация меняет опыт взаимодействия с сервисами сегодня
Проведите время с экспертами из агентства ИКРА, CreativePeople, Домклик и Сбера.
📆3 сентября
📍Москва, Кутузовский проспект и онлайн
➡️ Если вам интересно, как создаются продукты, которые запоминаются, — бронируйте место сейчас. Регистрация открыта
Русалина Ушакова написала о приёмах, используемых в онбординге Дуолинго.
— Хорошо: профиль создаётся в самом конце, после выбора языка, вопросов о цели и уровне и завершения первого урока;
— Это Gradual engagement, когда пользователь доходит до ощутимой ценности и только потом «платит» (в этом случае своими данными);
— После урока появляется счётчик серии «1 день в ударе». Это Loss aversion, когда появляется что-то, что пользователю жалко потерять;
— Экраны «За первую неделю выучите 50 новых слов» и «Вот чего можно достичь за 3 месяца» настраивают на результат и создают ощущение, что продукт настроен под пользователя;
— Можно отнести к тёмным паттернам: повторные запросы разрешений на отправку уведомлений и добавление виджета;
— Это Nagging — повторный запрос после отказа, который не только раздражает, но и обесценивает первое решение пользователя;
— В интерфейсе отображается будущее окно с запросом разрешения, на котором выделен вариант «Разрешить». Гайдлайны Apple советуют от такого воздерживаться;
— В запросе на добавление виджета кнопка «Добавить виджет» выглядит основной. Это Visual interference — влияние на выбор не содержанием, а визуальной иерархией;
— Гайдлайны Apple рекомендуют запрашивать согласие в момент обращения пользователя к функции с понятным объяснением причины. Такой контекстный запрос даёт на 25% больше согласий, чем «холодный» вариант в начале сессии;
— Выделение варианта пути «Определите мой уровень» меткой «Рекомендуем» — это Nudging;
— Его можно отнести и к честным, и к тёмным паттернам. Для этого надо ответить на вопрос: был бы пользователь благодарен за это дизайнерское решение, если бы понимал его механику целиком?
#onboarding #dark_patterns
Новые материалы в @uxwork (кроме вакансий):
— На что дизайн-лиды и хеды смотрят в портфолио при найме (на основании опроса 36 человек чуть больше года назад);
— Как оформлять резюме и портфолио и готовиться к откликам и интервью;
— Как проверить работодателя при устройстве на работу.
Дизайнер обязан везде видеть хуи, жопы и говно
Любой дизайн может содержать паразитный образ — то, что автор не хотел показать, но оно там появляется из-за того, как устроено восприятие человека
А устроено оно так, что мы видим образы помимо своей воли. Мемная фраза «Как теперь это развидеть?» отражает именно эту нашу особенность. Вы видели массу примеров на этом канале
Если человек однажды увидел хуй в логотипе вашего банка, он навсегда это запомнит, у него сложится ассоциация и он будет видеть хуй каждый раз, когда видит ваш логотип
Да, не каждый человек увидит. Но даже если их половина или треть, что это меняет? Вы действительно хотите, чтобы каждый второй считал вашего маскота говном, а не зефиром?
Хороший дизайнер просто обязан проверять дизайн на наличие сторонних образов и ассоциаций. Это буквально графическая гигиена. Способность видеть хуи в графике — это тест на профпригодность
Тимур Репин написал о разных видах интерфейса, по каким параметрам их можно сравнить и заменит ли их всех умная строка (нет).
— Человеко-компьютерный интерфейс — все элементы, через которые человек взаимодействует с компьютером. Голос может быть таким же элементом;
— Интерфейс — бутылочное горлышко на пути от быстрого человеческого мозга до ещё более быстрого компьютера. Его расширение повышает эффективность решения задач с помощью компьютера;
— Пропускная способность — сколько информации (как на ввод, так и на вывод) передаётся в единицу времени;
— Скорость решения задачи — параметр, который зависит от количества действий, которые человек должен совершить (нажать кнопок, найти элементов на экране, вспомнить команд), и вероятности ошибиться;
— Оперативность доступа — сколько времени и усилий требуется, чтобы начать взаимодействие с системой. Она повысилась с переходом от мейнфреймов к персональным компьютерам и мобильным телефонам (достаточно просто протянуть руку);
— Переход от командной строки (CLI) к графическому интерфейсу (GUI) повысил скорость решения задач (не надо помнить названия команд и писать их, меньше ошибок) и пропускную способность (нажатие на кнопку вместо написания команды, вместо строк текста — полный графики экран);
— Кстати, был ещё TUI (text user interface), когда интерфейс, похожий на графический, создавался текстовыми символами. Пример: Norton Commander (1984);
— У носимых устройств выше оперативность доступа (они уже на голове или руке) и скорость решения отдельных задач. AR-очки видят то же, что и пользователь, и могут помочь в контексте: подсветить гайку, которую надо закрутить;
— CLI и умная строка удобнее для поиска чего-то конкретного (например, приложения в телефоне по названию), ответа на вопрос в виде небольшого структурированного текста, получения конкретного нужного пользователю результата;
— GUI удобнее для поиска и выбора, когда ещё нет точного запроса, когда не знаешь всех возможностей системы, когда нужно что-то подправить (проще указать, чем описывать) или видеть всё сразу (дашборд);
— Там, где человеку нужно сформулировать цель, делегировать сложное действие или быстро получить ответ, умная строка будет удобнее кнопок. Там, где нужно сравнить варианты, увидеть состояние системы, управлять сложным процессом или точно указать на объект, GUI останется сильнее.
#command_line #ai
Павел Шерер продолжил серию статей об объединении фреймворков JTBD и Personas (с User story) в одном процессе проектирования.
— Находим контекст напряжения и потребность → Формулируем Job story → Понимаем уровень цели → Проверяем важность работы и удовлетворённость текущими решениями → Определяем акторов и персон → Выбираем механику → Пишем User story → Проверяем результат;
— Если начинаете с User story, скорее всего, вы уже выбрали механику. Но почему она лучше альтернатив? И нужна ли она конкретному пользователю?
— В JTBD интересует момент, в котором привычный способ действия перестаёт справляться с задачей;
— Нормальная Job story: когда я возвращаюсь к проекту после нескольких дней отсутствия, я хочу быстро понять, что изменилось, чтобы уверенно участвовать в обсуждении и принимать решения;
— Для каждой Job story полезно зафиксировать: какой верхний принцип или желаемое состояние за ней стоит; какое действие должен уметь выполнять пользователь; какое наблюдаемое последствие подтверждает успех; где заканчивается цель и начинается выбранная механика;
— Но, возможно, это редкая проблема, звучит страшно, но почти не влияет на поведение, достаточно хорошо решается текущим способом. Здесь пригодится Opportunity landscape;
— У конкретной персоны могут быть конкретные требования к предлагаемому решению;
— Что фиксировать в персоне: роль в работе, права и ограничения, уровень компетенции, частоту сценария, риски, за которые человек отвечает, критерии успеха, привычные инструменты, страхи и барьеры переключения, отношение к автоматизации, что персона не будет делать ни при каких условиях (особенно важно в B2B);
— Persona: продакт-менеджер, который ведёт несколько параллельных проектов, регулярно переключается между ними и отвечает за продуктовые решения;
— Выбранная механика: сводка изменений, принятых решений и новых рисков за выбранный период со ссылками на источники;
— User story, связанная с Job story, Persona и выбранной гипотезой решения: как продакт-менеджер, который ведёт несколько проектов, я хочу получить сводку изменений, решений и рисков за выбранный период, чтобы восстановить контекст за десять минут до встречи и проверить важные выводы по первоисточникам;
— С такой User story понятно: откуда появилась потребность, для кого создаётся решение, почему выбрана именно эта механика, какой результат считается успехом, какие ограничения нельзя потерять по дороге.
#user_story #job_story
Отношения между сценарием и навигацией в интерфейсе
При проектировании интерфейса важно проанализировать сценарии, то есть хорошо представить, как именно, в какой ситуации, с какими знаниями, целями и ожиданиями человек будет пользоваться интерфейсом. Многие забывают про это подумать, и у них получается ерунда. Но иногда ерунда получается, даже если про это подумать, а затем просто положить сценарии в основу навигации.
Что будет, если просто положить сценарии в основу навигации?
Когда сценариев очень мало, может получиться неплохой интерфейс. Если есть всего три-пять действий, за которыми человек приходит в интерфейс, и мы просто делаем для них кнопки, то всё будет понятно и удобно. Это то, что я предлагал для ПВЗ «Яндекс-маркета»:
https://ilyabirman.ru/meanwhile/all/interfeys-pvz-yandeks-marketa/
Но такие интерфейсы встречаются редко. Даже в небольшом продукте есть множество связей между функциями, и число сценариев огромно. Если в таком случае начать строить навигационную модель вокруг сценариев, в интерфейсе станет невозможно разобраться. В заметке об архиве вакансий я как раз указываю на эту проблему:
https://ilyabirman.ru/meanwhile/all/arhiv-vakansiy-ne-mozhet-byt-podrazdelom-sozdaniya-vakansii/
Когда я говорю про огромное число сценариев, необязательно представлять что-то необъятное вроде Фотошопа. Даже календарь — это уже целый мир разных сценариев. Ну вот, например:
Иван понял, что не успевает на регулярную встречу, и хочет предупредить других участников о переносе. Кому-то из них удобнее написать, кому-то позвонить. В ходе одного из звонков Пётр говорит, что давайте тогда уж вообще перенесём эту встречу на час позже, потому что ему самому трудно на неё успевать всё время. Иван смутно помнит, что где-то через пару недель у него запись к зубному, и хочет убедиться, что перенос не конфликтует с ней, идёт проверяет. Выясняется, что конфликтует, но договариваются всё же перенести на час позже, а там, через две недели, просто сделать исключение.
Ну и что, как построить навигационную модель вокруг этого сценария? Да никак.
Во-первых, если вы хорошо провели анализ, то даже тех сценариев, которые вы рассмотрели и выделили как ключевые, будет довольно много. То есть даже если для каждого из них есть прям готовая кнопка или раздел в интерфейсе, найти их будет не так просто. Во-вторых, остальные сценарии, которых несравнимо больше, вообще непонятно, где надо будет искать. Развивать такой продукт и поддерживать растущее число сценариев — боль.
Хороший интерфейс не ведёт по сценариям, он лишь создаёт для них возможности. Он даёт пользователю свободу, чувство контроля, ту самую «агентность», а не просто направляет его по одной из нескольких заранее проложенных дорожек. Разумеется, в календаре нет готовой кнопки или даже «мастера» для того, что описано в сценарии выше. Календарь просто так устроен, чтобы пройти по этому сценарию не составляет труда.
Это похоже на вопрос о том, зачем нужны карты и схемы, когда в телефоне и так есть навигатор. Навигатор очень полезен, но с ним ты не чувствуешь себя хозяином положения, не можешь отклониться от пути. Карта же даёт общее понимание того, как устроен мир, и ты уже можешь сам принимать решения. На карте нет специальной секции для сценария «по пути с ребёнком из школы заехать погулять в парк», но она делает этот сценарий возможным без проблем. В навигаторе можно предусмотреть функцию «заехать по пути», но её ещё нужно будет найти, а также десятки других сценариев останутся непокрытыми.
Поэтому в основу навигации в интерфейсе нужно закладывать некую модель того, как мы хотим, чтобы человек представлял себе устройство нашего продукта: какие у нас есть сущности, как они связаны, организованы, что они умеют. Эта модель должна помогать нам реализовывать все важные сценарии, а пользователю — находить способы их реализации. И эта модель должна выдерживать развитие продукта.
Анастасия Ефанова написала, как сокращение количества пушей в 2,5 раза повысило конверсию из пушей в 3 раза и снизило отписки на 38,5%.
— Ключевая метрика — конверсия в завершённую смену, то есть работник согласился на подработку и отработал смену;
— Пуши использовались для онбординга, вывода на смену, информирования об акциях;
— Новые пользователи получали 8–10 пушей в день. Важно конвертировать их в первую смену в течение месяца, иначе такой пользователь отваливается;
— Начали с изучения сценариев отправки пушей. Выяснили, что информируют о закончившихся акциях или работают в соответствии с устаревшей бизнес-логикой (напоминают о чекине в течение часа после выхода на смену, хотя такого требования уже нет);
— По конверсии и адекватности количества пушей все сценарии разделили на худшие (надо отключать), средние (улучшать), лучшие (масштабировать);
— Например, пуш о подработках в радиусе 20 км был бесполезен в Москве и Петербурге, так как местные работники не готовы ездить так далеко;
— Сократили интервалы между онбординговыми пушами, чтобы отправить их за 2 недели вместо месяца и во вторые 2 недели сфокусироваться на конверсии в смену;
— Большинство всё равно загружает документы и выполняет прочие действия сразу, и пушей с напоминаниями не получает;
— Ввели ограничения на пуши о подработке в радиусе 10 км, если работник уже на смене или выйдет в ближайшие дни. Плюс отправляют их не чаще одного раза в день;
— Понизили приоритет пушей об акциях: если уже отправлен пуш о подработке, пуш об акции не отправится;
— Добавили ограничения на уровне сценариев. Триггерный сценарий срабатывает не чаще одного раза в 2 часа. У отдельных сценариев (вроде возвращения доступных подработок) — раз в 2 дня.
#push
Стас Мельников написал, как с помощью CSS-свойств улучшить дизайн веб-страниц.
— Чтобы, например, на последней строке заголовка не оставалось одного слова, можно использовать свойство text-wrap: balance;
— Свойство padding задаёт внутренние отступы. У интерактивных элементов оно позволяет увеличить область нажатия и облегчить пользователям попадание по таким элементам;
— Если на новость ведёт ссылка и в заголовке, и в картинке, пользователи скринридеров услышат о ссылке дважды. С помощью псевдоэлемента ::before можно убрать вторую ссылку и при этом сохранить интерактивность картинки;
— В разметке попапа код кнопки закрытия часто идёт первым. В этом случае пользователи скринридера, открыв попап, сразу же слышат о кнопке закрытия попапа;
— Можно расположить код кнопки в конце разметки попапа, но с помощью свойства position: absolute сохранить её визуальное расположение в верхней части попапа;
— Для выделенного текста голубой цвет фона можно заменить на любой другой. При этом цвет текста можно автоматически делать контрастным по отношению к цвету фона с помощью функции contrast-color().
#accessibility #css
UX Feedback запускает «Разговоры» — новый формат встреч онлайн.
Несколько команд коротко рассказывают свои реальные кейсы, а остальное время обсуждаем их вместе — что сработало, что нет и почему у соседней команды в похожей ситуации получилось иначе. У каждого продукта своя специфика, поэтому всё не сводится к общим советам под конец.
В ближайшем выпуске — про то, сколько на самом деле стоит искать респондентов среди своих же пользователей.
Нужные люди уже внутри продукта — значит, на рекруте точно можно сэкономить? Не всегда. На деле в процесс включаются скринер, нужный сегмент, приглашения, переписка, назначенные и сорванные слоты. И экономия почти никогда не значит быстро или просто.
17 сентября в 16:00 разберём это на реальных примерах вместе с экспертами из Циан, Hoff, S7 и T2:
— что именно компании экономят: деньги, дни или часы сотрудников;
— как находить пользователей с нужным продуктовым опытом;
— где чаще всего ломается путь от приглашения до интервью;
— когда стоит продолжать рекрут среди своей аудитории, а когда разумнее выбрать другой канал.
➡️ Регистрация здесь
Реклама ООО «Фидбек». ИНН: 5030094661, erid: 2VtzqwpLukp
Снежана Чепа написала об ошибках в работе с персональными данными на российских сайтах, которые могут привести к штрафам. Суммы можно посмотреть в статье.
— Использование Гугл Форм. Данные должны попадать в базы, находящиеся на территории России. Гугл Формы можно заменить на Яндекс Формы;
— Нет предупреждения о куках. Куки у вас точно используются, если подключены сервисы веб-аналитики;
— Под формами нет согласий на обработку персональных данных (ПД) или они не соответствуют требованиям закона. Политика конфиденциальности ≠ согласие на обработку ПД;
— В согласии должна быть цель обработки данных, их полный список, срок, в течение которого действует согласие;
— Нет чекбокса «Я соглашаюсь на обработку персональных данных в соответствии с политикой конфиденциальности». Слово «соглашаюсь» можно сделать ссылкой на согласие, «политикой конфиденциальности» — на политику;
— Отзывы размещены без получения согласия на распространение ПД. Если размещаете отзывы, лучше получить отдельное согласие по специальной форме (есть в статье);
— Нет политики конфиденциальности или она не соответствует требованиям. В ней должны быть сведения о каждой цели обработки данных;
— Не уведомили Роскомнадзор об обработке ПД;
— Нет соглашения о поручении обработки данных третьим лицам, например, сервисам рассылок. Такое поручение можно сделать разделом заключаемого с клиентами договора;
— Нет документа с перечнем всех мест хранения ПД на бумажных носителях, если в вашем бизнес-процессе используются такие носители;
— Важно реагировать на обращения, например вопросы о том, на каком основании человек получает от вас письма, запросы на удаление ПД из ваших баз данных.
#laws
😎 Авито ищет UX-редакторов: присоединяйся к оплачиваемой программе Design Bootcamp и развивай продукт для миллионов пользователей.
Что тебя ждёт:
—12 месяцев работы над реальными задачами;
— поддержка наставника и рост от стажёра до мидла;
— шанс продолжить карьеру в Авито.
Ты будешь:
— в паре с дизайнером создавать логичные и дружелюбные интерфейсы;
— участвовать в дискавери-синках и обсуждать развитие продукта;
— работать над лендингами и рассылками;
— придумывать что-нибудь новое, например, название новой фичи.
📌 Откликайся на программу здесь!
Лена Плинер написала о проектировании экранной клавиатуры для использования на сенсорных экранах на производстве.
— Решение должно учитывать размер экрана, условия работы оператора и использоваться для разных типов полей;
— По промышленным стандартам минимальный размер кнопок при работе в перчатках: 15,5 × 15,5 мм. Расстояние между ними: 5,5 мм;
— Раскладку ЙЦУКЕН сложнее подстроить под свободное место. Но даже на сенсорных экранах (согласно исследованиям) алфавитная раскладка повышает когнитивную нагрузку и замедляет процесс;
— При поиске по справочнику введённые символы сокращают список доступных вариантов. Буквы, с которыми можно продолжить запрос, становятся заметнее, при этом остальные не блокируются;
— Так как клавиатура может перекрывать контент, сообщение о том, что совпадений не найдено, является частью клавиатуры и отображается рядом с полем ввода;
— Также для этого предусмотрены перетаскивание (в пределах экрана) и сворачивание клавиатуры (основной вариант для резистивных экранов);
— На сенсорном экране нет тактильного отклика, поэтому ненажатые кнопки (выпуклые) визуально сильно отличаются от нажатых (вдавленных);
— В перчатке палец может слегка дрожать или задерживаться на стекле, поэтому стоит заложить паузу для предотвращения повторных нажатий;
— Состав клавиш зависит от конкретного поля, но всегда есть возможность переключиться на полную клавиатуру. Например, сейчас в артикулах допускаются только цифры, но могут встречаться старые артикулы с буквами;
— На ёмкостном экране спецсимвол можно ввести, удерживая кнопку. Для резистивных экранов лучше продублировать кнопку открытия спецсимволов.
Копия на Dsgners, Виси. #industrial
Никита Подгорный написал об особенностях интерфейса и опыте взаимодействия со складными телефонами.
— Можно выделить 3 типа раскладушек: Flip — вытянутые телефоны, которые складываются по вертикали. Встречаются нечасто, самые популярные модели у Самсунга;
— Fold — околоквадратные в раскрытом состоянии, складываются по горизонтали. В сложенном виде похожи на привычный смартфон. Самый популярный тип;
— Trifold — планшеты, состоящие из 3 складывающихся частей, похожих на привычные смартфоны. Таких только 2 модели: Samsung Galaxy Z Trifold, Huawei Mate XT;
— Фолд-смартфоны бывают книжными (описаны выше) и широкими — широкий прямоугольник в сложенном виде и почти планшет 4:3 в разложенном. Таких тоже мало: Huawei Pura X да Galaxy Z Fold 8;
— В разложенном виде левую часть экрана обычно занимает навигационное меню (иконки или иконки с подписями), которое в смартфонах обычно прячется за иконкой бургера, либо список, например чатов в приложениях вроде Сообщений или Телеграма;
— Может использоваться 2-колоночная сетка, как в приложении Now brief;
— Приложения принимают устройство за смартфон и адаптируют интерфейс, учитывая ширину экрана, но не его квадратную форму. Например, из-за отсутствия ограничения на ширину контента в Инстаграме вертикальные картинки просто не влезают на экран целиком;
— Авито и Вайлдберис показывают более 2 карточек в ряд, а Озон и Яндекс Маркет растягивают 2 карточки на всю ширину;
— Производители предусмотрели костыльное решение: можно настроить отображение таких неадаптированных приложений с соотношением 3:4 или 16:9;
— От квадратного экрана выигрывают Яндекс Карты, Гугл Таблицы, Яндекс Книги;
— Форм-фактор Fold позволяет делать селфи на более качественные основные камеры. Или видеть композицию кадра, если телефон на штативе или в руках фотографирующего вас человека;
— Если вы сами фотографируете, в дополнение к приложению камеры на второй половине экрана можно отобразить ленту получающихся фото;
— На экране может быть до 3 приложений одновременно. Например, банковское, калькулятор и заметки. Но, например, Т-Банк запрещает своему приложению открываться параллельно с другими;
— Flex mode — когда смартфон согнут, на одной части экрана отображается основной контент (например, видео в Ютубе), а на другой — вспомогательный (кнопки управления воспроизведением). Но этот режим поддерживают редко;
— Минусы: телефоны толще и тяжелее, быстрее теряют в стоимости, камеры хуже айфоновских (хотя именно в съёмке они предлагают интересные возможности), более крупная, разделяющаяся на 2 части клавиатура, не ускоряет скорость набора и уменьшает количество ошибок, а скорее наоборот. Свайпать по ней практически невозможно.
#fold #adaptive
Александр Ушаков написал о чатоцентричном интерфейсе.
— В таком интерфейсе чат — основной способ взаимодействия, а привычные графические элементы дополняют диалог в контексте текущей задачи;
— Обычный графический интерфейс заставляет пользователя адаптировать свои намерения под архитектуру приложения;
— Чтобы в CRM записать BMW Ивана на субботу для полировки и химчистки с учётом того, что забрать машину он хочет к вечеру, оператору надо самостоятельно пройти через несколько экранов;
— В чатоцентричном интерфейсе текстовый запрос приводит к созданию заявки для конкретного автомобиля с двумя услугами и таким слотом в календаре, который будет учитывать длительность работ и пожелания по времени готовности;
— В итоге оператор видит заполненную форму новой заявки и подтверждает её добавление;
— Это не отдельный чат с ИИ-ассистентом, который суммаризирует информацию, пересказывает справку или ищет нужные разделы. Проверочный вопрос: что остаётся после его ответа? Если только текст в истории сообщений — это разговорчивый справочник;
— Чат не заменяет весь интерфейс, так как часто текстовый ввод или вывод информации менее удобен, непонятно, что система умеет и какие данные видит;
— Подсказывать, что система умеет, можно в контексте, например, на экране календаря предложить команды «Найти свободное окно», «Перенести записи», «Показать загрузку команды». Со временем пользователь поймёт, какие у чата есть возможности и ограничения;
— В сложных запросах интерфейс собирается вокруг задачи. Надо выбрать, какие записи перенести без риска потерять клиента? Система показывает варианты, объясняет выбор, позволяет посмотреть историю, предлагает свободные окна;
— Чем проще сформулировать команду, тем важнее показывать, как система её поняла, какие будут последствия и обратимо ли действие. Особенно если действия необратимы;
— Чатоцентричный интерфейс нужен там, где пользователь знает, чего хочет, но не знает короткого пути к результату, например, когда задача пересекает несколько сущностей и требует серии действий.
#chat #ai
Должен ли исследователь быть мультифункциональным? Или узкая экспертиза остается главной ценностью?
Развитие AI меняет не столько методы, сколько границы профессии и объем ожиданий. Мы все чаще оказываемся в новых зонах компетенций: от ответственности за метрики до вайбкодинга.
Приходите на митап «UX-рисерч и точка?» — своим опытом поделятся эксперты Lamoda Tech, RWB, Atom и других компаний.
В программе:
▪️ Как не дать результатам исследований умереть: чат-бот вместо забытых ссылок на вики
Егор Стрельцов, UX researcher, Lamoda Tech
▪️ Python и JavaScript для автоматизации работы исследователя
Анна Мингариева, Lead UX researcher, RWB
▪️ Навык, который превращает исследования в решения
Михаил Хананашвили, HMX Research Lead, Atom
▪️Круглый стол с приглашенными экспертами
🚀 Запускаем исследование продуктовых дизайнеров, 2026
Вновь копаем в самое интересное:
🤖 как AI на самом деле меняет работу: где экономит время, а где все приходится переделывать
🔄 куда смещается роль: забирают ли продакты и разработчики то, что было задачей дизайнеров
📉 что с рынком труда и тревогой за будущее
📊 Часть вопросов задаем не первый год, так что увидим честную динамику: зарплаты, инструменты, настроение профессии.
⏱️ Опрос займет 10–15 минут.
В конце октября поделимся публичным отчетом со всеми срезами и полезными ссылками.
👉 Пройти: https://survey.devcrowd.ru/pd-2026
Чем больше ответов, тем точнее картина. Перешлите своим дизайнерам, соберем срез всей профессии 🙏
Антонина из ЮMoney написала о поле для ввода OTP (One-Time Password).
— В отличие от обычного поля принимает фиксированное количество определённых символов (например, 4–6 цифр), которые валидны ограниченное время;
— Современные браузеры могут предложить подставить код из смс или пуша. К свойствам поля надо добавить autocomplete="one-time-code";
— Одно поле проще в реализации, меньше проблем с доступностью;
— Сегментированное поле своим видом подсказывает, сколько символов надо вводить, в мобайле превосходит одно поле по ощущению контроля;
— Устанавливайте фокус на первый сегмент поля сразу после загрузки;
— Даже если фокус не на первом сегменте, при вставке скопированного кода подставляйте его с первого сегмента;
— Если используете одно поле, пишите количество символов и не прячьте эту подсказку в плейсхолдер, который пропадает при вводе;
— При нажатии на кнопку «Получить новый код», очищайте поле;
— Если пользователь печатает быстро, обработчик onChange может пропустить символ. Используйте события input или keyup;
— Скрывайте сообщение об ошибке сразу же, если введён корректный код или изменены символы предыдущего некорректного кода;
— Не очищайте поле при неверном вводе. Пользователь мог ошибиться в последнем символе, надо дать возможность исправить только его;
— Если у вас автоматическая отправка при вводе максимального количества символов, можно добавить задержку 500–800 миллисекунд после ввода последнего символа, чтобы пользователь успел заметить ошибку и исправить её;
— Давайте свободу перемещения между сегментами: клик, стрелки, Tab.
#otp
Юля, Лика и Настя из Alfa Research Center написали о триангуляции в UX-исследованиях.
— Это сочетание методов (не обязательно трёх, зависит от ресурсов) в одном исследовании, позволяющее получить более полную картину;
— Нельзя оценивать отдельно, как человек справляется с задачей в интерфейсе и как воспринимает процесс;
— Таким образом можно сочетать интервью, юзабилити-тестирование и количественный немодерируемый тест;
— А также метрики (субъективной удовлетворенности, успешности и эффективности выполнения заданий) и данные из разных источников (другие исследования по теме, внутренние логи обращений пользователей, собственные исследования с респондентами);
— Один лишь юзабилити-тест выявит проблемы, но не объяснит, почему решение работает плохо. Оно непонятное, незаметное или просто неожиданное?
— Например, новый дизайн приложения для безналичных чаевых проверяли немодерируемыми тестами и юзабилити-тестами с айтрекером и оценкой эмоционального отклика;
— Айтрекер показывает, в каком порядке человек смотрит на элементы интерфейса, позволяет оценить их заметность;
— Кнопка «Получить чек» была заметной, но непонятной (какой чек, если оплаты ещё не было?), и на неё не нажимали;
— Sense Machine считывает с лица респондента эмоциональный отклик: радость, злость, грусть, страх, отвращение, удивление и нейтральное состояние;
— Альтернатива — опросник на когнитивную нагрузку и шкалирование по субъективным ощущениям;
— На экран загрузки добавили баннер. Айтрекер показал, что на него смотрели. Но к концу 10-минутного теста далеко не все респонденты помнили его содержание. Эмоциональный отклик показал, что реклама не раздражала. В итоге её решили оставить;
— Иногда при разных методах исследования выигрывают разные варианты. Нужен сводный отчёт, чтобы команда не получила противоречивые выводы;
— Карандаш для ввода своей суммы чаевых замечали. Большинство респондентов количественного немодерируемого теста с заданием справлялось. Но на очных тестах была заметна задержка. Интервью показали, что люди не помнили, был ли способ указать свою сумму;
— Карандаш был заметен, но непонятен, поэтому пользователи двигались дальше по сценарию, забывая о нём. В итоге выиграла кнопка с текстом «Своя сумма»;
— Триангуляция страхует от ошибок, которые исследователи совершают из-за одностороннего взгляда и ограничений отдельных методов;
— При возможности добавляйте в исследования инструменты для измерения внимания, эмоционального отклика, запоминаемости и читаемости.
#research #user_testing
Лёха Макаренко рассказал, что делать дизайнеру дизайн-системы, если продуктовому дизайнеру понадобился элемент, которого нет в ДС.
— Этот элемент может отличаться от готовых компонентов ДС визуалом или логикой. Например, нужен инпут с маской под номер банковской карты и определением платёжной системы;
— Не стоит решать за дизайнера. Лучше предложить 3 варианта;
— 1. Использовать существующий компонент, выполняющий базовую функцию, но менее удобный и не такой эстетичный. Например, обычный инпут;
— 2. Провести необходимые исследования и прийти к команде ДС с обоснованием, что такой компонент необходим. В идеале он должен переиспользоваться другими командами. Этот путь может занять время;
— 3. Сделать кастомный элемент таким, как хочется. Надо будет проработать все нужные состояния, предусмотреть его работу в тёмной теме и так далее;
— Такой подход позволяет прозрачно планировать развитие продукта и управлять дизайн-долгом;
— Выбрав один из вариантов, со временем можно от него отказаться. Например, сделать кастом и потом затащить его в ДС либо заменить его на базовое решение. Или попробовать простой вариант, а потом кастомный.
#design_system
Новые материалы в @uxwork (кроме вакансий):
— Как продуктовому дизайнеру себя презентовать.
Тезисы из книги Юрия Ушакова «Не сойти с айти» на довольно актуальную тему:
— Как вышло, что многие айтишники сейчас сомневаются в том, что продолжат работать в айти;
— Вакансий сильно меньше, чем соискателей. Рынок зрелый, исполнители взаимозаменяемы (а также заменяемы ИИ). Как выделиться на общем фоне;
— Как сохранить себя, если ИИ всё-таки отжал у вас работу в айти.
В «Работягах» написали, чем заменить сложные таблицы в b2b-интерфейсах.
— Таблица с фильтрами, сортировкой, быстрыми действиями — привычный паттерн для работы с любым массивом данных;
— Она удобна и понятна команде разработки. Они могут решить использовать её без каких-либо исследований;
— Как универсальное решение она плохо помогает выполнять конкретные задачи и часто просто отображает данные;
— Когда стоит задуматься о замене: слишком много колонок; горизонтальный скрол; чтобы понять суть, приходится открывать каждую строку или использовать правильные комбинации фильтров; пользователи только выгружают данные, чтобы обработать их в Экселе;
— Не трогайте таблицы, если пользователь думает ими. В этом случае попробуйте их улучшить закреплением колонок, инлайн-редактированием и так далее;
— Таблицы хороши для сравнения однотипных сущностей по одинаковым параметрам, быстрого сканирования большого массива и поиска расхождений, массовой обработки данных;
— Если у сущностей есть жизненный цикл (лиды идут по воронке), таблицу можно заменить на канбан-доску: сразу видно, где затор, легко управлять потоком;
— Если пользователь обрабатывает поток сущностей, подойдёт очередь. Важно выбрать параметры для отображения, которые помогают приоритизировать сущности;
— Если важны даты начала и окончания и связь сущностей друг с другом, удобнее будет календарь, таймлайн или диаграмма Ганта. Важно дать возможность управления данными при просмотре в этом режиме;
— Дашборд заменяет таблицу с метриками, в которой надо самостоятельно искать отклонения, держа в голове норму;
— Карточки объектов удобнее, если нужна возможность рассмотреть каждую сущность целиком. В таблице картинки, теги, длинные названия, статусы и действия раздувают строки, и важные признаки теряются;
— Ещё вариант: AI-слой, который будет анализировать данные таблицы (отвечают на вопрос «Что у нас есть») и, руководствуясь продуктовой логикой, подсказывать, «Что делать»: саммаризировать, выявлять отклонения, предлагать кнопки действий по каждому пункту;
— Чтобы выбрать подходящий паттерн, надо понять, кто работает с интерфейсом и ради чего, какие вообще свойства бывают у объекта, какие из них нужны разным ролям и какие нужны для выполнения конкретных действий;
— Не стоит избавляться от таблиц полностью: в b2b почти всегда нужен режим «Все записи» для массового редактирования, экспорта, сверки, аудита продвинутыми пользователями.
#table #b2b