Приложение для умного дома Cubic.ai
Компанию Cubic Robotics основал талантливый Юрий Буров, которого РБК вписывала в список лучших предпринимателей России в области IT.
Однажды я уже делал для Юры проект, связанный с робототехникой — интерфейс для робота телеприсутствия. Проект не пошел в массовое производство, но его наработки, кажется, используются крупными компаниями в системах голосового управления.
Тогда команда решила, что аппаратура — слишком сложно, переехала в Калифорнию и решила создать приложение для управления умным домом. Проект получил название Cubic.ai. Потому что первые прототипы «железного» помощника были в виде кубика.
Когда меня пригласили разрабатывать интерфейс для приложения, у команды уже был готов минимальный дизайн и выработан визуальный концепт. Вся история крутилась вокруг кубика. Из формы родилось название, из названия появился логотип в виде куба в изометрической проекции:
Когда дизайнер нашел такую стройную, связную концепцию — полдела уже сделано. Даже если сама концепция спорная, последовательно применяя её в дизайне продукта, можно добиться гораздо лучшего результата, чем если рисовать все вразнобой. Системный подход в дизайне работает примерно как статистика на фондовом рынке. Стратегия может долго давать убыток, но итоговая сумма сделок будет положительной.
Дизайнер Кубика правильно смекнул с логотипом и развил идею дальше, сделав из него кнопку виртуального помощника, как у Сири.
Затем дизайнер сделал в таком же стиле набор иконок. Суть приложения в управлении умным домом. Умные устройства от разных компаний: цветные лампочки, термостаты, датчики газоутечки — объединялись в единый пульт управления. Для каждого устройства нужно было нарисовать понятные иконки, которые имели бы индикацию состояния.
Вот такие иконки дизайнер придумал для термостата. Форма иконки снова взята из логотипа, а внутрь вписывается текущая температура и, например, влажность воздуха.
Для приложения придумали систему комнат. Можно было группировать устройства по типу: лампочки, термостаты и так далее. Но гораздо лучше создать у пользователя ассоциацию со своим домом. Пусть будут такие разделы: гостиная, прихожая, кухня, спальня. Тогда пульт управления, которым хотел стать Кубик, станет похожим на настоящий дом.
Для названий комнат придумали заготовки и нарисовали несколько иконок в том же стиле, что и устройства — в виде кубика:
Вот где-то на этом этапе я и подключился к проекту.
Человек видит звук
Парадокс: идея голоса дает однозначные визуальные ассоциации.
Голос — это звук. Звук — это колебания частиц среды. Когда мы говорим, воздух выходит из легких, а голосовые связки при помощи мышц сужаются и расширяются. За счет этого молекулы воздуха колеблятся с разной частотой, и эти колебания долетают до ушей. Там воздушные волны ударяются о барабанные перепонки, и наши слуховые рецепторы ловят эти колебания, а нервная система преобразовывает их в подобие электрического сигнала.
Слух работает совершенно не так, как свет. Свет существует сам по себе, это поток частиц — фотонов. Звук же — это колебания чего угодно: воздуха, воды, куска железа. Поэтому свет может распространятся в космосе, а звук не может: нет передаточной среды.
Человек интуитивно этого отличия не понимает, поэтому и свет, и звук мы представляем в виде волн. Кроме того, наш мозг может путать эти два источника. Известный факт: под воздействием ЛСД человек слышит свет и видит звук. Я проверял. Вот поэтому так легко изобразить звуковые волны в виде световых волн. Анимация любой волны, изображающей звукозапись, дает такой же эффект, как ЛСД: мы как будто бы видим звук.
Этим эффектом пользуются абсолютно все головые помощники. Нет ни одного ассистента, где не использовалась бы звуко-световая анимация.
Дело здесь не только в красоте. Дело в обратной связи, которая обязательно должна быть в интерфейсе. Если нет обратной связи, то человек думает, что интерфейс завис.
Обратная связь разная для разного уровня взаимодействия. Я думаю, что тут есть такое правило: чем дольше взаимодействие, тем длительнее должна быть обратная связь. Вот, например, для кнопки все очень просто. Мы тапаем пальцем по экрану в доли секунды, и кнопка на доли секунды становится чуть более темного цвета. Этого достаточно, чтобы показать, что кнопка была нажата. Говорим же мы гораздо дольше. Команды, которые мы отдаем виртуальному помощнику, могут длиться 10–20 секунд. И все это время нам нужна постоянная обратная связь. Недостаточно будет подсветить кнопку голосового помощника внутренней тенью: типа, она нажата. Приложение может зависнуть после нажатия кнопки, и пользователь этого не поймет. Так что обратная связь для распознавания речи нужна непрерывная.
Вот для этого и применяется анимация в виде волн. Желательно, чтобы эта анимация реагировала на изменения голоса. Чем громче мы говорим — тем больше должен быть размах волны.
Поэтому даже для прототипа голосового помощника обязательно нужна анимация. И такую анимацию я предложил для Кубика. В качестве основы подошла анимация ассистента Google. Приложение выходило только для платформы Андроид, поэтому такая анимация смотрелась бы органично, а сделать её можно было быстро.
Такие же волны, только белые, я разместил в иконке кубика. Это было самое простое решение. Анимация не реагировала на изменения голоса, но самого факта анимации уже было достаточно, чтобы дать обратную связь.
Потом в процесс вмешался программист и сказал, что, хотя отслеживать изменения голоса сложно, он может легко отличить тишину. Тогда появилась идея добавить вторую обратную связь, когда человек уже нажал кнопку, но еще не начал говорить:
Собрались с командой, подумали: нет ли еще третьего состояния? Оказалось, что есть. Когда команда отдана, приложению нужно до 10 секунд, чтобы связаться с сервером и распознать её. Поэтому нужна еще одна индикация, чтобы показать пользователю, что его команда принята и обрабатывается:
Этот набор из трех индикаций — минимальный минимум для любого, даже самого простого прототипа голосового помощника. Без этой трехступенчатой обратной связи нельзя вообще выпускать приложение.
Термостаты
Фишка Кубика — в одном приложении поддержать разные устройства от разных компаний. Обычно каждая компания выпускает отдельное приложение для своих устройств, и управлять разными приборами неудобно.
Поэтому для Кубика нужно было придумать кучу разных универсальных иконок. В первой версии поддерживались: термостаты фирмы Nest, датчики дыма и угарного газа, датчики влаги и протечки воды, датчики движения, цветные лампочки Philips Hue, дверные замки и умные розетки.
Начнем с термостатов. В каждом американском доме есть термостат, только он управляется вручную. Новые термостаты от фирмы Nest стали устанавливать в домах недавно, и они работают через приложение.
Термостат регулирует температуру, поэтому основная индикация в иконке — градусы по Фаренгейту. У термостата также есть целевая температура, которую он должен поддерживать в доме. Допустим, в квартире 68 градусов Фаренгейта (20 градусов Цельсия). Задаем цель: нагреть воздух до 72 градусов, термостат начинает работать. Основная проблема: какую температуру отображать на дисплее?
Большинство дешевых обогревателей воздуха показывают текущую температуру, и поэтому нет обратной связи. Как понять, что термостат принял команду подогревать воздух и работает? Поэтому целевую температуру показывать нужно. Но не вместо текущей, а в дополнение к ней, ведь иначе мы не будем знать, сколько градусов в комнате сейчас.
На дисплее нужно показывать обе температуры: и текущую, и целевую. Если они совпадают (или целевой температуры нет), то нужно отображать только текущую температуру и подсвечивать термостат, например, зеленым цветом.
Подсветив термостат зеленым цветом, мы интуитивно ввели понятие нормы. Разовьем эту идею. Если есть нормальная температура, то должны быть понятия «холодно» и «жарко». Поскольку мы решили, что нормальная температура наступает, когда текущая и целевая температуры совпадают, то мы можем сделать логичный вывод: жарко — это когда текущая температура выше целевой, а холодно — это когда текущая температура ниже целевой.
Вот и появляются два новых цвета: оранжевый и голубой.
Есть еще другой подход: подсвечивать оранжевым термостат, работающий на обогрев, а голубым — работающий на охлаждение. Этот подход работает до тех пор, пока мы не вводим понятие перегрева и переохлаждения.
Норма, жара и холод — относительные понятия, но есть общечеловеческие пределы. Если в квартире больше 95 по Фаренгейту (35 по Цельсию), то это перегрев. Точно так же, температура 42 градуса (5 по Цельсию) вряд ли допустима в жилом доме: это переохлаждение.
О перегреве и переохлаждении нужно сообщать пользователю как о критической ошибке, требующей вмешательства.
Индикация такого уровня носит привлекающий характер, поэтому нужно расширить цветовое кодирование. Введем красный и синий цвета как признаки серьезного отклонения температуры от разумной, а в целях привлечения внимания будем заливать иконку цветом.
Вот здесь подход с подсветкой режима обогрева/охлаждения вместо состояния жарко/холодно и перестает работать. Если в квартире перегрев и термостат работает на охлаждение, иконка будет подсвечена голубым. Если в квартире переохлаждение и термостат работает на обогрев, то иконка будет подсвечена оранжевым. Таким образом, мы начнем сообщать пользователю ложную информацию, как будто проблемы нет.
Это грубейшая ошибка! Одна из тех, что приводят к авариям на атомных станциях и крушению самолетов. Попались? А с виду казалось, что это незначительный нюанс, вкусовщина.
Кроме датчика температуры, в термостаты Nest встроен детектор влажности воздуха. Этот функционал скорее дополнительный, поэтому влажность можно выводить при тапе на иконку, за одним исключением. Если воздух пересушен или переувлажнен, это тоже довольно опасно, поскольку может вывести чувствительную технику из строя. Поэтому пересушенный и переувлажненный воздух нужно индицировать так же, как перегрев и переохлаждение.
Цветовое кодирование уже занято, поэтому введем иконку, изображающую каплю воды, и будем выводить её крупно вместо температуры. Температуру же сместим под иконку.
В случае, если в квартире одновременно проблемы и с температурой, и с влажностью, лучше отдать приоритет температуре и выводить градусы, а иконку-каплю поместить вниз или убрать в окно настроек. Я не стал прорабатывать этот момент в первой версии Кубика.
Вот набор всех состояний термостата:
Датчики дыма
Компания Nest также выпускает датчики дыма и угарного газа. И дым, и угарный газ определяет один датчик. На каждую утечку есть 3 степени опасности: низкая, средняя и высокая.
Цветовое кодирование будем расширять. Красный цвет возьмем для высокой степени опасности, а низкую и среднюю степень будем отображать желтым и оранжевым.
Один датчик отвечает сразу за 2 вида утечки. Поэтому придется ввести дополнительное кодирование при помощи иконок. Иконки не то чтобы сложные, но взять просто дым нельзя. Его обычно изображают в виде полосок, которые совершенно не вызывают чувство опасности.
Поэтому лучше взять иконку огня. Это не прямое изображение, но огонь гораздо лучше узнается, чем три непонятные линии. И выглядит опаснее.
Нашлось много иконок, изображающих огонь. Понравилось три. Можно выбрать одну из них, а можно взять все и подставлять по степени опасности:
Для угарного газа вообще нет ассоциации. Моноксид углерода (химическая формула СО) — газ без цвета, запаха и вкуса, от которого можно двинуть копыта и не заметить. Наверно, лучше взять иконку пострашнее.
Примеряем иконки:
Смотрится вполне опасно.
Может быть такое, что одновременно небольшой пожар и сильный угарный газ. В таком случае цвет иконки нужно делать красным, по наибольшей степени угрозы, а иконки показывать обе.
Другие иконки
Кроме термостатов и датчиков дыма для первой версии Кубика подготовил иконки лампочек, датчика движения, датчика воды, дверного замка и розетки.
Весь набор иконок:
Устройства объединяются в комнаты и размещаются на главном экране приложения:
Дашборд
Кубик бесплатное приложение, но с платной опцией. За 10 долларов в месяц пользователь получает дашборд — систему уведомлений и советов. Дашборд будет присылать уведомления на телефон, если с домом что-то не в порядке, а также давать советы, что делать во время угрозы. Например, при утечке угарного газа нужно открыть окна.
Доступ к дашборду дается с главного экрана приложения. В строке меню выводится кнопка Dashboard.
При угрозе кнопку вызова дашборда стоит подсвечивать.
Индикация в самом дашборде поясняет статусы всех устройств. В будущих версиях Кубик будет поддерживать камеру наблюдения, которая также будет доступна в дашборде.
Другие разделы приложения
Управление лампочками и термостатом:
Маркетплейс, встроенный в приложение, — один из популярных способов монетизации:
Экраны добавления нового устройства (Philips Hue):
Концепция встроенного в систему голосового ассистента:
Судьба проекта
Приложение было выпущено в 2017 году. О Кубике написали несколько крупных американских СМИ. После года работы проект не смог выйти на окупаемость и был закрыт.