Чеклист для тестирования прототипа: 5 пунктов, которые нужно учесть, чтобы не потратить ресурсы впустую

В прошлой статье рассказал, почему не люблю тесты прототипов на Figma и предложил альтернативу. Здесь расскажу о подготовке любых прототипов к тестированию. Чеклист составил по наблюдениям за сотнями проектов на Fastuna. Бонус: прохождение двух тестов.

Чеклист полезен тем, кто имеет дело с тестированием интерфейсов: дизайнерам, продактам, исследователям. Поможет в выборе оптимального подхода, убережет от обидной ошибки.

🚨 Контекст и термины

Прототип интерфейса (от др.-греч. πρῶτος «первый» + τύπος «отпечаток, оттиск»): быстрая, черновая реализация будущего интерфейса. Здесь в основном говорим про интерактивные прототипы графического интерфейса, которые моделируют работу цифрового продукта или отдельных его функций.

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

Примеры прототипов

Обожаю тесты. Подготовил два прототипа, каждый из которых делает больно по-своему.

Если читаете со смартфона, то вот ссылка на тест двух сценариев приложении Yami Yami. С этим заданием справляются лишь 33% людей из онлайн-панели и 65% читателей VC 🤫

Если смотрите с десктопа, то попробуйте оформить пожертвования в личном кабинете “Нужна помощь”. Если наберется достаточно людей, то покажу результаты команде фонда.

Ссылки на отчеты в конце.

Ключевые тезисы

🧠 Держим в голове, зачем прототип. Каковы критерии принятия бизнес-решения? Быть может, интерактивный прототип и не нужен.

😫 Интерактивные прототипы на Figma плохо подходят для количественных немодерируемых тестов, так как есть проблемы с открываемостью. Советы из чеклиста нацелены на увеличение процента открытий.

📜 Устройства людей и скорость их интернета отличаются от тех, что есть у вас. Нужна проверка в реальных условиях.

Чеклист

Пройдите по списку. Пункты чеклиста подскажут, нужен ли вам прототип, а если нужен, то насколько сложный и на что стоит обратить внимание.

1.Определяем, для чего прототип

Выберите наиболее подходящий вариант

💼 Обсуждения внутри команды.

Если речь о синхронизации, то возможность оставлять комментарии важнее, чем интерактивный характер прототипа. На ранних этапах, при работе над структурой подойдет Google Doc, Miro, Figma Jam.

К статичным прототипам проще оставлять комментарии. А Miro и Figma Jam вызывают меньше дискомфорта у недизайнеров.
К статичным прототипам проще оставлять комментарии. А Miro и Figma Jam вызывают меньше дискомфорта у недизайнеров.

🤔 Поиск проблем в интерфейсе.

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

❗ Лайфхак для модерируемых тестов — Figma Mirror. Достаточно дать респонденту логин и пароль от учетной записи. Так люди откроют прототип даже на стареньких андроидах.

🐏 Проверка интерфейсных гипотез.

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

❗ Для проверки гипотез рекомендую минимум 100 человек на тест.

2.Уточняем исследовательскую задачу и подбираем под нее инструмент

При тестировании на пользователях наиболее часто возникают следующие задачи:

📍 Проверить навигацию экранов на удобство, интуитивность.

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

Материал в тему: UX-исследователь Паулина Гасс из Газпромбанка сравнила тест интерактивного прототипа и First Click Test на примере подключения функции Pay Control в приложении. Ссылка на вебинар

🤹 Проверить сценарии поведения в интерфейсе.

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

В феврале 2023 запустили на Fastuna Prototype test. На платформе создаете простой кликабельный прототип из изображений. В отчете процент кликов по зонам, время выполнения задания и ключевые метрики.

👯 Проверить взаимодействие с интерактивными элементами.

Потребуются специализированные сервисы, навыки создания интерактивных компонентов, анимации. Figma — самый популярный инструмент для работы с UI.

❗ Функция Auto Layout в Figma упростит создание интерактивных прототипов. Вот полезная статья.

Не все люди дожидаются открытия материалов. До 30% бросают прототипы. Советы, как повысить процент открытий, читайте далее.

3. Создаем простую структуру — едим слона по частям 🐘 🍴

Разбиваем интерфейсы на короткие сценарии под задачу. Это упростит исследовательский процесс и интерпретацию.

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

❗ В прототипах используем облегченные изображения. Картинки по 500 кб загрузятся быстрее, чем хайрезы.

4. Убираем сторонний UI 💎

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

❗При работе с Figma в настройках деактивируем навигацию клавиатурой и снимаем галку “Show Figma UI”, “Show hotspots on clicks”. Для показа людям используем получившуюся ссылку.

Keyboard navigation, hotspot hints, Figma UI нам не бро. А с ориентацией по экрану вы и сами разберетесь.
Keyboard navigation, hotspot hints, Figma UI нам не бро. А с ориентацией по экрану вы и сами разберетесь.

5. Финальная проверка на себе и людях 🐢

Недостаточно проверить прототип на последнем айфоне и макбуке 🤓. Открываем на сторонних устройствах, при слабом интернете. Заходим в инкогнито с бесплатного вай-фая в кафе, открываем прототип с простого андроида. И под финал отправляем ссылку бабушке, родственнику из небольшого города, другим непосвященным людям. Собираем обратную связь.

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

🎉 Готово. Вы великолепны!

Если прошли по всем пунктам и исправили выявленные проблемы, то прототип уже соответствует минимальным требованиям. Можно тестировать 🙂

Ссылки к статье

Результаты теста на десктопах (Нужна помощь). Гипотеза: большинство людей не замечают кнопку различения проекта и организации.

Telegram канал Tiburon Research с кейсами и обучающими материалами по исследованиям.

2929
5 комментариев

Пока писал текст, наткнулся на похожий чеклист для прототипов. Екатерина подсветила часть моментов более подробно.
Рекомендую почитать https://habr.com/ru/company/vk/blog/711620/

2

Ого, интересная статья на VC =)

1

Спасибо за статью.

Я ux дизайнер, не смог найти корзину при заказе поке 🗿

Понимаю! Расположение корзины этой я выучил с раза пятого, наверное. Надо мной друзья смеются, что занимаюсь UX, но у меня постоянно проблемы с интерфейсами.