Расскажу свой путь тестирования прототипа с плагином для Figma.
У команды появилась потребность сервиса для внутреннего использования. После долгих обсуждений, мы начала разработку интерфейса, основываясь на пожеланиях и идеях от команды. Основная суть: приложение концентрируется на нахождении сигналов, которые отображают нежелательные события.
Начиная работать над проектом, мы создали пару-тройку прототипов. Главная идея - создать две области: одна – для отображения релевантных сигналов в виде карточек, другая – для подробного внутреннего контента. Все должно выглядеть как почта и придерживаться концепта one-page.
![Wireframes, которые понравились команде. Wireframes, которые понравились команде.](https://habrastorage.org/getpro/habr/upload_files/890/37b/45c/89037b45cc7f8a0816c66271936f41eb.png)
И тут наткнулась на мысль, что из-за нехватки времени и политики конфиденциальности я не смогу провести полное UX-исследование. Но и не хотела доверять случаю и надеется, что мой интерфейс будет сразу интуитивно понятен коллегам.
Мир AI-плагинов
В поисках инструмента для анализа интерфейса я нашла плагины в Figma, которые «по клику» показывают, куда в первую очередь будет смотреть гипотетический пользователь. Эта информация может показать неожиданный для дизайнера инсайт.
Я попробовала один такой плагин от Clueify. Он создает тепловые карты с помощью AI, которые показывают какие элементы дизайна будут замечены пользователями в первую очередь. На сайте создатели обещают, что все конфиденциально (на их стороне данные не хранятся), поэтому его можно использовать для внутренних приложений. Неприятно, что удовольствие это совсем не бесплатное, а триал короткий (7 дней).
Кредитов (количество бесплатных попыток) всего 10, но хочется проверить UI при каждом изменении. Из-за этого начинается вечное откладывание кредитов и уверенность, что потом это пригодится больше. Например, как полный инвентарь неиспользованных предметов после прохождения главного босса в игре.
![Астарион как всегда прав This meme is brought to you by : r/tf2](https://habrastorage.org/getpro/habr/upload_files/858/701/431/8587014312542ac290903c09047fe196.png)
Выход из этого положения - находить каждый раз новый плагин и начинать новый триал. Тут тоже есть проблема в малом количестве плагинов и отсутствии их поддержки после релиза. Как минимум один похожий плагин уже перестал выдавать API-ключи для работы.
![Неполный список доступных плагинов (все платные с триалом) Неполный список доступных плагинов (все платные с триалом)](https://habrastorage.org/getpro/habr/upload_files/bf1/4ba/5e3/bf14ba5e3e6e4e73160a037d6f8138ee.png)
Анализ интерфейса с помощью AI
Сохраню драгоценные кредиты - превращу wireframe в удобоваримый прототип. Вот он:
![Готовый прототип, созданный в Figma. Готовый прототип, созданный в Figma.](https://habrastorage.org/getpro/habr/upload_files/f31/5ae/7c2/f315ae7c2dca2231b04720a5bb6de731.png)
Теперь можно пробовать плагин в деле. Запустила плагин, получила свой API-ключ, выбрала фрейм и нажала кнопку анализа, подождала где-то минуту и получила результат:
![Результат анализа плагином Результат анализа плагином](https://habrastorage.org/getpro/habr/upload_files/fd1/97c/2f1/fd197c2f1c0ca859839702f28e41eb8c.png)
Занимательно то, что машина предсказывает то, что сперва юзер будет смотреть на блоки текста. Не понятно, почему именно это привлекло внимание машины и учитывает ли она какой текст написан. На карте почти не видно левой панели и цветных элементов.
Результат работы плагина указывает на недоработанность карточек сигналов и, возможно, стоит пересмотреть структуру контента.
Коридорное тестирование
Я решила провести коридорное тестирование прототипа. Попросила 15 человек из команды выделить область, которую они заметили при первом взгляде на интерфейс. Результат сильно разнится с тем, что предложила машина.
![Результат коридорного тестирования Результат коридорного тестирования](https://habrastorage.org/getpro/habr/upload_files/f8b/088/8c0/f8b0888c0df0bd4320b916118ae64fee.png)
Коллеги часто повторяли, что цветные элементы привлекают внимание и не говорили ничего про текст. Некоторые видели сначала красный индикатор у карточки сигнала в левой боковой панели и только потом уже весь прототип в целом. Большинство сказали, что бирюзовый граф привлек их внимание в первую очередь.
В результате коридорного тестирования стало ясно, что прототип нуждается в изменениях. Хотелось бы каким-то образом привлечь внимание юзеров к таблице, а также увеличить видимость текста и изменить композицию контента в правом блоке.
Вывод
При использовании разных методов анализа внимания пользователя и AI, и коридорное тестирования хоть и показали себя по-разному, но натолкнули на одни и те же проблемы в прототипе. Я считаю, что плагин со своей задачей справился и способен быть подручным инструментом UI-дизайнера.