UX в кино
127 subscribers
296 photos
180 videos
26 links
📟 UX и интерфейсы в кино и сериалах

Как выглядят и работают интерфейсы в вымышленных мирах — и что это говорит о реальном

для связи (и предложек по киноинтерфейсам): @dmartsul
Download Telegram
🪐📍Прометей (2012): как две фамилии на букву F сломали систему слежения

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

На «Прометее» (это и название звездолёта) система отслеживания выглядит весьма продвинутой — трёхмерная модель помещения строится в режиме реального времени, опираясь на показания автоматических летающих дронов с лидарами.

Сразу плюс: положение каждого члена экипажа видно в трёхмерном пространстве с учётом рельефа местности — сразу видно, где находится команда, и что вокруг них.

Члены экипажа удачно выделяются цветом и движением иконок на фоне 3D-карты: каждый человек представлен в виде вращающихся ромбиков. На статичной схеме движущийся объект позволяет быстро заметить, где находится личный состав. Осталось только понять – кто конкретно является вращающимся ромбиком?

Идентификация Форда

К счастью, проектировщик системы заботливо подписал каждый ромб! Но, увы, только первой буквой фамилии... И вдруг начинаются проблемы: на нашу беду, аж у двух членов экипажа фамилия начинается на F — Файфилд и Форд. Система никак не помогает — у нас просто два одинаковых ромбика с F. С учётом чёткой спецификации ролей в команде — один геолог, другой медик — знание кто где находится может быть критически важным. А что бы было если бы полетела целая команда Смитов, Ивановых или Ли? 😅

Проблемы с восприятием символов

Кучно стоящие ромбы даже в небольшом составе команды начинают смешиваться и перестают быть визуально различимы. Фамилии начинающиеся на «D», «O», «С», «Q» особенно во внештатных ситуациях или под углом могут быть неотличимы друг от друга.

Кстати, о ракурсах — повезло, что камерамен показывает нам буквы с «рабочей стороны». Мы, как зрители, всегда видим букву анфас. А вот герои, смотрящие «с той стороны» проекционного стола видят отзеркаленные буквы. Ещё хуже тем, кто занял место сбоку – для них трехмерные буквы вероятно выглядят в профиль как-то так: «|», «|», «|», «|».

😵‍💫 Вывод:

Проблемы возникают уже на небольшой команде из 6-7 человек как в фильме. А представьте управление более внушительным отрядом на основе такой схемы: путаница неизбежна.

При проектировании опыта всегда стоит помнить о тестировании разных сценариев и пограничных случаев (edge cases) (да-да, даже таких экстремально редких как наличие в экипаже людей с одинаковой первой буквой фамилии! 🤡). Иронично, что продвинутая 3D-система терпит крах на простейшей человеческой проблеме — одинаковых инициалах. И провал здесь не в сканерах, а в человеко-ориентированном проектировании, не решающем базовых проблем навигационных систем: «Кто / что это?» и «Где он?».

Кстати, в посте про охранную систему тюрьмы в «Без лица» мы уже обсуждали проблемы геолокации: там это были фиолетовые точки, суматошно носящиеся по 2D экранчику 🤯
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3😁3
🔎 Кадры (2013): когда интерфейс специально может мешать

«Кадры» — комедия-проморолик, в которой два друга-продажника в солидном для IT возрасте «чуть за 40» участвуют в конкурсе стажёров в Google с призом в виде работы в компании.

В фильме есть сцена без интерфейсов, но которая попадает точно в область UX.

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

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

То есть интерфейс специально создаёт, а не убирает барьеры на пути пользователя. Зачем?

🧠 Всё дело в двух режимах мышления

🏎 Есть быстрый, импульсивный, эмоциональный режим — написать глупость, заказать «ещё один шот», позвонить кому-то среди ночи.

🐌 А есть медленный, рациональный, требующий усилий — считать, оценивать варианты, сомневаться.

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

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

Почему именно математика?

Потому что она:
• не эмоциональна;

• ответ нельзя заучить или выдать «на автомате»;

• она требует концентрации здесь и сейчас.

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

🍾 В реальной жизни это используется нередко:

• будильники, которые нельзя отложить — нужно решить задачку или сделать фото определенной зоны типа ванной;

• каршеринг (например, Делимобиль), где ночью пользователям предлагают пройти небольшие тесты перед поездкой;

• двойные подтверждения перед опасными действиями (например, сервис «Анкетолог» при нажатии кнопки «удалить анкету», просит ввести слово «УДАЛИТЬ» на клавиатуре).

Это всё один и тот же приём: с точки зрения UX, это называется «полезное трение». Интерфейс сознательно делается неудобным, чтобы повысить качество решения, не ускоряя его, а наоборот контролируя его скорость.

Итого:

👋 Хороший интерфейс не всегда сокращает шаги. Иногда лучший UX — это интерфейс, который вовремя мешает и спасает пользователя от самого себя и случайных ошибок.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍3🤔2
🛸🧑🏿‍🦲🇺🇸 День Независимости (1996): принцип сходства в восприятии

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

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

👎 Мой же «кинопример» из разряда фейлов. Карта это не интерфейс в плане интерактивности, но принцип сходства, а точнее его неправильное использование создаёт проблемы.

👀 Присмотритесь к карте, где указаны Moscow, London, Bombay. Нарушение принципа сходства в том, что объекты совершенно разного порядка: 1) столицы (например, Moscow), 2) страны (Germany) и 3) явления (Fire Phenomenon) написаны одинаковым наклонным шрифтом, что создаёт путаницу. За секунду телеэфира понять, что где происходит весьма сложно.

Второстепенные проблемы добавляют хаоса: крайне странные очертания материков, масштаб НЛО, визуальный мусор типа желтых стрелок, указывающих на белые линии 🤯 и.... и куда делось Средиземное море!?

Ну и пользуясь случаем не мог не добавить кадр с Новосйойрском, Петроrрадом (в 1996 году) и зловещей надписью ТУЧА!!! 🙈 — ну что поделаешь Голливуду в те времена видимо жалко было тратить деньги на консультанта по русскому языку.

💭 Вывод:

Принцип сходства настолько базовый, что его нарушение мы считываем мгновенно — даже если не можем сразу объяснить, что именно не так. Присмотритесь к повседневности и задайте себе вопрос: почему те или иные элементы в рекламе, приложении или тексте выглядят одинаково? Какую связь хотел показать дизайнер — и где сходство получилось ненамеренно и испортило посыл?
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👾3😁21🍾1
🐱🚪 Пятый элемент (1997): миссия «впустить кота»

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

Знакомство с главным героем, Корбаном Далласом, начинается в его микро-апартаментах. Занимаясь утренней рутиной, он подходит к двери — и на панели управления мы видим набор кнопок с абстрактными пиктограммами. И одну — с котом 😽

Угадайте, какая читается быстрее всех (не учитывая шакальное качество скриншота 🙈)?

🎛 Неконсистентность

Панель выглядит как смесь:

📍геометрических символов,

📍условных иконок,

📍и одного конкретного образа — кота (причём задублированного: и мордочка, и силуэт).

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

Но с точки зрения восприятия — кот выигрывает. Он конкретен, эмоционален и однозначен.

🧠 Почему так работает

1️⃣ Узнаваемость конкретных объектов
Реальные, знакомые объекты мозг распознаёт быстрее, чем абстрактные символы.

2️⃣ Сила метафоры
Интерфейс понятнее, когда действие выражено через знакомый физический мир.

🐱 Вывод

Кнопка (особенно в быту) не должна говорить: «Активировать нижний шлюз 2B».
Хорошо, когда она сообщает: «Я могу впустить кота!».

Можно построить мегаполис будущего, добавить голографических экранов и сотню мигающих индикаторов. Но самая понятная кнопка — та, что решает задачу человеческим языком. Будущее может быть высокотехнологичным, но пользователю всё равно часто нужно выполнять простые вещи — например, впустить кота 😽
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍1🔥1
🏚💵 Миллионер из трущоб (2008): точные схемы организации информации

Небольшой отрывок, но напоминает про информационную архитектуру и варианты организации больших объёмов информации.

🎥 Сцена из фильма: главный герой Джамал работает разносчиком чая в колл-центре с большой клиентской базой. Пользуясь случаем, он ищет в базе данных потерянную несколько лет назад возлюбленную и брата. В таблице результатов он видит несколько столбцов: имя, телефонный номер, район Мумбаи и ID аккаунта.

💾 Точная схема организации

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

Так как операторы колл-центра люди, то для удобства номер всё-таки разделён на группы символов: 11 – 3018 – 8950, что упрощает считывание длинных рядов цифр и снижает когнитивную нагрузку.
Сама по себе такая организация данных нормальна для операционной работы. Проблема в другом: она не поддерживает пользовательский сценарий Джамаля.

😮‍💨 Почему герою так тяжело?

У него нет подходящего ключа поиска:

• он не знает ID
• не знает района
• не знает даже фамилии возлюбленной

У него есть только имя Latika
А значит — точная схема превращается для него в невозможное испытание: ему пришлось бы звонить по 26 000 найденным записям.

🔍 Момент удачи

К счастью, поиск по брату — Salim K. Malik — возвращает всего 15 результатов.

Но это не заслуга интерфейса — это сценарный лейтмотив «везения сквозь трудности».

В реальности (особенно для 2007-2008 года) сокращение имени могло ничего не найти, или система могла требовать точного совпадения, а также возможны были разные транслитерации букв «S», «K», «C».

💡 Вывод

Точные схемы организации информации идеальны: для баз данных, для машинного поиска или когда у пользователя есть точный ключ. Тогда всё супер: вот ID — вот конкретный человек.

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

«Я ищу человека. И знаю только её имя» ❤️‍🩹


Поэтому рядом с точными схемами обычно стараются добавлять дополнительные средства доступа к информации: поиск, фильтры, приблизительное совпадение, рекомендации.
👍3💔2
Машинный телеграф: интерфейс капитана

В кино про суда и моря почти всегда есть этот момент: капитан резко дергает металлическую рукоятку на круглом приборе с большими надписями — и где-то в глубине корабля раздаётся звон. Камера показывает стрелку, которая перескакивает на «Полный вперёд».

Это машинный телеграф — один из самых красивых и понятных интерфейсов связи, придуманных задолго до компьютеров.

Как он работает?

Представьте два одинаковых устройства: одно — на мостике, где стоит капитан; второе — в машинном отделении, рядом с механиками.

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

Позиции на шкале — это не числа и не параметры двигателя, а понятные режимы работы:
• Стоп
• Малый ход
• Средний ход
• Полный ход
• Самый полный вперёд

и те же режимы назад

Важно: телеграф не управляет двигателем напрямую. Он передаёт команду человеку. Механик смотрит на стрелку, выполняет приказ — и переводит свою рукоятку в то же положение. Когда обе стрелки совпадают — команда подтверждена.

Почему рукоятку нужно дергать «туда-сюда»?

В кино часто видно, как капитан резко переводит рукоятку, а потом механик делает то же самое в ответ.

Это двусторонний интерфейс подтверждения, который позволяет проконтролировать выполнение команды в машинном отделении. Классическая управленческая и армейская техника — чтобы определить понял ли человек команду пусть озвучит её! Ну или хотя бы дёрнет за ручку, наглядно показав, что он услышал.

Почему этот интерфейс так хорош?

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

Любимец кинематографа

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

Это не какая-то рандомная скучная кнопка. Капитан самолично и очень визуально отдаёт приказ.

Рука на латунной рукоятке.
Широкий жест.
Резкий щелчок.
Звон в глубине корабля.

И где-то в машинном отделении огромный двигатель начинает менять ход.

🧜‍♀️Итого

Когда от действия зависит судьба целого судна, то стоит убедиться что это действие, которое:

📍невозможно пропустить
📍невозможно неправильно понять
📍и которое обязательно требует подтверждения.


Инженеры XIX века это прекрасно понимали. Поэтому их интерфейс до сих пор выглядит убедительнее половины современных панелей с тысячью мецающих кнопок. 🚢🏖

Примеры из: Хроники хищных городов (2018), Титаник (1997), Жестокий романс (1984)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3👀1
💵📈 «Дурные деньги»: иллюзия контроля в финтехе

Фильм «Дурные деньги» рассказывает историю финансового бунта 2021 года вокруг акций сети магазинов GameStop.

Блогер и инвестор Ревущий котёнок (Roaring Kitty) начинает на стримах покупать акции компании и объяснять свою стратегию в Ютубе и на Reddit-сообществе r/WallStreetBets. За ним следуют тысячи частных инвесторов.

Они массово скупают акции и запускают знаменитый short squeeze: хедж-фонды, которые ставили на падение акций компании, вынуждены срочно выкупать их обратно. Цена начинает стремительно расти.

📈 Финансовый интерфейс

Авторы скрупулёзно воссоздают атмосферу 2021 года: лайвстримы на YouTube, бесконечные треды на Reddit, мемкоины, трейдинговые программы.

Одним из главных «героев» становится трейдинговое приложение Robinhood, через которое миллионы частных инвесторов покупали акции GameStop.

И в один из ключевых моментов происходит то, что в реальности вызвало огромный скандал.

Куда делась кнопка?

В приложении становится неактивной кнопка "Купить"!

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

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

У Robinhood просто не оказалось таких денег прямо в тот момент, поэтому покупки пришлось временно остановить.

Но для пользователя вся эта сложная инфраструктура выглядела предельно просто: вчера ты мог купить акцию одним нажатием. А сегодня кнопка исчезла.

Иллюзия контроля

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

Приложения вроде Robinhood делают инвестиции похожими на простое и понятное действие: график, баланс, кнопки Buy и Sell — и вот, деньги у меня на счету!

Создаётся ощущение, что пользователь напрямую управляет своими инвестициями — почти как в игре.

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

А сотни, тысячи или миллионы долларов на экране — всего лишь пиксели, ценность которых держится на доверии к финансовой системе.

💱 Итого

Пока кнопка Buy работает — кажется, что контроль у тебя.

Когда она исчезает — становится понятно, что ты управлял не рынком.

Ты управлял интерфейсом.

Иногда весь сложнейший финансовый рынок представлен для пользователя одной кнопкой. И пока она активна — система кажется простой и доступной. Но именно в тот момент, когда кнопка «Купить» становится серой, становится видно, где на самом деле находится контроль. 📉
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍1