25188
Чат читателей: @uxnoteschat В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads Включён в перечень Роскомнадзора: https://gosuslugi.ru/snet/67a9a56970de7b4d761a81ae
Алиса Колядова поделилась мыслями о проектировании таблиц.
— Представляйте повторяющиеся данные в виде таблицы, когда пользователю надо сравнивать строки, работать с их множеством, редактировать данные (в том числе массово), фильтровать и искать по структуре, когда важна плотность данных;
— Либо если пользователи для решения конкретной задачи привыкли работать с таблицей;
— В остальных случаях подойдут списки и карточки;
— Если в таблице много столбцов, будет сложно обрабатывать столько параметров. Возможно, большую таблицу можно разделить на несколько небольших с параметрами, нужными для решения конкретной задачи;
— Например, таблица для распределения заявок и таблица для контроля их выполнения. У первой не будет фильтров, а у второй строки будут подкрашиваться в зависимости от статуса;
— Рекомендацию объединять связанные данные в одной ячейке можно встретить в разных гайдлайнах, например, у «Контура»;
— Но это ломает визуальный ритм, снижает плотность таблицы, усложняет сравнение и поиск нужных данных. В небольших таблицах это может сработать, в длинных рабочих таблицах — нет;
— Если появляется горизонтальный скрол, можно слева закрепить первый столбец (который даст контекст остальным данным), а справа — важные показатели и действия;
— Но важно подробно описать поведение таблицы, так как здесь большое поле для трактовок со стороны разработчиков.
#table
Станислав Хрусталёв написал об интересных решениях ВкусВилла в списке товаров и корзине.
— Если товар закончился, но запланирована поставка, отображается кнопка «Доставить завтра». Полезно, если клиент готов подождать;
— Если информации о поставке нет, отображается кнопка «Привозите больше». Так можно оценить потенциальный спрос;
— При нажатии на неё появляется список аналогов, которые можно сразу добавить в корзину. Это повышает вероятность, что клиент выберет что-то взамен;
— Остатки товара, особенно если осталось мало, побуждают не отвлекаться от заказа;
— Выбрать количество товаров можно с помощью степпера (если надо изменить значение чуть-чуть), барабана (если значение через степпер выбирать долго), а если нужно нецелое число, есть текстовый ввод;
— Можно добавить комментарий сборщику;
— Если заказ будет получать кто-то другой, можно не только ввести его номер (или выбрать из списка контактов), но и узнать, как пройдёт дальнейшая коммуникация с получателем.
#cart #list #ecommerce
Светлана Диденко написала об эвристиках Бена Шнейдермана для проектирования интерактивных систем.
— Последовательность: элементы с одинаковым смыслом выглядят одинаково. Такую систему проще поддерживать, она становится предсказуемой, поэтому пользователи быстрее справляются с задачами и реже обращаются в поддержку;
— Информирование о том, что произошло, происходит и произойдёт. Пользователи меньше переживают и могут скорректировать свои действия;
— Снижение вероятности совершения ошибки: подсказки о форматах, ограничение опасных действий;
— Возможность отмены действия снижает страх ошибки и ускоряет обучение;
— Снижение нагрузки на память позволяет сосредоточиться на задаче и прилагать меньше когнитивных усилий: подсказки, автозаполнение, сохранение фильтров, отображение текущих параметров;
— Поддержка разных уровней опыта: структура, подсказки и последовательные шаги для новичков, горячие клавиши, шаблоны, массовые действия для опытных;
— Мгновенная обратная связь: каждое действие пользователя сопровождается откликом системы. Это ускоряет работу и уменьшает количество повторных действий;
— Ориентация на пользовательские задачи, а не на структуру данных или внутренние процессы. Пользовательский сценарий определяет логику экранов, набор действий и состав элементов.
#heuristic
Татьяна Бублик написала об основах продуктовой колористики.
— Модель OKLCH удобнее RGB, так как сложно задавать цвет, меняя количество красного, зелёного и синего;
— Также она поддерживает расширенный набор цветов P3, что актуально для современных устройств, которые поддерживают на 30% больше цветов, чем есть в RGB;
— Стоит придерживаться схемы процентного соотношения цветов в продукте 3-17-80 (или её вариаций), где 3% — бренд-цвет для всех самых главных акцентов, 17% — остальные хроматические цвета, 80% — белый, чёрный и оттенки серого (ахроматические);
— Так акценты не будут теряться в макетах;
— В серый и чёрный можно подмешивать хрому бренд-цвета, чтобы усилить восприятие бренда, сделать их комфортнее и интереснее;
— Лайфхак: делать длинную тоновую растяжку (25–30 цветов). Это даст при любом изменении или масштабировании подобрать нужный тон.
Копия на Dsgners. #color
Ольга Свистунова написала, как работают UX-редакторы в Госуслугах и каких правил придерживаются.
— Метрики: доля незаконченных заявлений, доля отказов ведомств предоставить услуги, среднее время заполнения заявлений, число обращений в поддержку, процент дизлайков к ответам на частые вопросы, CSI после получения услуг;
— Полезные вопросы: не разъясняет ли текст очевидные вещи, нет ли в нём избыточности и повторов, не потерялся ли смысл после редактуры, не пропал ли нужный для понимания контекст;
— Важно понимать, кто его будет читать. Например, несовершеннолетним пользователям стоит напомнить о получении согласия законного представителя;
— Любой текст подчиняется редполитике. В ней есть словарь терминов, чтобы не путать пользователей синонимами одного и того же понятия;
— Достижению единообразия также способствует коллекция шаблонов. Шаблоны и редполитику верифицирует правительственная комиссия, что помогает убеждать заказчиков: писать надо так, а не иначе;
— Краткость: длинные слова меняют на короткие, отглагольные существительные на глаголы, очищают текст от метафор, эвфемизмов, речевых штампов и вводных слов («наверное», «безусловно»);
— Пишут не в чём ошибка, а как должно быть: «Заполните поле», «Допустимы русские буквы и цифры»;
— Если действия необратимы, пишут, что произойдёт при нажатии на кнопку;
— Сложные юридические, технические и внутренние термины заменяют на понятные пользователю. Потенциально незнакомые аббревиатуры расшифровывают при первом упоминании;
— Ссылки ставят на слова, которые объясняют, куда ссылка приведёт. Например: «Подтверждённую биометрию регистрируют в центрах обслуживания»;
— Находящийся перед глазами текст должен быть понятен без контекста и ранее пройденного пути;
— Текст в кнопках однообразен, чтобы не путать: «Верно» (подтверждение данных), «Закрыть» (закрытие справочных попапов), «Продолжить» (переход к следующему экрану), «На главную»;
— Заголовок должен быть максимально информативен, так как часто пользователь внимательно читает только его. Заголовок должен быть связан по смыслу с кнопкой;
— В первую очередь пишут для большинства. Нет смысла погружать всех в нюансы, которые важны для небольшой категории людей или в нестандартных ситуациях;
— Поэтому можно не искать гендерно независимые формулировки, если услуга рассчитана в основном на женщин или мужчин;
— Фигма-плагин Text Prettier автоматически проставляет неразрывные пробелы, меняет «е» на «ё», "кавычки" на «ёлочки», дефис на тире и наоборот.
#writing
Андрей Богданов написал книгу «Дизайн-стройка. Как создать команду мечты за 90 дней», и вот что там было о ревью макетов лидом и другими дизайнерами:
— Созваниваться с дизайнером и вместе пробегаться по макетам оказалось плохой идеей;
— Если макеты оформлены плохо, дизайнер может их пояснить, но всем остальным придётся иметь дело с непонятным артефактом;
— Непроработанные ветки сценариев, корнер-кейсы, используемые компоненты во время беседы выпадают из фокуса внимания;
— Из-за невозможности как следует подумать рекомендации иногда получаются необдуманными;
— В некоторых компаниях встречается кросс-ревью (дизайн-чек в Альфа-Банке), когда макеты смотрит не лид, а другие дизайнеры (в том числе из других команд);
— Эта практика позволяет разгрузить лида и прокачать навыки ревью у дизайнеров;
— Но она не должна замещать ревью дизайн-лида, так как последний отвечает за качество дизайна в своей команде. Без ревью он теряет связь с продуктом и выпадает из контекста;
— Если будете внедрять кросс-ревью, подумайте, как обеспечить ответственный подход ситуативных ревьюеров и разумный контроль со стороны лида.
#design_check #management
Саша поделился материалом о списке товаров в интернет-магазине из внутренней базы знаний студии KISLOROD.
— В списке товаров пользователь получает первую информацию о них. Фильтр, сортировка, теги с популярными запросами клиентов, доп. информация при наведении курсора помогают быстрее находить нужное, не перемещаясь на страницу товара;
— Карточка товара — компромисс между желанием показать больше параметров товара (разным людям важно разное при выборе) и уместить больше товаров на странице;
— В ней всегда должны быть универсальные характеристики товара: изображение (несколько переключающихся изображений), название (и тип), цена (и перечёркнутая старая, размер скидки), вариации товара (цвета, размеры, материалы);
— Изображения подбирайте с учётом специфики. Иногда надо показать товар в интерьере, разъёмы крупным планом, содержимое матраса в разрезе;
— В смешанных списках надо отображать тип товара. Название «Тинейджер» не говорит о том, что продаётся комплект детского постельного белья;
— Если товар продаётся упаковкой, для удобства сравнения показывайте также цену за штуку, за килограмм;
— Индивидуальные характеристики: рейтинг, совместимость с другими товарами («подходит для ноутбуков 15,6 дюйма»), размеры, рекомендации (на какой возраст ребёнка рассчитано), особые характеристики (для специфичных товаров), артикул;
— Рейтинг без количества оценок пользователи считают бесполезным. Он полезен в нишах, где сложно совладать с многообразием выбора (электроника, бытовая техника);
— Артикул полезен в нишах, где ищут конкретные модели;
— Где возможно, чтобы не перегружать карточки, заменяйте текст на понятные иконки, не пишите названия характеристик. В карточке бутылки вина понятно, что «0,7 л» — объём бутылки;
— Функция быстрого просмотра — зачастую лишь костыль для магазинов с плохой реализацией списка товаров. Надо кликнуть, дождаться загрузки модального окна. Иногда его принимают за страницу товара (и не находят там нужных параметров);
— Выделяйте в списке просмотренные товары (удобнее продолжить поиск при возвращении к списку товаров) и добавленные в корзину (чтобы найти совместимые товары, не покидая список).
#list
Александр Овчаренко написал о проектировании физических панелей управления.
— Смотреть на чужие решения на картинках недостаточно, надо взаимодействовать с ними. Трогайте устройства предыдущих поколений, синтезаторы и MIDI-контроллеры в музыкальных магазинах, панели в автомобилях и яхтах. Требуйте от начальства оплаты посещения выставок;
— У каждого элемента есть невидимая часть, находящаяся под поверхностью панели, со своими габаритами и идущими к ней проводами. Это влияет на их расположение;
— Место под поверхностью панели занимает печатная плата, сама панель может крепиться разными способами. Из-за этого могут появиться места, где нельзя размещать контроллеры;
— Габариты часто зависят от внешних факторов. Например, от размера предыдущей версии панели, чтобы можно было одну заменить на другую;
— Компоновка согласно эргономическим и пользовательским требованиям → Совместно с инженерами приближенная к реальности версия;
— Делайте физические прототипы из картона и бумаги или с помощью 3D-принтера, чтобы получить объёмность макета в реальном размере;
— Для оценки выбора положения и размера поворотных ручек подходят любые крышки (от газировки, зубной пасты). Они сделаны так, чтобы было удобно крутить, что лучше любых абстрактных цилиндров;
— Подойдут ручки и колпачки с другого оборудования. Главное, не приклеивать намертво;
— Если панель предполагает наличие типовой клавиатуры или трекбола, в картонной основе можно сделать вырез для них и вставить заподлицо;
— Цена ошибки высока: панель даже из типовых компонентов часто дороже сенсорного экрана с HMI;
— Внимательнее относитесь к крайним случаям использования панели, так как элементы управления статичны;
— Настаивайте на участии в предпроизводственных этапах. Инженеры могут что-то не так понять или отойти от вводных из-за объективных причин (запланированные энкодеры оказались недоступны).
#industrial
Светлана Диденко написала о требованиях российских законов к интерфейсам российских веб-сервисов.
— Нельзя использовать иностранные сервисы для авторизации. При входе по номеру телефона допускаются только российские операторы связи;
— Если у вас подписка с ежемесячным списанием, информация об этом должна быть в форме подписки, включая сумму и дату следующего списания;
— Кнопка отмены подписки должна быть такой же заметной, как и форма подписки;
— Если у вас есть поле ввода (подписка на рассылку, онлайн-чат), владелец сайта становится оператором данных и должен иметь политику конфиденциальности;
— В ней должна быть обоснованы все собираемые данные. Спрашиваете в форме дату рождения — обоснуйте, зачем;
— Ссылка на неё должна находиться в одном визуальном блоке с кнопкой отправки формы. Она должна быть доступной даже при открытой визуальной клавиатуре;
— Согласие на обработку персональных данных пользователь должен давать осознанным действием — включив изначально выключенный чекбокс;
— Для каждой цели обработки данных (регистрация, рекламная рассылка) нужен свой чекбокс;
— Текстовая подпись к чекбоксу должна содержать ссылку на согласие;
— Скрипты отслеживания должны активироваться только после нажатия на кнопку «Принять» в попапе, сообщающем о кукисах;
— Этот попап не должен блокировать доступ к основному контенту;
— Реквизиты компании (ИНН, ОГРН, наименование организации) должны быть текстом, чтобы их было легко скопировать для проверки;
— Информация о продавце должна быть в оферте, подвале и на странице с контактами.
#laws
Дмитрий Сергушкин написал об окнах подтверждения действий.
— Такое окно прерывает сценарий, чтобы пользователь дополнительно подумал о совершаемом действии и избежал ошибки;
— Это полезно, если действие необратимо, ведёт к серьёзным последствиям (финансовые транзакции) или эффекту домино (влияет на множество связанных объектов), совершается редко (и пользователь не помнит всех последствий) или требует явного согласия;
— В остальных случаях, а также для частых действий его лучше не использовать, чтобы пользователь не стал подтверждать всё на автомате;
— Если возможно, лучше сделать действие обратимым и сразу показывать результат его выполнения, чтобы пользователь мог отреагировать;
— Также можно уменьшить потребность в окнах подтверждения, отделяя серьёзные действия от остальных и разделяя их запуск на несколько шагов;
— В заголовке пишите, что пользователь собирается сделать: «Удалить ваш аккаунт навсегда?»;
— На кнопках — конкретные действия: «Удалить аккаунт», «Оставить аккаунт»;
— Добавьте визуальные подсказки вроде иконки корзины или красного цвета кнопки, подтверждающей деструктивное действие;
— Для критически важных действий можно добавить препятствие вроде поля, в которое надо, например, ввести название удаляемого пространства или слово «Delete»;
— Есть приём «Hold to confirm», когда для подтверждения действия надо нажать на кнопку и удерживать её нажатой;
— Можно показывать окна подтверждения только при обнаружении аномалий вроде необычной суммы транзакции или получателя.
In English. #modal
🎄С Новым годом, друзья!
В этом году опубликовал 126 постов — 201к символов суммарно (1,6к в среднем на пост). Они получили 646к просмотров (5,1к в среднем), 4,2к реакций (33 в среднем), из которых отрицательными были 6%, 9,1к пересылок (72 в среднем).
— Самый длинный пост — тезисы из разговора с Дмитрием Ваницким о творчестве и дизайне (пришлось разбить на 2 поста);
— Самый просматриваемый — как говорить о повышении зарплаты;
— Самый залайканный — репост заметки Вовы Зимина о том, что продуктовые дизайнеры заебали;
— Самый залайканный, если исключить репосты, и одновременно с этим самый смешной — картинка из UX Notes образца 2014 года;
— Самый задислайканный (одновременно с этим самый вовлекающий) — о повышении эффективности работы продуктовых дизайнеров;
— Самый комментируемый — предложение поделиться в комментариях каналом, который может быть интересен читателям UX Notes;
— Самый пересылаемый — гайд для начинающих по Фигме: слои, автолейауты, ограничители, стили, компоненты и варианты.
Собрать статистику, которой нет даже в ТГСтате, помог «Канал нормального фрилансера».
2/2
— Применение дизайн-мышления в продуктовом дизайне затруднено жёсткими рамками, в которых находится дизайнер: табуретка Нормана, специфика конкретного продукта, видение продакта;
— Самому фреймворку, который продают консалтинговые компании вроде IDEO, не хватает системного мышления;
— Хорошо, когда ограничения есть. Это стимулирует творчество, повышает сложность, что может превратить скучную задачу в нескучную и ввести в состояние потока. Но слишком жёсткие ограничения могут привести к пересыханию творческого ручья;
— Чтобы интерфейс оставался интуитивно понятным, следует придерживаться сложившихся паттернов, помнить о законе Якоба. Излишняя креативность может навредить;
— Но когда понимаешь, что делаешь, паттерны можно нарушить;
— При взаимодействии с произведением искусства возможен катарсис. Во время дизайна: эмоциональный провал из-за клиентского «это совершенно не то», приятное чувство, когда уже почти готово и полируете результат (это ловушка!), удовлетворение от завершения работы, чувство причастности, когда кто-то пользуется результатом вашего труда и хвалит его;
— AI повышает креативность, забирая простые задачи (или помогая их автоматизировать вайбкодингом) и высвобождая человеческие ресурсы для задач посложнее. Может взглянуть на проблему под совершенно другим углом (AI для игры в Го);
— Чтобы прокачать креативность: читайте хорошую художественную литературу, общайтесь с непохожими на вас людьми, «набивайте коробочку» в том числе и не связанными с дизайном знаниями, повышайте планку вкуса;
— Попробуйте увидеть скрытые паттерны, по которым вы выполняете свою работу — свой модус операнди. Определив их, попробуйте нарушить;
— Давайте мозгу время переварить информацию и синтезировать идеи. Утро вечера мудренее, особенно, если вы уже не эффективны и хотите доделать просто чтобы поставить точку;
— Да и вообще работать надо по расписанию, не рассчитывая на появление музы. Но если муза пришла вне расписания, не гоните её;
— Если пришла идея, постарайтесь зафиксировать её полностью. Лучше черновик всей песни, который можно потом довести до ума, чем идеальный отрывок, который может вообще ни к чему потом не подойти (Рик Рубин);
— Результат работы продуктового дизайнера не будет выглядеть таким же креативным, как работа моушен-дизайнера. Но и у него найдутся свои ценители.
Видео. #process
Почему-то считается, что дизайнеру или программисту круто бы думать об интересах бизнеса, что инженер, который о них думает, ценнее, чем тот, который не думает.
А мне кажется наоборот. У вас уже есть бизнесмен, пусть он о них думает. Зачем компании два бизнесмена, один хороший, другой плохой? Мне кажется, дизайнер должен думать про дизайн, программист — про программы. И целью своей себе ставить сделать хороший дизайн или хорошую программу, а не угодить бизнесу. И вот в их конфликте возникнет некое целое, которое больше частей, их синтез.
Грубо, дизайнера должно заботить, чтобы интерфейс хорошо выглядел и им было удобно пользоваться, а не метрики. Метрики будут заботить бизнес. Если дизайнера будут заботить метрики, и бизнес будут заботить метрики, получится не конфликт и поиск его решения, а повторение и топтание на месте.
Я много раз разговаривал с инженерами, которые жаловались, что бизнес не дает им времени на рефакторинг или сделать нормально. Ну так он и не должен давать! Бизнес интересует бизнес, а вас, как инженера, должно интересовать, как сделать качественно, устойчиво, эффективно. К вам никто никогда снаружи с этим запросом не придет, это должна быть ваша собственная мотивация, ваши собственные ценности, ваши собственные стандарты, понимаете?
И к вам приходят, чтобы вы их продавливали. А бизнес бизнес и без вас сделает.
Артемий Талалуев написал о повышении эффективности работы продуктовых дизайнеров.
— Когда обратить внимание на эффективность дизайнера?
— Тот использует устаревшие подходы и инструменты;
— Демонстрирует низкую дисциплину и самоорганизацию: опоздания, несоблюдение дедлайнов, отсутствие планов на день, неделю или месяц, хаос в макетах;
— С трудом объясняет решения и коммуницирует с командой;
— Нет инициативы: не предлагает улучшений, слабо участвует в обсуждениях, перекладывает задачи на других;
— После проверки лидом его макеты постоянно требуют доработки, часть комментариев теряется, решения не соответствуют требованиям или предоставляются не полностью, не продуманы пограничные случаи;
— 2–3 месяца работы дизайнера не привели к заметному улучшению метрик или UX-показателей. Значит, он не стремится решать пользовательские проблемы, выжидает, берёт минорные задачи;
— Лид должен фиксировать примеры перечисленного. Когда станет ясно, что это не разовые ошибки, следует встретиться с дизайнером;
— На встрече: обозначьте зону ответственности и ожидания от работы, KPI или OKR, критерии качества работы и покажите, где дизайнер не соответствует;
— Можно запустить Performance Improvement Plan (PIP): зафиксировать проблемы и измеримые критерии их исправления, дать от 2 до 6 недель на это;
— Например, критерий при проблемах с инициативой: «Дизайнер каждый месяц предлагает не менее 4 идей по улучшению продукта»;
— Не оставляйте дизайнера один на один с проблемами. Компания и лид могут помочь, например, предоставить доступы к курсам;
— Неисправление проблем в рамках PIP может быть поводом для увольнения в соответствии с Трудовым кодексом РФ. Для этого по каждому нарушению запрашивайте у дизайнера письменное объяснение;
— PIP можно использовать для развития, а не только как антикризисный инструмент.
#management
Хороший дизайн — это когда каждая деталь работает на пользователя.
Команды VK знают: красота — это не только эстетика, но ещё и ясность, удобство и эмоции. Смотрите истории cотрудников VK, и находите вакансии по душе!
Настройка количества товаров с мусоркой
Иногда встречается такой дизайн элемента для настройки количества товаров в корзине, где вместо минуса рисуют мусорку — мол, товар уже удалится, а не просто уменьшится количество.
Сначала это кажется логичным, ведь уменьшение количества и удаление — разные вещи, и выглядеть должны по-разному. Возможно, кто-то из дизайнеров в этом видит возможность дополнительно предупредить об удалении. Наверное, кому-то просто кажется остроумной такая динамичность.
Но вообще-то хорошо бы, чтобы при уменьшении количества до нуля, товар не удалялся сразу: у пользователя должно быть право на ошибку и возможность вернуть товар обратно. Если же удаление товара неотменяемое, то превращение минуса в мусорку не поможет предотвратить ошибку; тогда надо дисейблить минус, а кнопку удаления ставить отдельно. Что касается остроумности, то это только в голове дизайнера мусорка — частный случай минуса для одного значения, но для пользователя изначально никакого минуса нет, а есть лишь эта мусорка, ведь обычно количество будет «1 шт.».
Короче, не рекомендую так делать. Элемент хуже узнаётся, ощущается нестабильным и не решает никакой задачи.
Таня Двенадцатова написала о прожарке.
— Она помогает улучшать разрабатываемые фичи и синхронизировать команды. Она похожа на совместное проектирование;
— Это еженедельная встреча на 1–1,5 часа. Лучше выбрать время в начале дня, когда все ещё свежи (самое то для креативных и аналитических задач);
— Докладчики записываются заранее: указывают, какую задачу решали, и добавляют ссылку на артефакт;
— На встрече они презентуют своё решение и отвечают на вопросы и критические замечания зрителей (обычно выстраивается очередь из поднявших руки);
— Вопросы и комментарии лучше не добавлять заранее. Так и комментирующие не тратят на это много времени, и дискуссия получается более живой;
— Обычно участвуют дизайнеры, исследователи, продакты и UX-редакторы, но заглядывают и представители бизнеса, методологи, маркетологи;
— Полезно фиксировать, о чём договорились во время прожарки, чтобы потом учесть это при доработке фичи;
— Участие в прожарке (и необходимость успешно её пройти) можно сделать обязательным шагом в процессе. Для прохождения прожарки может потребоваться несколько итераций;
— По отдельным фичам (незначительное влияние на клиентский путь, регуляторка) можно ограничиться прожаркой и не проводить пользовательское исследование, если зрителям всё было понятно;
— Важно донести, что это не повинность, а полезный процесс. Также это маркер атмосферы и культуры в коллективе.
#design_check
Бесплатный онлайн-интенсив для AI-тренеров от Яндекса
AI-тренер — это специалист, который обучает нейросеть генерировать корректные, грамотные и релевантные запросам пользователя ответы.
Приглашаем на интенсив от экспертов Яндекса — и новичков, и тех, у кого уже есть опыт. Лучших позовём в команду, которая обучает нейросети Alice AI (Алиса, Яндекс, Поиск).
Набираем две группы
🟣 28 февраля и 1 марта
🟣 14 и 15 марта
Все встречи пройдут онлайн, по московскому времени, поэтому участвовать можно из любой точки мира.
🧑🏫 Что вас ждёт
– Несколько небольших заданий на логику и русский: выполняете самостоятельно в удобное время.
– Вебинары о работе AI-тренера и принципах фактчекинга, тестирование.
– Практика для тех, кто успешно справится с заданиями первого дня.
♨️ Бонус
Каждый участник по завершении интенсива получит промокод на Яндекс Маркет номиналом 3000 рублей.
Мы ищем кандидатов, которые умеют:
– логически мыслить;
– быстро находить информацию;
– с интересом осваивать новое;
– проверять достоверность источников;
– грамотно писать.
Лучшие получат офер в Яндекс:
– полностью удалённая работа;
– нужны только компьютер и стабильный интернет.
Регистрируйтесь и приходите!
Реклама. ООО "Яндекс". ИНН 7736207543
Андрей Шапиро написал книгу о рабочих историях и карте реализации историй.
— Общее представление о них можно получить из опубликованной ранее статьи;
— В книге рассмотрены недостатки User stories, Job stories и некоторых других шаблонов (шаблон вопроса, похоже, используется в Модели информационных ожиданий «Собаки Павловой»);
— Например, они могут наводить на одно конкретное решение, которое часто оказывается неверным, так как задача ещё слабо изучена, либо проблема лишь подразумевается и формулируется в виде решения-кандидата;
— Оперировать альтернативами в разработке крайне важно, так как время и деньги ограничены, и непонятно, какое решение уложится в срок и бюджет;
— Они не описывают предметную область, что нередко приводит к последующему перепроектированию;
— Рабочая история как текстовая модель построена таким образом, чтобы этих недостатков избежать;
— Её состав: цель действия (зачем?), носитель (кто или что выполняет действие), ситуация (контекст, когда происходит действие), способ действия (каким образом что-то делается), объекты оперирования (с чем взаимодействует носитель, что получается в итоге);
— Кроме шаблона истории, инструкции по его заполнению, примеров из многолетней практики и разбора потенциальных ошибок при составлении историй в книге есть даже примеры бесед с заказчиком, в ходе которых история появляется и обрастает деталями;
— Карта реализации историй, подобно User story map, собирает все истории вместе и помогает увидеть всю картину, а также позволяет дополнить истории информацией о возможных формах их реализации (варианты технических решений) и составе блоков соответствующего интерфейса;
— Можно сначала записать «кнопку», которую хочет добавить стейкхолдер, и потом разобраться с её первопричиной и контекстом. Главное, чтобы все слои в конце концов оказались согласованы.
#user_story #book
Илья Бирман написал о кнопке «На главную» в пустом состоянии списка.
— К списку актов (и другим подобным разделам) пользователь переходит с помощью обычной навигации приложения;
— Она включает возможность перехода на главный экран и в другие разделы;
— Неправильно менять привычный навигационный паттерн из-за содержания конкретного экрана. Кнопка «На главную» не нужна;
— Если пустой список актов отображается из-за какой-то проблемы, то этот экран фактически — сообщение об ошибке;
— Хорошее сообщение об ошибке должно помогать её решить. В данном случае была бы уместна кнопка «Обновить» или «Запросить заново».
#error #empty_state
Как показывать визуал в портфолио?
Бывает, смотришь портфолио с продуктовыми кейсами, там внутри гипотезы, тесты, анализ — гора полезной инфы, но вот визуально изменения не радикальные.
Будем честны, редко какая задача в продукте (особенно внутреннем, сервисном или b2b) обладает зрелищным дизайном. Чаще наоборот — постороннему наблюдателю нужно еще наловчиться, чтобы понять, а что здесь визуально изменилось.
А кроме того, непонятно, где заслуги и косяки дизайнера, а где дизайн-система. Может, из неё тянется легаси пятилетней давности — стрёмные тени, лишние дивайдеры, грязноватые цвета, которые дизайнер не убирает, потому что весь продукт надо перевозить на другую версию.
Ну, бывает, все там были.
Для дизайнера загвоздка в том, что собеседующий лид точно будет оценивать визуал. Даже если он нулевой или практически отсутствующий. Даже если речь о продукте, где не требуется классный UI, а надо просто уметь чисто сверстать таблицу или модуль.
Лиду надо понять, что умеет кандидат с ограничениями и без них, к чему у него лежит душа и подойдет ли навык работы с UI в конкретном продукте.
🤩
На такой случай есть универсальный совет: соберите скрины с наиболее удачным и показательным UI на отдельной странице и назовите её «Визуал».
Пусть там не будет юзкейсов и полезного действия — просто скрины. Удачные варианты вёрстки модулей, примеры иконок, которые вы рисовали, концепты, не дошедшие до прода, но демонстрирующие ваши навыки без привязки к легаси-решениям, да и просто красивые маленькие детали.
У каждого продуктового дизайнера найдется хотя бы три-четыре приятных скрина, которыми он гордится (а если пока не находится ни одного, это повод что-то изменить в своей работе). Иногда для единообразия достаточно посадить скрины на однотонные светлые плашки, а иногда можно и без этого — будет уже красиво.
Это ход win-win: и дизайнеру хорошо, и нанимающему лиду понятно, и занимает минимум времени.
Анна Труфанова поделилась рекомендациями по дизайну интерфейсов для цеха.
— Тёмная тема — стандарт безопасности, так как не слепит оператора;
— Начертания Light и Regular на цеховых мониторах рассыпаются. Только Medium и Bold;
— Для цифр используйте моноширинный шрифт;
— Интерфейс в цеху — набор датчиков. Оператор должен считывать их за доли секунды, видеть критические показатели периферическим зрением. Для этого контраст делайте не 4,5:1, а 10:1 (ГОСТ Р ИСО 9241-303);
— Чтобы не перегружать пользователя и не приучать его игнорировать сигналы, интерфейс не должен начинать мигать красным при малейшем отклонении параметров. Не все отклонения одинаково критичны (ANSI/ISA-18.2);
— Дублируйте цветовое кодирование формой (ISO 9241), так как у 8% мужчин встречается дальтонизм. Красный треугольник — критическая авария, немедленная остановка. Жёлтый ромб — предупреждение, требуется внимание;
— Важна мышечная память. Не меняйте положения кнопок, особенно если их нажимают в аварийных ситуациях;
— Улучшайте эффективность через сокращение шагов: сохраните кнопку в привычном месте, но превратите 3 клика в 1;
— Всё для оперативного управления размещайте на расстоянии клика;
— Если датчик показывает проблему, интерфейс должен сам подтянуть кнопку действия в зону видимости;
— Располагайте ключевые индикаторы так, чтобы они попадали в естественную траекторию взгляда, а не в слепые зоны экрана.
#industrial
Новые материалы в @uxwork (кроме вакансий):
— Что делать, чтобы работники-зумеры не уходили из вашей команды;
— Поиск работы, когда ты давно в дизайне и есть управленческие позиции в резюме;
— Основные уроки из книги Криса Восса о переговорах «Договориться не проблема»;
— Поиск работы со стороны нанимающего менеджера.
Игорь написал об адаптации интерфейса android-приложения под увеличенный системный шрифт.
— Кроме размера системного шрифта на размер текста также влияет масштабирование экрана;
— Можно увеличить Display size и тогда, например, квадрат со стороной 48 dp будет отрисовываться не 132 физическими пикселями, а 144 (и станет больше);
— Комбинирование настроек может сделать важную информацию недоступной или ухудшить впечатление от интерфейса. В продукте Игоря 45% пользователей увеличивают текст;
— Текст можно обрезать: в начале, середине или конце. Скрытая часть заменяется многоточием;
— Можно сократить: заменить 99 000 000 на 99 млн. Но это не вариант там, где важна точность;
— Бегущая строка считается антипаттерном и применяется редко, если остальные способы не подходят;
— Перенос строк — через атрибут android:breakStrategy можно указать способ разбивки текста. Важно убедиться, что контейнер с текстом подстраивается под высоту контента;
— Авторазмер текста — текст меняет размер в зависимости от доступного пространства. Можно задать минимальное и максимальное значение, а также шаг изменения;
— Также можно добавить прокрутку внутри контейнера или вовсе использовать динамическую вёрстку, когда расположение элементов зависит от отображаемой информации;
— Приложение может вовсе запрещать увеличивать текст (это, конечно, ухудшает пользовательский опыт), либо делать это в собственных настройках (Телеграм);
— Это менее удобно пользователям и идёт вразрез с рекомендациями Material Design, но даёт разработчикам больше контроля и обеспечивает единообразие на разных устройствах.
#font #accessibility
20 самых популярных постов UX Notes в 2025 году в Телеграме:
1. Маша Русскова поделилась выводами из исследований текста в интерфейсе. +76 (очевидно позитивные реакции минус очевидно негативные)
2. Влад Крят написал об оформлении макетов. +64
3. Михаил Нежник подготовил для начинающих гайд по Фигме: слои, автолейауты, ограничители, стили, компоненты и варианты. +63
4. Юля Кондратьева написала, как помочь пользователю ждать. +61
5. Владимир Павлов написал об обманчивости метрик. +52
6. Вика Лисицына написала, должен ли дизайнер быть немного продактом. +50
7. Влада провалила вайтборд и написала о своих ошибках. +47
8. Виктор Теплов рассказал, как работать с иконками в Фигме. +46
9. Виктория Друзенко написала о прокачке UI. +45
10. Никита Самутин и Елизавета Демченко провели исследование рынка продуктового дизайна и поделились выводами. +45
11. Яна Георгиева написала о налаживании взаимодействия с разработчиками. +44
12. Станислав Хрусталёв прошёлся по ошибкам в отображении рейтинга товаров. +42
13. Илья Бирман написал о замедлении интерфейса. +42
14. Захар Бернадский написал о передаче цветовых токенов разработчикам приложений и базовом наборе токенов. +39
15. Антон из X5 Tech написал о скелетонах. +39
16. Рамазан Нурулаев написал о дизайне таблиц для цеха. +37
17. Илья Бирман написал о чекбоксах. +37
18. Женя Белодед поделился процессом и находками из исследования касс самообслуживания. +37
19. Дмитрий Ваницкий написал, как проектировать, чтобы вызывать и сохранять у пользователей состояние потока. +36
20. Анна Малинина написала об обработке ошибок при заполнении форм. +36
При равной оценке более вовлекающие посты — выше.
Я тут задумался на ночь глядя: каково сейчас только входить в дизайн с самых низов? Сомневаюсь, что это также как начинать игру заново, создавая нового персонажа. Только если на уровне Nightmare.
Давайте честно: ситуация на рынке хреновая. Пока компании пытаются AI-зировать свой штат, найм джунов упал на 13%. И это при том, что значительного прироста продуктивности не наблюдается. Конкуренция дикая — на одну вакансию приходится перегрызть сотню глоток, а требования такие, будто вы должны были родиться сразу помазанником дизайна.
Синьорити-пирамида сплющивается: опытные специалисты растут в тайтлах, а краник со свежей кровью перекрыт. То есть скоро все вырастут в лидов, а нового поколения тютю, нету. Через пару-тройку-пятерку лет рынок взвоет от нехватки синьоров, ибо им неоткуда будет взяться, а прямо сейчас мы в зоне турбулентности.
И я задумался, что бы я делал, если бы сегодня решил стать дизайнером с нуля? Наверное, я бы не ждал милости от рынка, а действовал бы так:
1. Принял решение: оно мне вообще надо? 💡
Я бы сел и честно ответил себе — готов ли я пахать как конь, пока не стану полезнее нейросети и тысячи таких же «хочу в IT»? Это больше не прогулка за легкими деньгами. Это марафон на выживание. Либо ты педалируешь до конца, либо тебя раздавит посередине. Третьего не дано.
2. Закопался бы в базу, а не гнался бы за трендами.⭐️
Пока все полируют портфели на Behance (что тоже важно), я бы сконцентрировался на том, чтобы что-то из себя предоставлять. Учил бы базу — вот эти скучные труды, которые типа всем надоели. Читал бы книги, а не короткие статьи-выжимки. А как понять что? Я бы заставил AI составить мне жесткий learning path по фундаментальной теории и практике проектирования. Глубокое понимание психологии и принципов, описанных десятки лет назад, — это то, что отличает дизайнера от «нейронной повторяшки».
3. Послал бы нахер курсы. 😡
Если вам нужна внешняя мотивация, куратор и поглаживание по голове, чтобы начать учиться — вы долго не протянете. В нынешних условиях выживают только те, у кого моторчик внутри, в желательно на высокооктановом ракетном топливе. Самообразование — единственный путь к уникальности.
4. Не ждал бы работу, а придумывал её. 💭
Я бы перестал слать пустые отклики на вакансии. Я бы искал проблемы вокруг, ставил эксперименты, собирал прототипы и проверял их на людях. Быть «микро-фаундером» своего маленького продукта или фичи — это лучший способ показать, что ты понимаешь, как работает бизнес и чего хочет пользователь, а не просто умеешь красить кнопки.
5. Заводил бы знакомства, а не инвайты. 📇
Пустые стуки в LinkedIn — это спам. Я бы шел туда, где говорят профи: смотрел доклады, читал кейсы и писал авторам. Не с просьбой «стань моим ментором», а с конкретными, глубокими вопросами по их решениям. Перенимание живого опыта через диалог — это самый быстрый лифт в индустрии.
Итог: Я ставлю на тех, кто инвестирует в свои мозги сейчас, но до конца дойдут точно не все. Время покажет, кто был прав, но ждать оффера «за красивые глаза» сегодня — это путь в никуда.
Работаем.
Мы с Дмитрием Ваницким поговорили о творчестве и дизайне, и креативности в жизни продуктового дизайнера. В UX Notes был анонс трансляции, теперь можно прочитать отредактированный транскрипт и посмотреть запись. А вот основные тезисы:
— Дизайн, как и другая работа в IT, хорошо оплачивается и достаточно интересен, но для входа требует знаний и навыков. Барьер для джунов сейчас довольно высок, учитывая AI и текущий рынок труда;
— Новички часто ошибочно считают, что дизайнер — креативный гений, занимающийся творчеством и самовыражением, когда вздумается, несколько часов в день;
— Поработав в реальных проектах, понимаешь, что это не так. Бывает, что в проектах самовыражается заказчик;
— Работать 4 часа в день реально — всё остальное время митинги (есть доля шутки). Считается, что дизайнер продуктивен до 6 часов в день — студии закладывают столько в сметы;
— Творчество — создание чего‑то нового, чего не было раньше. Чувственного самовыражения и конкретной задачи в нём может и не быть. И дизайн, и перестановка мебели — творчество;
— В психологии выделяют «самодеятельность», когда человек творит, но только в рамках своего мира. То есть делает перестановку, но не делится своими методами и никак не влияет на домен перестановок;
— Дизайн решает задачу и обычно это процесс проектирования, создания чертежа, по которому впоследствии уже и появится конечный объект;
— Стремление к созданию и любопытство заложены в нас природой и развиты эволюционно. Не страшно, если кого-то в этом ведут низменные мотивы (получение лайков);
— У разных дизайнеров и у разных специализаций свой творческий диапазон. Минимальный уровень свободы — оператор Фигмы;
— При этом нормально, когда 70% времени занимает рутина. А ещё новым может быть не получившийся артефакт, а процесс, благодаря которому он появился;
— Дизайн-процесс (вроде Стэнфордской 5-ступенчатой модели) не сильно отличается от творческого процесса, как его описывает, например, музыкальный продюсер Рик Рубин;
— Описание — лишь тень идеи. Чтобы по‑настоящему оценить, насколько идея хороша, её надо воплотить, насколько это возможно (Рик Рубин). В дизайн-процессе это этап прототипирования;
1/2
Что ж, вот и номинант на самый вовлекающий пост в UX Notes в этом году
Читать полностью…
В Markswebb написали, как интернет-магазины снижают количество возвратов.
— 4 из 5 причин возврата связаны с неправильным выбором товара. В 2024 году в мире возвращали каждый 6-й товар;
— В России в категории одежды и обуви (критичны размер и посадка) возвращают 30–45% заказов на маркетплейсах и 15–25% на сайтах брендов;
— В категории мебели и товаров для дома (важны габариты и стиль) — высокие средние чеки и дорогая транспортировка возвратов, поэтому их минимизация тоже актуальна;
— Lamoda показывает замеры, когда пользователь выбирает размер в карточке товара. Например, M/46 — обхват груди 92 см, талии 72 см, рост 170 см;
— ASOS автоматически выбирает размеры для пользователей, которые указали в профиле рост, вес и предпочтения по посадке для верхней и нижней части тела;
— Walmart предлагает примерить вещь на виртуальной модели с похожим телосложением. В Zalando для этого из 2 фото можно создать свой 3D-аватар;
— IKEA не только даёт посмотреть на мебель в своей комнате в AR, но может удалить из помещения текущую мебель;
— Обобщение информации из отзывов с помощью ИИ позволяет быстро узнать важные детали, плюсы и минусы (BestBuy);
— В Amazon есть поиск по отзывам — можно проверить характеристики, которые важны пользователю для выбора;
— ASOS ещё и визуализирует на диаграммах клиентские оценки, насколько вещь соответствует размеру, комфортна и качественна;
— В Wildberries можно просматривать только отзывы с фото или с видео, чтобы можно было быстро оценить, как товар выглядит в реальности;
— В маркетплейсе возврат по причине «Нашёл дешевле» можно снизить, показав в карточке товара, что есть варианты дешевле от других продавцов.
#retail #product_page
Седьмой год я провожу исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные?
Такой рейтинг будет полезен рынку. Дизайнерам — лучше понимать, где есть хорошие вызовы и комфортная среда для профессионального роста. Компаниям и дизайн-командам — видеть, что нужно докачать.
Буду благодарен, если вы пройдёте опрос. Результаты исследования опубликую в январе. Вы найдёте отчёт в крупных дизайн-каналах и изданиях.
P.S. Результаты за 2024, 2023, 2021, 2020, 2019 и 2018.