UX Notes

Елена Тарасюк написала о повышении конверсии.

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

#ecommerce #conversion

Тесс Гэдд написала о входе в систему.

— SSO — технология единого входа, когда используются внешние системы вроде Google. Так входить намного быстрее, чем с помощью логина и пароля (если, конечно, пользователь не использует «Связку ключей» или аналоги);
— Шаблоны входа: а) поля для ввода имейла и пароля, б) кнопки для входа через SSO и почту, в) гибридный с полями и кнопками, г) пошаговый, когда пользователь сначала вводит имейл, д) отправка на почту ссылки для входа, е) окно с предложением войти;
— В идеале должно быть менее 3 вариантов входа через SSO. Не стоит полностью отказываться от входа через почту, так как не все доверяют SSO;
— Гибридный вариант обычно выглядит перегруженным;
— В пошаговом варианте система может запоминать имейл пользователя и сразу показывать поле для ввода пароля;
— Окно с предложением войти через свой гугл-профиль отображается, если пользователь входил так на сайт раньше. Так не надо даже открывать форму входа;
— Если формы входа и регистрации скомпонованы одинаково, людям будет проще разобраться с входом. Но они могут отличаться. Например, регистрация может быть полностраничной и включать список причин, почему надо зарегистрироваться. А вход — отображаться в модальном окне, чтобы сохранялся контекст текущего сценария (например, если надо авторизоваться для перехода к оплате);
— Предварительная обратная связь отображается до отправки данных. Так можно подсказать, что пароль недостаточно надёжен или имейл введён не полностью;
— В последующей обратной связи сообщают об ошибках входа. Безопаснее не говорить, в чём конкретно проблема: неправильном пароле или имейле;
— Не используйте контрольные вопросы. Люди забывают ответы на них, а хакеры находят нужную информацию в соцсетях и выведывают у жертв;
— При входе из другой локации или браузера, отправляйте письмо с уведомлением, чтобы предупредить пользователя.

In English. #login

Гил Боуник написал о манипулировании графиками.

— Такие графики будут вводить в заблуждение, оставаясь на 100% точными;
— Если показатели за последние 1–2 месяца не очень, можно их опустить. Увидев такой график, просите показать свежие цифры;
— Если видны пики, показывающие неустойчивую динамику показателя, можно изменить масштаб: например, показывать годы вместо кварталов. Просите увеличить масштаб;
— Если показатели роста выглядят плохо, можно показать кумулятивные данные;
— Если рост недостаточно внушительный, можно поджать график по оси X или изменить базовую линию (или всё это вместе). Прежде, чем изучать тенденции, обратите внимание на ось Y;
— Когорта — группа клиентов, которые совершили одинаковое действие в заданный промежуток времени;
— Если графики когорт показывают снижение показателей, поместите данные на график, основанный на событиях. Но опытные менеджеры и инвесторы, скорее всего, захотят углубиться в когортный анализ;
— Также можно отфильтровать данные, например, показывать пользователей с жёсткой и мягкой активацией. Изучая график, спрашивайте, все данные предоставлены или их часть;
— Активация — точка, в которой пользователь находит ценность в продукте и предоставляет взамен ценность для бизнеса. Пользователи с жёсткой активацией прошли переломный момент с точки зрения использования продукта и ценности, которую они получили от него. Пользователи с мягкой активацией попробовали сервис и даже заплатили за него, но не прошли этот переломный момент.

In English. #data_visualization

Илья Монин написал, как бороться с людскими пробками перед эскалаторами.

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

#transport

Михаил Греков собрал папку каналов о UX/UI-дизайне. Там 18 проверенных временем каналов, включая UX Notes, и ещё несколько, которых я читаю, вроде UX Horn и Хуикс. Добавить себе эту папку можно в последней версии Телеграма.

#media

В Альфа-Банке поделились результатами исследования, как форматирование текста влияет на восприятие и эмоции читателя. И подробностями дизайна исследования.

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

#typography

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

Дэвид Пирсон. Обложка книжной серии Great Ideas издательства Penguin Books. 2010. Другие обложки здесь

Юля Кондратьева поделилась результатами исследований, как более конкретные формулировки влияют на поведение покупателей.

— Оператор колл-центра может сказать абстрактно, что посылка прибудет «по адресу» или конкретно «на Московский проспект, 19»;
— Продавцы и операторы склонны к абстрактным формулировкам, так как обслуживают десятки людей в день, и им так проще;
— Шаблоны сообщений с абстрактными формулировками легче разрабатывать;
— 1-е исследование показало: чем конкретнее формулировки операторов (+5,6% конкретности), тем более довольными уходят покупатели (+8,9% удовлетворённости);
— 2-е показало влияние на средние расходы клиентов в течение 90 дней после конкретной коммуникации: +30% и +13%, если исключить тех, кто ничего не покупал в течение 90 дней до коммуникации;
— Если оператор отвечает конкретно, клиенту кажется, что тот внимательно его слушает и лучше помогает.

#writing

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

#accessibility #tool

Давид Саргсян написал о требованиях к интерфейсу.

— Постулат методологии Agile: «Работающий продукт важнее исчерпывающей документации»;
— Чтобы уложиться в спринт, часто жертвуют документированием: отдают разработчиком тезисные требования, подкреплённые устными объяснениями;
— Они иногда бывают неполными, и разработчики тратят время на уточнения и предположения;
— Потом при доработке или создании смежной фичи приходится тратить время на повторное исследование логики её работы. Можно упустить какие-то нюансы, что ухудшит итоговое качество продукта;
— Из-за пробелов в логике растёт техдолг, на исправление которого со временем требуется всё больше ресурсов;
— Чтобы этого избежать, аналитик должен 1) выделить отдельные элементы интерфейса, 2) задаться рядом вопросов о логике их работы;
— Давид выписал вопросы к 12 самым популярным элементам интерфейса: текстовый элемент для чтения, таблица, поле ввода, раскрывающийся список, поиск, календарь, кнопка, чекбокс, радиокнопка и переключатель, карта, уведомление, загрузчик файлов, индикатор выполнения;
— Например, поле ввода: обязательно ли, ограничение на количество символов, нужны ли подсказка с маской, реакция системы на дубликаты, может ли пользователь редактировать сохранённые данные;
— Раскрывающийся список: можно ли выбрать несколько значений, будет ли поиск по значениям, можно ли добавлять новые значения, как на список значений влияют другие поля.

Перекликается с моей статьёй о функциональной спецификации интерфейса, там тоже фигурировали вопросы к отдельным элементам интерфейса. #docs

Виталий Фридман написал об отзывах и рейтингах товаров.

— В отзывах люди ищут подтверждения, что реклама не врёт, цена справедлива, товар их удовлетворит, есть похожие на них люди, которые остались довольны;
— Также их интересуют важные детали, решаются ли выявленные проблемы и худшее, что может случиться после покупки;
— Люди сначала изучают негативные отзывы. У хороших продуктов их немного, по ним понятно, что проблемы эпизодические: сорвали сроки доставки из-за праздников и подобное;
— Не все негативные отзывы люди считают таковыми. Значимы отзывы похожих на них людей относительно важных им аспектов. Если не нужна доставка за границу, не важно, что есть жалобы на соответствующую упаковку;
— Важно, чтобы клиенты писали честные негативные отзывы. Просите конкретно указывать, что не устроило и была ли проблема в конечном итоге решена;
— Показывайте среднюю оценку, лучше с одной цифрой после запятой (например, «4,7 из 5»), чтобы товары с оценкой 3,6 и 4,4 не получали одинаковый рейтинг 4;
— Показывайте общее количество голосов. Большинство людей выберет товар с рейтингом 4,5 и 57 голосами, а не с рейтингом 5 и пятью голосами;
— Идеальный рейтинг — между 4,5 и 4,89, если отзывов достаточно много (больше 75). Слишком высокий рейтинг вызывает подозрения, покупатели начинают искать недостатки, о которых не сказано прямо;
— Покажите диаграмму распределения оценок. Там должно быть J-образное распределение: достаточно отрицательных отзывов, очень мало средних и очень много положительных;
— Почему не нормальное распределение: обычно люди тратят время на отзыв, когда товар обрадовал или расстроил;
— Оценки и диаграммы распределения можно показывать по отдельным атрибутам товара;
— При написании отзыва предлагайте выбрать теги. Они могут касаться как товара (и зависеть от категории товаров), так и купивших его людей. Эти теги могут быть отдельными фильтрами;
— Можно спросить, готов ли покупатель рекомендовать товар. Даже с оценкой в 3 звезды он всё ещё может его рекомендовать. Для усиления эффекта можно совместить процент рекомендаций с характеристиками этих людей: «86% клиентов (занимаются бизнесом более 5 лет) рекомендуют этот продукт»;
— Анализируйте отзывы и давайте резюме положительных и отрицательных отзывов. Особенно полезно для страницы сравнения товаров;
— Дайте возможность отмечать полезные отзывы, фильтровать и сортировать отзывы по оценке, дате написания, полезности, наличию фото и так далее, а также искать в них отдельные слова;
— Дополняйте отзывы данными клиентов: имя, местоположение, диапазон возраста, роль или должность, ссылка на соцсети, фото и так далее.

In English. #rating #ecommerce

Александр Овчаренко написал о метасценариях взаимодействия.

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

#scenario

В МТС написали об измерении кайфовости.

— Метрика опирается на SUPR-Qm Джеффа Соро, включающую большой перечень причин, по которым люди кайфуют от приложений;
— SUPR-Qm значительно пересекается с оценкой опыта использования (UMUX) и лояльности (NPS), а также рейтингом приложения;
— От чего зависит кайфовость: эмоциональная приверженность, функциональность и удобство, дизайн;
— Краткая версия анкеты включает вопросы: 1) Я не могу представить свой смартфон без X; 2) X легко использовать; 3) X имеет все функции или особенности, которые могли бы мне понадобиться; 4) Дизайн X выглядит обыденным (обратная шкала);
— Краткая версия чувствительна к изменениям в продукте;
— Полная версия включает 18 вопросов, в том числе «Мне нравится открывать новые функции в X»;
— Если главная функция приложения — контент, этот вопрос надо заменить на «…открывать новый контент в X»;
— Проводить опрос стоит среди тех, кто пользуется продуктом более одного месяца;
— Метрику можно использовать для оценки конкурентов и собственного прогресса (или регресса, ха-ха);
— Не стоит проводить опрос сразу после изменений в продукте, надо дать время пользователям, чтобы привыкнуть (пару месяцев);
— Результаты исследований отличаются в зависимости от канала. Не меняйте их при оценке динамики.

#metrics

Никита Геннадьевич изучил исследования о тёмной теме и поделился выводами.

— По разным опросам не менее 2/3 разработчиков при работе используют тёмную тему;
— Хорошее освещение рабочего места, но не слишком яркое, увеличивает продуктивность и уменьшает количество ошибок;
— Более высокая общая яркость и меньший зрачок → более чёткое изображение на сетчатке → лучшее восприятие;
— Восприятие улучшается при использовании светлой темы, но здесь важнее хорошее освещение рабочего места. Обычно светлая тема используется на светлом рабочем месте;
— Исследования показывают, что глаза меньше устают с тёмной темой. Лучше использовать её, если пользователь долго работает с продуктом;
— Среди людей 55–84 лет катаракта (помутнение хрусталика) распространена у 72,8%;
— С ней люди видят сайты в светлой теме размытыми;
— Если включена тёмная тема, зрачок немного расширяется, и изображение воспринимается более чётко;
— Также тёмная тема облегчает жизнь людям с фотофобией.

#dark_theme #accessibility

Станислав Хрусталёв собрал идеи для страницы с сообщением о сделанном заказе.

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

#ecommerce

В Спотифае (доступен на 65 языках в 195 странах) написали о локализации. Немного водянисто, но интересные тезисы есть.

— Локализация создаёт чувство принадлежности, что важно для музыкальных стримингов;
— Локализация — настройка продукта таким образом, чтобы каждый пользователь воспринимал его как созданный земляками;
— Процесс локализации включает интернационализацию — внедрение в продукт решений, которые позволят адаптировать его для других стран и языков без технических доработок. Например, поддержка разных форматов дат;
— Команда локализации с самого начала тесно работает с продуктовыми подразделениями. Их знания о разных языках (например, что слова в романских языках вроде испанского занимают на 25% больше места, чем в английском) помогают создавать достаточно гибкий дизайн и не писать текст, который будет проблематично перевести;
— Пользователи Спотифая в Японии предпочитают более просветительский и прямой тон голоса, в Индии — игривые фразы и юмор;
— Не берите английский за основу при разработке. На английском можно обойтись одним шаблоном «[Artist name] released a new [song/album]», тогда как во многих языках надо учитывать пол исполнителя и то, что «песня» и «альбом» — разного рода;
— Не забывайте, что в стране может быть больше одного языка. Например, при запуске в США нужен перевод на испанский;
— О чём нужно помнить: форматы времени, даты и чисел; идиомы, сленг и игра слов; эмодзи, аббревиатуры и всё, что связано с культурой или страной, например, люди, места, традиции или праздники.

In English. #localization

Тагир Хайрутдинов написал об играх в банковских приложениях.

— Геймификация — добавление игровых механик, чтобы сделать скучные занятия интереснее;
— Например, приложение Pain Squad помогает подросткам с раком справляться с болью и заполнять дневник болезни. За каждый отчёт игрок продвигается по карьерной лестнице и помогает своей команде;
— 70% компаний из списка Global 2000 в той или иной мере используют игровые механики;
— Мини-игры в приложении банка (например, «Симулятор мошенника») формируют привычку чаще заходить, открывают пользователям новые функции вроде сервиса определения номера;
— Что может мотивировать пользователей: возможность поиграть и отвлечься, шанс выиграть деньги, повышенный кешбек и другие бонусы;
— Метрики: а) Доля пользователей, принявших участие в игре; б) Сколько людей начали игру; в) Сколько закончили; г) Сколько игр в среднем сыграли; д) Количество шерингов игры; е) Среднее время в игре; ж) Показы, клики и CTR разных источников трафика в игру; з) Среднее количество транзакций в приложении на клиента, авторизаций; и) Средняя сумма снятия наличных на клиента; к) Количество шерингов карт;
— Не стоит ждать быстрого эффекта, если только игра на него не заточена (вроде стимулирования продаж);
— Сравнивать метрики можно между игроками, контрольной группой и всеми пользователями;
— Надо отслеживать и игровые метрики, чтобы понимать, когда игра становится слишком скучной или сложной и теряет игроков;
— О том, что мини-игры повышают бизнес-метрики, говорят планы Альфа-Банка запускать новые игры, причём не только на мобильных устройствах, как раньше.

#gamification

Никита Семёнов поделился своим чеклистом для проверки дизайна интерфейса. Некоторые пункты:

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

#review

Кирилл Богатов написал о голосовых помощниках.

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

#voice

В Purrweb написали о дизайне приложений для телевизоров.

— Делайте элементы интерфейса достаточно большими, чтобы они читались с 3 метров. Особенно текст, значки и указатели. Тестируйте макеты на реальных устройствах;
— Состояние фокуса, отражающее положение пользователя на экране, должно быть особенно выразительным;
— Учитывайте возможности пульта. Если он слишком простой, какие-то функции можно вынести в связанный с телевизором телефон;
— Не усложняйте логику приложения. Человек перед телевизором хочет откинуться на спинку кресла и отдохнуть;
— Тёмная тема должна быть основной. Фильмы и сериалы часто смотрят в темноте;
— Добавьте возможность завести несколько профилей. Обычно телевизором пользуется несколько человек. Так зрительские предпочтения конкретного человека не будут видны на начальном экране;
— Проверяйте дизайн в том числе и на устаревших телевизорах. Их не принято обновлять каждые 2–3 года. Например, на старых телевизорах цветная обводка небольших объектов может стать слишком незаметной и стать негодной для состояния фокуса.

#tv