Как мы создали UX-лабораторию для своих продуктов

Привет, меня зовут Артем. Всю жизнь я хотел делать звук, но спустя 15 лет работы с ним, поставил жирную точку в этом вопросе и положил на полку саунд-дизайн рядом с дипломом инженера-конструктора. Теперь стою на страже пользовательского опыта игр Wargaming, помогая UX-рисечерам с технической стороны. Эта статья о том, как из веток и палок энтузиазма и умения искать информацию в сети строить целые лаборатории.

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

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

В нашем отделе пользовательского опыта мы как раз и занимаемся тем, что залазим в голову нашему потребителю и его глазами видим все те проблемы, с которыми они сталкиваются. Это касается самой популярной игры в Украине и не только. К сожалению, на рынке нет готовых решений, нельзя просто взять и заимпортировать библиотеку введя в консоли pip install uxresearch или зайти в ближайший магазин железа и купить набор для проведения тестов, приходится колхозить проектировать все с нуля. Разумеется, мы не стали покупать набор ардуинщика и изобретать веб-камеру с нуля, но что-то пришлось делать и своими руками, причем из бытовых вещей.

Итак, вот одна из типичных наших задач: протестировать новые элементы интерфейса в раннем прототипе клиента. Дано: билд под iOS, ... собственно всё. Нужно вчера)

Первая мысль приходит в голову, берём планшет, подключаем проводом к ноутбуку, заливаем билд и запускаем. Позовем в офис одного из пользователей, из числа целевой группы, вручим ему этот драгоценный планшет и поставим ему не тривиальную задачу. Все просто, но нет. Все люди врут! Точнее не так: все люди хотят быть лучше, чем они есть на самом деле, количество селфи в Instagram это доказывает, поэтому нет смысла спрашивать: «тебе было удобно?». Скорее всего, вам дадут ответ однозначно да или нет, крайне редко получите эссе на тему у меня были барьеры на этапе подведения покупки... а чаще всего вы услышите знакомый рассказ «как бы я сделал, если бы умел и вообще, как к вам устроиться на работу...». Поэтому нас интересуют в первую очередь фактические данные, а именно: куда нажимал, как часто использовал, смотрел ли на подсказки и т.д. На основании которых исследователь сделает вывод и даст рекомендации разработчику.

Решение 1: взглянуть на планшет в руках респондента его глазами

Тут все просто, на рынке много готовых решений: очки со встроенной камерой, экшн камера с креплением на голову, да и просто, можно взять обычную вебку, снять с лицевого щитка из ближайшего магазина хоз. товаров оголовье, gluegun в помощь и готово! Но насколько это будет естественно с точки зрения эргономики? Вы часто пользуетесь планшетом с экшн камерой на голове? Думаю, что нет. На ум пришла купольная PTZ IP камера с оптическим зумом которая используется для охраны периметра зданий. Размещаем камеру на потолке, за спиной респондента и готово. Пользователь сидит, а вы при помощи джойстика увеличиваете и смотрите из-за плеча сколько угодно. Я давно пользуюсь AXIS P5534, уже на смену давно пришли более быстрые этой же серии, но для таких задач она справляется неплохо. Недавно стали переходить на DS-2DE4220 от Hikvision. По своему функционалу они даже лучше AXIS, но по оптике есть вопросы. Кстати, именно IP-камера развязывает вам руки с интерфейсом вывода, т.к. на выходе у вас RTSP поток, очень удобно маршрутизировать, обрабатывать и администрировать. Плюс, могучий ffmpeg решает всё! Нужно пробросить трансляцию коллегам внутри сети — нет проблем, набросал на коленке ffplay rtsp://[name]:[pass]@[ip]/Streaming/Channels/1

Запустил и коллеги уже в контексте.

Кстати, с локальными устройствами я тоже общаюсь через ffmpeg, запустите в консоли ffmpeg -list_devices true -f dshow -i dummy

И вы увидите список устройств, которыми можно поживиться, например, чтобы быстро записать видео фрагмент всегда под рукой: ffmpeg -f dshow -s 1280x720 -r 30 -vcodec mjpeg -i video="Integrated Camera" output.mp4

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

Решение 2: получать информацию о ложных касаниях по экрану

Тут есть несколько вариантов, но в условиях невозможности внесения изменений в билд прототипа и сроков в стиле «вчера» остаётся вариант с активацией на устройстве DEV-режима и активацией подсвечивания касаний на экране. (Кстати, для трекинга на PC за полтора часа пришлось собрать скрип на AUTOIT(!) пишем $UserDll = DllOpen("user32.dll") и погнали. Вот пример github.com/...​blob/master/keylogger.au3, который сильно упрощает задачу). Далее возникает необходимость снимать экран, т.к. камера не покажет, а визуализация нажатий настолько незаметная и находится под пальцами, что её и самому респонденту не видно. Мы решили эту проблему бытовой AverMedia Live Gamer HD — C985 из ближайшего магазина, и переходником на HDMI, но столкнулись с проблемой. При попытке захвата на экране увидели магические буквы HDCP. Несколько часов запросов в GOOGLE навели на идею использовать HDMI-сплитер который не умеет работать с компонентом, отвечающим за протокол аутентификации. Если вы откроете любой интернет-магазин с HDMI сплитерами, то обратите внимание на то, что они все делятся на две ценовые категории, с декодированием и без него. Самый дешевый вариант показал, что HDCP не поддерживается и при помощи всё того же ffmpeg мы стали получать четкую картинку с визуализацией нажатий. Вот схема:

Для Android в ход пошёл Chromecast — вообще не нужно проводов, но возникает проблема с длительностью зарядки самого устройства. Благо, в запасе всегда хватает трёхамперной зарядки).

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

Идея:

Реализация:

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

Решение 3: разместить респондентов так, чтобы собирать наборы данных не искажая опыт взаимодействия

Тут пришлось опять осваивать очередную специальность. Начали с подбора подходящего помещения из расчета 1 чел. на 5 кв.м. Да, это были до COVIDные времена и на тот момент GOOGLE нам посоветовал именно так. Немного поразмыслив над вопросами эргономики, нашли подходящее сочетание и заняли подходящий кабинет в офисе.

Возникла следующая проблема: как модерировать и как контролировать. На помощь приходит сервис alchemer.com благодаря которому можно провести не только анкетирование, но и ставить задачи для респондентов, а также контролировать процесс выполнения заданий. Для контроля поставили дополнительные web-камеры, вместо ffmpeg стали использовать OBS. Он собирает и комбинирует потоки с разных интерфейсов и делает нам один RTMP поток с одного тестированного места.

Следующая, уже не проблема, а глобальная задача — маршрутизация этих потоков (с учетом IP-камер). Тут на помощь приходит wowza media server, которая имеет API и легко разворачивается на виртуалке.

Теперь мы можем ставить задачи, видеть и записывать, но пока смотрим всё теми же ссылками через ffmpeg.

Решение 4: Собственный стриминговый сервис

Тут все просто, архитектурное решение практически из коробки, т.к. все потоки в рамках одного вилана и дальше интранета не доступны, то тут рассказывать особенно нечего. В SQL-базе храним все необходимые id устройств, id пользователей, ключи стримов и другую сопутствующую информацию необходимую для формирования запросов в Wowza API на бекенде. Развернули хост для каждого инстанса (да-да, у нас их несколько) и, собственно, всё... ну ещё локальный клиент для управления OBS пришлось писать. Если нужно быстро — опять AUTOIT вам в руки и PSEXEC как грязный хак для удаленного управления :)

С таким сетапом можно тестировать практически всё, от web-сайтов до игр, на любых платформах (ну просто вместо планшета подключаем PlayStation, например)... ну если бы не COVID-19. Хотя и эту проблему мы решили и использованием технологии parsec.

P.S. Наверняка вы слышали о таких технологиях как биометрика, ну так вот, этого зверя мы тоже приручили, но это уже другая история 😉

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті