Никита Самутин написал, как тимлиду справиться с потоком дел и повысить свою ценность в компании.

— Бронируйте в своём календаре время для планирования дня, работы над текущими задачами, обеда, ответов на вопросы. Добавляйте не конкретные задачи, а фокусы — группы задач, на которых надо фокусироваться;
— Если поступил срочный вопрос, оцените его неотложность. Лучше накопить вопросы и ответить на все в конце дня в запланированный для этого временной слот. Либо сразу запланировать встречу, если тема объёмная;
— На встречах ведите заметки, так вы лучше всё запомните и повысите свою значимость. Тимлиду важно держать обещания, помнить о правках и вопросах, чтобы команда ему доверяла, поэтому фиксируйте всё, что должно быть сделано: правки, новые задачи, встречи;
— Не стесняйтесь попросить о паузе, чтобы записать важный комментарий. Если информации много (идёт погружение в новый продукт или процесс, по которому нет документации), записывайте встречи на аудио и видео;
— Со временем аргументы по принятым решениям забываются. Чтобы не уходить потом на новый круг обсуждения, в макеты или задачу добавляйте комментарии по неочевидным решениям, скриншоты обсуждений, ссылки на ветки в Слаке;
— Записывайте все сделанные задачи и полученные результаты. В идеале, в виде изменившихся метрик. Это поможет рассказать о сделанном во время регулярной оценки сотрудников и в портфолио;
— Если компания большая, спросите других лидов, какие лайфхаки используют они.

#management

Иван Вербов написал о стилистике в дизайне интерфейсов.

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

#style

Бенджамин Брэндалл написал об отмене подписки в разных сервисах и выделил хорошие практики.

— Расскажите, что пользователь потеряет. В Зуме — доступ к записям в облаке. Чтобы не было негатива, они предлагают скачать записи до даты окончания подписки;
— Чтобы предотвратить отписки в будущем, спросите о причинах и что можно было бы улучшить. Иногда об этом спрашивают в письме, отправляемом автоматически после отписки, но в этот момент мотивация ответить на вопрос намного ниже, чем при непосредственной отмене подписки;
— Ввод пароля для отмены подписки создаёт дополнительное трение и повышает безопасность профиля;
— Предложите вместо удаления профиля временно приостановить его использование, расскажите о преимуществах такого варианта. Harvest предлагает бесплатное сохранение всех данных в течение 6 месяцев;
— Если пользователь хочет удалить профиль и у вас есть вариант с бесплатной подпиской, предложите перейти на него;
— Если бесплатных вариантов нет, предложите поговорить с отделом продаж (в диалоговом виджете прямо на этой странице) и получить индивидуальные условия;
— Если пользователь готов пообщаться и нажал на виджет, сразу стартуйте диалог (например, через отправку пустого сообщения), не заставляйте клиента думать, что написать;
— Иногда для отмены подписки может потребоваться электронное письмо или разговор (клиенты слишком ценны, не self-service продукт). Проясните, как происходит этот процесс, чтобы снизить беспокойство пользователей;
— Если ваши клиенты столкнулись с кризисом (актуально для пандемии), расскажите, что у вас есть варианты помочь им.

In English. #offboarding

Позабавило сегодня. В компании «Ю-эксперт», которая занимается проектированием интерфейсов, написали об ошибках в форме запроса консультации.

Среди прочих выделили:

1. Нет чекбокса для согласия на обработку персональных данных и ссылки на соответствующий регламент. Почему плохо: люди хотят быть уверенными, что их данные будут в сохранности. Плюс есть законодательные ограничения.

2. Не указано время, когда после отправки запроса с клиентом свяжется менеджер. Клиент не понимает, что произойдёт дальше, может не дождаться ответа и переключиться на общение с конкурентами.

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

4. Непонятное сообщение об отправке заявки. Например, английский текст, когда остальной интерфейс на русском, или что-то на технарском вроде «Ответ записан».

Плюс ещё 3 ошибки.

Заканчивается статья ссылкой на форму запроса бесплатного аудита юзабилити в компании «Ю-эксперт». И сколько же ошибок в этой форме? Ноль? А вот и нет: все перечисленные выше, то есть 4 из 7 обозначенных в статье.

#form

Блейр Фикс объяснил, почему эффекта Даннинга — Крюгера не существует.

— Это тенденция неквалифицированных людей переоценивать свою компетентность;
— Проблема в том, что такой тенденции нет. Даже так: увидеть её можно даже в случайном наборе чисел;
— Это пример автокорреляции, которая возникает, когда переменную X сравнивают с переменной, вычисленной с использованием X (например, с Z, которая равна X + Y). По сути, переменную сравнивают с самой собой;
— В диаграмме Даннинга — Крюгера на горизонтальной оси — группы (квартили) респондентов, получивших четверть самых низких оценок, ниже, выше среднего и четверть самых высоких. То есть по оси отложен тестовый балл;
— Вертикальная ось — процентиль баллов. Серый график показывает баллы, полученные каждым квартилем. По сути он сравнивает полученные баллы с ними же, это график X от X;
— Чёрный график показывает восприятие собственных способностей в сравнении с полученными баллами, это график Y от X;
— Проблема в том, что Даннинг и Крюгер обращают внимание на корреляцию между разницей восприятия способностей и полученных баллов (по сути Y−X) и полученными баллами (по сути X). Это и есть автокорреляция, так как сравнивается переменная X с выражением, включающим в себя X;
— Ошибку не замечали до 2016 года. Первым её заметил Эдвард Нюфер;
— Фундаментальный принцип статистики: если вы собираетесь соотнести два набора данных, они должны быть собраны независимо друг от друга;
— Если измерить эффект статистически достоверным способом, он исчезнет. Люди с разным уровнем образования ошибаются в оценке собственной компетенции с нулевой средней ошибкой (в каждой группе есть люди, которые себя переоценивают и недооценивают, но они уравновешивают друг друга);
— С ростом образования есть тенденция к уменьшению разброса в оценке, но это не эффект Даннинга — Крюгера, который заключается в систематической предвзятости средней оценки.

In English. #psychology

Паша Злобин написал о сервисах для а/б-тестирования.

— Google Optimize закрыт с сентября 2023 года;
— Сервисы из России: Varioqub (проект Яндекса, интегрируется с Метрикой), UX Rocket, Sigma;
— У первых двух есть бесплатные тарифы;
— Паша показал процесс настройки а/б-теста в первых двух (попробовать Сигму без подписания договора нельзя);
— В комментариях подсказали, что пользователи из России могут на собственном сервере поднять опенсорсный GrowthBook (есть бесплатный тариф).

#tool #ab_testing

Дарья Хуторянская написала о UX-аудите.

— Это оценка, насколько продукт или отдельные фичи, удовлетворяют потребности пользователей и решают задачи бизнеса;
— Аудит не нужен, если продукт активно растёт, привлекает пользователей и инвестиции (лучше заняться новыми фичами и сбором обратной связи, чтобы укрепиться на рынке) или если налажено отслеживание метрик, которые показывают, что продукт в порядке;
— Если продукт для дизайнера новый, он смотрит на него незамыленным взглядом (это плюс), но должен быстро в нём разобраться (это минус), чтобы не скатиться в поверхностную оценку UI;
— 1-й шаг. Определите задачи бизнеса и потребности пользователей. С этим поможет серия экспертных интервью с владельцем продукта. Если есть время, поговорите с пользователями, контактирующими с ними специалистами компании (персональные менеджеры, продажи, поддержка), изучите отзывы и обращения в поддержку;
— Задачи бизнеса должны попадать в категории: 1) рост выручки и прибыли компании, 2) удержание и возвращение клиентов, 3) снижение издержек;
— 2-й шаг. Изучите данные о поведении пользователей: конверсию в завершение сценария (пути тех, кто не доходит, могут указать на проблемы), время решения задачи (можно сравнить, когда сценарии будут доработаны), поисковые запросы (что люди ищут и не могут найти), используемые устройства, DAU, MAU (востребованность фичи от месяца к месяцу);
— Если таких данных не собирают, заведите задачу на подключение аналитики. Что-то можно выгрузить из баз данных и логов активности;
— 3-й шаг. Если фич много, выберите те, что приносят больше всего пользы бизнесу, из них выберите 3−5 самых востребованных у пользователей;
— Каждую оцените по эвристикам (есть разные фреймворки). Так вы не упустите и UX, и UI-составляющие фичи. Если эвристика соблюдается, ставьте 1, если нет, ставьте 0 и добавляйте комментарий, почему так;
— 4-й шаг. Презентуйте результаты команде (в сложном продукте может понадобиться серия часовых встреч), обсудите, зафиксируйте конкретные задачи, которые пойдут в работу, заведите эпики для будущих доработок.

#audit

Илья Бирман написал о вертикальном масштабе графика.

— Тафти рекомендует подбирать его так, чтобы в среднем угол наклона графика был примерно 45°;
— График нужен для сравнения данных, выявления тенденций и закономерностей;
— Даже сжимая график по вертикали, мы не снижаем его разрешение, а повышаем. Если средний угол наклона — 45°, лучше видны пологие участки и резкие перепады.

#data_visualization

Михаил Озорнин написал о масштабе временных рядов.

— Временные ряды (Time series) — графики, где горизонтальная ось — это время;
— Если надо следить за параметрами сложной системы, графики помогут заметить выбросы (отличия от нормального поведения), паттерны, видеть динамику изменения параметров;
— Чтобы сравнивать разные параметры системы и видеть связи, графики проще всего расположить один под другим;
— Иногда их накладывают друг на друга на одной оси, но так делать не надо;
— Чтобы все графики влезли, приходится уменьшать вертикальный масштаб, и они могут стать нечитаемыми;
— Решение: поделить график по вертикальной оси на несколько слоёв, раскрасить попадающие в разные слои части графика (чем больше значение, тем ярче), сложить слои один на другой (похоже на карту глубин);
— В Square сделали плагин для таких визуализаций в D3.

#data_visualization #time

Никита Цейковец написал, какими техническими решениями пользуются люди с нарушениями зрения.

— Опрос провели в интернете в 2023 году среди русскоязычных пользователей, поучаствовал 491 респондент. Это уже 5-й опрос, можно оценить динамику;
— 99% используют мобильные устройства, 91% десктопные. Важно обеспечить доступность мобильных приложений, но и про десктоп не стоит забывать;
— Треть респондентов не пользуется голосовым интерфейсом. Он не должен становиться единственным способом взаимодействия;
— Из платформ чаще используют Windows и Android, но доля пользователей iOS и iPadOS достаточно значима и в последние годы растёт. Растёт также интерес к GNU/Linux;
— Недоступность мобильного приложения нельзя компенсировать доступной мобильной версией сайта, пользователи предпочитают приложения;
— Проверять доступность сайтов на деcктопе следует в Chrome и Firefox, а на мобильных устройствах в Chrome и Safari;
— Конфигурации для проверки в порядке снижения приоритета. Сайты на десктопе: Chrome и Firefox с NVDA на Windows, с JAWS на Windows, Safari с VoiceOver на macOS, Chrome с Orca на GNU/Linux. Сайты на мобильных устройствах: Chrome с TalkBack на Android, Safari с VoiceOver на iOS/iPadOS;
— При тестировании доступности для слабовидящих в первую очередь стоит применять встроенные инструменты увеличения экрана и коррекции изображения. Они как правило наиболее популярны.

#accessibility #tool

Саадия Минхас написала о нижней панели вкладок (tab bar).

— До неё легко дотянуться большим пальцем;
— На десктопе используется редко — на больших экранах её сложнее заметить;
— Включает 3−5 пунктов, ведущих на разделы верхнего уровня. Если разделов больше 5, можно добавить пункт More;
— Если используете нестандартные иконки, каждый пункт лучше сопроводить подписью;
— Если решили раскрасить иконки, не используйте слишком много цветов;
— Подписи: располагаются под иконками, короткие, без переноса на вторую строку, обрезания многоточием, уменьшения кегля, чтобы уместить текст;
— В альбомной ориентации телефона подписи можно разместить справа от иконок, чтобы заполнить пространство и освободить место для контента;
— Кроме цвета активный пункт можно выделить подложкой, точкой или полоской, заливкой контурной иконки;
— У пункта может быть индикатор, который показывает состояние контента в разделе, например, что там есть что-то новое. Счётчик показывает количество таких элементов в разделе;
— Не стоит делать неактивными или скрывать пункты, если внутри нет контента (вроде пустой корзины).

In English. #tab_bar

Анастасия Вихарева написала о повышении доступности интерфейса.

— Правильная последовательность заголовков (h1 → h2 → h3) помогает пользователям скринридеров ориентироваться на странице;
— Оптимальная длина строки — 60 символов. На клавиатуре Брайля можно разместить максимум 66 символов;
— Ссылки делайте частью текста, а не вставляйте просто как https://www…, так как скринридер такие ссылки читает посимвольно;
— Порядок расположения текста, связанного с текстовым полем: лейбл, хинт, текст ошибки, плейсхолдер;
— Не забывайте о сфокусированных состояниях для элементов интерфейса;
— В опросе после списка вариантов ответа желательно ставить кнопку «Продолжить», чтобы слепой пользователь понял, где заканчивается список;
— При открытии всплывающего окна автофокус — на заголовок.

#accessibility

В «Инферит Клаудмастер» написали об этапах создания дизайн-системы и проблемах, с которыми столкнулись.

— 1. Планирование и приоритизация: разделение процесса на этапы; анализ существующих компонентов и выявление зависимостей между ними; приоритизация задач дизайнерами и построение плана работ;
— 2. Утверждение семантики и шаблонов для оформления в Фигме: система нейминга токенов, состояний, вариантов, иконок и компонентов в Фигме и на фронте; шаблоны для создания документации; система статусов компонентов для определения готовности к публикации и разработке;
— 3. Стандартизация построения интерфейса: внедрение дизайн-токенов; определение стандартов для сетки, отступов, скруглений, типографики и цветов;
— 4. Шаблон чейнджлога об изменении компонентов дизайн-системы и внедрении новых;
— 5. Разработка страниц с компонентами: демонстрация компонентов, описание правил использования;
— 6. Изменение компонентов в продукте (итеративный процесс): выбор компонентов для разработки в спринте; тестирование и ревью; внедрение обновлённых компонентов в продукт; оценка эффективности и влияния на пользовательский опыт;
— Одна из проблем: не разделили компоненты на более простые атомы и молекулы, из-за чего они стали слишком сложными, а их состояния избыточными.

#design_system

Ольга Дубинина написала, как сделать тосты (снекбары) заметнее.

— Это всплывающее сообщение, появляющееся в ответ на действие пользователя в интерфейсе;
— Оно должно быть контрастно фону. Если использовать фирменный цвет, сообщение может потеряться в интерфейсе. Не забудьте проверить контраст в тёмной теме;
— Не делайте текст слишком мелким, пользователям с плохим зрением будет трудно его прочитать. Тост появляется на время, нет смысла делать его слишком мелким, чтобы сэкономить место на экране;
— Чтобы смысл сообщения считывался быстро, используйте статусные цвета: зелёный для позитивной обратной связи, красный для негативной;
— Ради людей с дальтонизмом статус стоит дублировать иконками: галочка для позитивного сообщения, ! или × для негативного;
— Позитивный символ можно подчеркнуть скруглённой успокаивающей формой (включить в круг), негативный — угловатой (включить в треугольник).

#toast

Станислав Хрусталёв написал об избранном в мобильных приложениях интернет-магазинов.

— Если в нём ничего нет, не показывайте грустный смайлик. Добавление товаров — не задача, не сожалейте, что она не выполнена;
— Если объясняете, как добавлять товары в избранное, покажите конкретную иконку (обычно это сердечко или закладка). Иногда показывают анимацию с нажатием;
— Из пустого избранного чаще всего предлагают перейти в каталог (или в конкретные разделы, если их немного). Альтернативы: поиск, главный экран, скидки и акции, заказы (если есть у пользователя), связь с консультантом;
— В списке товаров кнопка добавления в избранное чаще всего в правом верхнем углу карточки. На экране товара — под фото, иногда её фиксируют в нижней части экрана рядом с кнопкой корзины;
— Переход в избранное — в таббаре. Если функций много, может стать частью профиля. Если ассортимент небольшой — частью каталога. Дополнительно его можно разместить в меню быстрых действий;
— Если в избранном не пусто, отображайте метку, как вариант — с количеством товаров;
— Добавление в избранное — доступно без входа в приложение;
— Иногда кроме товаров добавлять можно бренды, образы, полезный контент, магазины, параметры поиска;
— Нажатие на кнопку можно сопровождать лёгкой вибрацией устройства, а также подтверждать всплывающим сообщением (тостом);
— Если в избранном есть разные списки, не заставляйте сразу выбирать, куда именно добавить товар. Ozon ненавязчиво предлагает сделать это в тосте;
— В списке товаров в избранном лучше закрепить заголовок, чтобы пользователь понимал, что просматривает. Можно показать количество товаров;
— Интересные фильтры: в наличии и не в наличии (упрощает навигацию, помогает управлять ожиданиями), товары, на которые цена снизилась;
— Если товар закончился, можно сразу в карточке предложить посмотреть похожие;
— Многие предлагают разделение избранного на пользовательские списки. Полезна возможность добавить товар в несколько списков сразу;
— В избранном можно предложить разрешить пуши, чтобы узнать о снижении цены;
— После перемещения товара в корзину не удаляйте его из избранного автоматически;
— Не забудьте о возможности быстро очистить избранное.

#favorites

В Хабре подвели итоги конкурса «Технотекст 2023», и вот какие статьи победили в категории «Дизайн»:

— Как работать с нейросетью Midjourney, чтобы получать желаемый результат (простой уровень, читать 8 минут);
— Переменные и условия: как быстро сделать в Фигме нелинейный прототип (средний, 5 минут). Уже была в UX Notes раньше;
— Figma to Frontend: как мы автоматически синхронизируем дизайн и код (средний, 7 минут).

Ксения Толокнова написала о навигации в мобильных приложениях.

— Ограничения таббара: все сценарии приложения приходится раскладывать в 3–5 условных папок; бывает непросто придумать короткие и понятные названия разделов;
— Эффект размытия сложно реализовать в Андроиде, поэтому таббар в одном и том же приложении на разных платформах может отличаться. Пример — Revolut;
— Где отображается: 1) только на основных экранах, 2) на основных и внутренних экранах, 3) на внутренних экранах при прокрутке вверх;
— Первый вариант выбирают, например, мессенджеры, чтобы не отвлекать пользователя от открытого чата;
— Во втором случае таббар не отображается только тогда, когда что-то открыто поверх: полноэкранные модальные окна (например, просмотр видео), шторки, экранные клавиатуры;
— Такая навигация запоминает положение пользователя в разделе. Если из выбранной в разделе Fitness+ тренировки перейти в Summary, нажатие на Fitness+ вернёт к тренировке. Повторное нажатие на Fitness+ откроет главный экран раздела;
— Применяется реже и для приложений со сложной структурой разделов;
— Третий тип больше подходит для контентных лент и статей. Фейсбук вообще комбинирует варианты 2 и 3;
— Интересные решения, которые легко реализовать: градиентный фон с прозрачностью, если есть только тёмная тема (Spotify), выделение центральной иконки, по нажатию на которую поднимается шторка с основными действиями в приложении (Binance);
— Sidebar для навигации рекомендуют использовать в мобильных приложениях с 5 и более разделами или с 2 и более уровнями иерархии в навигации. Но в iOS это будет кастомная разработка;
— В приложениях с большой базой информации часто используют навигацию через поиск. Этот вид навигации редко является единственным, но часто бывает ключевым;
— Top bar (Top app bar в Андроиде) важен для навигации, так как позволяет разместить кнопку для возвращения назад или открытия сайдбара и иконки дополнительных действий (в гайдлайнах Material Design рекомендуют до 3);
— В Андроиде заголовок текущего экрана располагают близко к кнопке «Назад». Люди, которые раньше использовали iOS, могут думать, что это название предыдущего экрана.

#navigation #tab_bar

Маргарита Хохлова рассказала об улучшении продукта с помощью текста.

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

#writing

Опубликовали видео с Alfa Design Meetup #2:

1. Женя Филатов, Звук — За гранью

2. Григорий Ковалев, Альфа-Банк — Волшебный чемоданчик

3. Татьяна Юдина, Альфа-Банк — Найм в дизайн-команду

4. Олег Мереуца, Альфа-Банк — Синдром самозванца: как с ним жить