Правила и концепции улучшения UX и юзабилити. Понятие эвристики и чек-листа

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

Как улучшить и сделать опыт взаимодействия пользователей не просто максимально комфортным, но и создать определенную практику постоянного увеличения производительности труда? Для нас такая практика очень важна. Эргономичные интерфейсы позволяют работать быстрее, эффективнее, достигать целей сотрудника и допускать меньше ошибок и, следовательно, получать больше прибыли от сотрудников. Косвенно это также влияет на вовлеченность и на самочувствие сотрудников, а следовательно на HR-бренд и метрики удовлетворенности, уменьшая текучку.

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

Что такое эвристика?

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

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

Как мы можем применять эвристики для постоянного улучшения интерфейсов?

Так как число действий при взаимодействии с интерфейсами ограничено, это накладывает ограничение на хорошие практики.

В 2024 году исполняется 30 лет 10 эвристикам юзабилити Якоба Нильсена, и хотя они могут показаться устаревшими, важно понять их происхождение и ценность. Эти принципы изначально были созданы в 1989 году Нильсеном и Рольфом Молихом как инструмент для оценки студенческих работ. Они возникли из необходимости систематизировать проблемы, а не из строгого исследования.

Через несколько лет, работая в Bell Communications Research, Нильсен пересмотрел эвристики, опираясь на систематические данные. Он собрал две базы: 249 реальных проблем юзабилити из профессиональных проектов и 101 принцип, описанный в литературе. Затем он провел факторный анализ, чтобы связать проблемы с принципами, обработав 25 149 точек данных. Этот метод помог выделить ключевые факторы и свести многомерное пространство данных к набору из 10 эвристик, которые стали эталоном.

Эти принципы — не просто список правил, а результат анализа того, как лучше всего объяснить и исправить типичные ошибки дизайна. Несмотря на возраст, их основа остается актуальной и показывает, как статистика и эмпирический подход могут превращать наблюдения в практические рекомендации.

Допустим, мы знаем, что есть определенный набор факторов полученных путем наложения одних юзабилити-проблем на другие юзабилити-факторы. Грубо говоря, есть группы юзабилити-проблем, но зачастую они говорят о разном: это вызвано тем, что интерфейсы продуктов (как и сами продукты!) имеют неодинаковые контексты и исторически формируют уникальные типы проблем. Эвристики достаточно неоднородны. Ниже список наборов эвристик, которые могут быть важными принципами повседневной работы:

• Эвристики Якоба Нильсена (Nielsen's heuristics);

• Принципы когнитивной инженерии Gerhardt-Powals' Cognitive Engineering Principles;

• Золотые правила интерфейсного дизайна Бена Шнейдермана (Shneiderman's Eight Golden Rules of Interface Design);

• Классификация Вайншенк и Баркер (Weinschenk and Barker classification);

• Эвристики управления проектами Project Management Usability Heuristics;

• 10 эвристик для мобильных устройств от NNG (NNG's Mobile Heuristics);

• Принципы взаимодействия Дона Нормана (Norman's Principles of Interaction Design);

• Эвристики Дженнифер Тидвелл (Tidwell's Interface Design Patterns).

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

Концепция демона Лапласа. Демон Титивиллус, который видит ошибки еще до того, как они были совершены

Демон Лапласа, предложенный Пьером-Симоном Лапласом в 1814 году — мысленный эксперимент, где существо знает положение и скорость всех объектов во Вселенной. В контексте UX эта идея превращается в метафору для анализа и прогнозирования пользовательского поведения.

Интерфейсы должны быть предсказуемыми. Если бы мы обладали «знанием» Демона Лапласа, мы могли бы точно предугадать действия пользователей на основе их истории и контекста. Например, интерфейс мог бы заранее подстраиваться под вероятные сценарии использования или предотвращать ошибки. Он мог бы также на основании известных эвристик и чек-листов догадываться о тех ошибках, проблемах и затруднениях, которые будет допускать сотрудник на рабочем месте.

Интересно, что в средневековой демонологии существовал Титивиллус — демон, вносящий ошибки в работы писцов. Можно представить его в роли UX-демона, который помогает языковым моделям, вроде GPT, прогнозировать проблемы дизайна и предлагать решения.

Может ли такой «Титивиллус» стать инструментом для анализа ошибок и оптимизации интерфейсов внутри крупных компаний, например, Ростелекома?

Использование нейросетей для применения эвристик

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

Готовим входные данные

Допустим, мы загружаем макет нашей системы таск-трекинга «Яга», которая в одном из своих аспектов является канбан-доской:

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

Что мы получили: ответ от нейронки

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

Что можно сделать еще?

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

Надо разделить интерфейс на части!

Проблема такого рода LLM, как большой языковой модели, кроме всем известных галлюцинаций — в сложном восприятии элементов интерфейса. Давайте взглянем на то, как это работает.

Первичное распознавание

Когда LLM смотрит на изображение, она не «видит» его так, как мы. Вместо этого она преобразует изображение в ряд чисел. Представьте себе, что вы переводите фотографию в сложную электронную таблицу, заполненную точками данных. Сверхточные нейронные сети (CNN), особый тип нейронной сети, помогают сканировать изображение и выделять шаблоны, такие как: края, текстуры и формы, сжимая их в более простую, закодированную версию. Это преобразование позволяет LLM начать обработку визуальной информации.

Извлечение признаков: поиск того, что имеет значение

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

Кросс-модальное обучение: связывание изображений и слов

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

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

Готовое решение

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

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

Помимо этого, анализаторы изображений от разных провайдеров на рынке ИИ работают по-разному. Обработка изображения с помощью нескольких различных анализаторов позволяет получить более качественный результат за счет объединения их сильных сторон. Разнообразие датасетов, на которых обучались эти нейронные сети, также вносит свой вклад, улучшая итоговый анализ.

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

Таким образом, мы организуем своего рода «мозговой штурм» нескольких нейросетей над нашим интерфейсом, разбивая его на блоки и сводя вероятность возникновения галлюцинаций к минимуму. Техническое решение на базе Dart/Flutter и GetX позволяет быстро и эффективно внедрять новые функции и адаптироваться к изменениям в области ИИ.

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

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

Планы на будущее

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

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

Заключение

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

1. Снижение затрат на UX-исследования

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

2. Ускорение разработки

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

3. Повышение конверсии и удержания клиентов

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

4. Прогнозирование проблем и снижение рисков

   Использование подходов вроде «демонов» позволяет заранее выявлять узкие места и ошибки, которые могут повлиять на пользовательский опыт. Это минимизирует риски негативных отзывов и репутационных потерь.

5. Масштабируемость решений

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

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

Материал подготовили:

• Болатаев Виталий (ТГ: @lilalogos) — ведущий исследователь пользовательского опыта экосистемы «Лукоморье» (РТК ИТ)

• Шевелёв Антон (ТГ: @UX_God) — руководитель отдела исследований пользовательского опыта экосистемы «Лукоморье» (РТК ИТ)

• Денисенко Никита (ТГ: @nikdenisenko) — руководитель дизайн-команд направления импортозамещения дизайн-студии (РТК ИТ), дизайн-директор экосистемы «Лукоморье»