Раньше в интерфейсы просачивались разные программистские непонятные артефакты, типа имен переменных.
Со временем к ним добавилось бессмысленное и непереводимое бюрократическое арго
Гражданская_вакцинация/Повторная_вакцинация__V1
Потолочная панель Airbus A320: интерфейсный принцип
Сегодня на разборе — интерфейс потолочной панели Airbus A320.
Интерфейс, как мы видим, имеет модную темную тему. Но нас интересует не это, а принцип, по которому этот интерфейс разработан. Он не так прост и для своего времени он был очень инновационен.
Все многообразие видимых контролов можно разделить на 4 типа:
- Тумблеры-рычажки
- Крутилки
- Кнопки
- Кнопки за защитным колпачком
Это разделение осмысленное и не случайное. Конструкторы таким образом реализовали защиту от ситуации «я тут что-то нажала и все пропало». Рассмотрим по порядку.
1. Тумблеры-рычажки
Двух-, иногда трех-позиционные. Интерфейсный принцип тут очень простой: если что-то вытарчивает над поверхностью панели — значит этим можно спокойно щелкать туда-сюда как угодно в любой ситуации. И это никак серьезно не повлияет на состояние системы.
Поэтому тумблерами управляется что-то не очень важное, типа фар и освещения. Такое, что можно включать и выключать сколько влезет. Не понравился результат — просто перещелкни обратно и все тут же вернется, как было до этого.
Плюс тумблера в том, что положение рычажка автоматически показывает его состояние: вкл или выкл.
Минус — можно нечаянно зацепить рукой, особенно если тумблеров на панели будет очень много. Поэтому их мало.
2. Серенькие крутилки
Идеологически аналогичны рычажкам в ситуациях, если нужно больше чем 2 положения, либо что-то плавно регулировать. Задействованы в климат-контроле и аналогичном.
3. Кнопки
Самые многочисленные и самые интересные. Они управляют ответственными системами самолета. Этими уже нельзя щелкать когда захочется и как попало.
Каждая кнопка меняет состояние системы. И, в отличие от тумблеров, чтобы вернуться к предыдущему состоянию, скоре всего будет уже недостаточно просто нажать ту же самую кнопку еще раз.
Например, если выключить систему можно одним нажатием, то, чтобы ее включить обратно, может потребоваться более сложная процедура ее запуска.
Поэтому кнопки сделаны заподлицо с поверхностью панели. Их не получится задеть или нажать случайно.
В нижней трети фото находится панель «AIR COND» (климат-контроль). Там управление реализовано по-простому на крутилках.
Выше нее располагаются панели управления электропитанием, топливом и гидравликой. Они более ответственные и поэтому там только кнопки. Даже если принцип управления там местами похож на менее ответственное кондиционирование (отбор воздуха от правого/левого двигателя, генератор правого/левого двигателя…) — все равно: никаких торчащих тумблеров и крутилок. Только кнопки заподлицо с панелью.
Еще один плюс такой кнопки, в том, что она stateless — т.е. не хранит свое состояние. Например: при включении самолета все системы (и соотвествующие им кнопки) окажутся в состоянии нормальном для включения. А не в том, в котором их оставили перед выключением.
Жирный минус кнопки вытекает из ее плюсов. В отличие от тумблера, такой кнопке нужен отдельный элемент чтобы показать ее состояние вкл/выкл. В данном случае лампочка.
Сложность в том, что лампочку надо установить в каждую кнопку. Да не одну, а минимум две (одна лампочка может перегореть и пилот останется без индикации). А к каждой лампочке нужен длинный пучок проводов чтобы ее питать. А с ответной стороны к каждой лампочке нужен какой-то контроллер, который будет ее включать-выключать. А кнопок таких по самолету многие десятки (на фото только центральная часть панели: справа-слава от нее есть еще много чего).
Помножьте это на дублирование, резервирование и получите километры проводов и сложнейшую электрическую систему. И все ради того, чтобы кнопки были заподлицо с панелью и их нельзя было случайно нажать.
Такое сложно и дорого делать даже сейчас. А в середине 80-х, когда разрабатывался А320, Airbus поимела немало трудностей и геморроев с разработкой такой системы. Но таки дотащила этот интерфейс до продакшена.
Сегодня такой интерфейсный принцип стал стандартным на всех самолетах Airbus и некоторых других производителей.
А в до-эйрбасные времена типичный самолетный интерфейс выглядел примерно так:
ps: а что же красные кнопки?
4. Кнопки под защитным колпачком
Они как и описанные выше кнопки. Но реализуют всякие необратимые действия: пожаротушение, выброс кислородных масок и прочее, чего никак нельзя будет отыграть назад.
Про толерантность к интерфейсам
Эссе с применением интерфейсного антипаттерна «многабукв».
Часто слышу, что, мол, опять в новой версии макоси (винды, андроида…) не появилось ничегошеньки нового. История эта, в общем-то, очень простая.
Основной функционал везде давно и неплохо вылизан, а отдельные улучшения заметны не всем. Периферия тоже уже много лет принципиально не меняется: те же самые экран, клавиатура, тачпад, тачскрин, микрофон, динамик, камера, блютусы-шмутусы… Не случилось с нами 3D-, VR-, AR- и прочих двухбуквенных революций.
Зато с интерфейсами дела обстоят поинтереснее. Их обновляют; обновляют постоянно. И визуально освежают: фончики там, шрифтики да иконочки. И в смысле взаимодействия тоже меняют. Причем, иногда, довольно основательно меняют. Но даже и эти изменения больше не прокатывают за новизну.
Дело в том, что за последние годы количество интерфейсов в повседневной жизни стало таким огромным, что нам на них стало абсолютно наплевать. Интерфейс перестал восприниматься как источник «вау», как то, что может и должно улучшить нашу жизнь.
В досмартфонные времена людей реально запаривало «меню» их телефона. Как выглядит, как управляется, порядок пунктов. Купить себе сони вместо привычного самсунга было как переехать в новую квартиру: все непривычное, все не на своем месте. Бесит.
В 2007 Джобс выпустил мега-успешный смартфон, у которого была всего 1 кнопка вместо обычных 17…19. Это казалось настолько безумным и невозможным, что весь мир трясло целый год от осознания этого факта.
Десять лет спустя, в 2017, Кук выпустил смартфон вообще без единой кнопки спереди. Но в тот момент всем было уже строго пофиг.
Сегодня банально нет смысла обсуждать тонкости UI нового айфона или андроида. Потому что в течение дня придется выполнить действия с микроволновкой, билетным терминалом, автомагнитолой, банкоматом, вендоматом, паркоматом, десятком приложений (каждое — со своим неповторимым UI), двумя-тремя интернет-магазинами, пятью мессенджерами. И каждый новый день добавит в этот список еще один новый неповторимый интерфейс.
Квадратное, овальное или со скругленными углами, плоское или скевоморфное, светлая тема или темная тема, микро-анимации и микро-взаимодействия, тачи и свайпы, Робото или Проксима Нова, нейтив или кит, матириал или шматириал… …Да блинский ёж! Делайте что хотите и как хотите! Мы уже давно привыкли к интерфейсному зоопарку, мы привыкли быстро разбираться во всех «коммуникационных парадигмах», «визуальных языках» и «дизайн-системах».
UX-мышца современной домохозяйки раскачана в два раза ширше, чем бицуха Хабиба. Она (домохозяйка, в смысле) моментально осваивает новые жесты, новый цвет иконок и уже через секунду переключается на следующий интерфейс. Все UI-обновки для нее как смена времен года за окном. Похолодало — доставай пальто.
Никто больше не напишет «дуров верни стену». Редко кто просит дизайнера подвинуть логотип на пару пикселей правее. Типичный житель типичного большого города совершенно толерантен к любому look&feel. Даже сайтом Craigslist — классической страшилкой нулевых — фиг теперь кого напугаешь.
В этом смысле мы все живем в очень интересное время. Потому что, с одной стороны, такое положение вещей сильно развязывает руки. Можно делать интерфейсы так, как считаешь нужным, насколько хватает фантазии, способностей, времени и денег. Люди в среднем как-нибудь да справятся.
С другой стороны, выявляется, что для интерфейсов осталась лишь одна-разъединая по-настоящему важная метрика: конверсионность. Эстетика, «инновационность» и мифическое юзабилити — все это уже в прошлом.
Самый конверсионный интерфейс, как мы знаем — это отсутствие интерфейса.
Темная тема
Вчера Apple выкатила на широкую публику новую macOS 10.14 Mojave. Одно из заметных нововведений — опциональная темная тема интерфейса. Я честно просидел на ней сутки, после чего вернулся обратно на светлую.
Историческая справка
Когда-то, давным-давно, все компьютерные мониторы имели только «темную тему»: пучок электронов рисовал на темном экране кинескопа светлые пятна. Для человека разбирающегося в компьютерах это казалось абсолютно естественным и нормальным, по-инженерному — практически осциллограф.
Так было распространено вплоть до начала 90-х. Мой первый компьютер был с черно-оранжевым монитором, а текстовые и даже графические редакторы имели по-умолчанию черную канву.
Параллельно с этим с начала 1970-х ребята из лаборатории Xerox PARC пытались реализовать более гуманистический подход к интерфейсу с понятной всем метафорой из окружающего мира: черные буквы на белой бумаге — идейный прообраз Material Design.
В 1973 году вышел компьютер Xerox Alto: первый ПК со светлой темой.
А в 1984 — знаменитый Apple Macintosh, который и познакомил широкую публику с «белым» графическим интерфейсом, немалую часть которого ребята из Купертино «позаимствовали» прямиком у Ксерокса.
С середины 90-х стали массовыми ПК с Windows, которая унаследовала те же интерфейсные подходы Apple и Xerox: черные буквы на светлом фоне.
Возвращение темного
Со временем стало понятно, что интерфейс «черным по белому», несмотря на свою натуральность, утомителен. Слишком большой поток света, слишком контрастные элементы. Стали появляться «темные» графические интерфейсы. Первыми этим озаботились программисты, тк вынуждены были смотреть в монитор ежедневно часами и глаза уставали.
По-началу «темные» интерфейсы выглядели просто как светлые элементы на темном фоне. Потом пришло понимание, что для продолжительной комфортной работы надо еще избавляться от излишнего контраста. Черное делать не таким черным, белое не таким белым, убирать все слишком «шумные» и яркие элементы. Структурировать элементы и организовывать пространство аккуратными дозированными нюансами.
Выяснилась простая вещь: для интерфейса, с которым работаешь часами, не требуется «кричащих» акцентов. Ты и так этот интерфейс знаешь наизусть. В результате, сегодня любая современная IDE комплектуется комфортной темной темой.
Темная сторона macOS
Я не выдержал темную тему новой макоси больше дня. При том, что все IDE и ряд других программ у меня с темной темой. Но у Apple пока, к сожалению, не получилось так же красиво и комфортно, как у разработчиков IDE.
Сложность в том, что недостаточно светлое сделать темным, а темное светлым, чтобы получить хорошую Dark Theme. Черный котик — это вовсе не инверсия белого: наше зрение и восприятие работает очень субъективно.
У меня был опыт рисования темной темы для одного продукта и в процессе выплыло множество интересных нюансов. Изящные тонкие линейки становились вырвиглазными, тени — малоразличимыми, выпуклое — впуклым и т.п.
Понятно, что дизайнеры в Apple прекрасно в курсе про эти нюансы восприятия. И совершенно точно имели перед глазами лучшие образцы темных интерфейсов. Но, может времени не хватило, может технические ограничения, может все сразу. В итоге, комфортной темной темы не получилось. Во всяком случае, пока
Для сравнения: слева — окно файндера. Справа — тот же самый список файлов в окне современной IDE. Заметно, насколько список справа ровнее и сдержаннее и насколько он пестрее слева.
На последнем фото — пример идеального «темного» интерфейса: потолочная панель Airbus A320.
Спросонья попытался запустить фотошоп из омнибара сафари.
Даже удивился, когда не сработало. Ну правда ведь: нафига вызывать отдельно спотлайт, если окно браузера и так всегда открыто и под рукой?
