Линии эволюции элементов интерфейса человек-машина

Инструменты проектирования

Законы развития технических систем

В современной Теории решения изобретательских задач (ТРИЗ) накоплен огромный багаж наблюдений за развитием технических систем. Обобщения этих наблюдений зафиксированы в форме так называемых законов развития. «Законами» назвали статистически подтвердившие себя тенденции совершенствования систем.

Достаточно бегло посмотреть на названия некоторых из этих тенденций, чтобы представить о чём они:

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

Например, закон повышения идеальности — это развитие в направлении сокращения ресурсов, требуемых на достижения полезной функции. Закон говорит о том, что любая система в своём развитии будет повышать степень идеальности. Примером проявления могут быть контактные линзы. На предыдущих этапах развития эта же система в конфигурации известной как «очки» лишилась оправы, выполняющей две функции: удержание стёкол и крепление на голове. Функция крепления на голове стала избыточной, а функция удержания «стёкол» обеспечивается за счёт гибкости мембраны линз и сил поверхностного натяжения. При этом главная полезная функция — придавать остроту зрения — осталась прежней.

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

Шапка браузера в МакОС Монтерей

Так, например, эволюционировала шапка окна браузера в операционной системе МакОС Монтерей. Элемент шапки исчез, став частью страницы. Не осталось даже отчеркивания. Заголовок ранее состоял из двух линеек: одна для адресной строки, другая для табов с открытыми сайтами. Сейчас для обоих типов элементов используется единое пространство в одну линейку. Вкладки и адресная строка остались, но пространство расходуется вдвое эффективнее. По крайней мере, при небольшом количестве вкладок.

Шапка браузера в более ранней МакОС Мохава

Зная законы развития технических систем можно предположить куда именно будет развиваться каждая из частей системы по каждой из перечисленных тенденций. Для этого достаточно знать состав системы, текущее состояние её частей, а так же каким-то образом уметь перебирать шаги развития частей. О том, что это за шаги и как их перебирать мы и поговорим.

Линии развития

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

В качестве направлений развития рассматривают отдельные характеристики системы. Например, практически для любого интерфейса важным свойством является информативность его элементов. Если рассмотреть форму отправки данных, то информативность её частей может меняться от реализации к реализации. Нулевая информативность: кнопка отправки и форма не сообщают человеку никакой информации о своём назначении и даже способности нажиматься. Шаг в сторону повышения информативности: понятно, что кнопка нажимаема; понятно, нажата ли она, понятно когда действие произошло. Дальнейшее развитие прибавит детализацию о произошедшем. Скажем, добавится информирование о том, сколько данных удалось обработать, а сколько нет и по каким причинам.

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

Существуют как базовые, то есть общие, линии развития для любых видов технических систем, так и конкретные для специфичных систем. Рассмотрим те и другие.

Базовые и конкретные линии развития

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

Давайте для примера проследим за состояниями базовой линии дробления, выявленной автором ТРИЗ Генрихом Альтшуллером. В перечне состояний ниже растёт степень дробления в системе при движении от первых состояний к последующим. Понадобится немного потерпеть, примеры даны для механических систем, и уровень абстракции высок. Базовые линии развития, как правило, снабжены довольно абстрактными описаниями, чтобы подходить к обширному классу технических систем. Работают же чаще с конкретными линиями эволюции, созданными для реального технического объекта. Ниже будет дан пример приложения базовой линии к элементу интерфейса «поле ввода».

Линия дробления

Итак, вот упорядоченные состояния базовой линии дробления по Альтшуллеру:

1. Исходный объект
2. Частичная внутренняя перегородка — намечается разделение
3. Полная внутренняя перегородка — объект разделился
4. Число перегородок растёт — увеличивается степень дробления
5. Частичное отделение отсеков, связанных жестко или шарнирно — дробление зашло до того, что одни части начали отделяться
6. Число шарнирно-соединённых отсеков растёт — части соединены и отдельны одновременно
7. Предельная шарниризация — шарниры перешли на микроуровень, пример: резина
8. Штанга: два элемента соединены жёсткой связью — выделились подсистемы с соединением
9. Связь становится динамической или гибкой — соединение теряет жесткость, части приобретают подвижность относительно друг друга
10. Полевая связь — соединение держится на полевых силах, например, магнитное поле
11. Структурная связь — часть перемещается внутри другой; строго говоря, это не обязательно более совершенная версия предыдущего этапа, это вариант повышения раздробленности
12. «Челночная связь» — вещественная или полевая связь, например, катер, курсирующий между кораблями
13. Программная связь — связи нет, но части действуют по согласованной заранее программе
14. Нулевая связь — объекты разъединились
15. Нулевая связь в полисистеме — множество объектов, предельное разделение в системе другого типа

Если мы попробуем применить базовую линию дробления для такого элемента интерфейса как поле ввода (input), то найдем следующие состояния полей ввода в экранных формах.

Состояния конкретной линии дробления для системы «поле ввода»

Мы получили конкретную линию развития для системы «поле ввода». Таблица составлена так, что состояния базовой линии дробления применялись, за редким исключением, к содержанию поля ввода. Исключением является состояние с полевой связью, решающей вопрос связанности элементов в полисистеме. Обратим внимание, что не все стадии базовой линии перешли в конкретную. Такое случается, когда не удаётся найти адекватную интерпретацию архитипичному состоянию в рассматриваемом объекте.

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

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

Как применять линии развития UI

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

Загрузчик состоит из таких частей и соответствующих им функций:

• 🕹 Приёмник данных: подача в систему эксель-файла
• 👁 Визуализатор назначения: передача человеку сообщения о назначении агрегата и принимаемых им данных
• 👁 Визуализатор состояния: передача человеку состояния процесса и результата загрузки

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

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

Вот стадии линии информативности визуализатора состояния загрузки:

• Нулевая: отсутствует, состояние невидимо
• Один бит: например, спиннер 🕑 или текст о состоянии «Минуточку…»
• Число: процент в виде числа 0..100% или доли в обыкновенных дробях
• Столбчатый график: прогрессбар

Разговор между командой разработки и дизайнером может быть следующим.

Команда: Мы не успеем сделать прогрессбар, давайте это уберём. Дизайнер: Давай подумаем как можно сделать проще? Обойтись без индикации совсем не выйдет — человек не поймёт работает система или нет. Можно дать минимум со следующего шага на линии развития.

(Смотрят вместе в таблицу эволюции элементов UI)

Команда: Давайте напишем «Грузим…», этого должно хватить. Дизайнер: Да, но только это чуть не подходит по тону, с которым мы общаемся с нашими потребителями. Я подумаю над формулировкой. Команда: Решено!

Линии развития UI. Справочник

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

1. Конкретные линии развития для поля ввода

Информативность

Назначение данных

• Название и/или назначение поля невидимы, неясно что именно туда вводить
• Поле подписано
• Даны примеры ожидаемого к вводу содержания за счёт подсказки внутри поля
• Даны подсказки по ограничениям, предупреждающие отказ в приёме ввода

Состояние

• Неразличимо
• Различимы состояния: блокировки ввода, готовности ввода, отказа в приёме ввода после валидации

Контроль и помощь в вводе

• Отсутствует
• Помощь при вводе
  — заполнение отдельными значениями — псевдоссылки с вариантами-примерами;
  — нагнетатель значений из набора данных
• Отложенный контроль за счёт валидационных сообщений, путём проверки на сервере
• Мгновенный контроль, предупреждающий об ошибках за счёт моментальной валидации на клиенте
• Мгновенный контроль, упреждающий ошибки:
  — Контроль формата за счёт маски — поле ввода телефона или кода— Полный контроль содержания за счёт ограничения перечнем значений — подсказка.

Дробление

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

2. Базовые линии развития UI элементов и агрегатов

Информативность

• Параметр или сущность невидимы
• Видим лишь факт включения признака (бит): есть/отсутствует
• Видим. Состояние описано (текст)
• Видима история: какие были состояния до и когда (лог)
• Видима перспектива: как может изменяться значение (видимая модель)

Интерактивность

• Команда подаётся системой, человек никак не влияет
• Команда подаётся текстовым вводом — CLI: ввод строгих текстовых команд
• Команда подаётся настройкой диалога — например, диалог открытия файла, заполнение формы
• Команда подаётся через непосредственную манипуляцию — драг-н-дроп, редактирование кривых Безье

Управляемость

• Неуправляемая
• Ручное управление человеком
• Полуавтомат — машина забрала часть простой рефлекторной логики, оставив человеку команды для управления неоднозначными ситуациями
• Полный автомат — на основе явного или обучающегося алгоритма

Гибкость изменения значений

• Задано на уровне кода
• Задано на уровне в базе данных
• Задано на уровне файла конфигурации
• Задано и может меняться через UI

Тип взаимодействия с сервером

• Без сервера — всё хранится и отрабатывается на клиенте
• Синхронно — цикл взаимодействия требует предварительного заполнения формы и подачи команды отправки
• Асинхронно — компоненты страницы реактивны, из отдельных элементов могут посылаться команды-запросы и к ним приезжают данные

Моно-би-поли

• Одиночная система — поле ввода; кнопка
• Би-система — биполе; би-кнопка
• Полисистема — грид, таблица; массив пэдов
• Континуум — непрерывный редактируемый текстовый поток; управление в двумерном пространстве

Согласованность

• Несогласованные действия
• Частично согласованные — например, отложенная обработка файла после подачи в загрузчик
• Согласованны синхронно — ответ получается мгновенно или через короткую с точки зрения человеческого восприятия паузу
• Согласованно в разных ритмах — данные отправляются периодически и хаотично, отчёты, появляющиеся регулярно в назначенные интервалы
• Согласованы асинхронно: в интервалах — данные отправляются периодически и хаотично, отчёты, появляющиеся регулярно в назначенные интервалы

Переход к высокоэффективным полям

• Информационное поле — визуальная коммуникация
• Акустическое после — звуковые эффекты для управления вниманием
• Психическое — воздействие на подсознание с помощью манипулятивных техник

Что с этим всем делать

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

Литература

• Шпаковский Н. А., ТРИЗ. Анализ технической информации и генерация новых идей — М.: Форум: Инфра-М, 2017. — 264 с.
• Любомирский А., Литвин С., Законы развития технических систем, GEN3 Partners, 2003