— Простите, мистер Возняк?
— О, привет. Хорошее устройство виртуального присутствия.
— Спасибо. Я просто хотел сказать, что я ваш большой поклонник. Один из предметов моей гордости — это старинный компьютер Apple 2 выпуска 1977 года. Несмотря на ограничения файловой системы, довольно изящное решение.
— Спасибо, мы как раз добивались изящности. Если бы он был у вас с собой, я бы оставил вам автограф.
— Дождитесь меня! Это займет от 15 минут до получаса, в зависимости от расписания автобусов!
— Вот же ботаники...

Теория Большого взрыва, сезон 4 эпизод 2

Интерфейс робота телеприсутствия

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

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

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

Роботы телеприсутствия: Giraffe, RP-7i, VGO, TiLR, Texai, Anybots QA, Double Robotics, Anybots QB, Sparky Jr.

05Однако этот рассказ не столько про внешний вид роботов, что является стезей не нашей, а промышленных дизайнеров, сколько про интерфейс, при помощи которого человек управляет этими «вездеходами».

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

Интерфейс робота Gostai Jazz
Интерфейс робота Botiful

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

Анализ управления

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

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

  1. Движение вперед;
  2. Движение назад;
  3. Поворот влево;
  4. Поворот вправо;

10И оставшиеся кульбиты следующие:

  1. Движение влево;
  2. Движение вправо;
  3. Разворот.

11Их выполнение можно свести к комбинации базовых операций движения. Есть также два особенных действия, которые стоит упомянуть в отдельной категории:

  1. Подъем головы;
  2. Опускание головы.

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

13Что касается трех дополнительных команд управления, то они мало улучшают жизнь: как показывает практика, движения вбок, или «стрейфы» удобны только в Quake 3.

Основное управление

14Управление роботом производится из браузера с настольного компьютера или ноутбука. Это значит, что в нашем распоряжении находится клавиатура и одно из устройств-манипуляторов: мышь, сенсорная панель ноутбука или планшет.

15Тут же обнаруживается первая очевидная ассоциация: основные действия 1-4 однозначно ложатся на клавиатурные клавиши-стрелки. Пожалуй, эта ассоциация настолько хороша, что позволит даже новичку с первого раза догадаться, как управлять роботом.

16С регулятором головы немного сложнее. Вообще, подъем и опускание головы тоже неплохо ассоциируются с клавишами вверх ↑ и вниз ↓, но они уже заняты, и поблизости на клавиатуре нет удобных для нажатия и понятных клавиш.

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

18Однако не стоит торопиться. Если просто назначить управление головой на мышь, то следует снять поворот со стрелок влево ← и вправо →, ведь в противном случае движение мыши может противоречить нажатиям на кнопки. При управлении мышью кнопки должны не поворачивать робота, а двигать его влево и вправо. Однако мы договорились, что эти действия не основные, и им не стоит уделять внимания, когда еще не реализованы главные операции.

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

20Далее на ум приходит колесико мыши. Что если управлять подъемом с помощью прокрутки вверх, а опусканием с помощью прокрутки вниз? Это тоже не лучшая идея: скорость прокрутки может сильно отличаться в разных системах, а некоторые модели мыши (Apple Magic Mouse) слишком чувствительны и часто прокручиваются случайно.

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

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

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

24При зажатом Ctrl клавиши вверх ↑ и вниз ↓ будут управлять наклоном головы, а без нажатия Ctrl они будут по-прежнему управлять движением робота. Все просто: управление одной рукой, быстрейшее взаимодействие, наиболее близкая к стрелочкам клавиша на всех популярных клавиатурах (Cmd и Control для малой и большой Apple Keyboard). Правда, нельзя одновременно ехать вперед и двигать головой, но это даже хорошо.

25Итак, мы разместили 6 основных действий на 4-х клавишах и ввели одну клавишу-модификатор. Теперь осталось разобраться с дополнительными операциями.

Дополнительное управление

26Как уже упоминалось выше, обычно движения вбок размещают на клавишах A и D. Таким образом, весь набор дополнительных действий удачно размещается на WASD, где W — движение вперед, S — движение назад, A — движение влево, D — движение вправо. При использовании такого набора можно двигаться также по четырем углам: вправо и вперед, вправо и назад, влево и назад, влево и вперед.

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

28Клавиши WASD и мышь — типичное управление в трехмерных компьютерных играх. С одной лишь разницей: в игре управление работает мгновенно, не имея почти никакой задержки между действием пользователя и отзывом в игре. В случае робота управление производится через Интернет, и одно лишь время прохождения команд может достигать нескольких секунд при плохой связи. Второй фактор — механика робота, имеющая свою собственную задержку. Робот не реагирует на команду «вперед» мгновенно, ведь нужно привести в действие колеса и выйти из состояния покоя.

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

30Кроме того, стоит ввести какие-либо индикаторы состояния робота. Например, уровень сигнала Wi-Fi, заряд батареи и время до окончания сеанса управления.

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

32И здесь наш обзор переходит к собственно дизайну.

Дизайн управления

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

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

 
Клавиши хорошо видны на любом фоне

35Добавляем поворот головы с помощью клавиши Ctrl или Cmd.

 

36Выглядит не очевидно. Понятно, что пользователь нажмет на Ctrl в процессе ознакомления с интерфейсом, но ему нужно показать, что при нажатии что-то изменилось, и что клавишу необходимо удерживать при управлении. Для этого введем обратную связь и покажем, что при зажатой клавише Ctrl стрелки вверх ↑ и вниз ↓ переходят в режим управления камерой.

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

 

38Теперь при нажатии на Ctrl пользователю будет подаваться знак в виде точек и подсвеченной на секунду клавише вперед ↑, и это должно восприниматься как призыв к одновременному нажатию Ctrl и ↑, что приведет к подъему камеры. Так происходит самостоятельное ознакомление с интерфейсом.

39Но не будут забыты и совершенные новички: они получат регулятор наклона камеры, который будет двигаться в связке с Ctrl + ↑↓.

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

41Главное управление сделано. Что касается управления WASD, то его не будет на экране вообще, иначе получится нагромождение кнопок. Для обратной связи можно подсвечивать все те же основные кнопки.

42Обратную связь для мыши можно изобразить в виде колеса (или джойстика), которое возникает в момент нажатия мыши и пропадает при отпускании.

43Мышь в виде круглого курсора-булавки свободно перемещается внутри колеса, но не имеет возможности покинуть его пределы. Чем курсор ближе к границам, тем быстрее происходит вращение камеры. Движение вверх, вправо, вниз и влево вызывает соответственно подъем головы, поворот робота вправо, опускание головы и поворот робота влево. При этом возможен полноценный обзор на 360 градусов. Данное колесо по сути является альтернативой аналогового кругового джойстика с игровых манипуляторов.

Контроллер Xbox 360 с двумя аналоговыми джойстиками

44Ну, и разворот, очевидно, следует повесить на пробел.

Дизайн прочих элементов

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

  1. Уровень сигнала. Робот управляется по Wi-Fi или GSM, а сигнал беспроводных сетей имеет свойство резко падать в пределах одного помещения. Поэтому следует отслеживать уровень сигнала и своевременно информировать пользователя. При этом иконка уровня сигнала должна быть универсальной;
  2. Заряд батареи. Робот питается от аккумуляторов, и если его вовремя не подзарядить, он отключится. Поэтому при слабом сигнале следует оповещать пользователя;
  3. Время сеанса. Управление роботом раздается повременно, рано или поздно пользовательский сеанс управления подходит к концу, и его следует уведомлять об этом.

46Стандартное место для индикаторов — верх, центр экрана. Поскольку места на экране много, мы будем использовать иконки с подписями.

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

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

49Из вспомогательных действий на ум приходят такие:

  1. Пауза, при которой замораживается видео- и аудиопередача от робота и к роботу, а также всякое управление. Слабо заменимая вещь;
  2. Завершение сеанса. Практически бесполезная функция, заменяемая закрытием браузера;
  3. Отключение камеры. Эта функция кажется довольно полезной, но она противоречит самой идее робота: при отключенной камере нет телеприсутствия, поэтому данная кнопка не нужна;
  4. Отключение микрофона. В отличие от камеры, отключение микрофона не противоречит идее робота. На заседании не обязательно выступать, можно просто слушать, а уж тем более не стоит переносить домашний шум (плач ребенка, разговор по телефону, дрель) в офис;
  5. Отключение видео и звука, идущих от робота. Функционал бесполезен. Предлагается использовать руки для закрывания глаз и затыкания ушей.

50Для размещения кнопок паузы и отключения микрофона как нельзя кстати подходит левый верхний угол.

 

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

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

В целом

53Итак, пора заканчивать с мелочами и увидеть картину в целом. Вот, что получилось.

Пару слов об аналоге

54Уже после создания этого интерфейса автор узнал о разработке Double Robotics. Этот элегантный робот выгодно отличается от остальных как по внешнему виду:

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

56Интерфейс привлекает своей немыслимой простотой. Кажется, что его авторы сумели выбросить все дополнительные функции.

57На самом деле это не совсем так. Разработка Double Robotics управляется в настоящее время только с iPad, а это значит, что кнопки отключения звука и видео, пауза и регулятор громкости находятся на корпусе устройства, поэтому их не обязательно включать в интерфейс.

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

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

60К сожалению, все эти приемы недоступны с простого настольного компьютера.

Сентябрь 2012
Андрей Маркелов
Библиотека