Позднее Ctrl + ↑

Интерфейс и поток данных

Это черновик, который я решил опубликовать.

Поток данных — один из моих методов проектирования интерфейса. Он помогает избавиться от ненужных экранов и шагов.

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

Простой пример

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

Интерфейс помогает данным о запросе человека попасть в машину; данным ответа попасть к человеку. Не прозевайте: предыдущее предложение — ключевое, ведь в нём написано, зачем нам вообще этот интерфейс! Так данные на входе — это город, а на выходе — погода. Отсюда получаем интерфейс: поле ввода города, и рядом — погода в нём.

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

А как было бы неправильно? Ну, например, начать анализировать предметную область, из каких параметров складывается погода и как их сгруппировать, или там как города объединяются в страны, а страны в континенты, проектировать навигацию по этой базе. Это всё «логично», но не должно быть основой интерфейса, так как не помогает потоку данных.

Сложный пример

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

В версии, которая была до меня, да и у конкурентов, были «модули»: в одном отображались сигналы, в другом — карта города с расположением бойцов, в третьем — картотека самих охраняемых объектов с поиском, в четвёртом — какой-то журнал, куда оператор должен записывать свои действия. Снова, всё «логично», но не помогает потоку данных.

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

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

Ну и всё, исходя из этого и строим интерфейс:

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

Применимость

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

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

Доклад «Четыреста транспортных объявлений за 20 дней»

Недавно я показывал проект — информационное сопровождение Челябинской транспортной реформы. В мае рассказывал о нём на «Просмотре», и вот выложили видео:

Видно, что монтировал не я: слишком много крупного плана и не видно слайды, когда надо.

А ещё во второй половине кажется, что у меня вылезли красные трусы, но на самом деле это водолазка. Вообще эта чёрная кофта не была запланирована, но на площадке был адский дубак, и в свободное от доклада время я тупо стоял перед тепловой пушкой.

Спинка кресла перед вами

Задизайнить спинку кресла в самолёте — отдельное искусство. В большинстве самолётов они фиговые: один карман для всего, неудобный столик. Но на днях мне попалась довольно клёвая.

Исходное положение. Сразу чувствуется, что много про что подумали:

Сверху есть карман для «прессы», причём из него ничего не вываливается внизу, как иногда бывает. Он достаточно просторный, чтобы в него переложить никому не нужный журнал «Аэрофлот» из нижнего кармана. Есть отдельная мини-штуковина для геджетов и отдельный столик. На крышке столика ещё и приятные пиктограммы напоминают про безопасность.

Открываем верхнюю штуку:

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

Снизу — ещё один карман:

Туда можно сунуть ноутбук, пока он не нужен. Только резинки слишком уж слабые — хочется, чтобы так не оттопыривался. Ну и там слева ещё розетка есть.

Как я нахожу новую музыку

Снял вам очень странное интимное видео. Как я нахожу новую музыку:

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

На интерфейсном курсе: что не так с аккордеоном

Рассказываю, почему аккордеон — это плохо. 3 минутки:

Был и пост в блоге об этом.

Это фрагмент № 114 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 7 апреля 2023 года.

До 6 октября идёт запись на курс, который пройдёт с 7 октября по 5 ноября.

Почитать о курсе

Программа, отзывы, запись

Доклад «Как эффективно презентовать работу»

Прочитал в сентябре в Москве доклад-лекцию «Как эффективно презентовать работу»:

00:00 Интро
04:22 Убедительность
15:06 Внимание
22:55 Замечания
38:39 Страх
43:26 Вопросы

Это доклад для дизайнеров, менеджеров, программистов, маркетологов, редакторов — для всех, кто защищает свою работу.

Приходите на наш онлайн-курс о презентациях с семинарами и практикой. Завтра последний день записи.

Спасибо организаторам iSpring Days — конференции о корпоративном обучении — за приглашение и запись выступления.

См. также киевскую лекцию о понимании задачи.

Обновление нашей схемы московского метро — сентябрь 2023

В декабре 2022 года мы с Ромой Мочаловым, Никитой Дубровиным и Ди Логвиновым выпустили нашу схему московского метро, включающую планы до 2030 года. За прошедшие месяцы и реальность, и планы слегка изменились, поэтому нашу перспективную схему пришлось подкрутить:

У будущих линий 16, 17, 18 поменялись планируемые цвета:

Появилась пересадка Бутырская — Останкино:

Запланировалась пересадка с Аэроэкспресса на D5 на станции «Домодедово», не являющейся аэропортом (обожаю):

Последние московские открытия в нашем случае потребовали «включения» большего числа линий на нашей схеме. Что-то, что раньше было строящимся, теперь стало работающим:

Со Внуковом у нас сразу порядок был:

Об официальной схеме московского метро от сентября 2023 года

Недавно в Москве открылась ещё куча метро и диаметров и обновилась официальная схема. Стала вот такой:

Мне несколько человек написали узнать, что я думаю.

Что не нравится

В целом, на мой взгляд, так и не получилось красоты. Диагональ Останкино — Перово D3 справа сверху слишком навязчива, побеждает вообще всё. Не решены проблемы в районе Сити, там каша.

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

Ещё непонятно, что происходит с аэропортом Внуково, почему его два:

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

Но психотерапевты учат: не сравнивай других с собой; сравнивай других с тем, какими они были вчера!

Что нравится

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

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

Кстати, градиентные кружки я использовал ещё в 2012-м.

Раньше, напомню, было так:

Зачем было столько времени упираться и рисовать по два кружка там, где можно было обойтись одним? Нигде в мире так не делали, эта была чисто московская придурь.

Напомню теоретические основы обозначения пересадок на транспортных схемах. Дизайн обозначений на схеме должен помогать пассажиру соотносить объекты и их подписи; находить объекты; прокладывать маршруты. Логика же обозначения Октябрьской двумя кружками была такая: «ну, там же две разных станции, они просто называются одинаково». Если это и так (это не так), то что с того, как это связано с задачей?

Если два кружка иногда подписаны двумя раздельными словами («Серпуховская», «Добрынинская»), а иногда одним («Октябрьская»), то решительно никак невозможно догадаться, почему это происходит и что это значит. Если ты уже знаешь всё про эти станции, то такой дизайн помогает тебя почувствовать себя хорошо, но, ещё раз: дизайн обозначений на схеме должен помогать пассажиру соотносить объекты и их подписи; находить объекты; прокладывать маршруты, а не: «успокаивать знатоков московской терминологии метро, где платформу называют станцией». Когда линии проходят через один кружок и около него стоит одна подпись, ты сразу видишь пересадку и не сомневаешься в том, как она называется. Глазу, скользящему взглядом по линии, легче «пересесть» на такой станции.

Самое страшное происходило на станциях типа Третьяковской и Таганской, где трём кружкам соответствовало две подписи. На что тут был расчёт, как это вообще можно было осмыслить? В новом дизайне всё встало на свои места — стало как у меня было десять лет назад.

Пара разворотов по теме из главы «Детализация» в моей книге «Дизайн транспортных схем»:

Ещё умер руль на Библиотеке имени Ленина. Много лет считалось очень важным обозначить, как там именно переходы устроены, что между голубой и серой веткой нет «прямого» перехода. Про это тоже в книге есть:

Пассажирам как было плевать, «прямой» переход или «непрямой», так и осталось: они просто ищут указатель к нужной линии и идут по нему. Теперь это место на схеме выглядит проще.

Покупайте и читайте мою книгу «Дизайн транспортных схем», конечно.

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

Как я перестал пользоваться Дуолинго

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

Редизайн выкатывался постепенно — видимо, тестировали. Был период, когда Айфон уже был сломан, но через Айпад или веб ещё можно было заниматься. Я какое-то время гонялся за старым дизайном, но вскоре после окончательного перехода на новый потерял интерес к занятиям.

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

Было — стало:

В старом дизайне по мере прохождения уроков, следующие открывались пачками. На примере слева на выбор: основы, фразы, животные, еда, семья. Иногда было настроение узнать что-то новое, и я тыкал в нетронутую тему. Иногда наоборот, хотел дополнительно потренироваться в чём-то, о чём уже имел представление, и заходил туда. Когда я сам выбирал, что изучать, то как хозяин своего выбора я был мотивирован это изучить. Интерфейс был информативным и увлекал разнообразием тем. Иногда было приятно прокрутить чуть выше и порадоваться тому, сколько я уже знаю. Иногда было интересно прокрутить чуть ниже, к закрытым пока урокам, чтобы вдохновиться тем, что ждёт дальше. Может, оставшийся обязательный урок не сильно привлекает, но зато после него откроется вон чё!

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

В видосе они рассказывают, что это и было целью:

We’ve redesigned the home screen to better guide you through lessons.

В переводе с маркетологического: «теперь мы будем решать, что тебе учить».

Follow a path crafted by our learning experts to help you better reach your goals.

У всех по-разному, но для меня «достижение цели» — слабейший из мотиваторов в жизни. Я хочу беззаботно наслаждаться процессом, а потом вдруг с восторгом обнаруживать собственные достижения. Дуолинго больше такого мне не даёт.

And don’t worry, we’ve kept all the progress you’ve made so far

Не знаю, о чём это вы. Я больше не вижу огромного списка тем, которые я прошёл. С моей точки зрения, весь прогресс я как раз потерял.

В общем, очень жаль, хорошая была программа.

Опера в Осло

В Осло есть оперный театр. Он странной формы:

Можно просто взять и подняться по нему на его крышу:

Внутри такой деревянный кокон:

Элементы навигации сделаны в таком же стиле, как во всех скандинавских вокзалах и аэропортах:

Проход в гардероб и туалет:

Есть и какие-то свои стелы:

Историческая справка:

Здание стоит прямо у воды. Рядом в воде — какой-то арт-объект из стекла:

Фотографии из поездки в сентябре 2019 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Осло!

Ещё Осло:

Ранее Ctrl + ↓