Главная » Хабрахабр » «Я стал терапевтом или психологом» — Виталий Фридман о UX-тестировании и мобильных интерфейсах

«Я стал терапевтом или психологом» — Виталий Фридман о UX-тестировании и мобильных интерфейсах

Но Виталий, недавно ухитрившийся занять сразу два первых места в топе докладов HolyJS 2018 Piter, теперь добрался до мобильных и тестировочных конференций с новым докладом «Крайности тестирования: хитрости из тёмных уголков мобильных интерфейсов». Если фронтендеры давно знают и высоко ценят Виталия Фридмана (сооснователя Smashing Magazine), то мобильным разработчикам и тестировщикам это имя может быть куда менее известно.

Юнит-тест или зелёный, или красный, а у вас тут высокие материи. Поэтому в преддверии Heisenbug и Mobius мы задали ему вопросы и о UX-тестировании, и о мобильных интерфейсах: от того, как проводится такое тестирование конкретно в Smashing Magazine, и вплоть до смартфонных «чёлок».
— Вопрос для тех, кто не погружён глубоко в UX-тестирование: правильно понимаем, что хотя оно и относится к тестированию, это довольно своеобразная и обособленная область?

В тестах, которые я провожу, нельзя сказать, «зелёное» или «красное». — Именно так. К примеру, человек может ходить только на сайт биржи или на новостной сайт. Здесь много субъективного: разные пользователи приходят и с определенным количеством предубеждений, и с навыками, усвоенными на других сайтах. Поэтому в таком контексте очень важно изучить целевую аудиторию конкретного сайта, посмотреть, какие ещё сайты она посещает, как их использует, какие у неё привычки. То, как он видит интернет и интерфейсы, очень сильно отличается и от нас, и от других людей.

Приходится искать скорее не то, что сделано «хорошо», а то, что имеет хороший recovery experience. Самая сложная вещь — из всего субъективного, что кому-то может нравиться, а кому-то нет, выделить в интерфейсе нечто объективное, чтобы идея доходила до разных пользователей, все понимали, что и как нужно делать.

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

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

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

А в случае с UX-тестированием, где всё абстрактнее, на него часто машут рукой и не уделяют должного внимания? — В «обычном» тестировании человечество уже пришло к тому, что оно важно и без тестов никуда.

Проблема в том, что для меня UX — это всегда большое количество экспериментов. — Да, очень часто. Часто проблема в том, что мы предполагаем, что можно что-то изменить и тут же вывести в свет. Есть идея — надо её пробовать и смотреть, как это изменит конверсию или engagement. Но в UX зачастую эффект очень длительный, long-term effect.

Конечно, если есть серьёзные ошибки, например, при покупке (человек не понимает, что от него требуется, чтобы совершить заказ), это замечают быстро. Если повесить поп-ап и посмотреть, сколько человек его кликает — это short-term effect, это будет легко замерить. Но какие-то вещи проявляются только в течение длительного времени.

Это можно замерить по метрикам click rates и engagement, но проблема вполне может быть не в том, что людям не нужна эта фича, а в том, что непонятно, чем она помогает пользователю или когда именно её применять. Есть какие-то вещи, касающиеся, например, текстов, где непонятно, что означает какая-то фича, продукт или его предназначение: надо дать какое-то время, чтобы посмотреть, используют ли люди эту фичу, возвращаются к ней или бросают её, потому что изначально не поняли, что она делает. Поэтому единственная вещь, которую мы делаем, чтобы как-то систематизировать этот процесс, — это регулярно, каждую пятницу проводить user interview минимум с шестью пользователями.

Быстрее ли ему стало переходить к оплате заказа или к информации, которая ему нужна. Есть какая-то версия продукта, у нас есть continuous deployment, какие-то фичи — мы смотрим, понимает ли человек, что происходит в интерфейсе. Это единственная возможность каким-то образом провести автоматизацию, которая есть в классическом тестировании. Мы смотрим на конверсию и то, как человек понимает, что вообще в интерфейсе происходит, быстрее ли ему передвигаться в чекауте к той информации, которую он ищет.

Но небольшие компании могут думать: «Это Google готов выделить специальную лабораторию, а нам-то что в UX-тестирование соваться». — IT-гиганты тщательно подходят к UX-тестированию, используя eye tracking и тому подобное. Без больших ресурсов тут можно добиваться результатов?

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

Они анализируют трафик и генерируют flow, можно записывать видео для каждого пользователя — куда он зашел, где была его мышка, куда она двигалась, где он кликнул, куда вернулся и так далее. Тепловые карты — это довольно простой метод, есть много средств для их создания.

Это уже гораздо дороже ($49 за видеотест), но можно выбрать интересующую демографию, дать человеку задание, и там используется так называемый «think-aloud protocol». С другой стороны, есть средства, которые позволяют нанять людей из пула тестировщиков, которые получают деньги за каждый тест, и дать им задание — например, сайт usertesting.com. Если собрать 6-7 таких видео для мобильных устройств и 6-7 для десктопа, то можно увидеть очень много закономерностей. Это значит, что когда человек заходит на главную страницу интерфейса и переходит от одного к другому, выполняя задание, он должен говорить, всё ли ему понятно, что он видит, о чём этот сайт, чего он ожидает при клике на кнопку. Более того, надо внимательно следить за тем, куда смотрят люди и как ведут себя с мышкой или с тачпэдом.

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

А UX-тестирование — это чья забота? — В случае с другими видами тестирования есть представление о разделении обязанностей: «вот тут у нас разработчики сами к коду unit-тесты напишут, а вот этим ручные тестировщики займутся».

В западных фирмах часто есть UX-designer или даже usability tester, понятно, что они этим занимаются целыми днями. — Я думаю, что это зависит от структуры компании. Если есть фронтенд-дизайнер (который ближе к UX, а не JavaScript), то у него. Но если фирма небольшая, ответственность будет у другого человека. И у любого человека, который занимается прототипами, в обязанностях будет проведение таких тестов, если нет отдельного юзабилити-тестировщика.

— А как проводится UX-тестирование конкретно в случае Smashing Magazine?

— У нас все очень просто: как только появляются новые идеи, мы собираем 5-7 человек, которым я лично даю задания и провожу интервью.

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

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

Есть два вида тестов: с одной стороны, A/B-тестирование — кнопки и другие мелкие вещи. И следим не только за тем, что происходит, если поменять кнопку, ее расположение или текст на странице. Например, когда полностью заменяем дизайн и тестируем его. С другой — можно пытаться изменить что-то полностью, это называется A/Z-тестированием.

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

— Можете привести конкретный пример, когда сначала сделали что-то в Smashing Magazine, а потом по итогам тестирования ощутимо поменяли?

У нас было три тарифных плана, мы долго думали, сколько люди смогут платить за каждый из них. — Например, когда ввели платную подписку с разными возможностями.

Им, особенно людям в больших корпорациях, нужен был годовой план: чтобы не отчитываться каждый месяц, куда ушли $7–$9. А потом провели тестирование и обнаружили, что для многих наших читателей эти планы совершенно не подходят. В итоге мы добавили соответствующую кнопку, поменяли немного интерфейс, и люди начали его замечать. Люди не могли найти годовой план — хотя он был по запросу, но это просто не находили.

Раньше можно было часто услышать о том, как доля мобильного интернета растёт — а что с этим в 2018-м, когда продажи смартфонов перестали расти? — Перейдём к судьбам мобильных интерфейсов.

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

Я бы не сказал, что десктопный трафик сильно падает, просто он не растёт, а мобильный трафик растёт и очень сильно. Неважно, что мы берем — ритейл, потребление музыкального и видеоконтента, даже радио — практически всюду мы видим, что мобильный трафик пересек десктопный трафик.

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

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

Холодильники с подключением к интернету тоже могут показывать какую-то информацию. Речь идет не только о таких вещах, как телефоны, но и Apple Watch, любые другие гаджеты, IoT. Конечно, ещё речь заходит о таких вещах, как разговорный интерфейс и чат-боты, которые прежде всего оптимизированы для мобильного использования.

— Ещё годы назад баззвордом в UI стало «mobile first» (создание интерфейсов в первую очередь под мобильные устройства) — а значит ли текущий «переломный момент», что для многих компаний это вот сейчас из баззворда становится основной практикой?

Я сейчас работаю с фирмой, которая серьезно задумалась над тем, как они организуют всю корпорацию. — Так и есть. И вдруг появился мобильный рынок. Изначально они игнорировали мобильный рынок, а десктоп существовал уже 15 лет — это большой e-commerce ритейлер.

Это уже хорошо, но всё равно есть Android и iOS-приложения. Конечно, они сделали оптимизацию, адаптивный дизайн. Сейчас они очень сильно задумались о том, что им нужно поменять, потому что они замечают этот тренд. В итоге получалось так, что над десктопным сайтом работало абсолютное большинство разработчиков и дизайнеров, а над мобильным работала маленькая группа.

Поэтому они планируют поменять всю свою архитектуру так, что у них будет всё отталкиваться от mobile first, какие-то фичи будут попадать сначала только на мобильные устройства, а потом уже в десктоп. Десктоп стабилен, в их случае он не растёт, а вот мобильный рынок и трафик растут очень сильно.

И еще они задумались о том, как перейти к mobile first не только в плане интерфейсов, но и как сделать «цифровое преобразование» всей организации. Им пришлось много задумываться над тем, что это значит для организации команды, так как у небольшой команды теперь очень большая ответственность.

Речь заходит о том, как доступно организовать информацию на любом форм-факторе: часы, телефоны, планшеты и так далее. Для них, как и для многих, это скорее даже не mobile, а content first. Опять-таки, это момент, когда соответствующее тестирование становится очень-очень важным. Больше внимания уделяется организации, фильтрам, отображению информации доступным образом, чтобы её не было слишком много, чтобы человеку было удобно ее использовать.

— Для мобильной версии сайта и десктопной стоит делать ощутимо различающиеся интерфейсы, или скорее что-то адаптивное с минимальными изменениями?

Например, был проект IKEA, позволяющий спроектировать «кухню своей мечты». — Я думаю, что есть ситуации, когда нужно, чтобы были очень разные. На десктопе это выглядит как обычное десктопное приложение, а на мобильном как AR/VR-приложение, где можно увидеть объект прямо перед собой в 3D. Такой проект нельзя просто «перенести» между десктопом и мобильными устройствами, у них разные возможности. Это совершенно другой сценарий, использующий преимущества девайса.

Это, конечно, не исключает существование приложений. А для классических сайтов я бы сказал, что самое простое — создавать один сайт с минимальными изменениями. Но, в общем, для большинства самым разумным было бы иметь один сайт и кодовую базу, и использовать её как можно больше на разных устройствах. Более того, сейчас при помощи PWA (Progressive Web Apps) можно сделать так, чтобы сайт был и приложением, которое можно установить на системном уровне.

— Сайт Smashing Magazine — тоже Progressive Web App, так?

Но в этом нет ничего особенного. — Да, сайт можно использовать офлайн, добавить себе как приложение, там есть кэширование. Это не так просто сделать, но идея хорошая, потому что если ты используешь PWA, у тебя будет очень хорошая производительность. А есть фирмы, которые пытаются создавать что-то вроде «offline e-commerce», когда человек может совершить покупку офлайн. Это значит, что можно быстро оформить (или по крайней мере подготовить) заказ, без ошибок и постоянного обращения к серверу.

Идея похожа, и, я думаю, она может сработать довольно хорошо. Как мы это делаем, например, в случае с git, когда написал какой-то коммит, а потом идет пуш на сервер, но все изменения сначала происходят локально. Это большое преимущество PWA.

— У Smashing Magazine нетипичная пользовательская статистика (например, доли браузеров распределены совсем не как по интернету в целом), поэтому хочется уточнить: а у вас какое соотношение мобильных посетителей и десктопных?

Честно говоря, это очень мало. — Три года назад у нас было 11% мобильного трафика, сейчас около 22%. На их чтение нужно минут 40-50. Дело в том, что у нас очень длинные статьи. В среднем на сайтах сейчас гораздо больше мобильного трафика, но из-за наших особенностей мы до этого ещё не дошли. Читать столько с телефона довольно сложно.

А у вас есть ощущение, что с переходом к маленьким экранам стало сложнее сделать хороший дизайн? — Артемий Лебедев критиковал мобильные интерфейсы, говоря «чем больше экран, тем лучше интерфейс».

Я большой фанат любого рода ограничений. — Я думаю, что делать красивый дизайн, наоборот, стало удобнее. При разработке концепции мы часто пытаемся заставить себя думать вне привычных форм. Каждому проекту нужно какое-то ограничение. Мы начинаем проектировать и придумывать дизайн, ставя перед собой ограничения.

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

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

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

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

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

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

— А что можно сказать, наоборот, о мобильных интерфейсах, которые были непредставимы на десктопе?

Я уже приводил пример с IKEA. — Да, такие появляются. Я думаю, однажды появятся очки, которые мы будем надевать и видеть все объекты перед нами. Конечно, существует WebVR, но чтобы использовать его, нужен какой-то девайс, который нужно надеть. Но пока до этого не дошло, у нас есть огромные девайсы, которые нужно натягивать на голову.

Про десктоп мы забываем, и получается desktop last. Проблема в том, что очень часто, когда мы создаем интерфейс, мы думаем mobile first или content first. Будем честны, со Smashing Magazine такая проблема. Поэтому некоторые интерфейсы выглядят довольно странно на очень больших экранах. Мы оптимизировали для mobile first, максимум на 1800 пикселей, и все растворяется на больших экранах.

Может, реклама слева и справа. Обычно это просто одна центральная колонка для статей. Очень часто я вижу интерфейсы, где действительно mobile first, они выглядят довольно хорошо и очень удобны на мобильном, но полностью теряются на десктопе. А можно делать гораздо больше. Все равно он значим. Конечно, нужно учитывать, что mobile развивается и конверсия превысила десктоп, но десктоп никуда не уходит. Поэтому приходится оптимизировать и двигаться в направлении mobile first and desktop first.

Тема «чёлки» на смартфонах неизбежно возникает последние полтора года, и вокруг этого много волнений. — И «хайповый» вопрос напоследок. А как вы считаете, стоит ли так обращать на это внимание, когда думаешь о UX?

Обратите внимание, как люди используют телефон. — Мы очень любим волноваться на пустом месте. А 98% читают в портретном режиме, где она совсем не мешает чтению. Всего 2% человек читают текст в ландшафтном режиме, где «чёлка» действительно мешает.

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

На первой, помимо его выступления, будет ещё много интересных докладов о тестировании, а на второй — о мобильной разработке. Виталий на следующей неделе выступит в Москве с закрывающими кейноутами сразу на двух наших конференциях: Heisenbug (пройдёт 6-7 декабря) и Mobius (8-9 декабря).


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Перевезти дата-центр за 14 400 секунд

Всем знакома пословица «Один переезд равен двум пожарам». Смысл этой народной мудрости в том, что процесс переезда сопряжен со стрессами, суетой, переживаниями и, конечно, беготней, которые бывают и при пожаре, а подчас и с утратами ценного имущества. К тому же, ...

Дорожная карта математических дисциплин для машинного обучения, часть 1

Вместо предисловия Допустим, сидя вечерком в теплом кресле вам вдруг пришла в голову шальная мысль: «Хм, а почему бы мне вместо случайного подбора гиперпараметров модели не узнать, а почему оно всё работает?»Это скользкий путь — вы думаете, что достаточно пары ...