January 14

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

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

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

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

Как это может сработать?
Чтобы обучить этому ИИ, необходимо пройти 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 про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!