{"id":9457,"title":"\u041c\u0438\u043b\u043b\u0438\u043e\u043d \u043d\u0430 \u043e\u0431\u043b\u0430\u043a\u0430 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u043e\u0432","url":"\/redirect?component=advertising&id=9457&url=https:\/\/vc.ru\/promo\/318366-korotko-poluchit-million-na-testirovanie-oblachnoy-infrastruktury&placeBit=1&hash=63f8aeb1fa55d279faf1ab65b9ee234cdf90f6dda13e2a5162f812eb79c08715","isPaidAndBannersEnabled":false}
Дизайн
Yuliya Krasilnikova

Правила хорошего интерфейса: изучаем 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

Гениально

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

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

Ответить
2
Развернуть ветку
Sergey Khohlachev

Хорошим UI обладает детский железный конструктор «Самоделкин», выпускаемый со времён СССР — отвёртки, гаечные ключи, винтики, болтики.
И танк собирали и вертолёт и машину и собаку.
LEGO как ЕГЭ — машинально, без особой логики.

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

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

Ответить
0
Развернуть ветку
Sergey Khohlachev

Да, но я не про копию, я про UI конструктора.

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

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

Ответить
0
Развернуть ветку
Sergey Khohlachev

Универсальность.
«Самоделкин» в одной коробке — и самолёт соберёте и машину и танк.
«Лего» нужно покупать отдельные коробки с танком, отдельно с самолётом.

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

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

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

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

Ответить
0
Развернуть ветку
Читать все 9 комментариев
Эвакуатор для своих: бармен из Санкт-Петербурга придумал способ заработать, когда закрыли общепит Статьи редакции

Он сам переоборудовал грузовик Toyota Dyna и принимает заказы от владельцев автосервисов и знакомых автомобилистов.

Платформу для эвакуатора варили из металла вручную
Аватар Аня стала самостоятельной: виртуальный блогер ТНТ теперь отвечает на комментарии с помощью нейросети

Нейросеть месяц училась общаться в комментариях под постами.

Почему начинающим предпринимателям стоит выходить на маркетплейсы

Торговые онлайн-площадки готовы сотрудничать с бизнесом любого размера.

В OTUS стартует первый онлайн-буткемп «Java developer»
Для пользователей WhatsApp в США запустят мгновенную отправку криптовалюты — без комиссий и ограничений Статьи редакции

Нововведение позволит пользователям «быстро и безопасно» получать и отправлять криптовалюту.

Благодарность команде vc.ru

Эти ребята делают наш мир лучше.

Tmall заморозил 80к руб. и не отправляет заказ 16 дней

Приветствую! Мой первый пост на vc, не пинайте сильно. Постараюсь кратко и по факту.

Как поднять продажи фармы в диджитале? Рассказываем про стратегию продвижения бренда «Ультра-Д» и показываем результаты

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

Голова не варит: 10+ советов, как предотвратить умственное переутомление

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

OZON заблокировал аккаунт и отказывается объяснять причину

Ничего не предвещало беды. Как это обычно и бывает, я пришел в ПВЗ, чтобы забрать свой заказ, достал телефон, чтобы назвать сотруднику номер заказа, и столкнулся с проблемой: меня выкинуло из аккаунта. При попытке авторизоваться по номеру телефона или по почте я получил ошибку:

Праздник к нам приходит: когда заказывать подарки за рубежом

Ещё в ноябре для логистических компаний начинается горячий сезон, который продолжается до марта. 11 ноября — большая распродажа AliExpress, а сразу после неё — Чёрная пятница, плавно перетекающая в подготовку к Новому году, 14 и 23 февраля, и, наконец, к 8 марта. В это время Почта и другие логистические службы по всему миру доставляют особенно…

null