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

— 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. #navigation

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

— Правильная последовательность заголовков (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 минут).

Команда B2C Customer Сare ищет опытного увлеченного UX-исследователя, который поможет сформировать культуру исследований в зрелой data-driven команде.

Мы занимается обслуживанием клиентов – создаем рабочие места для сотрудников и сценарии голосового IVR для клиентов.

Чем предстоит заниматься:

✅ проводить исследования полного цикла от брифа до работы с результатами
✅ следить за развитием индустрии: проводить бенчмарки ботов, анализировать AI-тренды
✅ участвовать в кросс-командных исследовательских проектах кластера.

Ждем профессионалов с опытом выстраивания взаимодействия в команде и организации непрерывного процесса исследований.

Предлагаем гибридный график работы, комфортный офис Сбербанк Agile Home, расширенный ДМС с первого дня и льготные условия по ипотеке с выгодой до 4%.

Откликайтесь по ссылке.