Леонид Межевых, Полина Адрианова и Анастасия Батпаева поделились советами начинающим UX-исследователям.

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

Стас Мельников поделился тремя советами, как сделать интерфейс удобнее. Тематически они не связаны, просто сформулированы в марте — такой уж у автора формат.

— Если пользователь ввёл адрес электронной почты, но не смог авторизоваться (ввёл неверный пароль), подставляйте введённый ранее адрес в форму восстановления пароля. Например, так делает Booking;
— Если в мобильной версии сайта в поле надо вводить только цифры (например, код подтверждения), укажите для этого поля свойство inputmode=numeric, чтобы пользователю отображалась цифровая клавиатура;
— В тултипе к иконке пишите, что пользователь может сделать, нажав на неё. Например, на Booking у колокольчика тултип «View your notifications», у помощи — «Contact Customer Service», у флага — «Choose your language». А вот на Etsy у колокольчика тултип просто «Updates».

Дмитрий Капаев написал, почему готовые рецепты исследований не работают.

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

Александра Савельева написала, как сделать дизайн, который будет устойчив к изменениям и актуален продолжительное время.

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

Андрей Емельянов написал о типичных ошибках, которые допускает не носитель в интерфейсном тексте на английском языке.

— Сложные конструкции с нанизыванием слов. В английском этот приём позволяет творить чудеса, но злоупотреблять им не стоит. Например, выражение Nginx error log path (Путь к логу ошибок Nginx) лучше заменить на более понятное Path to Nginx error log. И ещё пример: Port scanner check interval → Port scannning frequency;
— Кальки с родного языка. Например, столбец со временем создания на английском обычно называют Created, а не Time of creation. И ещё пример: Login name (Имя пользователя) → Login;
— Лишние слова. Если страница настроек разделена на секции (Nginx section, Monitoring section, Logs section и так далее), слово section в заголовках секций будет лишним;
— Ещё авторы интерфейсных текстов бывают невнимательны к грамматике и пишут непонятные широкой аудитории описания, но так ошибаться они могут и на родном языке.

Данил Ковчий рассказал о своём подходе к дизайну, создании логотипа Яндекс Еды, работах для Яндекс Такси и Таксометра, логистического продукта DMS, Emex.

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

Саша Окунев написал о проведении первичной встречи по продуктовой задаче.

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

Егор Красноперов рассказал о роли дизайн-менеджера.

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

Майкл Виллар написал о контекстных меню.

— Они открываются нажатием на правую кнопку мыши (чаще всего) или кнопку контекстного меню;
— Если есть место, левый верхний угол меню располагается под курсором или кнопкой контекстного меню. Если места снизу нет, меню можно отобразить над ними или сместить;
— При отображении меню полезно выделять объект, с которым оно связано. Будет понятно, в отношении чего будет выполнено то или иное действие;
— Добавьте возможность перейти к пункту меню, напечатав начало или часть его названия. Обычно в этом случае выделяется первый подходящий пункт;
— Добавьте навигацию по пунктам с помощью клавиш «Вверх», «Вниз», «Влево» (закрыть подменю), «Вправо» (открыть подменю), «Ввод» (выбрать пункт), Esc (закрыть меню);
— Можно закольцевать переход между пунктами, чтобы нажатие «Вниз» позволяло переходить от последнего пункта к первому;
— Если пользователь выбрал пункт, перед закрытием меню полезно показывать обратную связь о том, что пункт был выбран, а не просто меню закрылось. В macOS выбранный пункт мигает;
— Группируйте похожие или связанные друг с другом пункты;
— Отключайте недоступные пункты. Так меню будут выглядеть одинаково, и пользователи будут знать, что действие возможно в другом контексте;
— Отображайте сочетания клавиш для пунктов;
— Добавляйте «…» к названию пункта, если после его выбора пользователю придётся вводить данные;
— Анимация появления и скрытия контекстного меню и его подменю может снизить скорость работы с ним;
— Используйте «безопасный треугольник», чтобы подменю не скрывалось, пока пользователь ведёт к нему курсор от связанного пункта меню.

Илья Бирман посоветовал, как интернет-магазин может рассказать о скором расширении ассортимента.

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

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

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

Оксана Киселёва написала о чекбоксах и радиокнопках.

— Радиокнопки используют для списков из двух и более взаимоисключающих вариантов, когда можно выбрать только один;
— Чекбоксы — когда можно выбрать несколько вариантов или не выбрать ни одного;
— Списки вариантов располагайте вертикально, так их легче просматривать;
— Текстовую подпись размещайте рядом с селектором (квадратным у чекбокса, круглым у радиокнопки), так понятнее, к чему она относится;
— Избегайте отрицания в подписи (если вы, конечно, не адепт тёмных паттернов): «Не присылать оповещения» → «Присылать оповещения». Иногда группа из 2 радиокнопок может быть понятнее одного чекбокса;
— В группе радиокнопок один из вариантов должен быть выбран по умолчанию;
— Нажатие и на селектор и на подпись должно приводить к выбору варианта;
— Нажатие на чекбокс или радиокнопку должно приводить к выбору варианта, а не выполнению действия (для действий используют кнопки);
— Сделанный с помощью чекбоксов и радиокнопок выбор сохраняйте не автоматически, а после подтверждения пользователем (нажатие на кнопку «Сохранить» или «Применить»).

#checkbox #radio_button

Лена Нексман написала об ошибках в анимации сайтов и приложений.

— Добавление анимации туда, где она не нужна. Например, где важен максимально быстрый отклик системы или железо слишком слабое, из-за чего всё тормозит;
— Слишком медленная анимация. Если анимация длится дольше 250 миллисекунд, подумайте, действительно ли она нужна, можно ли её ускорить и как часто пользователи будут её видеть;
— Анимация часто повторяется. Нет смысла анимировать добавление товара в корзину в приложении гипермаркета, где пользователь добавляет много товаров за сеанс;
— Превращение сайта или приложения в мультфильм, когда анимированы вообще все взаимодействия;
— Отображение бесконечного спиннера вместо прогресс-бара, когда время выполнения запроса известно;
— Полное отсутствие анимации. Она добавляет обратной связи и может принести пользователю дополнительное удовольствие от взаимодействия с продуктом.

Кейт Моран написала об основных диаграммах для визуализации результатов пользовательских исследований.

— Перед созданием диаграммы определите цель: что должен понять смотрящий на неё человек;
— Цифры бессмысленны без контекста. Процент завершённых покупок составляет 24% — это хорошо или плохо? Сколько было в прошлом году? Сколько у других продуктов?
— Контекст лучше всего показывают столбчатые (гистограммы), линейные и точечные диаграммы. В других типах диаграмм надо визуально оценивать углы, площади и объёмы, что сложно. Различия между представленными значениями легче всего понять из гистограмм;
— На парной гистограмме можно сравнить два ряда данных. Например, процент завершённых покупок для нескольких продуктов в прошлом и этом году. Столбцы сравниваемых параметров должны стоять рядом. Иногда вместо парной диаграммы может подойти обычная гистограмма, показывающая значение дельты (процент этого года минус процент прошлого);
— Горизонтальная гистограмма — хороший вариант, если подписи к столбцам оказались слишком длинными;
— Гистограмма с накоплением — популярный вариант, но не все её секции удобно сравнивать с соседними диаграммами (у части секций не будет одинаковой начальной точки); на ней не показать доверительные интервалы, важные для надёжного сравнения. В целом она сложна для понимания и входит в число диаграмм с высоким уровнем ошибок, лучше её не использовать;
— Линейная диаграмма лучше гистограммы подходит, чтобы показать тенденцию изменения данных со временем. Точки на ней должны показывать моменты получения данных;
— Диаграмма рассеяния (как линейная, но точки не связаны линиями) хорошо показывает взаимосвязь между двумя переменными.

Игорь Штанг опубликовал раздел о многостраничных изданиях из брендбука NASA 1976 года, который тянет на маленький учебник вёрстки, и поделился наблюдениями.

— Страницы объединены горизонтальными связями. Почти в каждой сетке есть колонки, но далеко не в каждой есть этажи. Из-за этого вертикальные связи обычно возникают сами собой, а о горизонтальных приходится думать специально. Многостраничник без крепких горизонталей часто выглядит как разрозненный набор страниц, а не единая композиция;
— Большой воздух зашит в макет заранее. Часто дизайнеры вспоминают о воздухе в последний момент, когда весь макет уже полностью забит материалом. Лучше решить эту проблему заранее и заложить свободное пространство ещё на этапе эскизов;
— Иллюстрации на развороте контрастны по размеру. Разница в размере картинок моментально организует композицию: из однородной каши получается визуальная иерархия. Если размеры всё-таки вышли одинаковыми, стоит развести картинки по тону: контурный чертёж на белом фоне против тёмного прямоугольника.

Джон Эгеланд написал о реализации в Дискорде подсветки элементов, получивших фокус.

— Шорткаты позволяли переключать каналы, перемещаться по полям форм, открывать поиск и быстрый переключатель. Нужна была возможность полноценной работы с продуктом с помощью одной лишь клавиатуры;
— Сложнее всего было реализовать подсветку элемента, получившего фокус;
— Решение с псевдоклассом :focus и свойством outline в большом проекте ломается: обводка обрезается в контейнере со стилем overflow-hidden, не совпадает с радиусом скругления отдельных элементов, искажается маржинами и падингами;
— В итоге нашли масштабируемое решение, работающее «из коробки». JavaScript, React, подробнее в статье;
— Оно позволяет отследить фокус на отдельном элементе, а подсветить весь включающий его контейнер. Полезно, например, когда в чекбоксе можно нажать и на селектор и на текст, но фокус получает только селектор;
— Покрывает ситуации, когда элементы частично закрыты или прокручены за пределы экрана;
— Позволяет задать любой радиус скругления для обводки (в частности, это нужно, чтобы он совпадал с радиусом скругления элемента или компонента);
— Относительные сложности с подсветкой двигающегося или трансформирующегося элемента (обводка иногда запаздывает), что важно, так как анимаций в интерфейсах становится больше. А также — с изменением цвета обводки в зависимости от цвета фона (решение есть, но некрасивое и неэффективное).

Михаил Греков составил топ популярных недостатков в интерфейсах b2b-продуктов.

— Отсутствие разрядов в числах. 100000 → 100 000;
— Склонения с числами. «Найдено 21 результатов»;
— Сортировка списков. Разработчики любят сортировать рандомно или по ID;
— Не сообщают об ограничениях для текстовых полей. Пользователь вводит много текста и удивляется, что сохранилось не всё;
— Не сохраняют состояния. Пользователь что-то фильтрует, сортирует, изменяет размеры столбцов, но любая перезагрузка возвращает всё в состояние по умолчанию;
— Открывают модальные окна для редактирования любой мелочи;
— Все настройки в формате Да/Нет;
— Не делают никаких маркеров отправки запроса;
— Позволяют редактировать всё подряд, даже если есть взаимоисключающая логика, а все проблемы вываливают на пользователя при попытке сохранения.

Андрей Шапиро написал об отображении ошибок в асинхронном вебе.

— Проблемные ситуации возникают, когда не удалось выполнить запрос а) отвечающий за часть интерфейса, б) ставящий под угрозу работу всего приложения;
— Если пользователь не может повлиять на ситуацию, ему достаточно знать, что действие не сработало. Средства мониторинга должны автоматически отправлять техническим специалистам детали;
— Даже если информация об ошибке пришла моментально, стоит показывать состояние обработки запроса и после паузы в 300–600 миллисекунд возвращать интерфейс в предыдущее состояние;
— Сообщать о неудаче лучше в пределах элемента, группы или формы и не использовать для этого всплывающее сообщение вроде снекбара;
— Круто переиспользовать для этого существующие элементы, например, покачать полем для ввода пароля (если пароль неверный) или анимировать кнопку вместо отображения отдельной крутилки;
— При повторе действия надо скрывать сообщение о предыдущей неудаче.

Вида Чжан написала об использовании пространственной логики при проектировании интерфейса.

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

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

Энтони Ценг из UX Movement написал о структуре экрана настроек.

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