«Горячая» оценка интерфейсов с помощью тепловых карт и AI
Расскажу свой путь тестирования прототипа с плагином для Figma.
У команды появилась потребность сервиса для внутреннего использования. После долгих обсуждений, мы начала разработку интерфейса, основываясь на пожеланиях и идеях от команды. Основная суть: приложение концентрируется на нахождении сигналов, которые отображают нежелательные события.
Начиная работать над проектом, мы создали пару-тройку прототипов. Главная идея — создать две области: одна — для отображения релевантных сигналов в виде карточек, другая — для подробного внутреннего контента. Все должно выглядеть как почта и придерживаться концепта one-page.
Wireframes, которые понравились команде.
И тут наткнулась на мысль, что из-за нехватки времени и политики конфиденциальности я не смогу провести полное UX-исследование. Но и не хотела доверять случаю и надеется, что мой интерфейс будет сразу интуитивно понятен коллегам.
Мир AI-плагинов
В поисках инструмента для анализа интерфейса я нашла плагины в Figma, которые «по клику» показывают, куда в первую очередь будет смотреть гипотетический пользователь. Эта информация может показать неожиданный для дизайнера инсайт.
Я попробовала один такой плагин от Clueify. Он создает тепловые карты с помощью AI, которые показывают какие элементы дизайна будут замечены пользователями в первую очередь. На сайте создатели обещают, что все конфиденциально (на их стороне данные не хранятся), поэтому его можно использовать для внутренних приложений. Неприятно, что удовольствие это совсем не бесплатное, а триал короткий (7 дней).
Кредитов (количество бесплатных попыток) всего 10, но хочется проверить UI при каждом изменении. Из-за этого начинается вечное откладывание кредитов и уверенность, что потом это пригодится больше. Например, как полный инвентарь неиспользованных предметов после прохождения главного босса в игре.
Астарион как всегда прав
Выход из этого положения — находить каждый раз новый плагин и начинать новый триал. Тут тоже есть проблема в малом количестве плагинов и отсутствии их поддержки после релиза. Как минимум один похожий плагин уже перестал выдавать API-ключи для работы.
Неполный список доступных плагинов (все платные с триалом)
Анализ интерфейса с помощью AI
Сохраню драгоценные кредиты — превращу wireframe в удобоваримый прототип. Вот он:
Готовый прототип, созданный в Figma.
Теперь можно пробовать плагин в деле. Запустила плагин, получила свой API-ключ, выбрала фрейм и нажала кнопку анализа, подождала где-то минуту и получила результат:
Результат анализа плагином
Занимательно то, что машина предсказывает то, что сперва юзер будет смотреть на блоки текста. Не понятно, почему именно это привлекло внимание машины и учитывает ли она какой текст написан. На карте почти не видно левой панели и цветных элементов.
Результат работы плагина указывает на недоработанность карточек сигналов и, возможно, стоит пересмотреть структуру контента.
Коридорное тестирование
Я решила провести коридорное тестирование прототипа. Попросила 15 человек из команды выделить область, которую они заметили при первом взгляде на интерфейс. Результат сильно разнится с тем, что предложила машина.
Результат коридорного тестирования
Коллеги часто повторяли, что цветные элементы привлекают внимание и не говорили ничего про текст. Некоторые видели сначала красный индикатор у карточки сигнала в левой боковой панели и только потом уже весь прототип в целом. Большинство сказали, что бирюзовый граф привлек их внимание в первую очередь.
В результате коридорного тестирования стало ясно, что прототип нуждается в изменениях. Хотелось бы каким-то образом привлечь внимание юзеров к таблице, а также увеличить видимость текста и изменить композицию контента в правом блоке.
Вывод
При использовании разных методов анализа внимания пользователя и AI, и коридорное тестирования хоть и показали себя по-разному, но натолкнули на одни и те же проблемы в прототипе. Я считаю, что плагин со своей задачей справился и способен быть подручным инструментом UI-дизайнера.
