Тестирование на этапе проектирования

Специализация

Говорят, в AIC нет проектировщиков: дизайнеры проектируют и рисуют финальные макеты, которые увидят пользователи. Дизайнеры Яндекса верстают из готовых компонентов. Проектирование — довольно узкая специализация. Время от времени люди спрашивают меня в личных сообщениях ВКонтакте, неужели можно зарабатывать чисто проектированием?

Но в проектировании есть более узкие специализации.

По платформе, например:

  • Мобильные приложения;
  • Сайты;
  • Приложения для настольных компьютеров (бухгалтерия);
  • Программы для специальных устройств (касса в магазине);
  • Голосовые меню.

По решаемой задаче:

  • Продажа (лендинг);
  • Информирование (онлайновая газета);
  • Обслуживание (онлайновый сервис);
  • Развлечение (игровой интерфейс).

По выполняемым работам:

  • Исследование и аналитика;
  • Проектирование и иногда информационная архитектура;
  • Прототипирование;
  • Тестирование.

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

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

Чтобы прототип протестировать, придётся кардинально изменить рабочий процесс: выбрать способ исследования, определить объём выборки, найти респондентов и замотивировать на участие в тестировании, в конце концов, правильно его провести. (Возможно, придётся даже выйти из офиса!)

Придётся разбираться с понятиями вроде объёма выборки и вникать в нюансы разных способов исследования. Например, популярный метод Think Aloud (проговаривание респондентом своих действий) может искажать взаимодействие.

Тестирование

Проектировщики-фрилансеры и небольшие студии обычно тестированием не занимаются:

  • Прототип похож на выполненную работу, которую можно сдать. Если он не противоречит задачам бизнеса и отражает все пожелания, скорее всего, клиент проблем не увидит;
  • Тестирование увеличивает стоимость работ. Придётся обосновывать более высокую стоимость услуги проектирования. У клиента может не быть на это денег;
  • По итогам теста придётся внести исправления. Это тоже увеличивает общую стоимость (и никто не любит правки);
  • Тестировать надо уметь: выбрать способ, организовывать процесс, интерпретировать результаты.

Я пробовал следующие простые способы тестирования:

  • Тестирование похожего сайта;
  • Коридорное;
  • Экспертное;
  • Пользовательское (качественное).

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

Тестирование похожего сайта

Мы часто ориентируемся на существующие решения и можем заранее знать, что страница новостройки будет примерно такой, как на «Яндекс Недвижимости». Это может быть референс клиента или просто наше ощущение, что она соответствует заявленным требованиям. Значит её можно протестировать.

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

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

Коридорное тестирование

Вот что о нём пишет Джоэл Сполски:

Коридорное тестирование — это процедура, при которой вы выбегаете в коридор, хватаете первого попавшегося человека и заставляете его попользоваться программой, которую вы только что написали. Если вы проделаете эту процедуру на 5 разных людях, вы получите 95% информации о проблемах с удобством использования в вашей программе.

Показывая её горстке людей (фактически 5−6 человек уже достаточно), вы очень быстро узнаете, какие проблемы у них возникали. Прочитайте статью Якоба Нильсена, в которой он объясняет, почему так происходит.

Джоэл Сполски

Фишка такого тестирования — высокая скорость. Мы не просим пользователя пройти весь сценарий использования, так как это неудобно делать стоя, и он вообще-то спешит. Мы задаём простые вопросы:

  • Куда бы вы нажали, чтобы сделать что-то?
  • Как вы думаеете, что произойдет при нажатии сюда?
  • Как вы понимаете эту фразу?

В коридоре можно провести 5-секундный тест: показать макет на 5 секунд и спросить:

  • Что вы запомнили?
  • На сайте какой организации вы оказались? Что она предлагает?

Такое тестирование не обязательно происходит в офлайне в коридоре. «Юзабилитилаб» провели First Click тестирование отдельных экранов банковских приложений. Посмотрите, как это работает, пока ссылка открывается.

Экран приложения «Альфа-Банка» и описание задачи
Сообщение после правильного выполнения задания

Это сделано с помощью Axure, «Яндекс Метрики» и Google Analytics. На выходе исследователь получил процент правильных нажатий и среднее время, затраченное на задание. Для «Альфа-Банка» тестировали 3 варианта кнопки «Платежи и переводы» — это видно в структуре прототипа. По итогам теста можно выбрать самый доходчивый вариант.

Пользовательское тестирование

Я делал для True Digital Agency прототип. Мне дали набор чёрно-белых макетов, где почти весь контент был рыбой. Разобраться с навигацией вне главного меню было непросто. Например, оказалось, что страницы «День рождения», «Батутный зал» и «Развлечения и тренировки» — это продукты, а значит, непонятные картинки со словом «Продукт» ведут именно на них.

True Digital Agency, блок на главной странице сайта парка развлечений «Разгон»

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

Далее прототип должны были тестировать пользователи.

Обычный и тестовый прототип

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

Вот обычный прототип для интерьерной мастерской Atable, а вот тестовый. Заказчик хотел проверить:

  • Видимость и удобство фильтров;
  • Различают ли люди комоды, бюро, буфеты и так далее, то есть на какой раздел каталога они нажимают, представляя себе вот такой предмет:

Я сделал тестовый прототип, созвонился со знакомыми, попросил расшарить экран и выполнить задания. Параллельно заказчик тестировал прототип со своими респондентами.

В итоге на этапе прототипа мы объединили кресла и пуфы, стулья и скамьи. Ещё перетасовали и объединили разные виды мебели для хранения, но до живого сайта они добрались в виде единой категории «мебель для хранения» (и хорошо).

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

Счётчики

Сделанные в Axure прототипы хороши тем, что в них можно вставить «Яндекс Метрику» (с Вебвизором) и Google Analytics. Если прототип опубликован на AxShare, это делается в настройках (раньше — с помощью плагина).

При публикации на своём сервере, код можно вставить инъекцией:

  • На страницу добавить виджет (например, прямоугольник);
  • В поле с его именем вставить однострочный код счётчика с дополнительными символами (на скриншоте код счётчика надо вставить вместо %code%);
  • Скрыть виджет.
Вставка произвольного кода в прототип Axure

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

Качественное и количественное исследование

Важно из качественных исследований не делать количественные выводы.

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

Проблема в том, что выводы сделаны на основе наблюдений за всего лишь 51 респондентом. То есть это качественное исследование. В компании InPlat сравнили скеоморфный и компактный вариант формы на 20 000 платежей и увидели, что при одинаковой конверсии скорость заполнения компактной формы оказалась выше.

Скеоморфная форма
Компактная форма

У «Яндекс Денег» есть своё количественное исследование. Правда, сравнивали они 2 немного других варианта и засекали конверсию, а не скорость заполнения формы:

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

Если исследование количественное, оно полезно только инсайтами:

  • Где может случиться затык в будущем продукте?
  • Если затык уже случился, в чём может быть его причина?

Впервые опубликовано в рассылке 27 июня и 4 июля 2017 года.

Опечатка? Выделите её и нажмите кнопки Control и Enter.

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 249 рублей.