UX-дизайн деталей LEGO

Добро пожаловать в мир дизайна LEGO UX

Пилотирование Океанского исследовательского судна или Марсианского исследовательского шаттла — серьезное дело. Будем надеяться, что панель управления на должной высоте! Двойная деталька, расширяющаяся под углом в 45°, размером 2х2 и украшенная рисунком со стороны скоса — это минифигурка LEGO, известная во всем мире.

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

1. Организованный хаос

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

Если отсортировать детали по двум осям (хаос/организованность и наличие экранов/отсутствие экранов), можно выделить несколько групп деталей:

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

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

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

Давайте посмотрим, как решение этих двух задач происходит в деталях LEGO.

2. Дифференциация элементов ввода

Что могло заставить более 400 пилотов бомбардировщика B-17 во время Второй мировой войны убрать шасси перед самым приземлением? Причина в катастрофической ошибке каждого из этих пилотов, или в чем-то более фундаментальном?

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

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

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

Левая деталь (“Угол 45°, размер 2x2 с 12 кнопками”) требует тщательной координации движений рук и глаз;
На правой панели ("Управление несколькими полетами самолета") на ощупь четко различаются: 1) дроссельная заслонка (продолжительное линейное вертикальное движение рукой), 2) тумблерные переключатели (вертикальное переключение пальцем до щелчка) и 3) кнопки (нажатие пальцем).

Дифференциация элементов ввода и на сегодняшний день остается очень актуальной проблемой. В 2015 году компания Ford сняла с производства более 13 500 внедорожников Lincoln, поскольку водители, ехавшие по автомагистрали, при попытке активировать по ошибке глушили двигатель. Причина этого — неграмотно спроектированная панель управления.

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

цвет;
размер;
текстура;
положение;
требуемое действие.

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

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

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

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

3. Организация множества элементов входа

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

Вроде стало немного понятнее. Но как решать, какие элементы входа группировать вместе?

Мне нравится использовать панели управления, разработанные в Советском Союзе, в качестве отправной точки.

Эти советские панели я называю системами с объединенным интерфейсом. Все элементы ввода и вывода информации, относящиеся к одному процессу, размещены на одной и той же панели. В дальнейшем, данный подход использовала компания Дайсон, применяя ее к своим машинам. Теперь представьте себе обратное, когда элементы ввода находятся непосредственно на соответствующем оборудовании на заводе. Звучит нелепо, но на примере системы вентялиции Audi TT можно увидеть, что и такой распределенный подход может быть очень удобен для пользователей. Я написал много статей о плюсах и минусах распределенного интерфейса в прошлом году.

Вернемся к советским панелям управления, которые легко справлялись с ответом на вопросы по типу "Пропускает ли этот клапан воду в резервуар?", но сталкивались с проблемами, отвечая на вопросы обобщающего характера, такими как: "Все ли водяные клапаны закрыты?" или "Где находятся все переключатели, которые мне нужны для подготовки к смене?".

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

‍Функционально-ориентированная организация является наиболее распространенной, возможно, даже "стандартной" философией в промышленном дизайне. Она подразумевает группировку всех элементов входа и выхода вместе отдельно для каждой функции продукта. Отличным примером данного подхода является вентилятор COVID-19 от Cambridge Consultants, изображенный на картинке ниже. Более того, применение данной модели часто можно встретить в автомобилях, которые оснащены переключателями для управления вентиляцией и освещением, размещенными на одной панели управления.

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

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

Технологическая организация элементов ввода и вывода в современно мире встречается довольно часто. Любой сенсорный экран с механическими кнопками сбоку демонстрирует это разделение по принципу используемой технологии. Надеемся, что в будущем компания SpaceX сможет встроить эти механические элементы управления прямо в соответствующий экран, потому что на данный момент их расположение на космическом корабле SpaceX Dragon не является оптимальным.

В LEGO нашли применение функционально-ориентированной организации на детали “Монитор с шаблоном — 19°”. На детали изображены две отдельных группы элементов, одна из которых, возможно, для контроля температуры, а другая — для мониторинга жизненных показателей. Я не знаю, за что отвечают все переключатели, изображенные на второй слева детали, но, вероятнее всего, они сгруппированы по принципу работы.

Есть очень много деталей LEGO с организацией по принципу применяемой технологии, как в капсуле SpaceX Dragon. Мне нравится представлять, что в начале 90-х годов полицейское управление было вынуждено разделить воспроизведение аудио и видео, потому что более новая технология катушечной ленты была несовместима со старой аналоговой системой телефонной линии.

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

Представьте себе, что вы ежедневно приезжаете на работу на завод по производству сканеров для деталей LEGO. Группировка переключателей по задачам (подготовка машины, загрузка корпуса, сканирование процесса и т.д.) означало бы расположение сходных по функции кнопок в разных частях панели управления. Это сложная система с точки зрения организации работы компьютера, но гораздо более простая — с точки зрения работника завода. Будучи дизайнером, только Вы и Ваши пользователи будут судить о том, какой принцип организации работает лучше всего для каждого отдельного случая.