Адаптивный интерфейс

От классического статичного дизайна к адаптивному интерфейсу.

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

Адаптировать значит подстраивать приложение под пользователя. А пока все наоборот — это мы вынуждены подстраиваться под приложение.

Как это может сработать?
Чтобы обучить этому ИИ, необходимо пройти 4 этапа:

1 Этап сбора данных

На этом этапе мы собираем и интерпретируем пользовательские данные. Это похоже на внимательное наблюдение за действиями каждого пользователя:
• Что они кликают, а что пролистывают;
• Когда они заходят в приложение: утром, вечером или в какой-то другой период;
• Как они взаимодействуют с контентом — увеличивают размер текста, переключают на темную тему или вообще ничего не меняют;
• Где они проводят больше времени;
• Почему так себя ведут (это можно определить по шаблонам).

2 Этап анализа

Этап финального анализа собранных данных и распределение по категориям:
• Основы;
• UI-компоненты;
• Дизайн-системы;
• Модели машинного обучения;
• Группы пользователей;
• Персонализированные правила;
• Поведенческие шаблоны;
• Анализ метрик;
• Обратная связь;
Например:
• “Пользователи всегда увеличивают текст”;
• “Пользователи проверяют погоду каждое утро”;
• “Пользователям больше нравится смотреть картинки, чем читать”;
• “Пользователи отслеживают фондовый рынок”.

3 Этап прогнозирования

Этап, на котором мы сопоставляем контексты и прогнозируем:
• Пользовательские паттерны
• Предпочитаемый макет
• Цветовые ожидания
• Контент
• Шрифты
• Временные контексты
• Удобство
Пример:
“Этот пользователь утром ищет прогноз погоды, предпочитает темный режим ночью”.

4 Этап авто-сборки

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

Для первого пользователя (User 1):
• Маленький хедер
• Виджет погоды
• Статистика
• Персонализированные виджеты
• Футер
Для второго пользователя (User 2):
• Большой хедер
• Контент для чтения
• Профиль

Почему это может стать реальным уже в ближайшем будущем?

Десять лет назад ИИ с трудом распознавал кошку на фото.
Четыре года назад GPT-2 едва мог составить связный текст.
Сегодня GPT-4 пишет код, решает задачи по математике и сдает экзамены университетского уровня.
Такой прогресс кажется невероятным, но он соответствует простой тенденции — масштабирование делает модели умнее.

Примерные оценки прошлого и будущего роста вычислительных мощностей (как физических, так и алгоритмических). С увеличением масштаба моделей они становятся умнее, и, подсчитывая порядок увеличения мощностей (OOMs), мы можем примерно оценить, какого уровня интеллекта моделей ожидать в ближайшем будущем. (На графике показан рост только базовых моделей; дополнительные оптимизации не учитываются.) Image from Leopold Aschenbrenner

Оценки алгоритмической эффективности в языковом моделировании от Epoch AI. По их данным, за 8 лет удалось добиться улучшения эффективности примерно на 4 порядка (OOMs). Image from Leopold Aschenbrenner.

Выводы:

• ИИ становится умнее и дешевле;
• Задачи, которые раньше стоили $1,000, теперь обходятся в $1;
• Модели могут справляться со сложными математическими задачами;
• Эти улучшения происходят быстро и стабильно.
Такой рывок в сфере ИИ делает адаптивный интерфейс не просто возможным, но и потенциально доступным 🚀

Что это значит?

Для пользователей:
• Вам не нужно постоянно искать нужные функции;
• Удобный интерфейс подстроится под вас автоматически;
• Персонализированные макеты;
• Экономия времени.
Для дизайнеров:
• Разработка гибких систем вместо фиксированных решений;
• Построение адаптивных компонентов;
• Установка правил, а не жестких макетов;
• Тестирование разных сценариев.
Для разработчиков:
• Динамическая разработка на основе правил;
• Интеграция моделей ИИ и машинного обучения;
• Упор на интерпретацию данных;
• Модульный и масштабируемый код.

🔥Возможные трудности

• Сложно понять пользователей, даже будучи человеком. Как же с этим разберется ИИ?
• Слишком частые изменения могут перегрузить пользователя.
• Иногда данных слишком много (в том числе и случайные касания), и их сложно интерпретировать.
• Для работы ИИ требуется качественная информация.
• Важно учитывать этические аспекты и конфиденциальность.
• Необходимы надежные системы тестирования.

✅ Вывод

Старый подход: дизайн-системы — это библиотеки фиксированных компонентов.
Новый подход: дизайн-системы — это живые, динамичные организмы, которые реагируют, изменяются и совершенствуются.
Результат? Довольные пользователи, ускоренные рабочие процессы, и интерфейсы как будто созданы специально для вас.
Модели? Больше данных для обучения, более высокое качество результата.
Будущее не будет статичным. Оно будет адаптивным.
Но готовы ли мы к такому переходу? 😅

Узнайте больше об ИИ

🔗 From GPT-4 to AGI: Counting the OOMs from Leopold Achenbrenner

💎 Полезные находки

Состояние ИИ в дизайн-системах от Supernova
🔗 Link

The Future of Design Tokens – Online Jam with Tokens Studio
🗓️ Среда, 15 января 2025, 19:00 – 20:30
Организатор: Into Design Systems Community & Conference
🔗 Link

Плагин для Figma — Variables to Code
🔗 Link

Плагин для Figma — Figma to Code
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
🔗 Link

Componly
Отслеживайте внедрение своей дизайн-системы
🔗 Link

❤️ На кого стоит подписаться

На этой неделе знакомимся с Яном Томаном 🙌
Ян — директор по дизайну в Supernova, человек с уникальным и многогранным подходом к разработке продуктов. Он успел побывать в роли разработчика, продакт-менеджера и UX-дизайнера, поэтому отлично разбирается во всех этапах создания продукта.

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

📹 Мастерство создания UI-компонентов, синхронизированных с кодом — Ян Томан (Schema 2021)
🔗 Video

📹 Непрерывные дизайн-системы — выступление Яна Томана на Into Design Systems Conference
🔗 Video
🔗 Follow Jan on Linkedin

Перевод статьи Adaptive User Interface из блога Romina Kavcic

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!