Ольга Петроченко написала, как уменьшить вероятность расхождения макетов и их реализации в мобильном приложении.

— Вёрстка — финальный макет, передаваемый в разработку, и его реализация в коде, которую разработчик передаёт дизайнеру на проверку;
— iOS, Android, WebView, десктопный и мобильный веб (плюс горизонтальная ориентация и планшеты) имеют особенности и технические ограничения, которые надо учитывать;
— Есть платформенные паттерны, но их могут игнорировать, пытаясь сформировать общий паттерн использования приложения, не зависящий от платформы;
— Технически на макете не всё собирается через таблицу или стек. Применять только Auto layout невозможно, так как элементы могут настраиваться через констрейнты, закрепляться на экране поверх остального контента, оставаясь его частью;
— Изображение не должно искажаться при изменении ширины контейнера. Как оно должно вести себя при увеличении ширины вьюпорта?
— Учитывайте это, и один макет будет работать с любой вёрсткой: широкой и узкой, горизонтальной и вертикальной;
— Паттерны навигации в iOS: Push (линейная со стрелочкой «Назад») и Present (модальная с крестиком). Можно комбинировать: внутри модальной использовать линейную (но пользователь может ошибочно закрыть весь флоу, по которому двигался в модальности);
— Чтобы не путаться, заведите под эти паттерны шаблоны в дизайн-системе. И вообще фиксируйте все правила, о которых договорились с разработчиками;
— Определяйте типы элементов в макете. От типа зависят их свойства: какие есть состояния, могут ли отображать загрузку и ошибку, нативные или кастомные это элементы, должны ли нажиматься;
— Передать информацию о типе можно, использовав определённые компоненты дизайн-системы (по крайней мере так реализовано в Альфа-Банке);
— Если этого не делать, разработчики будут возвращаться с вопросами или даже делать так, как сами (неправильно) поняли;
— Экран может быть реализован с помощью разных технологий: фронтовая вёрстка, серверная (например, BDUI), комбинированная;
— Технология определяет допустимый набор элементов и возможности их кастомизации. Например, весь экран — это модуль, и его можно только переиспользовать;
— Макеты — это техническое задание. Качественное ТЗ — залог лёгкого последующего дизайн-ревью. Но чтобы делать качественно, надо общаться с разработчиками (не стесняясь задавать глупые вопросы) и понимать технические нюансы.

#mobile #handoff

Читать полностью…

Роман Черных написал, как усложнить использование вашего продукта мошенниками. И почему важно об этом подумать при проектировании.

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

#security

Читать полностью…

Продолжаю ворчать, что раньше было лучше: трава зеленее, солнце ярче и дизайнеры дизайнеристее.

Как уже писал раньше, когда-то дизайнеры в первую очередь занимались дизайном. Придумывали графические приёмы, экспериментировали с сетками, рисовали странные интерфейсы, собирали компоненты с нуля и пытались удивить людей. Это было время, когда сама профессия только формировалась, а технологии постоянно открывали новые возможности.

Тогда многое приходилось изобретать заново. Не потому что так было правильно, а потому что готового ещё не существовало.

Сейчас ситуация другая.

Большинство интерфейсных решений уже устоялись. Есть готовые компоненты, библиотеки, дизайн-системы, паттерны поведения и целые экосистемы. Огромное количество продуктов живут годами, и им не нужен постоянный визуальный переворот. Им нужна поддержка, развитие, аккуратное масштабирование и предсказуемость.

И индустрия начала выращивать дизайнеров именно под такие задачи.

Людей, которые умеют не изобретать кнопку заново, а поддерживать консистентность. Не устраивать визуальную революцию в каждом релизе, а сохранять устойчивость продукта. Не делать «вау ради вау», а спокойно собирать работающие системы.

А мы, дизайнеры старой школы, которые выросли в другой среде и не до конца переключились на этот поворот, начинаем ворчать:

— «Да они вообще не умеют в дизайн».

Конечно не умеют так, как умели мы. Потому что профессия изменилась. И задачи изменились тоже.

Раньше ценностью было придумать новое.
Сейчас ценностью часто становится умение не сломать уже работающее.

Это не делает новое поколение хуже. Оно делает его другим.

Да и если честно, индустрии нужны все:
и те, кто ломает правила,
и те, кто умеет удерживать систему,
и те, кто двигает стиль,
и те, кто двигает продукт.

Все профессии важны, все профессии нужны.

Читать полностью…

В Т-Банке написали о дизайн-ревью и поделились чеклистом, что проверить кроме статичного отображения макетов.

— Дизайн-ревью — этап, на котором дизайнер проверяет, насколько разработанная фича соответствует дизайну;
— На практике оценивают не только статичные макеты, но и взаимодействие;
— Например, с какой анимацией открывается целевой экран и какими жестами его можно закрыть;
— Блокировка свайпа вниз на модальном экране должна быть обоснована и использоваться только в крайних случаях;
— Как загружается контент: отображается только один индикатор загрузки (либо лоадер, либо скелетон), скелетон не отображается, если загрузка занимает меньше 300 мс, скелетон отображается не менее 500 мс, чтобы избежать «промигивания»;
— Как работает скрол: отображается только если необходим, и имеет корректную зону перемещения (обычно от навбара до таббара или Home indicator), не отображается внутри элементов дополнительно;
— Скрол не останавливается при тапе на интерактивные элементы (кнопки, поля), есть анимация при достижении края экрана;
— Реакция на нажатие: интерактивные элементы реагируют на нажатие, есть Pressed state, не смешиваются анимации (при нажатии кнопки не продавливается карточка, и наоборот), зоны нажатия соответствуют ожиданиям пользователя и увеличены у мелких элементов (иконки, крестики);
— На что можно обратить внимание в статике: реализация Corner smoothing, обрезание текста (через fade или троеточие), наличие корректной графики для тёмной темы, а также стоп-кадра для видео (заглушка на случай проблем с интернетом).

#review

Читать полностью…

Бесплатный онлайн-интенсив для AI-тренеров от Яндекса

AI-тренер — это специалист, который обучает нейросеть генерировать корректные, грамотные и релевантные запросам пользователя ответы.

Приглашаем на интенсив от экспертов Яндекса — и новичков, и тех, у кого уже есть опыт. Лучших позовём в команду, которая обучает нейросети Alice AI (Алиса, Яндекс, Поиск).

Мероприятие пройдёт в выходные дни
🟣 16–17 мая

Все встречи пройдут онлайн, по московскому времени, поэтому участвовать можно из любой точки мира.

🧑‍🏫 Что вас ждёт
– Несколько небольших заданий на логику и русский: выполняете самостоятельно в удобное время.
– Вебинары о работе AI-тренера и принципах фактчекинга, тестирование.
– Практика для тех, кто успешно справится с заданиями первого дня.

♨️ Бонус
Каждый участник по завершении интенсива получит промокод на Яндекс Маркет номиналом 3000 рублей.

Мы ищем кандидатов, которые умеют:
– логически мыслить;
– быстро находить информацию;
– с интересом осваивать новое;
– проверять достоверность источников;
– грамотно писать.

Лучшие получат офер в Яндекс:
– полностью удалённая работа;
– нужны только компьютер и стабильный интернет.

Регистрируйтесь и приходите!

Реклама. ООО "Яндекс". ИНН 7736207543

Читать полностью…

Виктор Теплов рассказал, как дизайнеру работать с ИИ.

— Тест Патрика: чаще вы соглашаетесь с ИИ или он с вами? Если вы, то готовьтесь потерять работу;
— Опасные сценарии: профи-скептик не разбирается в ИИ, использует его на удачу и сразу видит некачественный результат; энтузиаст-профан лезет в незнакомую область и полностью доверяет ИИ; дофаминовый наркоман радуется быстрому результату и делает 5 проектов (и ещё 7 в уме);
— ИИ — не партнёр, а инструмент. Человек становится автором продукта и берёт ответственность, когда нажимает на «Принять изменения»;
— По умолчанию ИИ выдаёт массово-приятный результат, похожий на музыку в лифте, которая не бесит, но и не цепляет. Это хорошо для интерфейсов, так как привычные паттерны удобны. Но плохо для творчества, бренда и голоса продукта, где нужна узнаваемость;
— Дизайнеры, которые не хотели разбираться в функциях программ, но хотели «сделать красиво», раньше использовали плагины. Не понимаешь, как работает свет, — плагин Cinematic LUT;
— ИИ может сгенерировать артефакты по фреймворкам вроде JTBD, CJM, Personas, но не может взять на себя ответственность за принятое решение;
— Не получится найти ИИ-инструмент, который просто сделает то, что нужно. Придётся разбираться, как добиться в нём нужного результата;
— План: опишите образ результата, критерии качества и ограничения (что делаем, для кого, в каких условиях). Итерации: делите задачу на шаги, фиксируйте изменения и промежуточные артефакты. Проверка: просите ссылки на первоисточники, объяснить сделанный выбор, дать альтернативы и подсветить риски;
— Рутину надо делать быстро, одинаково и без ошибок. Дизайнер дизайн-системы либо автоматизирует, либо тонет. Раньше для автоматизации надо было стать немного разработчиком, сейчас порог входа снизился. Но ИИ не должен быть автором архитектуры;
— Например, плагин для сбора типографских variables в JSON-стили и построения витрины стилей, плагин для создания шрифта из иконок дизайн-системы;
— Работа с цветовыми токенами. Опишите контракт: структура токенов, устройство имён, запреты, эталонные примеры. Попросите выполнить операцию: добавь новый токен в core-палитру и создай семантический токен bg.main.primary на его основе, добавь во все тематические и брендовые палитры;
— Сначала в режиме Plan, когда ИИ ничего не делает с файлами. Затем просите не только изменить файлы, но и показать изменения, объяснить, почему они соответствуют правилам, подсветить риски, поискать дубли, проверить ссылки;
— В Figma Make можно быстро сделать прототип, проверить поведение компонента в корнер-кейсах и принять решения по вопросам, которые часто всплывают уже во время реализации в коде;
— Доступность инструмента лишь подчёркивает искусность мастера. Кто-то может порубить топором дрова, а кто-то построить дом. Важен опыт, вкус и логика. ИИ не заменяет мастерство, а позволяет делать быстро, много и предсказуемо.

Копия в ВК Видео. #ai #design_system

Читать полностью…

Диана Нурекеева написала об онбординге исследователя в новую команду за 3 месяца.

— Шаг 1. Понять, с каким продуктом предстоит работать и какими методами;
— Изучите стратегию и попытайтесь понять, как стейкхолдеры принимают решения, чтобы её реализовать;
— Выясните, какие метрики надо растить в этом квартале и какие барьеры (вроде нехватки знаний) этому мешают;
— Узнайте, как устроен дискавери-процесс, и подумайте, как его можно улучшить;
— Шаг 2. Создайте план проведения исследований, исходя из потребностей команд;
— Ключевые исследования: CJM (выявленные потребности можно количественно валидировать опросами), сегментация клиентов, глубинные интервью для определения УТП;
— Регулярные исследования: замер CX-метрик (NPS, CES и CSAT), немодерируемые тесты, User day (регулярные пользовательские интервью, в которых участвует вся команда), проверки интерфейса по шаблонам UX-эвристик;
— Демократизируйте исследования в команде — вовлекайте в работу с пользователями продактов, дизайнеров, редакторов и разработчиков;
— Для найденных инсайтов и проблем заведите отдельный беклог;
— Определите, как будете оценивать свою работу: бизнес-метрики (ключевые метрики команды, продуктовые KPI, ROI), операционные и процессные (количество тестов, проведённых User day, количество обученных членов команды);
— Шаг 3. Постройте диаграмму Ганта с активностями на 3 месяца и распределите задачи между членами команды;
— Создание карты местности (что понятно, что неизвестно, риски), карты стейкхолдеров и их запросов, схемы процессов и списка узких мест, приоритизация, создание черновика пакета фундаментальных исследований, сетки регулярных практик, хранилища исследований и беклога проблем, плана инициатив, фиксация метрик и договорённостей;
— Станет понятно, какие нужны ресурсы (привлечь агентство?);
— Выделите время под внезапные задачи, новые вызовы или то, что забыли;
— Далее — реализация дорожной карты, рефлексия каждые 1–2 недели (получается ли идти по плану, не изменились ли приоритеты). Допустимо, если план меняется на 30–40% к концу месяца.

#research

Читать полностью…

Ищем продуктовых дизайнеров в команды Yandex Cloud и Yandex Infrastructure

Проводим Fast Track* 20–26 апреля — за это время можно пройти все собеседования и получить офер.

Ждём дизайнеров продукта с опытом от 3 лет. Идеально, если вы уже работали со сложными экосистемами, B2E- или SaaS-продуктами или участвовали в опенсорс-проектах.

Как всё устроено:

🟣до 17 апреля зарегистрируйтесь на мероприятие;
🟣до 19 апреля выполните тестовое задание;
🟣с 20 по 26 апреля пройдите вайтборд, познакомьтесь с командами и получите офер.

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

🔸 Переходите по ссылке, чтобы узнать подробности и зарегистрироваться: https://yandex.ru/project/events/ft_product_design_0426

Читать полностью…

Алекс написал о выборе формата даты для отображения в интерфейсе.

— Дату 06/05/17 люди из разных стран поймут по-разному;
— Это будет 6 мая 2017 года в европейском формате, 5 июня 2017 года в американском, 17 мая 2006 года в японском стандарте;
— Формат YYYY-MM-DD (ISO 8601) исключает двусмысленность и применяется в международных системах;
— Его можно использовать в базах данных, API и серверных логах, финансовых и бухгалтерских системах, где цена ошибки высока;
— Для интерфейсов подойдёт формат с сокращённым названием месяца: 1 Jan 2001 (1 янв 2001) — британский стиль, используемый в международном английском;
— Сокращённое название месяца удобнее полного за счёт более короткой записи и простоты локализации.

#writing #time

Читать полностью…

Станислав Хрусталёв написал об интересных решениях в приложении Додо Пиццы.

— Количество калорий, белков, жиров и углеводов отображается на 100 г и на весь продукт — удобно, если съел весь продукт или половину;
— Если приборы не нужны, от них можно отказаться и сократить количество отходов;
— При выборе продукта он улетает в сторону корзины. Такая анимация подсказывает дальнейшее действие, а поскольку продуктов в корзину добавляют не десятками, она не приедается и не раздражает;
— Удалённый из корзины товар некоторое время продолжает в ней отображаться. Если удалили по ошибке, его не придётся снова искать в каталоге;
— При оформлении самовывоза сервис предлагает построить маршрут до пиццерии в одном из установленных на телефоне картографических сервисов;
— Если вы в пиццерии, через приложение можно сделать заказ с доставкой к столику — не надо идти к кассе;
— Стоит упомянуть: удаление ингредиентов, создание своей пиццы, пицца из половинок (и случайный выбор их сочетания), Live Activity, видеотрансляция приготовления пиццы на кухне, рассказ о том, почему готовят без перчаток (частый запрос).

#ecommerce

Читать полностью…

7 апреля в 19:00 по Москве команда UX Feedback проведёт вебинар о том, как превращать хорошие исследования в качественные улучшения продукта.

— Даже если вы провели хорошее исследование, сломанный последующий процесс может всё испортить;
— Пользовательские нужды подменяются хотелками, сильные инсайты теряются, вместо точечных изменений в работу уходят большие инициативы;
— Вебинар будет полезен UX-исследователям, продуктовым дизайнерам и всем, кто работает с пользовательским фидбеком;
— Эксперты UX Feedback Арслан Разыков (сооснователь, более 10 лет в продукте) и Вика Макеева (менеджер продукта) разберут свой и клиентский опыт;
— На вебинаре вы узнаете, где между первым фидбеком и релизом чаще всего теряется сигнал;
— Почему не всегда нужно делать то, что просит пользователь;
— Как отличить хотелки от реальных пользовательских проблем;
— Почему маленькие итерации часто дают больше результата, чем большие проекты;
— Как сделать, чтобы исследования и обратная связь не просто копились в артефактах, а влияли на продукт.

👉 Регистрация

Реклама ООО «Фидбек», ИНН 5030094661, erid 2VtzqvtuRTj

Читать полностью…

В Фигме появились слоты.

— Это области в компонентах, позволяющие вставить любое содержимое в инстансы этих компонентов;
— Они упрощают компоненты со списками элементов внутри вроде аккордеонов, меню и дропдаунов. В них можно размещать любое количество элементов (не надо заранее закладывать какой-то максимум) и легко менять их порядок;
— Проще работать с компонентами с высокой вариативностью содержимого. В компоненте карточки можно задать стиль подложки и заголовка, расположение контролов, а её содержимое — добавлять через слот;
— Алексей Бычков записал видео о слотах;
— В блоге Фигмы [English] также предлагают использовать их для работы с лейаутом страниц: фиксировать в компоненте меню, хедер и футер, а содержимым конкретной страницы управлять через слот;
— Забавно, что они противопоставляют слоты детачу или созданию сложных многовариантных компонентов. Раньше такую же задачу решали добавлением dummy-компонентов и их свапом в инстансах на локальные компоненты с нужным контентом. Но со слотами, конечно, удобнее;
— Консультант по дизайн-системам Нейтан Кёртис написал, nathanacurtis/implementing-slots-in-a-figma-library-a9d6185318c2">как внедрять слоты в библиотеку компонентов [English];
— Как понять, где слоты будут полезны, какие компоненты снабжать слотами первыми (где чаще всего детач), какие настройки применять (без контента, с контентом, списком предпочитаемых компонентов и без него);
— Правила лейаута слотов: не задавать цвет, обводку, скругление углов, паддинги. Паддинги лучше задавать в контейнерах, в которых будут располагаться слоты. Слот должен отвечать за лейаут, направление, отступы между элементами и изменение размеров.

#figma #design_system

Читать полностью…

Настройка количества товаров с мусоркой

Иногда встречается такой дизайн элемента для настройки количества товаров в корзине, где вместо минуса рисуют мусорку — мол, товар уже удалится, а не просто уменьшится количество.

Сначала это кажется логичным, ведь уменьшение количества и удаление — разные вещи, и выглядеть должны по-разному. Возможно, кто-то из дизайнеров в этом видит возможность дополнительно предупредить об удалении. Наверное, кому-то просто кажется остроумной такая динамичность.

Но вообще-то хорошо бы, чтобы при уменьшении количества до нуля, товар не удалялся сразу: у пользователя должно быть право на ошибку и возможность вернуть товар обратно. Если же удаление товара неотменяемое, то превращение минуса в мусорку не поможет предотвратить ошибку; тогда надо дисейблить минус, а кнопку удаления ставить отдельно. Что касается остроумности, то это только в голове дизайнера мусорка — частный случай минуса для одного значения, но для пользователя изначально никакого минуса нет, а есть лишь эта мусорка, ведь обычно количество будет «1 шт.».

Короче, не рекомендую так делать. Элемент хуже узнаётся, ощущается нестабильным и не решает никакой задачи.

Читать полностью…

Таня Двенадцатова написала о прожарке.

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

#design_check

Читать полностью…

Бесплатный онлайн-интенсив для AI-тренеров от Яндекса

AI-тренер — это специалист, который обучает нейросеть генерировать корректные, грамотные и релевантные запросам пользователя ответы.

Приглашаем на интенсив от экспертов Яндекса — и новичков, и тех, у кого уже есть опыт. Лучших позовём в команду, которая обучает нейросети Alice AI (Алиса, Яндекс, Поиск).

Набираем две группы
🟣 28 февраля и 1 марта
🟣 14 и 15 марта

Все встречи пройдут онлайн, по московскому времени, поэтому участвовать можно из любой точки мира.

🧑‍🏫 Что вас ждёт
– Несколько небольших заданий на логику и русский: выполняете самостоятельно в удобное время.
– Вебинары о работе AI-тренера и принципах фактчекинга, тестирование.
– Практика для тех, кто успешно справится с заданиями первого дня.

♨️ Бонус
Каждый участник по завершении интенсива получит промокод на Яндекс Маркет номиналом 3000 рублей.

Мы ищем кандидатов, которые умеют:
– логически мыслить;
– быстро находить информацию;
– с интересом осваивать новое;
– проверять достоверность источников;
– грамотно писать.

Лучшие получат офер в Яндекс:
– полностью удалённая работа;
– нужны только компьютер и стабильный интернет.

Регистрируйтесь и приходите!

Реклама. ООО "Яндекс". ИНН 7736207543

Читать полностью…

Хабр подвёл итоги конкурса «Технотекст 8», и моя статья оказалась одной из трёх победительниц в категории «Дизайн». Поэтому сегодня — повторная публикация её анонса в UX Notes.

Я написал, какими бывают адреса электронной почты и как это может повлиять на опыт регистрации и входа по имейлу.

— Когда человек заводит электронную почту, его имя пользователя и домен почтового сервиса становятся уникальным адресом;
— Но его не обязательно указывать в точности, чтобы получать письма;
— Все почтовые сервисы игнорируют регистр букв. Gmail — точки в имени пользователя. Почти все игнорируют то, что в имени пользователя указано после «+»;
— Фишка с «+» описана в одном из стандартов работы электронной почты и может использоваться для борьбы со спамом и сортировки почты;
— Плюс тестировщики могут так зарегистрировать несколько аккаунтов в тестируемых продуктах, не заводя множества почтовых ящиков;
— Некоторые почтовики работают на нескольких доменах. Например, gmail.com и googlemail.com, yandex.ru и ya.ru;
— По хорошему, сделав исключение для тестировщиков, всё это стоит учитывать при регистрации, входе и восстановлении пароля (в статье в общих чертах описан механизм), чтобы пользователи не создавали несколько аккаунтов, фактически связанных с одним ящиком;
— Пользователь может забыть, с каким адресом регистрировался ранее, и по ошибке завести ещё один аккаунт;
— Если посмотреть на крупные и популярные сервисы вроде ChatGPT, Notion, Amazon, они отрабатывают только кейс с регистром букв.

#login #signup

Читать полностью…

Как искать респондентов в новой реальности?

Кажется, что сейчас про это собенно важно говорить не в формате «доклада», а в формате живой дискуссии между людьми, которые реально этим занимаются каждый день.

Поэтому ребята из UX Feedback проводят круглый стол без официоза и красивых слайдов. Чтобы вместе порассуждать, где-то поспорить, где-то сравнить опыт и посмотреть, как команды вообще адаптируются к новой реальности рекрутинга респондентов.

О чем будет разговор:
— что вообще сейчас происходит с рекрутом и качеством респондентов
— можно ли доверять агентствам и панелям так же, как раньше
— насколько рынок реально столкнулся с «ходоками» и профессиональными респондентами
— почему для одних команд рекрут становится всё сложнее и дороже, а другие почти не чувствуют изменений
— работают ли сегодня внутренние базы, комьюнити и собственный рекрут

Спикеры: Арслан Разыков (сооснователь UX Feedback), Регина Насибулина (специалист по рекруту респондентов в hh.ru), Кирилл Малык (Head of CS в федеральных госуслугах (РТЛабс)), Дмитрий Храпов (дивижн лид в вертикали Авито Авто)

Когда: 1 июня в 19:00 (по московскому времени)

▶️▶️ Регистрация здесь

Реклама ООО "ФИДБЕК" ИНН 5030094661, erid:CQH36pWzJqEgzwpVrHAjHh7SWoJ6kcrSbVQ5PnRTqxQiJu

Читать полностью…

Павел Шерер написал, почему JTBD и Personas — не конкурирующие, как некоторые считают, а дополняющие друг друга фреймворки проектирования.

— Personas: опишите тип пользователя, его контекст, задачи, особенности поведения, ограничения и потребности;
— JTBD: смотрите на работу, которую продукт пытается выполнить, и на прогресс, которого пользователь хочет достигнуть;
— JTBD не отменяет персон, а мешает подменять реальную мотивацию человека набором внешних признаков;
— Хорошая персона помогает понять, в каком контуре ответственности человек действует, с какими ограничениями, какие решения может принимать сам, чем рискует, какие механики для него вообще применимы, и какие метрики результата имеют смысл;
— JTBD позволяет с уровня конкретной механики подняться на уровень причины;
— Купить дрель → сделать дырку в стене → повесить полку → купить больше книг → читать больше и чувствовать себя умнее. Возможно, задачу решит электронная книга?
— Иерархия целей по Уильяму Пауэрсу: на уровне принципов — цели типа «быть» (быть готовым к пиковым нагрузкам), на уровне программ — «делать» (быстро управлять ресурсами), на уровне последовательностей — цели моторного контроля (запустить ещё 10 vCPU за 60 секунд);
— JTBD работает с верхними уровнями и помогает понять, зачем нужна работа. Job stories описывают контекст и потребности;
— Personas работают с нижними уровнями: кто и как именно будет действовать. User stories описывают механики и результат разработки;
— Одну работу могут выполнять разные люди, и если дата-саентист, чтобы быстро получить дополнительную вычислительную мощность, запустит из интерфейса типовой GPU-кластер без тонких настроек, то девопс будет думать об инфраструктурных политиках, лимитах, безопасности и мониторинге;
— Механика — это способ, которым продукт пытается реализовать потребность. Лайкать посты — механика соцсети, за которой стоит потребность получать и проявлять социальное одобрение, принадлежать к группе и так далее;
— Формат User story «как пользователь, я хочу действие, чтобы результат» смещает фокус на механики;
— Сначала Job stories фиксируют контекст, мотивацию и результат. Затем Personas добавляют исполнителей (персона должна объяснить, почему одна и та же джоба превращается в разные механики для разных ролей);
— Потом User stories фиксируют механики, которые можно проектировать, оценивать, класть в беклог и проверять метриками.

#user_story #job_story

Читать полностью…

Таня Титоренко написала о дизайне диалогов и его отличии от UX-редактуры.

— Дизайнер диалогов (conversation designer) так же, как UX-редактор пишет текст, прорабатывает редполитику и Tone of voice, но работает при этом не с графическим интерфейсом, а с разговорным;
— В разговорном интерфейсе намного меньше способов взаимодействия (в случае голосового робота — это только реплики);
— Важно понимать, как пользователи формулируют вопросы, на каком этапе чаще зовут сотрудников, поэтому дизайнер часто читает пользовательские чаты и слушает записи звонков;
— Вопрос пользователю — один из основных инструментов продвижения по сценарию. Он приглашает к диалогу. В голосовом интерфейсе им должна заканчиваться каждая реплика робота;
— В качестве обратной связи также доступны только реплики. Чтобы не повести диалог не туда, неправильно поняв пользователя, робот частично повторяет запрос клиента в начале сценария;
— Также робот проговаривает состояние системы. Например, пользователь интересовался услугой, но на вопрос о подключении ответил «Не сейчас». Робот проговаривает, что услуга не подключена;
— Все заголовки и подписи — реплики сервиса, все кликабельные элементы — реплики пользователя;
— Формулировки — более разговорные, уместные в диалоге и не всегда подходящие для графического интерфейса. Но всё зависит от вашей сферы деятельности. Например, не все фразы может сказать сотрудник банка.

#conversation_design

Читать полностью…

Лев Брук, дизайнер, отвечающий за Сбол, рассказал о том, как сохраняет интерес к работе.

— Мотивация бывает внешняя (заработать денег на жизнь) и внутренняя (у каждого своя);
— Дизайнеры могут делать мир вокруг удобнее или хотя бы поднимать другим людям настроение;
— Просто скажите себе спасибо;
— Есть желание двигать человечество вперёд, расширять домен знаний, но как это делать?
— Чтобы что-то узнать, надо начать делать что-то по-новому;
— Со временем, попробовав разные варианты, в том числе неудачные, мы научаемся приходить к решению задачи самым коротким путём. В итоге исследовать варианты уже не надо, продуктивность зашкаливает, но пропадает интерес;
— Кейс: надо исправить текст сообщений, все сообщения выгружены в JSON-формате, прочитать его можно с помощью плагина для Сафари, но у них всех некрасивые иконки. В процесс добавляется задача по созданию иконки и, возможно, созданию своего плагина для чтения JSONа (плюс придумать название и промо-текст, пройти ревью в App Store и так далее);
— В итоге: решил задачу, узнал новое, помог людям, получил социальное признание благодаря плагину (позитивные отзывы, 2-е место в рейтинге по количеству скачиваний);
— Редактура — скилл дизайнера;
— Кейс: надо переписать текст, все онлайновые словари синонимов неудобны и завалены рекламой. В итоге: свой онлайн-словарь синонимов;
— Зачем терпеть, если можно сделать себе удобно, оптимизировать часть своей работы на будущее?
— Плагин для Фигмы Scripter позволяет делать простые инструменты для решения небольших задач без заморочек с UI и публикацией плагинов;
— Оставайтесь любопытными, меняйте всё, что бесит;
— Больших и сложных инструментов полно, но легко можно собирать свои версии их отдельных фич.

#process #ai

Читать полностью…

25 апреля пройдёт онлайновая конференция «Дизайн конф: что происходит с UX/UI». Дизайн — это уже не про кнопки и сетки в Фигме, а про проведение, решения и пользовательский опыт. В программе:

— Какие тренды задают Азия и Восток;
— Как ИИ перепрошивает команды;
— Почему без исследований не запускается ни один серьёзный сервис;
— Разбор портфолио и реальных кейсов.

Можно смотреть онлайн весь день с 13:00 до 19:00 мск, либо подключаться к отдельным блокам.

Подробности и регистрация → https://bit.ly/494on8Z?erid=2Vtzqunx8gf

Читать полностью…

Алексей Макаренко рассказал об автоматизации доставки логотипов разработчикам.

— Старый порядок: экспорт ×4 в формате png, оптимизация через приложение ImageOptim, переназывание, загрузка в общую папку с логотипами;
— Со временем появились папки для тёмной и светлой темы, для лого, вписанных в квадрат;
— В Фигме через плагин SVG Export цветные логотипы экспортировали с дефолтным пресетом (просто чтобы сжать), а монохромные — с пресетом Correct color (чтобы разработчики могли красить их в любой цвет);
— Новый порядок: собственный плагин, который смотрит на свойства компонента с изображением логотипа и называет экспортируемый файл, например, avrora_color_dark_compact_square, экспортирует архив с png и svg;
— Дизайнер сохраняет архив в репозиторий, где хранятся логотипы, и запускает bash-скрипт. Он раскрывает архив, оптимизирует файлы (такие же алгоритмы, как в ImageOptim и SVG Export), раскладывает по папкам и называет logo.png и logo.svg;
— Иерархия папок учитывает, что логотипы могут быть цветными и монохромными, цветные варианты нужны для тёмной и светлой темы, также они могут быть широкими и компактными, а компактные — вписанными в круг, квадрат и без формы;
— Вписанный в квадрат логотип компании Avrora для тёмной темы в формате png доступен по адресу logos/avrora/color/dark/compact/square/logo.png;
— Разработчики используют компонент логотипа и обращаются к конкретному файлу в папке.

#image #figma #design_system

Читать полностью…

Доводить до крайности
#совет

Хорошая привычка — проверять строки с числовыми переменными на крайних значениях.

Допустим, вы хотите показать пользователю какой-то интересный факт о нём:

Вот это марафон! Вы пробежали N за месяц

Но что если N будет не 42 км, а какие-нибудь 100 м? Тогда наше сообщение будет звучать как сарказм. Кому это нужно?

Мысленно подставляем значения из разных диапазонов и легко обнаруживаем проблему. А решается она такими способами:

1️⃣ Убрать оценочные слова, чтобы строка подходила для любого числа

Не всегда возможно, но это самый дешёвый способ:

До конца книги всего 1050 страниц → До конца книги 1050 страниц

На счету целых 2 рубля! → На счету 2 рубля

2️⃣ Завести отдельные строки для больших и малых значений

Вот это марафон! Вы пробежали N м за месяц (если N > 40 км)

Класс! Не забывали выходить на улицу и пробежали 100 м! (если N < 1 км)

3️⃣ Не забыть про нулевые значения. Обычно тоже нужны отдельные строки

Вы потратили 0 калорий → Вы не потратили калорий

Женя молодец, прошёл 0 уроков! → Женя пока не проходил уроков

0 шагов сегодня → Сегодня прогулок не было

Читать полностью…

Дмитрий Сатин написал о недостатках тёмной темы.

— Исследования показали, что при 100% яркости тёмная тема на OLED-экране экономит заряд аккумулятора. Но при 30–50% (обычное значение для большинства пользователей) экономия незначительна;
— Чёрный текст на белом фоне люди читают быстрее и точнее, чем белый на чёрном. Чем меньше кегль, тем хуже работает тёмная тема;
— Исключение: яркий экран в тёмном окружении (в тёмной комнате) создаёт дискомфортный контраст;
— У людей с астигматизмом (30% населения) светлые буквы на тёмном фоне теряют чёткость, сливаются друг с другом;
— Сложнее считывать визуальную иерархию, так как сливаются границы блоков;
— Тонкие шрифты становятся слишком бледными, жирные — слишком тяжёлыми. Снижается контраст между цветами, включая ключевые цвета для индикации состояний: красный и зелёный;
— Отпечатки пальцев на экране, отражения и дневной свет делают тёмный интерфейс на улице слабочитаемым;
— Изменение тона цветов и снижение яркости влияют на восприятие бренда, сдвигают эмоциональное восприятие, что может разрушить целостность бренда;
— Включайте по умолчанию светлую тему, на видном месте расположите переключатель тем, добавьте автоматический режим, привязанный ко времени суток или системным настройкам;
— Тёмная тема требует отдельного раунда юзабилити-тестирования.

#dark_theme

Читать полностью…

Булат Хазимуратов покритиковал эмоциональный дизайн.

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

Читать полностью…

Новые материалы в @uxwork (кроме вакансий):

— Как опытный руководитель проектов в крупной компании видит текущую ситуацию с наймом на IT-рынке;
— Актуальные требования к продуктовым дизайнерам в бигтехе и компаниях поменьше (на основе анализа 100 вакансий);
— Как распределять задачи на день, чтобы снизить когнитивную нагрузку.

Читать полностью…

Алиса Колядова поделилась мыслями о проектировании таблиц.

— Представляйте повторяющиеся данные в виде таблицы, когда пользователю надо сравнивать строки, работать с их множеством, редактировать данные (в том числе массово), фильтровать и искать по структуре, когда важна плотность данных;
— Либо если пользователи для решения конкретной задачи привыкли работать с таблицей;
— В остальных случаях подойдут списки и карточки;
— Если в таблице много столбцов, будет сложно обрабатывать столько параметров. Возможно, большую таблицу можно разделить на несколько небольших с параметрами, нужными для решения конкретной задачи;
— Например, таблица для распределения заявок и таблица для контроля их выполнения. У первой не будет фильтров, а у второй строки будут подкрашиваться в зависимости от статуса;
— Рекомендацию объединять связанные данные в одной ячейке можно встретить в разных гайдлайнах, например, у «Контура»;
— Но это ломает визуальный ритм, снижает плотность таблицы, усложняет сравнение и поиск нужных данных. В небольших таблицах это может сработать, в длинных рабочих таблицах — нет;
— Если появляется горизонтальный скрол, можно слева закрепить первый столбец (который даст контекст остальным данным), а справа — важные показатели и действия;
— Но важно подробно описать поведение таблицы, так как здесь большое поле для трактовок со стороны разработчиков.

#table

Читать полностью…

Станислав Хрусталёв написал об интересных решениях ВкусВилла в списке товаров и корзине.

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

#cart #list #ecommerce

Читать полностью…

Светлана Диденко написала об эвристиках Бена Шнейдермана для проектирования интерактивных систем.

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

#heuristic

Читать полностью…

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

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

Копия на Dsgners. #color

Читать полностью…