Русский
Открыть в Telegram
UUX Notes

UX Notes

@uxnotes · канал · Технологии · в индексе с 01.05.2026
23 523подписчиков−33 за неделю
1 581средний охват поста
6.7%ER — охват к подписчикам
9постов за 30 дней
UX Notes
Ссылка
нажмите — покажем
Помните шутку «почини принтер, ты ж программист»? А бывало у вас такое же с дизайном? Типа «нарисуй дракона, ты ж дизайнер» или «подскажи, какие обои лучше поклеить, ты ж дизайнер». И смех смехом, но я помню времечко, когда неважно, какой ты дизайнер — ты и полиграфию делал, и фотки ретушировал, и иллюстрашки валил, и юзер-флоу, и упаковку… Почему помню? Потому что вчера это было. Я делал визитки. Очень, должен сказать, интересно было потрясти стариной. Но это заставило меня задуматься, о скольких вещах нам нужно помнить, чтобы собрать правильный пользовательский опыт. Даже о таких, казалось бы, незначительных, как буквы в адресной строке. Типа: 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 останется. 🔓 — Для доп… Читать полностью →
8 · 2.4K ·
U
Фотография
😎 Авито ищет UX-редакторов: присоединяйся к оплачиваемой программе Design Bootcamp и развивай продукт для миллионов пользователей. Что тебя ждёт: —12 месяцев работы над реальными задачами; — поддержка наставника и рост от стажёра до мидла; — шанс продолжить карьеру в Авито. Ты будешь: — в паре с дизайнером создавать логичные и дружелюбные интерфейсы; — участвовать в дискавери-синках и обсуждать развитие продукта; — работать над лендингами и рассылками; — придумывать что-нибудь новое, например, название новой фичи. 📌 Откликайся на программу здесь!
40 · 2.9K ·
U
UX Notes
Ссылка
нажмите — покажем
Русалина Ушакова написала о том, когда удобный интерфейс мешает обучению. — Десятилетия исследований памяти показывают: что даётся легко — запоминается хуже; — Условия, в которых ученик показывает высокую производительность в моменте, часто приводят к слабому долгосрочному запоминанию, и наоборот; — Метрики вовлечённости измеряют производительность. Нужны отдельные метрики запоминания, например, как ученик справляется с заданием через неделю без подсказок, а не сразу после урока; — Запоминанию способствуют усилия при обучении: чем сложнее задание (при условии, что оно остаётся посильным), тем лучше; — Если часть урока потратить на вспоминание материала вместо его перечитывания, долговременное запоминание резко растёт; — Предложите сначала вспомнить ответ, прежде чем появится возможность выбрать из предложенных вариантов; — Также лучше запоминается то, что ученик создал сам: ввод вместо выбора, достраивание вместо чтения, объяснение своими словами; — Полезно смешивать разные типы задач, а не давать их однотипными блоками. Мозг учится каждый раз определять, какой приём применить. И это ближе к реальной жизни; — Слегка отложенная обратная связь при ответе на вопрос лучше моментальной. У мозга есть время «додумать» и удержать усилие, что закрепляет эффект; — Когда ученик был уверен в ответе, но ошибся, запоминается лучше, чем когда ученик сомневался. Уверенность можно определить по скорости и решительности ответа; — Важно это использовать и при уверенных ошибках давать более заметную обратную связь, которая подчеркнёт контраст: думал так — вот как на самом деле. #learning #principles
27 · 2.3K ·
U
UX Notes
Ссылка
нажмите — покажем
Снежана Чепа написала об ошибках в работе с персональными данными на российских сайтах, которые могут привести к штрафам. Суммы можно посмотреть в статье. — Использование Гугл Форм. Данные должны попадать в базы, находящиеся на территории России. Гугл Формы можно заменить на Яндекс Формы; — Нет предупреждения о куках. Куки у вас точно используются, если подключены сервисы веб-аналитики; — Под формами нет согласий на обработку персональных данных (ПД) или они не соответствуют требованиям закона. Политика конфиденциальности ≠ согласие на обработку ПД; — В согласии должна быть цель обработки данных, их полный список, срок, в течение которого действует согласие; — Нет чекбокса «Я соглашаюсь на обработку персональных данных в соответствии с политикой конфиденциальности». Слово «соглашаюсь» можно сделать ссылкой на согласие, «политикой конфиденциальности» — на политику; — Отзывы размещены без получения согласия на распространение ПД. Если размещаете отзывы, лучше получить отдельное согласие по специальной форме (есть в статье); — Нет политики конфиденциальности или она не соответствует требованиям. В ней должны быть сведения о каждой цели обработки данных; — Не уведомили Роскомнадзор об обработке ПД; — Нет соглашения о поручении обработки данных третьим лицам, например, сервисам рассылок. Такое поручение можно сделать разделом заключаемого с клиентами договора; — Нет документа с перечнем всех мест хранения ПД на бумажных носителях, если в вашем бизнес-процессе используются такие носители; — Важно реагировать на обращения, например вопросы о том, на каком основании человек получает от вас письма, запросы на удаление ПД из ваших баз данных. #laws
27 · 2.3K ·
U
UX Notes
Ссылка
нажмите — покажем
Илья Бирман написал о сценариях. — Они предшествуют проектированию, позволяют понять, какие задачи и в каких обстоятельствах пользователь будет решать; — Они не описывают действия пользователя в интерфейсе («нажимает на кнопку») и реакцию системы, включая ошибки, лоадеры и подобные детали; — Они описывают действия человека в рамках его предметной области; — Например, врач принимает пациента: выслушивает жалобы, смотрит его карточку и историю болезни, записывает результат приёма, выписывает рецепт или направление к другому врачу; — Сценариев может быть много. Врач может также сдавать отчёт о работе за неделю, проводить инвентаризацию расходников; — Приём нового пациента отличается от приёма того, кто уже обращался ранее. Это могут быть отдельные сценарии в группе «Приём пациента» или вариации внутри основного сценария, описывающего приём в общих чертах; — При составлении сценария полезно представлять, зачем нужен продукт, кто и в какой ситуации будет им пользоваться, что пользователи знают и не знают, с какими трудностями сталкиваются; — Полезно представить, где физически будет находиться пользователь, будет ли использовать продукт на ходу и одной рукой, между какими программами будет переключаться; — Если заказчик говорит «нужен такой-то экран», предложите не придумывать интерфейс раньше времени и сначала разобраться, когда к нему будут обращаться; — Сценарии могут быть связаны с определёнными ролями (врач, медсестра) или персонами (но без описания их ролей персоны бесполезны); — Если сценариев выходит слишком много, можно с заказчиком (так как это продуктовое решение) выбрать те, что будут учтены в первой версии продукта. Те, что первыми пришли на ум и которые вы уже записали, обычно и являются самыми важными. #scenario
39 · 2.4K ·
U
UX Notes
Фотография
UX Feedback запускает «Разговоры» — новый формат встреч онлайн. Несколько команд коротко рассказывают свои реальные кейсы, а остальное время обсуждаем их вместе — что сработало, что нет и почему у соседней команды в похожей ситуации получилось иначе. У каждого продукта своя специфика, поэтому всё не сводится к общим советам под конец. В ближайшем выпуске — про то, сколько на самом деле стоит искать респондентов среди своих же пользователей. Нужные люди уже внутри продукта — значит, на рекруте точно можно сэкономить? Не всегда. На деле в процесс включаются скринер, нужный сегмент, приглашения, переписка, назначенные и сорванные слоты. И экономия почти никогда не значит быстро или просто. 17 сентября в 16:00 разберём это на реальных примерах вместе с экспертами из Циан, Hoff, S7 и T2: — что именно компании экономят: деньги, дни или часы сотрудников; — как находить пользователей с нужным продуктовым опытом; — где чаще всего ломается путь от приглашения до интервью; — когда стоит продолжать рекрут среди своей аудитории, а когда разумнее выбрать другой канал. ➡️ Регистрация здесь Реклама ООО «Фидбек». ИНН: 5030094661, erid: 2VtzqwpLukp
8 · 2.5K ·
U
UX Notes
Ссылка
нажмите — покажем
Кейт Каплан написала о контекстном меню. — Контекстное меню включает набор действий, связанных с конкретным элементом или областью интерфейса. Оно помогает уменьшить визуальный шум и скрыть второстепенные действия; — На десктопе оно может отображаться по нажатию правой кнопки мыши, но чаще всего используют иконку с тремя горизонтальными (митбол) или вертикальными (кебаб) кружками; — Пользователи нормально их воспринимают. Но не используйте иконку бургера: она ассоциируется с основной навигацией; — Минусы: по его внешнему виду не догадаться, какие действия доступны внутри. Если иконка мелкая, малоконтрастная и находится далеко от связанного объекта, её могут не заметить; — Поэтому не размещайте в этом меню важные действия; — Три кружка могут принять за индикатор прогресса или карусели (если они расположены рядом с картинкой, как в примере из статьи); — Кнопку меню отображайте всегда, а не только при наведении курсора на связанный с ним элемент. Размещайте её рядом с этим элементом; — Рядом можно разместить другие кнопки управления элементом, чтобы намекнуть пользователю на содержимое контекстного меню; — Будьте последовательны: используйте иконку митбола или кебаба в своём интерфейсе только для контекстного меню. Даже для контрола раскрытия скрытой части текста не используйте «…»; — Добавьте тултип, например с текстом «Действия с публикацией» или перечнем действий, как в Ноушене: «Style, export, and more…»; — Если в меню мало действий (или вообще одно), попробуйте обойтись без контекстного меню. In English. #menu
13 · 2.6K ·
U
UX Notes
Ссылка
нажмите — покажем
Стас Мельников написал, как с помощью CSS-свойств улучшить дизайн веб-страниц. — Чтобы, например, на последней строке заголовка не оставалось одного слова, можно использовать свойство text-wrap: balance; — Свойство padding задаёт внутренние отступы. У интерактивных элементов оно позволяет увеличить область нажатия и облегчить пользователям попадание по таким элементам; — Если на новость ведёт ссылка и в заголовке, и в картинке, пользователи скринридеров услышат о ссылке дважды. С помощью псевдоэлемента ::before можно убрать вторую ссылку и при этом сохранить интерактивность картинки; — В разметке попапа код кнопки закрытия часто идёт первым. В этом случае пользователи скринридера, открыв попап, сразу же слышат о кнопке закрытия попапа; — Можно расположить код кнопки в конце разметки попапа, но с помощью свойства position: absolute сохранить её визуальное расположение в верхней части попапа; — Для выделенного текста голубой цвет фона можно заменить на любой другой. При этом цвет текста можно автоматически делать контрастным по отношению к цвету фона с помощью функции contrast-color(). #accessibility #css
19 · 2.5K ·
U
UX Notes
Ссылка
нажмите — покажем
Татьяна Бублик поделилась своей системой организации файлов в Фигме. — Все макеты продукта могут находиться в одном файле; — Из-за этого он может тормозить и даже перестать открываться, обновления дизайн-системы будут применяться ко всем макетам, даже архивным, команде сложно находить нужные макеты; — В Фигме есть бранчи, но недоработки этого инструмента и ошибки дизайнеров могут принести больше проблем; — Заведите папки: для файлов дизайн-системы (сюда можно отнести редполитику и любые вспомогательные материалы), для текущих задач (и шаблонов для новой задачи и мастер-файла), для каждой фичи или микросервиса; — Макеты по отдельной задаче создаются в отдельном файле, в названии которого есть номер тикета, чтобы легко его находить; — Появляется такой файл в папке для текущих задач. Дизайнер подключает к нему нужные файлы дизайн-системы; — При передаче макетов в разработку размещает их на странице For dev; — После успешного дизайн-ревью и завершения разработки перемещает файл в папку фичи; — А макеты из файла задачи копирует в мастер-файл фичи, в котором отображаются макеты всех флоу фичи; — Статусы задачных файлов отличаются от статусов задач в таск-трекере: In progress, Ready for dev, Design review, Freeze, Closed (закрыта, но ещё не перенесена в папку фичи), Archive (перенесена в папку); — В архивных файлах дизайнер не принимает обновлений ДС, макеты выглядят так, как должны были быть разработаны, что важно разработчикам и тестировщикам; — Мастер-файлы фич содержат макеты всех флоу, что позволяет команде быстро понимать актуальное состояние фичи; — Система требует времени для поддержания порядка (час каждого дизайнера в спринт). Плюс команде требуется время, чтобы привыкнуть. #figma #management
73 · 2.7K ·
U
UX Notes
Ссылка
нажмите — покажем
Анастасия Ефанова написала, как сокращение количества пушей в 2,5 раза повысило конверсию из пушей в 3 раза и снизило отписки на 38,5%. — Ключевая метрика — конверсия в завершённую смену, то есть работник согласился на подработку и отработал смену; — Пуши использовались для онбординга, вывода на смену, информирования об акциях; — Новые пользователи получали 8–10 пушей в день. Важно конвертировать их в первую смену в течение месяца, иначе такой пользователь отваливается; — Начали с изучения сценариев отправки пушей. Выяснили, что информируют о закончившихся акциях или работают в соответствии с устаревшей бизнес-логикой (напоминают о чекине в течение часа после выхода на смену, хотя такого требования уже нет); — По конверсии и адекватности количества пушей все сценарии разделили на худшие (надо отключать), средние (улучшать), лучшие (масштабировать); — Например, пуш о подработках в радиусе 20 км был бесполезен в Москве и Петербурге, так как местные работники не готовы ездить так далеко; — Сократили интервалы между онбординговыми пушами, чтобы отправить их за 2 недели вместо месяца и во вторые 2 недели сфокусироваться на конверсии в смену; — Большинство всё равно загружает документы и выполняет прочие действия сразу, и пушей с напоминаниями не получает; — Ввели ограничения на пуши о подработке в радиусе 10 км, если работник уже на смене или выйдет в ближайшие дни. Плюс отправляют их не чаще одного раза в день; — Понизили приоритет пушей об акциях: если уже отправлен пуш о подработке, пуш об акции не отправится; — Добавили ограничения на уровне сценариев. Триггерный сценарий срабатывает не чаще одного раза в 2 часа. У отдельных сценариев (вроде возвращения доступных подработок) — раз в 2 дня. #push
23 · 2.7K ·
U
UX Notes
Фотография
Ночной UX — цифровая вечеринка от Сбера Необычные решения, творчество и ошибки делают нас уникальными в мире ИИ-слопа и сгенерированных картинок. Идём праздновать неидеальность на вечеринке 29 сентября! Подготовили 3 кейса от Купера, Cloud․ru и Сбера. Как команды сделали всё неправильно — и правильно! А после — вечернее шоу с шутками, конкурсами и шикарными гостями из Яндекс Еды, ВТБ и Альфа-Инвестиций. Исследователи, редакторы и дизайнеры — приходите знакомиться и не стесняться своей неидеальности. 📆 29 сентября 📍Сбер.Среда ➡️ Регистрация открыта
39 · 2.4K ·
U
UX Notes
Ссылка
нажмите — покажем
Елена Плинер написала о юзерфлоу. — User flow — это блок-схема пользовательского пути в рамках отдельного сценария с конкретными точками старта и финиша; — Она позволяет посмотреть на продукт сверху, увидеть его реальный объём и заранее избавиться от лишних шагов и экранов; — Строить её лучше от точки финиша, потому что она не всегда очевидна. Если есть юзерстори, точкой финиша будет Y из формулы «я как пользователь хочу сделать X, чтобы получить Y»; — Один большой пользовательский путь почти всегда распадается на отдельные потоки внутри него со своими финальными точками. Это нормально, иначе общая схема будет слишком большой и сложной; — Юзерфлоу описывает шаги пользователя: не обязательно экраны, это могут быть его действия, смена состояний экранов, а также действия вне интерфейса (если они важны для сценария); — Двигаясь от финиша к старту, проще включать в схему только то, без чего связать две точки невозможно (физически или из-за технических ограничений), и не заполнять схему всеми возможными ответвлениями; — Этого достаточно, чтобы продумать сценарий, увидеть спорные места, а также синхронизоваться с командой и зафиксировать требования; — Перед передачей в разработку можно добавить детали: технические узлы и состояния, логику перехода к конкретным состояниям, цикличность (чтобы донести логику работы); — Юзерфлоу полезны для аудита текущего флоу продукта, проектирования новых сценариев, сопоставления показанной на схеме воронки с метриками (чтобы понять, где пользователи отваливаются), а также для оценки масштаба проекта; — Если сценарий линейный, юзерфлоу не нужен; — В блок-схему можно добавить мокапы экранов, чтобы показать состояния одного и того же экрана, расположенные на одном экране точки входа в разные сценарии или передать больше контекста при значительном ветвлении схемы. #user_flow
41 · 1.7K ·
U
UX Notes
Ссылка
нажмите — покажем
Александр Краснобаев написал об а/б-тестах на малом трафике. • Нельзя выбирать один из вариантов, если он показал рост конверсии с 1,5 до 2% при 200 визитах (из 3 заявок стало 4); • Надо тестировать изменения, при которых рост может быть в разы. Например, конкретное обещание: вы продаёте бесплатную консультацию или разбор с понятным результатом; • Структура страницы и тип медиа (когда посетитель увидит цену и отзывы, живое видео продукта недалеко от первого экрана), отзывы (нужны, вопрос в формате: текст и фото, скриншот переписки, видео), оффер (цена, гарантия, бонусы); • Тестируйте не меньше 2 недель, чтобы захватить будние и выходные, новых и вернувшихся посетителей; • Смотрите на результаты сразу, чтобы отловить баги в настройках; • Не прерывайте тест, увидев, что какой-то вариант побеждает, так как лидер может измениться; • Оба варианта тестируйте одновременно, случайно распределяя по ним трафик. Если пробовать их по очереди, результат могут исказить непредсказуемые кратковременные факторы вроде погоды; • Бесплатный способ провести тест: 2 лендинга с разными адресами и эксперимент в Яндекс Директе, либо «Эксперименты» в Метрике, которые работают на Вариокубе; • Оценивайте результаты отдельно для десктопа и мобайла. Важно, какой из вариантов выигрывает для основного канала трафика; • В один момент времени на одном пути пользователя проводите один тест, чтобы понять, что именно сработало; • Если гипотез много, придётся приоритизировать по влиянию на результат, уверенности, что сработает, и простоте реализации; • Оценивайте результат комплексно. На «бесплатный аудит» будет больше заявок, но меньше людей, готовых заплатить. Скидки могут снизить прибыль; • Дополнительно можно смотреть сессии в Вебвизоре и карты скролинга (докручивают ли люди вообще до конкретного блока); • Также при малом трафике по каждой заявке можно выяснить у клиента, кто это, что ему нужно и сколько он готов заплатить. #ab_testing
14 · 1.3K ·
U
UX Notes
Ссылка
нажмите — покажем
Сархан Громов написал о проблеме связи брендинга и интерфейса. Фирменные приёмы могут отлично смотреться на специально подготовленных статичных картинках. Сайт и приложение — не ещё один рекламный носитель. Здесь у дизайнера меньше контроля. Фирменный стиль нельзя перенести на них буквально. Особенно если айдентика строится вокруг одного сильного приёма. Если использовать его часто, экран станет перегруженным. Если редко, интерфейс будет нейтральным. Фирменный шрифт не спасает: может не хватать начертаний, плохо выглядеть цифры (а в интерфейсе их больше) или кириллица. Обычно его оставляют для крупных заголовков, промоблоков и отдельных акцентов, а основной текст набирают более устойчивой гарнитурой. Не каждый интерактивный элемент стоит красить в фирменный цвет, отвечающий за основной акцент. Фирменный красный конфликтует с красным для статусов, критических сообщений и деструктивных действий. Надо строить палитру, отталкиваясь от брендового цвета и отходя от него настолько далеко, насколько это необходимо для создания нормального интерфейса. Вместо заметных фирменных приёмов надо искать более спокойные признаки, допускающие более частое повторение, но задающие характер: радиусы, отступы, плотность интерфейса, форму иконок, способ использования фото, отношение к пустому пространству, тон оф войс. Хорошая проверка для приёма — повторить его двадцать раз. Набор декоративных элементов → способ принимать маленькие решения: насколько жёсткой или мягкой должна быть сетка, как много цвета оставить на одном экране, как выглядит пустое состояние. В айдентике декоративная графика может занимать половину экрана, а в интерфейсе остаться только на промоэкранах, онбординге и пустых состояниях. Не все экраны сайта или приложения должны одинаково отражать бренд, узнаваемость обеспечивается системой в целом. Отойти от фирменного стиля могут заставить требования доступности, соблюдение паттернов взаимодействия, вариативность и локализация контента (или вообще особенности ренде… Читать полностью →
8 · 518 ·
U
UX Notes
Ссылка
нажмите — покажем
Андрей Шапиро написал о слабых местах подхода SDD (Specification-Driven Development) в агентной разработке. Спецификация содержит требования к системе, но в ней нет ответов на все вопросы. При создании кода агент сам принимает часть решений и где-то угадывает, как должно быть (как представляет себе оператор), а где-то нет. Где агент не угадал, оператор дорабатывает документ, чтобы в следующий раз не надо было угадывать. При этом решения, с которыми агент угадал, в документе не фиксируются. С той же спецификацией во второй раз может получиться другой результат. Детерминированный агент сделает выбор решения повторяемым, но выбор изменится вместе с моделью, её версией или контекстом. Решение: когда оператор принимает результат, все удачные решения агента делать частью спецификации. Но всё равно останутся нежелательные феномены. 1) Дрейф — отклонение агента от спецификации. 2) Эрозия — потеря важных деталей при правках. Изменение А приводит к незаметному изменению Б, потому что часть важного для Б контекста исключается как неважная для А. 3) Наплыв — перенос свойств объектов, которые видит агент, без требования о переносе. Пример становится образцом целиком, вместе со случайными чертами вроде оформления. Полностью пересобирать систему при обновлении спецификации дорого, поэтому её код становится точкой отсчёта для следующих итераций. Написанные машиной тесты подвержены ошибкам того же рода. А человек работает медленно, может не заметить дрейф и не видит эрозию там, куда не смотрит. #ai #docs
❤4👍3🤮2🔥1
9 · 987 ·
U
UX Notes
Ссылка
нажмите — покажем
Новые материалы в @uxwork (кроме вакансий): • Кого не заменит искусственный интеллект; • Мнение дизайн-директора корпорации о том, что происходит с рынком дизайна в России (почему столько негативных реакций, объясните в комментариях?); • Управление своим временем при большом потоке задач.
3 · 842 ·
U
UX Notes
Ссылка
нажмите — покажем
Роман Горшков рассказал о переходе дизайн-команды с Фигмы на Клод. Дизайнер может делать больше задач и быстрее разгребать беклог: что занимало 2 дня, делается за 2 часа. И нет торговли с разработчиками, чтобы реализовать какой-то эффект. ИИ помогает проверять больше версий решения задачи (есть сервисы, где запрос можно отправить сразу в 4 LLM для одновременной генерации) и захватывать смежные области: саунд- и шрифтовой дизайн. Время всё равно тратишь, но получаешь больше. Если генерить грамотно, не будет видно, что это ИИ. Надо уметь передавать ИИ свой стиль, логику и онтологию, иначе их будет задавать ИИ, и тогда будет чувствоваться инструмент. Сейчас опасно ковыряться в кривых и пикселях. Клод создаёт на 99% готовый продукт: специалист может увидеть неправильный рефлекс, баг отражения. Но стоит ли тратить ещё столько же времени, сколько уже потрачено, чтобы довести до 100%? Насколько 1% портит впечатление аудитории? Надо организовывать процесс так, чтобы как можно больше проходить на автомате. Не нужно знать Фигму с её переменными, плагинами для выгрузки токенов. Она нужна на 5%: поставить рядом пару картинок, собрать историю, подправить что-то небольшое. Надо научиться не просто вайбкодить (на уровне Фигма Мейк), а пользоваться репозиториями, создавать ветки, коммитить и создавать готовый фронт, использовать скилы и петли проверки. Сейчас таких специалистов мало. Дизайнеру остаются дискавери, творческий поиск, придумывание вариантов, UX, дизайн-мышление, юзабилити, проработка флоу, приоритеты, выбор из получающихся вариантов. Пригодится база: колористика, насмотренность, хороший вкус. Профессия дизайнера ментальная, а не инструментальная: инструменты меняются, профессия остаётся. Не думать пока нельзя. Надо уметь делать то, что кому-то нужно. Важные софты: 1) Логика, умение рассуждать хотя бы на уровне своего модуля и делать выводы. Раньше Роман предлагал тестовые задания, теперь задаёт вопросы, чтобы понять, как соискатель формулирует мысли и двигается… Читать полностью →
❤12💩10🤡8🤮4👍4😁3
118 · 1.7K ·
U
UX Notes
Ссылка
нажмите — покажем
Илья Бирман написал о поле ввода и его отличиях от комбобокса. Поле ввода позволяет ввести значение с клавиатуры. В состоянии фокуса в поле появляется курсор, в тач-интерфейсе — экранная клавиатура. Если текст не помещяется в поле, он сдвигается вслед за курсором (из комментария: отсутствие горизонтальной прокрутки — скорее недоработка привычной реализации). Вне фокуса поле отображает начало длинного текста и обрезает его конец. Бывают однострочные и многострочные поля (text area). В последних текст может переноситься на следующие строки, и возможна вертикальная прокрутка, если высоты поля не хватает для отображения всего текста. Чтобы скрол в поле не конфликтовал с прокруткой страницы, высоту поля можно автоматически увеличивать под введённый текст. Чтобы размер поля подсказывал, какой объём контента оно ожидает, и был удобен для ввода, многострочное поле по умолчанию делают высотой в 3–4 строки. Чтобы сократить количество ошибок, можно ограничивать допустимые для ввода символы. Например, можно настроить, чтобы поле принимало только цифры. Для таких полей некоторые системы могут отображать стрелки для изменения значения на единицу вверх и вниз, менять значение стрелками на клавиатуре, отображать специальные экранные клавиатуры только с цифрами (или барабан). Но можно просто сообщать об ошибках ввода. Делать так стоит, когда пользователь закончил ввод. Сообщение о том, что обязательное поле не заполнено, лучше отложить до момента отправки формы (иначе ошибка будет после простого анфокуса с поля). Комбобокс — гибрид поля ввода и выпадающего списка, в котором можно как ввести любое значение в поле, так и выбрать его из списка. Пример: поле для выбора размера шрифта. Введённое вручную значение иногда добавляют в выпадающий список для ускорения последующего ввода. В хороших реализациях список используют как словарь для автодополнения. Важно отличать выпадающий список комбобокса от всплывающего списка автодополнений (если он есть). Выпадающий список остаётся неи… Читать полностью →
❤5👍1
14 · 518 ·
U
UX Notes
Фотография
UX Horn Podcast S2E2 / Антон Григорьев / UX Notes и UX Work / Что останется от UX-профессий в эпоху ИИ? Второй выпуск второго сезона UX Horn Podcast — с Антоном Григорьевым, продуктовым дизайнером, автором каналов UX Notes и UX Work В прошлом выпуске мы обсуждали, как ИИ меняет работу исследователей. В этот раз решили посмотреть шире — что вообще останется от наших профессий, если инструменты научатся делать большую часть работы за нас? Начали с рынка IT и профессиональных навыков, добрались до генеративных интерфейсов, а потом зарубились на тему эмоционального дизайна, научных исследований и терминологии Получилось насыщенно и снова не очень коротко, хотя я правда старался Послушать можно на площадках: Apple Podcasts YouTube Podster Яндекс Музыка (in progress) Тайминг: 00:00:00 — Интро и знакомство с Антоном Как появился UX Notes, зачем Антон помогал студентам, откуда берётся синдром самозванца у IT-специалистов и какую роль в происходящем сыграли онлайн-школы 00:06:34 — «Не сойти с айти»: что происходит с рынком IT https://habr.com/ru/articles/1074498/ Откуда появилась статья Антона, почему всё больше специалистов сомневаются в профессиональном будущем, как рынок пришёл к нынешнему состоянию и почему в России изменения проявились позже, чем за рубежом 00:19:30 — If AI can do end-to-end UX research, where is our value? https://medium.com/design-bootcamp/if-ai-can-do-end-to-end-ux-research-where-is-our-value-bc07d20d6845 Можно ли доверить ИИ поиск инсайтов и новых исследовательских вопросов, заменит ли он модератора, как создавать правила автоматического анализа интервью и почему качество исходных данных по-прежнему имеет значение 00:30:54 — «2 навыка, на которых держится дизайнер в AI-эпоху» https://youtu.be/jhgqzncr2IA?si=irR4qaL94Nazc69M Что из работы дизайнера можно передать ИИ, где Антон уже применял эти инструменты, почему меняется система контроля качества дизайнерских решений и как дизайн-системы помогают внедрять ИИ в рабочие процессы 00:40:3… Читать полностью →
❤9👍5🤡3
5 · 646 ·
UX Notes
Ссылка
нажмите — покажем
Алексей Кирдяев написал о чистом дизайне. Чистый минималистичный дизайн — не стандарт качества, а культурное предпочтение. 73% поведенческих данных получено из исследований, в которых участвовали в основном WEIRD-респонденты (Western, Educated, Industrialized, Rich, Democratic). Они представляют всего 12% населения Земли. Чистая форма заявки на кредит из 3 полей, прогресс-бара и кнопки не конвертила на мексиканском рынке. Пользователи ей не доверяли. У конкурентов были плотные многостраничные формы, много институционального брендинга, государственной символики и значков безопасности. Есть низко- и высококонтекстуальные культуры. Есть культуры с низкой и высокой дистанцией власти — насколько нормальным в обществе считается неравное распределение власти. В странах с низкой дистанцией (Скандинавия, Нидерланды, Австралия) плоское и неформальное вызывает доверие. В странах с высокой дистанцией (Индия, Мексика, Бразилия, Филиппины, Индонезия, Малайзия и большая часть Ближнего Востока и Центральной Азии) институты, которые не демонстрируют свой авторитет, не задают много вопросов, кажутся несерьёзными. Мгновенное решение по кредиту и вовсе будет выглядеть сломанным. Кредитная организация рассматривает заявку — это процесс. Как вариант, можно добавить искусственную паузу, анимации, информацию о статусах рассмотрения заявки. В некоторых культурах ритуал — часть продукта, и в этом случае трение, формальность и видимый процесс убирать не стоит (хоть мы и привыкли так делать). Чистый дизайн не должен быть решением по умолчанию, его надо осознанно выбрать. Смотрите не на глобальных конкурентов, а на местных, а также государственные сервисы и национальные банки. #localization
👍19❤6
36 · 1.8K ·
U
Фотография
Попросите AI-агента собрать экран, и он, скорее всего, поставит Inter вместо шрифта вашей системы, придумает свои отступы и нарисует модалку заново, хотя готовый компонент лежит рядом. Так бывает, когда агенту отдают всю Figma целиком: он в ней тонет и начинает додумывать. Ему нужно объяснить, что уже есть в дизайн-системе, где это найти и как использовать. Для этого собирают карту дизайн-системы. 28 октября в 18:00 мск продуктовый дизайнер Даниил Шишко проведет бесплатный эфир и покажет, как собрать такую карту в Codex. Начнет с пустой папки и на дизайн-системе Желтого банка настроит агента, который соберет экран из готовых компонентов с нужными шрифтами, цветами и отступами. Подойдет и тем, кто ни разу не открывал агента. Что получат зрители: • скилл для сборки карты дизайн-системы; • инструкцию по работе с Codex и Claude, которая поможет избежать блокировки аккаунта. Эфир бесплатный, нужно только зарегистрироваться
🖕12❤5🗿4
29 · 1.8K ·
U
UX Notes
Ссылка
нажмите — покажем
Денис Зеленых написал о подходе «Атомарная матрёшка» к организации дизайн-системы. Подход развивает идею атомарного дизайна. Каждый новый уровень матрёшки использует всё, что под ним, не дублирует нижележащие уровни и решает свою задачу. Расширенная иерархия подхода: токены → базовые компоненты → продуктовые компоненты → лейауты → страницы → паттерны → сценарии → модули → сервисы → продукт. Иерархия отражается и на структуре файлов в Фигме: набор сценариев в рамках пользовательской истории (страница файла) → все сценарии модуля (файл) → сервис (папка) → продукт (командное пространство). Легко искать нужные макеты. С палитрой не стоит упарываться: базовые токены → семантические роли → только там, где реально припекло, компонентные токены. Иначе получатся тысячи уникальных цветов, которые никто не сможет поддерживать. У Фигмы есть ограничение в 2 ГБ на вкладку, в которые должны уместиться и файл, и все подключённые библиотеки. Глобальный UI-кит включает дизайн-токены, базовые компоненты и универсальные элементы. Продуктовая библиотека — общие шаблоны, навигацию, паттерны продукта. Сервисные и модульные библиотеки — всё сложное и специализированное: экраны, тяжёлые лейауты, паттерны взаимодействия. Подход «Файл на компонент» подходит сверхкрупным компаниям. В обычных командах минусы перевешивают плюсы: падает производительность (медленнее отклик системы), больше рутины (правки надо проводить по цепочке файлов). Не всё в компоненте должно быть вариантом. Простые штуки вроде скрытия иконки, подмены контента и изменения текста надо делать через свойства компонента: boolean, instance swap, text. Это уменьшает комбинаторику вариантов даже сильнее, чем дробление по неймингу («button / basic», «button / icon»). Полезные практики: именовать слои по БЭМ-подобному принципу, чтобы совпадало с именами в коде, на странице компонента показывать все возможные состояния и лог изменений, переносить компоненты из локальных библиотек в глобальные, как только они начинают жить в не… Читать полностью →
❤2
32 · 1.6K ·
U
UX Notes
Ссылка
нажмите — покажем
Анна Исламова написала, как использовать деинфлюэнсинг — критические пользовательские разборы продуктов — для подготовки UX-исследований. В обсуждениях люди описывают спрятанные кнопки, неработающие поля и сложности отмены подписки. Это источник гипотез для discovery массовых продуктов с активным публичным обсуждением: можно обнаружить расхождение между обещаниями и реальным опытом. Выбор площадки влияет на находки: короткие ролики показывают заметные затруднения, длинные видео и текстовые обсуждения позволяют раскрыть многошаговые сценарии. Поэтому выборку стоит собирать на нескольких платформах. Для SaaS и финтеха подходят Reddit и Hacker News. Предлагаемый процесс начинается со сбора минимум 200 видео с двух и более платформ за период от трёх месяцев: так отдельный скандал меньше искажает картину. Критику с партнёрскими ссылками на альтернативы исключают. Речь расшифровывают, жалобы группируют по темам. Минимум 20% материалов независимо разбирают два исследователя для проверки согласованности. Результат — карта проблем с частотой упоминаний и тональностью. Затем проводят по 6–8 интервью на каждую тему, чтобы подтвердить, опровергнуть или уточнить гипотезы. Проверенные темы выносят в опрос 100–200 реальных пользователей и расставляют приоритеты для дизайна. Весь цикл рассчитан на 4–7 недель. Его преимущество — масштаб поиска гипотез. Частота жалоб не показывает распространённость проблемы: алгоритмы усиливают эмоциональный контент, а люди с нейтральным опытом редко публикуют разборы. #ugc #research
❤4👍1🔥1
6 · 1.5K ·
U
UX Notes
Ссылка
нажмите — покажем
Павел Шерер написал о моделях информационной архитектуры — предпоследняя статья цикла. Куртку можно найти через каталог, поиск, фильтры или подборку. Это разные способы добраться до одного товара, основанные на его свойствах и связях. Навигация показывает лишь часть этих отношений. В плоской модели объекты находятся на одном уровне. Иерархия организует категории от общего к частному. В магазине товар привязан к конкретной подкатегории, а родительские разделы показывают товары всех подкатегорий. Сетевая модель добавляет перекрёстные связи: участие в подборке или сочетаемость с другими товарами. Их смысл и направление нужно определять отдельно: то, что к куртке подходят брюки, автоматически не создаёт обратную связь от брюк к куртке. Фасеты — характеристики товара, по которым фильтруют каталог: категория, цвет, материал, цена. В выдачу попадают товары, соответствующие всем выбранным фильтрам. В фильтре цвета можно выбрать чёрный и синий: подойдёт чёрная или синяя куртка. Товар с неизвестным материалом не проходит фильтр по хлопку. При тех же выбранных значениях фильтров порядок их применения не меняет результат. Для каждой пользовательской задачи зафиксируйте нужные данные, связи, правила отбора и представление. Если цена куртки превысит заданный бюджет, она исчезнет из выдачи, отфильтрованной по цене, но останется в редакционной подборке. Дерево категорий проверяют через tree testing, фильтры и переходы — на прототипе. Время выполнения оценивают вместе с успешностью. Если меняются правила связей, пересмотрите зависимые решения. Если товару разрешили принадлежать нескольким подкатегориям, проверьте, чтобы в родительской категории этот товар не дублировался, и решите, каким будет путь в хлебных крошках. #information_architecture
❤8👍3🔥2
23 · 1.2K ·
Архив по месяцам
октябрь 2026сентябрь 2026август 2026июль 2026июнь 2026май 2026апрель 2026март 2026февраль 2026январь 2026декабрь 2025ноябрь 2025октябрь 2025сентябрь 2025август 2025июль 2025июнь 2025май 2025апрель 2025март 2025февраль 2025январь 2025декабрь 2024ноябрь 2024октябрь 2024сентябрь 2024август 2024июль 2024июнь 2024май 2024апрель 2024март 2024февраль 2024январь 2024декабрь 2023ноябрь 2023октябрь 2023сентябрь 2023август 2023июль 2023июнь 2023май 2023апрель 2023март 2023февраль 2023январь 2023декабрь 2022ноябрь 2022октябрь 2022сентябрь 2022август 2022июль 2022июнь 2022май 2022апрель 2022март 2022февраль 2022январь 2022декабрь 2021ноябрь 2021октябрь 2021сентябрь 2021август 2021июль 2021июнь 2021май 2021апрель 2021март 2021февраль 2021январь 2021декабрь 2020ноябрь 2020октябрь 2020сентябрь 2020август 2020июль 2020июнь 2020май 2020апрель 2020март 2020февраль 2020январь 2020декабрь 2019ноябрь 2019октябрь 2019сентябрь 2019август 2019июль 2019июнь 2019май 2019апрель 2019март 2019февраль 2019январь 2019декабрь 2018ноябрь 2018октябрь 2018сентябрь 2018август 2018июль 2018июнь 2018май 2018апрель 2018март 2018февраль 2018январь 2018декабрь 2017ноябрь 2017октябрь 2017сентябрь 2017август 2017июль 2017июнь 2017май 2017апрель 2017март 2017февраль 2017январь 2017декабрь 2016ноябрь 2016октябрь 2016

Открытая публичная лента из поискового индекса ChatCrawler — «Google по публичному Telegram»; обновляется по мере обхода площадки. Время — UTC.

Только публичный контент, официальный API Telegram. О проекте · Вопросы · Границы индекса · Убрать страницу из выдачи · Каталог · Поиск · Как мы считаем