Если фронтендеры давно знают и высоко ценят Виталия Фридмана (сооснователя Smashing Magazine), то мобильным разработчикам и тестировщикам это имя может быть куда менее известно. Но Виталий, недавно ухитрившийся занять сразу два первых места в топе докладов HolyJS 2018 Piter, теперь добрался до мобильных и тестировочных конференций с новым докладом «Крайности тестирования: хитрости из тёмных уголков мобильных интерфейсов».
Поэтому в преддверии 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, какие-то фичи — мы смотрим, понимает ли человек, что происходит в интерфейсе. Быстрее ли ему стало переходить к оплате заказа или к информации, которая ему нужна. Мы смотрим на конверсию и то, как человек понимает, что вообще в интерфейсе происходит, быстрее ли ему передвигаться в чекауте к той информации, которую он ищет. Это единственная возможность каким-то образом провести автоматизацию, которая есть в классическом тестировании.
— IT-гиганты тщательно подходят к UX-тестированию, используя eye tracking и тому подобное. Но небольшие компании могут думать: «Это Google готов выделить специальную лабораторию, а нам-то что в UX-тестирование соваться». Без больших ресурсов тут можно добиваться результатов?
— Безусловно. Есть очень много ресурсов, в том числе бесплатных, которые позволяют проводить тестирование. Eye tracking может помочь, но в сложных ситуациях. Его можно использовать, например, в случае с маршрутами, когда люди не могут найти, как пройти в какие-то комнаты в музее. В этом случае полезно знать, куда люди смотрят, когда заходят в музей, и почему они не находят то, что, казалось бы, найти очень просто. Можно проверить в интерфейсе, куда люди смотрят, на что они обращают внимание и что они видят.
Тепловые карты — это довольно простой метод, есть много средств для их создания. Они анализируют трафик и генерируют flow, можно записывать видео для каждого пользователя — куда он зашел, где была его мышка, куда она двигалась, где он кликнул, куда вернулся и так далее.
С другой стороны, есть средства, которые позволяют нанять людей из пула тестировщиков, которые получают деньги за каждый тест, и дать им задание — например, сайт usertesting.com. Это уже гораздо дороже ($49 за видеотест), но можно выбрать интересующую демографию, дать человеку задание, и там используется так называемый «think-aloud protocol». Это значит, что когда человек заходит на главную страницу интерфейса и переходит от одного к другому, выполняя задание, он должен говорить, всё ли ему понятно, что он видит, о чём этот сайт, чего он ожидает при клике на кнопку. Если собрать 6-7 таких видео для мобильных устройств и 6-7 для десктопа, то можно увидеть очень много закономерностей. Более того, надо внимательно следить за тем, куда смотрят люди и как ведут себя с мышкой или с тачпэдом.
Очень часто бывают ситуации, когда кто-то что-то не понимает в интерфейсе. Люди любят кнопки и любые интерактивные элементы. Они начинают двигаться в их направлении, но не кликают по ней, а крутят вокруг кнопки мышью. И только потом кликают. Это один из признаков того, что человеку не совсем понятно, что произойдет, если нажать на кнопку. Такие вещи можно легко обнаружить без очень дорогих девайсов.
— В случае с другими видами тестирования есть представление о разделении обязанностей: «вот тут у нас разработчики сами к коду unit-тесты напишут, а вот этим ручные тестировщики займутся». А UX-тестирование — это чья забота?
— Я думаю, что это зависит от структуры компании. В западных фирмах часто есть 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, так?
— Да, сайт можно использовать офлайн, добавить себе как приложение, там есть кэширование. Но в этом нет ничего особенного. А есть фирмы, которые пытаются создавать что-то вроде «offline e-commerce», когда человек может совершить покупку офлайн. Это не так просто сделать, но идея хорошая, потому что если ты используешь PWA, у тебя будет очень хорошая производительность. Это значит, что можно быстро оформить (или по крайней мере подготовить) заказ, без ошибок и постоянного обращения к серверу.
Как мы это делаем, например, в случае с git, когда написал какой-то коммит, а потом идет пуш на сервер, но все изменения сначала происходят локально. Идея похожа, и, я думаю, она может сработать довольно хорошо. Это большое преимущество PWA.
— У Smashing Magazine нетипичная пользовательская статистика (например, доли браузеров распределены совсем не как по интернету в целом), поэтому хочется уточнить: а у вас какое соотношение мобильных посетителей и десктопных?
— Три года назад у нас было 11% мобильного трафика, сейчас около 22%. Честно говоря, это очень мало. Дело в том, что у нас очень длинные статьи. На их чтение нужно минут 40-50. Читать столько с телефона довольно сложно. В среднем на сайтах сейчас гораздо больше мобильного трафика, но из-за наших особенностей мы до этого ещё не дошли.
— Артемий Лебедев критиковал мобильные интерфейсы, говоря «чем больше экран, тем лучше интерфейс». А у вас есть ощущение, что с переходом к маленьким экранам стало сложнее сделать хороший дизайн?
— Я думаю, что делать красивый дизайн, наоборот, стало удобнее. Я большой фанат любого рода ограничений. Каждому проекту нужно какое-то ограничение. При разработке концепции мы часто пытаемся заставить себя думать вне привычных форм. Мы начинаем проектировать и придумывать дизайн, ставя перед собой ограничения.
Например, «в этом проекте мы не можем использовать больше двух цветов». Это не значит, что мы будем использовать только два цвета, но это приведет нас к необычному решению. Или мы говорим, что не будем использовать треугольники, круги и квадраты. А что мы можем использовать кроме этого? Размер мобильных устройств — сам по себе большое ограничение. И оно заставляет нас придумывать интересные решения.
Я думаю, что можно где угодно нарисовать прекрасный интерфейс. Конечно, в какой-то момент появляются сложности. Например, чат-боты не имеют визуальных компонентов в отношении цветов или типографики, ты просто присылаешь текст. Но в нём тоже может быть красота.
Чем дальше мы идем в направлении к часам или к маленьким девайсам или разговорному интерфейсу, тем больше теряется визуальность, остается только суть. Важно, чтобы у сайта, у фирмы было свое ядро, которое останется, если убрать все картинки, цвета и типографику. Это заставляет нас задуматься над тем, что важно и нужно для бренда, и заострить свое внимание на этом, дать этому ядру проявить себя. А сейчас мы скрываемся за хорошей типографикой и дизайном.
— А какие из интерфейсов в принципе не подходят мобильному формату? В голову приходят, например, таблицы, не влезающие нормально на экран. Есть ли еще какие-то камни преткновения?
— Я даже в том, что таблицы не подходят, сомневаюсь. Есть большие сложные таблицы, где сложно показать все одновременно, потому что нет места. Но вопрос в том, нужно ли все показывать. Пожалуй, наша задача как дизайнеров — найти интерфейс, который не отображает всё сразу, а дает человеку нужную информацию по частям. Мы привыкли, что всё должно быть видно везде. Возможно, стоило бы найти возможность показать человеку то, что ему нужно, а не просто показывать всю таблицу.
Довольно проблематично работать с картами, например и любого рода визуализацией. Места довольно мало, и все время приходится прыгать вглубь карты и выходить оттуда. Кстати, на конференциях я немного расскажу, как с этим работать.
— А что можно сказать, наоборот, о мобильных интерфейсах, которые были непредставимы на десктопе?
— Да, такие появляются. Я уже приводил пример с IKEA. Конечно, существует WebVR, но чтобы использовать его, нужен какой-то девайс, который нужно надеть. Я думаю, однажды появятся очки, которые мы будем надевать и видеть все объекты перед нами. Но пока до этого не дошло, у нас есть огромные девайсы, которые нужно натягивать на голову.
Проблема в том, что очень часто, когда мы создаем интерфейс, мы думаем mobile first или content first. Про десктоп мы забываем, и получается desktop last. Поэтому некоторые интерфейсы выглядят довольно странно на очень больших экранах. Будем честны, со Smashing Magazine такая проблема. Мы оптимизировали для mobile first, максимум на 1800 пикселей, и все растворяется на больших экранах.
Обычно это просто одна центральная колонка для статей. Может, реклама слева и справа. А можно делать гораздо больше. Очень часто я вижу интерфейсы, где действительно mobile first, они выглядят довольно хорошо и очень удобны на мобильном, но полностью теряются на десктопе. Конечно, нужно учитывать, что mobile развивается и конверсия превысила десктоп, но десктоп никуда не уходит. Все равно он значим. Поэтому приходится оптимизировать и двигаться в направлении mobile first and desktop first.
— И «хайповый» вопрос напоследок. Тема «чёлки» на смартфонах неизбежно возникает последние полтора года, и вокруг этого много волнений. А как вы считаете, стоит ли так обращать на это внимание, когда думаешь о UX?
— Мы очень любим волноваться на пустом месте. Обратите внимание, как люди используют телефон. Всего 2% человек читают текст в ландшафтном режиме, где «чёлка» действительно мешает. А 98% читают в портретном режиме, где она совсем не мешает чтению.
Важно знать, как люди ведут себя с девайсами и конкретными сайтами и на основе этой информации подправлять дизайн. Мы используем ландшафтный режим, например, когда играем или смотрим видео. Поэтому разработчикам игр надо следить, чтобы «чёлка» не мешала. А в целом большинству сайтов это совершенно не нужно и не важно.
Виталий на следующей неделе выступит в Москве с закрывающими кейноутами сразу на двух наших конференциях: Heisenbug (пройдёт 6-7 декабря) и Mobius (8-9 декабря). На первой, помимо его выступления, будет ещё много интересных докладов о тестировании, а на второй — о мобильной разработке.
Автор: Евгений Трифонов
