8 заметок с тегом

интерфейс

Любопытный ролик: подготовка ко взлету Миг-15

Несколько наблюдений на тему пользовательского взаимодействия.

Три параллельных системы:
— Самолет и его органы управления;
— Чек-лист: что нужно проверить перед взлетом;
— Пилот: знания, опыт, текущее физико-психическое состояние.

Самолет мог бы сам подсказывать, что проверить перед взлетом. Но процесс проверки приборов вынесен в отдельный материальный объект — чек-лист.

В процессе проверки чек-лист подключает пилота к процессу анализа. Человек проверяет пункты. Включается мозг. Человек помещается в контекст пилотирования.

Самолет: сложная электроника,
Чек-лист: лист бумаги.

Самолет: отдельные приборы, процесс управления не представлен в приборах, только отдельные функции.
Чек-лист: цельный процесс без приборов.

Самолет: сложно модифицируемая система, замкнутая.
Чек-лист: легко обновить, поменять, переделать.

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

25 июня   авиация   дизайн   интерфейс   чек-лист

Выбор школы в Чикаго

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

https://gabriellelamarrlemee.github.io/thesis-simulation/

Если ребенок «белый», то у него могут быть сложности со сверстниками в школе: только 17 % детей в Чикаго — белые, 35 % темнокожие, и 43 % — латиноамериканцы.

21 мая   визуализация   дизайн   интерфейс   Чикаго

Тач-интерфейс и временные ряды

Несколько подходов для организации пользовательского взаимодействия с графиками на тач-интерфейсе опубликовали на сайте Университета Баухауза в Веймаре.

Страница:
https://www.uni-weimar.de/de/medien/professuren/medieninformatik/vr/research/infovis/touch-the-time/

Видео:
https://www.uni-weimar.de/projekte/vr-scratch/videos/TTT.mp4

Подходы не новые, но хуже они от этого не становятся.

Синхронизация разных панелей. при уточнении времени на одной из панелей выбранное время подсвечивается и на остальных:

Скоординированный выбор временного диапазона. Выбираем диапазон на одной панели, отображается на всех:

А вот кое-что поинтереснее.
Выделение диапазона для просмотра на отдельной панели:

В видеоролике перетаскивают кусок графика с одной панели на другую, круто:

Пересечение строк данных и диапазона:

Еще несколько технически интересных штук, но сомнительных с точки зрения визуализации.

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

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

Не очень универсальная штука, есть же нормальный зум. Но выглядит интересно.
Гляньте там видео:
https://www.uni-weimar.de/projekte/vr-scratch/videos/TTT.mp4

15 мая   визуализация   график   дизайн   интерфейс   тач
20 апреля   дизайн   интерфейс   рулевой   шлюпка

Стюардесса сажает самолет Эйрбас А320

Сохраняю запись из телеграм-канала.
21 ноября 2017, https://t.me/sergeykashin

Интересный видеоролик: стюардесса на симуляторе самолета Эйрбас А320 управляет посадкой с помощью голосовых подсказок опытного пилота:

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

На 57 секунде пилот говорит:
— Кнопочка Элтитюд» (Altitude).
На самом деле это не кнопочка, а вращающаяся ручка. Несколько секунд потеряны. Хотя пилот знает, что это ручка, и дальше называет ее ручкой.

Дальше пилот подсказывает:
— Прочитайте на основном пилотажном дисплее»,
но стюардесса еще не знает, где он.

На 1:54 пилот говорит:
— Нажмите любую кнопку на Эф Эм Эс» (FMS).
Но стюардесса не знает, что такое FMS.

Уточняет,
— на Эф Эм Эс, который находится на центральном пульте.
Но что такое центральный пульт?

Дальше уточняет:
— Это флайт менеджмент систем, это компьютер самолетный.

Понятнее не стало.

Стюардесса переспрашивает:
— Это который внизу находится?
— это слева и справа на центральном пульте.

Стюардесса находит, и тут пилот дает следующую команду:
— Теперь вторую или третью кнопку нажмите слева.

Смотрите, какая ситуация: в кабине человек, который не знаком с пилотированием самолетов. Пилот, дающий подсказки, принимает решения. Человеку в кабине нужно только выполнять команды. Но тут пилот перекладывает решение на стюардессу: «вторую или третью кнопку». С точки зрения пилота, видимо, все равно: в данной ситуации подойдет любая кнопка. И пилот понимает, почему все равно. А стюардесса в кабине не понимает. Как человек в кабине должен выбрать, вторую или третью? Если все равно какую, лучше чтобы решение принимал знающий пилот, потому что это тоже решение.

На 3:26 пилот командует нажать кнопку DIR, но не подсказывает, что она, в отличие от предыдущей, находится не на экране, а внизу на кнопочной панели. Стюардесса задерживается на выполнении этой команды.

Далее там же, пилот дает команду:
— Напечатайте, юнифом майк.
— Просто печатаю?
— Просто печатайте, юнифом майк. И в левый верхний угол его.

Вот вы бы как это поняли? ?

Стюардесса, логично, начинает набирать на клавиатуре: uniform…
и переспрашивает:
— Это всё в одно слово печатается?
— Юнифом майк, две буквы всего лишь.
— Как две буквы?.. Я пишу слово юниформ…
— Нет! Ю, Эм.

Ну дальше разобрались, но…
Важно понимать состояние пользователя, вообще не знакомого со сложным интерфейсом.

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

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

Если нужны действия на центральном пульте, нужно сначала объяснить человеку, как найти центральный пульт. С чего, собственно, начинать. И обязательно убедиться, что человек правильно понял, а то мало ли что он там принял за центральный пульт. Нужна обратная связь. Если пилот разговаривает со стюардессой по радио, то в виде устного ответа на открытый вопрос. Типа, «Скажите, что вы видите на центральном пульте». В ответ пилот должен услышать, что стюардесса видит на пульте, и это что-то должно отличать именно этот пульт. Если стюардесса отвечает что-то общее типа «вижу экран и кнопки» — этого недостаточно, нужно уточнять.

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

И тут интересно с терминологией. Ее тоже нужно вводить постепенно. Пилот говорит «праймари флайт дисплей», а  дисплеев-то много, попробуй не ошибись.

20 апреля   авиация   дизайн   интерфейс   пилот   стюардесса

Интерфейс, тактильность, авиация.

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

Осторожно!
Уберите громкость до минимума!
На видео громко шумят двигатели.

Место пилота грузового Ан-12:

Сравнение кабин Боинг-737 и Эйрбас-A320:

(топят за Эйрбас, но сейчас не про это)

Немного панели Су-25:

В последние годы в авионике появляются экраны с тач-интерфейсом. Компания Талес (Thales) создает и продвигает авиационные панели управления на тач-скринах.

Вот менеджер по маркетингу говорит о том, что они предлагают ставить в кабины пилотов большие тач-скрины:

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

Но вот про какую интересную деталь хочу сказать:
по-французски он говорит 100 % tactile.
Tactile — тактильный, осязаемый (фр).

Получается удивительный языковой парадокс.

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

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

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

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

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

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

Продолжение следует.

2017   авиация   дизайн   интерфейс   прибор   самолет

Как не терять набранные вручную тексты

Бывает, пишешь текст в веб-системе, а он бац — и пропал. Недописанное письмо не сохранилось в веб-почте. Текст для блога пропал из-за проблем со связью. Не сохранились изменения в гугл-докс.

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

Если я хочу написать текст средней или большой длины, я пишу его в приложении, которое не требует связи с интернетом для сохранения. Например, в приложении Ноутс (Notes). Готовый текст вставляю туда, где хочу его опубликовать или загрузить.

2017   Notes   заметки   интерфейс   сохранение   текст

Визуализация данных на Яндекс-карте

Яндекс опубликовал данные о количестве людей на остановках:
https://yandex.ru/company/researches/2017/public_transport_stops

Пользователи фейсбука покритиковали:
https://www.facebook.com/groups/geoviz/permalink/1242448052516342/

Да, чего-то не хватает. Но здорово, что такие данные начинают публиковать, и неплохо публиковать. Яндекс — молодцы.

Пара слов о визуализации на примере этой карты.

Сплошной цвет и прозрачность.

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

Этого можно избежать, если показывать круги не сплошным цветом, а полупрозрачным. Сравните, как работает закраска 100 % и 50 %. Появляются данные, которые были не видны:

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

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

Отображение распределения во времени

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

Для переключения между часами авторы сделали переключатель:

Данных много. Отображается всегда 1 часовой диапазон из 24. Более 95 % данных скрыты. Поэтому способ перехода между данными должен быть легким и быстрым.

У переключателя есть несколько проблем:

Главная функция — показать общее распределение в течение суток и удобно переключаться между часами. Авторы опубликовали данные, чтобы зрители их увидели. Для того, чтобы увидеть 95 % данных, приходится переключаться.

Что можно сделать ценой относительно малых затрат, если не говорить что «тут всё надо переделать»:

Увеличить максимально активную область временного промежутка, независимо от высоты отдельных столбцов:

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

Пользуясь случаем, напомню, что Сбертех приглашает начинающих дизайнеров в свою «Дизайн-кухню»: https://special.habrahabr.ru/sbertech/dk/. Мы с коллегами поделимся опытом: Даниил Захаров, Алина Ермакова, Михаил Николаев, Павел Лаптев, Даниил Мелких, Андрей Тиханов, Илья Михайлов, Антон Алексеев, Алексей Павлов и другие. Я буду рассказывать в этот раз не о визуализации. В частности, буду говорить о том, как разобраться в целях большого проекта, как их хорошо сформулировать и понятно оформить цели для себя и других участников. Подавайте заявки.