{"id":13726,"url":"\/distributions\/13726\/click?bit=1&hash=322b847fa22c7a2b25723408e38b1b0ea155f96762388edb8bdb813f989de25a","title":"\u0415\u0432\u0440\u043e\u0437\u043e\u043d\u0430 \u0440\u0443\u0445\u043d\u0435\u0442? \u0412\u0430\u0448\u0438 \u0441\u0442\u0430\u0432\u043a\u0438 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 ","buttonText":"\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c","imageUuid":"6dbba30f-ed65-57db-a3c2-87117896436d","isPaidAndBannersEnabled":false}

Правила хорошего интерфейса: изучаем UI-дизайн на примере Lego

Как провести мастер-класс по UI-дизайну, используя только «бортовые компьютеры» из наборов Lego.

Разноцветные кнопки или рукоятки разного размера? Дисплей слева или справа? Перегруженный интерфейс, как на советской атомной станции, или новый минимализм в духе SpaceX? Дизайнер Джордж Кейв объяснил, где пролегает грань между хороший и плохим UI на примере «космических» панелей управления из конструктора Lego. Перевод полезного гида от команды «РУКИ».

Игрушечные панели управления из наборов Lego — это идеальные макеты для мастер-классов по UI, считает дизайнер интерфейсов Джордж Кейв. Пластиковые «бортовые компьютеры» размером 2 на 2 см отражают как самые распространенные ошибки, так и наиболее удачные решения разработчиков.

Но как понять, чем хороший UI отличается от плохого? Чтобы ответить на этот вопрос, Кейв собрал и классифицировал 52 пластиковых «консоли» в своем блоге Designed By Cave.

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

Фото: George Cave

Дифференциация, или проблемы «Летающей крепости»

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

Ответить на последний вопрос поможет история знаменитого бомбардировщика B-17, который во времена Второй мировой войны прозвали «Летающей крепостью» — настолько это была мощная и неубиваемая машина. Вот только посадить самолет без происшествий не удавалось — часто при посадке вместо того, чтобы выпустить шасси, пилоты по ошибке выпускали закрылки.

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

B-17 и кодирование по форме, предложенное психологом Альфонсом Чапанисом. Фото: Wikipedia

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

В Lego мы видим то же самое: на левой панели все кнопки идентичны, и это плохо. Представьте, если придется нажимать их в темноте. Дизайн у средней панели чуть лучше, но все равно неудобный. А вот на правом кубике элементы максимально отличаются друг от друга — трудно спутать кнопку с рукояткой или тумблером.

Слева направо — от плохого UI к хорошему. Фото: George Cave

Однообразие элементов интерфейса до сих пор большая проблема. В 2015 году Ford отозвала 13 500 кроссоверов Lincoln из-за того, что при разгоне водители по ошибке глушили двигатель. Если посмотреть на фото, то легко понять, почему так происходило.

Для ускорения используется кнопка S, а для включения/выключения двигателя — кнопка Engine Start/Stop внизу Фото: CNN

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

Организация интерфейсов: советские пульты и кабина SpaceX

Второй по важности момент — это организация элементов интерфейса. Сравните три «панели» ниже — какая выглядит более удобной?

Фото: George Cave

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

Коллаж: Present and Correct

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

Слева распределенные интерфейсы, справа — консолидированные.  Фото: George Cave

Нечто вроде советских мегапанелей, только с более хаотичным дизайном, можно встретить на фантастических и инопланетных версиях «компьютеров» Lego. Для повседневной жизни такой UI не подойдет.

Слева панель Lego Insectoid, справа — панель с космического корабля пришельцев. Фото: George Cave

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

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

Twitter @aglushko

Впрочем, механические системы управления понемногу уходят в прошлое — им на смену приходят электродистанционные системы (fly-by-wire). Если же устройство соединяет разные виды интерфейсов, то тогда их группируют в зависимости от технологии.

Нечто подобное можно наблюдать у тачскрина, когда кнопки размещают обособленно – обычно сбоку от дисплея. Примерно так сейчас устроен интерфейс нового космического корабля Dragon от SpaceX, который недавно доставил американских астронавтов на МКС.

Панель управления в капсуле Dragon Фото: SpaceX

У Lego тоже есть панели, у которых элементы сгруппированы в зависимости от технологии. Например, на кубиках из 90-х функции аудио и видеопроигрывателя визуально обособлены.

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

Фото: George Cave

И все-таки, какой интерфейс лучше? Кейв выбрал три варианта, которые показались ему самыми простыми, понятными и по-своему изящными. «Я бы посидел в реальности за такой консолью», – отметил дизайнер.

Фото: George Cave

Материал перевела команда «РУКИ». Мы помогаем найти проверенных поставщиков и запустить серийное производство в Китае. О лучших кейсах, технологиях и разработке продуктов пишем в блоге в «Яндекс.Дзен» и на канале в Telegram.

0
9 комментариев
Написать комментарий...
Shakh Khamidov

Гениально

Ответить
Развернуть ветку
Денис Верхоломчук

Хорошая статья

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Ales Sharaev

Это копия конструктора от Meccano

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Nick Prokudin

Что мешает собрать и вертолет и машину и собаку из лего?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
ZZQ

А ведь коллекционировать панели управления из Lego, действительно не плохая идея... Это вам не марки на почте скупать.

Ответить
Развернуть ветку
Владимир К

Последнее время в компании lego заметны изменения, то ли сменили отдел креаторов, то ли обучили их))

Ответить
Развернуть ветку
Читать все 9 комментариев
null