Олег Биргер, автор канала @cxdao, написал о развитии клиентского опыта (на примере «Газпромнефти»).

«У нас есть постоянные клиенты, они каждый день ездят на работу и через день заправляются: им так удобно. И наша задача — не продавать этим людям топливо, а помогать им добираться. Фокус с количества проданного топлива должен сдвигаться на то, скольким людям в этом месяце мы помогли доехать до работы. Потому что проданное топливо — это следствие ежедневного физического передвижения людей.

Мы должны сопровождать перемещение клиентов любыми способами, тогда они будут больше у нас покупать. Мы должны визуализировать процесс того, как человек выходит из дома, заводит машину, едет на работу, отвозит детей в школу. Если у него машина не заведётся, то он не заправится у нас. Если у него страховки нет, и его увезли на штрафстоянку, то он не заправится. Если шины не поменял и в аварию попал, то он не заправится. Мы должны сопровождать клиентов максимально подробно на всех этапах, где только можем, и делать это нужно с выгодой для бизнеса».

https://habr.com/ru/company/gazpromneft/blog/531232/

Максим Жуков написал о фильтрации в интернет-магазинах.

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

https://vc.ru/design/187926

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

1. Респондент говорит обо всём, кроме того, что нужно;
2. Респондент отвечает односложно, не раскрывая подробностей;
3. В рассказе постепенно появляются детали, в которых теряется и интервьюер, и респондент;
4. Придуманный на ходу вопрос уводит обсуждение в сторону;
5. Структура вопросника задаёт рамки беседы, которые мешают рассуждениям респондента.

Пример третьей ситуации: вы ищете барьеры, возникающие при оформлении ипотеки. Респондент рассказывает о своём опыте и всех, с кем он контактировал. Чтобы сохранять контекст, приходится удерживать в голове длинные цепочки размышлений. Вы хотите узнать о барьерах в каждой точке контакта и просите повторить рассказ.

Респондент может:
— Решить, что вы невнимательны, и потерять интерес к интервью;
— Запутаться в должностях, компаниях и продуктах, и вы придёте к неправильным выводам при разборе интервью.

Что делать: упростить обмен информацией. Изобразите на бумаге всех менеджеров, названия компаний и продуктов, которые важны для рассказа. Попросите респондента показывать, о ком или о чём он говорит. У вас появится артефакт, к которому можно обращаться после интервью.

https://medium.com/userhouse/e72ec6a64b1d

Собрал самые популярные публикации UX Notes по числу лайков и репостов в ВК за прошедший год.

В топ-20 попали:
— 8 подборок записей докладов с мероприятий: UX-марафон, World Usability Day, митап «Инклюзивный дизайн», митап «Гибридный дизайнер», G8, ProfsoUX, митап «Сила взаимодействия;
— 6 переводов статей: Майтрик Катария, Дэнни Сапио, Тарас Бакусевич, Гаррет Кролл, Том Кенни, Джордж Кейв;
— 5 оригинальных статей: Павел Шерер, Павел Голюдов, Евгений Игнашов, Максим Жуков, Дарья Дундукова;
— 1 видео: Пабло Стэнли.

Спасибо, что читаете и рекомендуете @uxnotes знакомым дизайнерам и проектировщикам. Спасибо авторам полезных и интересных материалов.

https://vandergrav.ru/popular-ux-notes-2020/

В Mojo написали, как сделать удобный интерфейс для пожилых.

К 2050 году каждый 6-й человек в мире будет старше 65 лет. Да и все мы когда-нибудь состаримся. С какими проблемами сталкиваются пожилые:

1. Мелкий текст. Используйте кегль от 14 pt, гарнитуры с крупными буквами (14 кегль Futura PT выглядит как 10 кегль Roboto), позвольте регулировать размер текста; избегайте шрифтов с необычным начертанием.

2. Низкая контрастность. Размещайте текст на чистом фоне без изображений; проверяйте контрастность и сохраняйте её на высоком уровне; вместо серого текста на сером фоне ищите другие способы управлять пользовательским вниманием.

3. Непонятные иконки. Добавляйте текстовые метки, которые видны без наведения курсора; их дизайн должен быть простым и схематичным; тестируйте иконки на узнаваемость и запоминаемость.

4. Отсутствие гибкости: поля, принимающие данные только в определённом формате; неспособность распознавать опечатки.

5. Непонятные формулировки.

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

https://vc.ru/design/194193

Игорь Штанг написал о выравнивании текста и размере полей.

Выравнивание текста по левому краю лучше сочетается с узкими полями — ровный край как бы примагничивается к границе формата. Широкие поля приводят к противоречию: текст стремится к центру, но его несимметричная форма сопротивляется центрированию.

Выравнивание текста по центру лучше сочетается с широкими полями — рваному краю надо больше воздуха.

https://nobelfaik.livejournal.com/220315.html

Борис Юзефпольский написал об особенностях пользовательских интервью онлайн.

1. Нет живого контакта с респондентом, иногда нет изображения. Зато в интервью может участвовать вся команда.

Чтобы респондента не смущала толпа людей, камеру и микрофон включают только интервьюеры (не больше 2 человек). Если кто-то из команды хочет задать вопрос, он пишет его во внутренний чат (интервьюер вопрос видит и задаёт в удобный момент) или озвучивает в конце беседы, когда интервьюер передаёт слово.

2. Между «договориться об интервью» и «провести интервью» — пропасть. Люди забывают, им сложно планировать.

Настроили систему напоминаний. Но несмотря на напоминания, выбор удобного времени и вознаграждение, 10% респондентов не подключаются из-за технических проблем, а 20−30% не приходят вовсе.

3. У респондентов разные технические условия. Первые минуты интервью приходится тратить на технические неполадки.

Написали подробные и понятные инструкции. Неполадки помогли увидеть барьеры в использовании продукта (настройка техники, загрузка, первые действия) и понять, почему пользователям трудно в некоторых ситуациях.

4. Сложно проводить большие фокус-группы.

В спорах и дискуссиях внутри фокус-групп исследователи обычно находят много полезного. Онлайн приходится жертвовать этим в угоду порядку и чётким правилам взаимодействия. Зато можно услышать мнения всех респондентов.

5. Детям сложно раскрыться в онлайн-интервью. Зато они уверенно чувствуют себя в юзабилити-тестах.

https://vc.ru/uchi.ru/192356

Опубликованы видео с Avito Design Talk:

1. Настя Ларкина, Авито — Точки роста для дизайнера в крупной компании
youtube.com/watch?v=4qBiY4XkPmE

2. Алексей Кандауров, Циан — Значимость дизайнера на разных скоростях разработки
youtube.com/watch?v=1YjKkbaMekU

3. Владимир Погорелов, Тинькофф — Дизайн в краудсорсинге и краудсорсинг в дизайне
youtube.com/watch?v=wpol2li9NPM

4. Круглый стол «Личные проекты дизайнеров»
youtube.com/watch?v=Da76M0gkUM0

— Все видео и презентации: habr.com/ru/company/avito/blog/533620/
— Все видео в альбоме ВК: vk.com/videos-50773057?section=album_45

Павел Шерер написал об этапах создания информационной архитектуры.

ИА — это описание связи всего со всем. Это совокупность данных об информационной структуре цифрового продукта, способствующая его правильной работе, выполнению задач и интуитивному доступу к содержимому.

Основные этапы создания:

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

2. Декомпозиция. Разделение проекта на отдельные информационные сущности со своими свойствами. Сущности могут быть вложенными.

3. Классификация пользовательских потребностей (задач) и информационных сущностей. Позволяет понять, как именно следует связать сущности, как они будут друг к другу относиться.

4. Выявление связей. От одного ко многим, от многих ко многим, плоские, иерархические и так далее.

5. Фиксация свойств сущностей.

6. Составление предметных и навигационных схем продукта. Самый сложный этап: фиксация сложившейся картинки кажется второстепенной задачей, но без грамотного отчуждения вся остальная работа станет бесполезной.

https://sherer.pro/blog/informacionnaya-arxitektura-kratkij-ekskurs/

28 января (через 9 дней) пройдёт онлайновый UX-марафон об информационной архитектуре.

Организаторы планируют с разных сторон подойти к теме: начать с теории, показать инструменты и методологии, закрепить на кейсах.

Программа:
1. Алексей Бородкин — Фундаментальная лекция про основы ИА;
2. Валерия Курмак — Ошибки при проектировании или какую роль в доступности сайтов и приложений ИА играет для незрячих;
3. Павел Шерер — Собираем с нуля ИА;
4. Виталий Мазуревич — Мастер-класс по карточной сортировке;
5. Анастасия Попова — Объектная модель в проектировании;
6. Михаил Галушко — Использование ментальных карт при работе с ИА на примере Xmind;
7. Сергей Петров — Инфоархитектурный разбор: сервисная платформа для операторов в отделениях;
8. Денис Васильев — ИА нового сайта Банка России.

Стоимость сегодня и завтра 3300 руб, потом будет дороже.
Промокод на 10% скидку: UXNOTES
Промокод на 25% скидку можно получить за публикацию о событии
Подробности: https://ux-marafon.ru/new

Публикация оплачена

Максим Жуков написал, как упростить аутентификацию и регистрацию в интернет-магазине.

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

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

https://vc.ru/design/195503

Ахнаф Кунакулов и Антон Илларионов, дизайнеры @pavlova_cc, написали, как обсуждать с заказчиком промежуточные артефакты проектирования.

На этапе сбора требований и определения функциональности стоит обсуждать только список пользовательских сценариев.

При создании первых концептов (на бумаге, маркерной доске или в Фигме) надо обсуждать:
— Связность показанной истории;
— Отвечает ли она портретам целевой аудитории;
— Детали истории;
— Стартовые точки ключевых сценариев;
— Чем пожертвовали в концепте.

На этапе детализации создают высокодетализированный прототип, чтобы проверить, отвечает ли интерфейс всем требованиям. Заказчик:
— Следит, чтобы были проработаны все ситуации;
— Просит объяснить принятые решения;
— Обсуждает отклонения от базовых сценариев.

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

Быть заказчиком — это тоже работа.

https://vc.ru/design/197039

Опубликованы видео с Fintech Design Conf 2020:

1. Команда Райффайзенбанка — Общая дизайн- и бренд-стратегия, устройство дизайн-команды и дизайн-системы, история работы над гайдлайнами
youtube.com/watch?v=4Hni1ySWLXQ

2. Команда Тинькофф Инвестиций — История создания мобильного приложения, соцсети Пульс для инвесторов, профессионального терминала
youtube.com/watch?v=0cL1KebEi4Y

3. Команда Home Credit Bank — Баланс навыков продуктового дизайнера, унификация дизайна, лучшие практики обработки ошибок и краевых состояний, профессионально-эмоциональная гигиена дизайнера
youtube.com/watch?v=mPi8Y0uL47E

4. Валерия Курмак из Сбера и Евгений Кузнецов из AIC — Обзор проблем поддержки инклюзивного дизайна в банковских продуктах
youtube.com/watch?v=pq9dYUGl2EA

5. Команда Открытие Брокера — Специфика работы инвесторов и трейдеров, структура и формат работы дизайн-команды, история изменений интерфейса, формат съёмок обучающих видео
youtube.com/watch?v=_uq0ZX9mg4c

6. Команда N26 — Работа бренд- и дизайн-команды в общем и на примере проекта по стандартизации цветовой палитры
youtube.com/watch?v=ptrnV4nCrxE

7. Лена Махно и Эмилия Городовых, Контур — Работа команды UX-исследователей
youtube.com/watch?v=Pfh9QyJ-TNc

8. Ирина Волошина и Виталий Шитов, Альфа-Банк — Работа бренд-команды
youtube.com/watch?v=UuOU_dI0Ne0

9. Команды БКС и AIC — Свежий редизайн и ребрендинг
youtube.com/watch?v=fd2ziu307HU

Все видео в одном месте: jvetrau.com/fintechdesign-2020/

Михаил Ярошук написал, как Booking.com манипулирует пользователями.

Эффект дефицита:
— Сайт показывает в результатах поиска недоступные варианты с надписью «Вы не успели»;
— Что таких номеров осталось мало (1−2);
— Сколько раз номер бронировали за последние 12 часов;
— Процент (количество) отелей в этом городе (похожих отелей в городе), в которых уже нет свободных номеров;
— Сколько людей просматривают страницу номера прямо сейчас;
— Сколько часов назад было последнее бронирование номера;
— Текст «Вам улыбнулась удача — здесь обычно нет мест!».

Жадность:
— Бесплатное повышение категории номера;
— Скидки на бронирование автомобиля или самого номера.

Эффект социального одобрения:
— «Хороший вариант для пар — они оценили удобства для поездки вдвоем на 9,1»;
— «Этот вариант оправдал или превысил ожидания 97% гостей, оставивших отзыв»;
— «Хит продаж в городе Неаполь!».

Боязнь ошибиться в выборе:
— Бесплатная отмена бронирования;
— Возможность оформить бронь без кредитной карты.

https://vc.ru/marketing/89272

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

Получение приглашения пройти опрос:
— Действия компании не согласованы: клиент обратился с претензией и при этом получил приглашение оценить качество товара;
— Приглашение отправлено от имени специалиста, которого надо оценить;
— Клиент не подготовлен к опросу заранее. После продажи можно сказать, что через неделю он получит приглашение дать обратную связь.

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

Переход к опросу:
— Срок действия приглашения ограничен;
— Терминал для оценки находится рядом со специалистом, которого надо оценить.

Прохождение опроса:
— Опрос собирает контактные данные. Это значит, что он не персонализирован;
— На уточняющий вопрос можно ответить только в свободной форме. Узнавая о причине негатива, выделите ключевые факторы и добавьте поле для свободного ввода;
— Все вопросы обязательные. Если клиент не захочет отвечать на конкретный вопрос, он закроет опрос;
— Не используется ветвление. Если клиент в первом ответе низко оценил сервис, на втором вопросе можно написать «Очень сожалеем, что огорчили вас. Что мы могли бы исправить?».

https://hardclient.com/feedback-acquisition-pitfalls

Марк Херст написал о тёмных паттернах и «возрождении» UX-дизайна.

Если до 2018 года UX-дизайн терял влияние, то потом он полностью изменился. Сейчас пользовательскому опыту можно дать новое определение — эксплуатация пользователей.

Например: отписка от Amazon Prime. То, что должно быть одной страницей с кнопкой «Отменить подписку», стало шестью страницами с тёмными паттернами, которые вводят пользователей в заблуждение и отвлекают.

В Amazon есть хороший UX-отдел, который обманывает, эксплуатирует и вредит клиентам. UX-дизайн полностью изменился: ранее он защищал интересы пользователя, а теперь работает против него.

Такое «возрождение» дорого обошлось: превратило дизайн во вредную сферу и привело к оттоку хороших специалистов. Как следствие, например, во время крупнейшего кризиса здравоохранения Нью-Йорк не может создать понятный сайт о вакцинах.

https://vc.ru/design/202669

Clo S написал о вреде бесполезных уведомлений и как их сделать полезнее.

— Человек, который получил уведомление о новом сообщении, хуже выполняет задачи на внимание, так как факт получения этого сообщения занимает часть его внимания;
— Даже счётчик новых уведомлений мешает. Человек открывает приложение с определённой целью, но этот счётчик немедленно привлекает его внимание;
— Красный цвет, которым обычно обозначают уведомления, заметен, и люди приучены с особым вниманием относиться к тому, что отмечено красным;
— Уведомления часто ведут к задачам, которыми пользователь не собирался заниматься прямо сейчас. И часто они сообщают о вещах, неважных для конкретного человека;
— Чтобы создать хорошее уведомление, надо учитывать, когда сообщаемая пользователю информация требует внимания;
— Факторы полезного уведомления: срочность (встреча через 10 минут), важность (налоговая декларация через месяц), контекст (номер места и вагона в поезде, который отходит через час);
— Полезность одного и того же уведомления может быть разной для разных людей, поэтому должна быть возможность настройки: по теме сообщения, способу, частоте и времени доставки;
— Полезна возможность отключать все подобные уведомления прямо из списка уведомлений;
— Полезен режим «Не беспокоить» в рамках отдельного продукта;
— Хороший вопрос для самопроверки: «Допустили бы мы такое поведение, если бы оно исходило не от цифрового посредника, а от человека?»

https://ux.pub/kak-sozdat-produmannyy-dizayn-push-uvedomleniya/

Джозеф Мюллер написал о проблемах вложенных модальных окон.

Модальное окно закрывает основное содержимое экрана, пока пользователь не выполнит в этом окне действия. Вложенное модальное окно появляется, когда два модальных окна накладываются друг на друга.

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

Что можно сделать со вложенными модальными окнами:
— Превратить их в шаги отдельного сценария внутри основного модального окна;
— Если есть место, показывать их в виде дополнительной боковой панели или раскрывающегося блока, сдвигающего вниз содержимое основного окна;
— Если в них находятся формы для редактирования содержимого, отображать их в строке с содержимым в основном окне (Inline Edit);
— Возможно, проблема в архитектуре, и правильнее не разбираться со вложенными модальными окнами, а сделать основное модальное окно обычной страницей.

— Перевод (не работают анимации с вайрфреймами решений): https://ux.pub/problema-vlozhennyh-modalnyh-okon-v-tsifrovyh-produktah/
— Оригинал [English]: https://uxplanet.org/6762351cf6de

Сергей Алексеев написал о пользовательском тестировании ещё не работающего голосового интерфейса.

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

Волшебником может быть и сам респондент. Это позволит узнать наиболее релевантные для него ответы продукта.

Избегайте слов-подсказок в заданиях вроде «Попросите голосового помощника включить фильм „Любовь и голуби“». Скорее всего, респондент так и скажет «Включи фильм „Любовь и голуби“», и вы ничего нового не узнаете.

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

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

https://vc.ru/design/198986