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

Расскажи о себе вкратце: чем занимаешься, где работаешь, чем увлекаешься

Я проектирую продукты и интерфейсы. Люблю разнообразие. Начинал с веб-сайтов и презентаций, немного мобильных приложений. Затем игровые интерфейсы в World of Tanks, позже киоск самообслуживания, электрический грузовик, рельсовый электровелосипед. Сейчас работаю над несколькими носимыми устройствами и Лайтпаком — «световым оркестром» для комнаты.

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

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

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

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

Например, для «Симкомата» (киоск по автоматизированной продаже симкарт) проектировал сразу четыре ветки UX-сценариев:

1. Для самих пользователей — людей, которые покупают сим-карту. На этом главный фокус.
2. Для обслуживающего персонала — людей, которые заполняют киоск симками, забирают деньги, вставляют чековую ленту.
3. Для администраторов от бизнеса.
4. Для технарей, которые настраивают киоск.

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

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

• интерфейсами кабины грузовика (приборная панель, физические контролы, инфотейнмент-система);
• интерфейсами, с которыми водитель будет работать вне кабины (на базе мобильных устройств);
• логистической системой в вебе для связи с водителями и клиентами.

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

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

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

Из того, что нашёл по правилам и стандартам, самое краткое и по делу — Earcons and Icons: Their Structure and Common Design Principles.

Впервые узнал оттуда понятие «earcon» — иконка для уха. Очень концептуально, по-моему ツ В брошюре описано, как они должны «выглядеть», как их объединять в группы и создавать систему из понятных звуковых фраз.

Ещё интересная книга по теме — Human Factors in Alarm Design.

Расскажи о специфике дизайна для игровых проектов на основе своего опыта работы для World of Tanks?

О специфике мы с Лёшей Копыловым рассказывали. Я не буду повторяться, потому что получится очень длинно.

В играх встречаются разные по типу интерфейсы. В «танках», например, есть боевой интерфейс, а есть сервисные: меню игры, «магазин», «инвентарь», игровой чат.

Сервисные интерфейсы — не геймплейные, а скорее обслуживающие. Их проектирование бывает похоже на проектирование сайта или мобильного приложения. Но если прийти с опытом чисто «вебовским», то будет очень сложно перестраиваться. Мы даже в какой-то момент старались искать людей без опыта сайтоделания.

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

От этого сильно зависит, как чувствует себя игрок, комфортно ли ему, вовлечён ли он в процесс. Неправильно настроенная камера может даже способствовать «выдёргиванию» человека из процесса. Чтобы лучше понять, о чём я говорю, посмотрите выступление Creating an Emotionally Engaging Camera for Tomb Raider.

Самое важное в играх — фан, на эту тему читайте книгу Theory of Fun. Интерфейс должен помогать переживать этот фан, способствовать вовлечению, получению эмоций — помимо более утилитарных функций.

Кто обычно есть в твоей команде? Как распределяете обязанности?

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

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

В «Симкомате» начинал тоже сам, затем наняли дизайнера. Я обучал его UX-аналитике, учил проводить пользовательское тестирование. Программисты были на аутсорсе, и я параллельно с проектированием руководил софтовой разработкой.

В «Чардже» (электрический грузовик) я сначала был один. Делал всё, включая аналитику, UX-исследования, планирование, управление софтовой разработкой и поиском железных поставщиков. Затем взяли дизайнера, программиста и специалиста по железу.

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

Как ты находишь такие крутые проекты? Большинству дизайнеров за всю жизнь не придётся поработать с электрическим грузовиком, носимыми устройствами или лайтпаком. А у тебя прямо цепочка достижений — от одной крутой штуки к другой. Как тебе это удаётся?

Это череда неслучайных случайностей. В «танки» я попал, потому что пошел работать в UIDG. К ним тогда пришли заказчики и говорят: «Надо аналитику». А я нашим в компании сказал: «Я люблю игры и всегда хотел ими заниматься, дайте мне этот заказ». Мне дали. Я сделал аналитику, потом нам заказали проектирование пары больших фич. «Танкам» всё понравилось и они схантили меня ツ

Когда уходил из «Варгейминга», хотел делать что-то более реальное, физическое. Вернулся на родину, в Ижевск. Там мой друг Артём Субботин, основатель Симкомата, попросил немного помочь советом. А потом говорит — пошли работать.

После «Симкомата» начал искать работу, и мне написали ребята из Charge. Сказали, что нашли меня через выступление на ПрофсоUX. Оттуда вышли на линкедин-профиль, а был описан релевантный опыт «симкомата».

Когда ушел из Charge, спустя пять месяцев расстройства и размышлений написал в Фейсбуке, что ищу работу. Не ждал, что вообще будет что-то с железками в Питере. Был уже почти готов работать над какой-нибудь CRM-кой. Тут мне написал Митя Гориловский и пригласил работать над «Лайтпаком» и другими интересными проектами в компании Woodenshark. Я про такую даже и не знал.

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

Допустим, есть дизайнер, который пресытился работой с веб-интерфейсами. Хочет поработать в «железных» проектах — делать интерфейсы для голосовых помощников, роботов или автопилотов. Что ему посоветуешь, с чего начать?

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

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

Смотреть по сторонам в компании, где работаешь. Везде «совать свой нос» и вовремя заметить возможность (как было у меня с «танками» — проект ведь могли просто отдать другому дизайнеру).

Какие инструменты используешь в работе? Какие твои любимые?

Любимые — бумага и гелевая ручка PaperMate. Затем доска. Потом всё остальное. Смотря что делаю:

• Гуглдокс и MindManager на старте проекта.
• Draw.io или Visio чтобы описать состояния, переходы и сущности.
• Illustrator или Figma для графических интерфейсов, схем навигации по продукту и детального проектирования. Финальный дизайн я обычно отдаю кому-то, чтобы не тратить время на пиксели.
• Invision, если надо быстро запрототипировать.
• Среда программирования, если надо кодить для прототипа.

Медиум (Medium) — это популярная коллективная блоговая платформа. Она славится аскетичным интерфейсом, приятной типографикой и отсутствием нормального способа подписаться на конкретный блог.

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

Если хотите гарантированно подписаться на блог — используйте RSS. Медиум его поддерживает, хотя и не афиширует. Просто скормите RSS-ридеру ссылку на блог человека в таком виде:

https://medium.com/@юзернейм

Например:

https://medium.com/@kapanaga
https://medium.com/@_ericelliott
https://medium.com/@jane_malkova

Юзернеймы людей, на которых вы подписаны в Медиуме, смотрите по специальной ссылке:

https://medium.com/@ваш_юзернейм/following

Например, вот мои:

https://medium.com/@nalgeon/following

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

Но я задумался — а где реально обычный дизайнер интерфейсов (или любой не-специалист в computer science) может столкнуться с машинным обучением в повседневных проектах, да ещё с русскоязычными данными. Я попробовал собрать несколько примеров вместе с инструментами.

Поехали!

Распознавание речи

Что это. Программа слушает запись голоса и преобразует её в текст.

Инструменты. Распознавать речь умеют все крупные вендоры: Гугл, Амазон, Микрософт. Они сделали удобные облачные сервисы и библиотеки, только с русским всё печально. Поэтому для русской речи я использовал SpeechKit от Яндекса.

Речь распознавать он более-менее умеет, но качество очень так себе. По моему опыту, короткие бытовые фразы распознаются на 70%, а если говорит ребёнок или у человека плохая дикция — 50%. То есть это далеко не продакшен-качество, использовать голос как единственный способ ввода нельзя.

Есть одно исключение: адреса. Их Яндекс распознаёт очень хорошо (возможно, вы замечали это по яндекс-навигатору). Лучше человека. Так что для ввода адресов SpeechKit реально можно использовать.

Понимание смысла сказанного

Что это. Программа анализирует текст и пытается понять, что имел в виду человек. По такому принципу работают голосовые помощники вроде Siri и «умные» чат-боты (тупые же ориентируются по ключевым словам, без всякого машинного обучения).

Инструменты. Всё ещё хуже, чем с распознаванием речи. Тот же SpeechKit умеет проводить морфологический анализ предложения (части речи, лица, падежи). Плюс-минус умеет вычленять даты, адреса и ФИО. Но не умеет главного — понимать смысл: выделять действия, объекты, характеристики и обстоятельства.

Распознавание текста

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

Инструменты. На этой поляне давно и прочно играет ABBYY с их FineReader Engine, а ещё есть Smart Engines.

Smart Engines распознаёт паспорт, СНИЛС или водительское удостоверение за секунду и предупреждает, если не уверен в распознавании.

Компьютерное зрение и классификация изображений

Что это. Программа анализирует изображение и относит его к одной из категорий (спортивная машина, ребёнок, цветок и т. п.) Отсеивает «взрослые» фото, считывает текст и логотип с фотографии. Находит лица, определяет количество людей и их пол. Выделяет основные цвета.

Инструменты. Тут работают Cloud Vision от Гугла и свеженький Data Factory от Яндекса.

Про решение от Яндекса толком ничего не известно, а Гугл справляется хорошо. Вот Антон Мальцев на Хабре отлично разобрал каждую возможность и сравнил с конкурентами.

Рекомендации, прогнозы и анализ взаимосвязей

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

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

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

Еще пример: та же программа предсказывает, сколько конкретно денег можно ссудить человеку, чтобы он без проблем выплатил потом кредит.

Анализ взаимосвязей — программа смотрит на данные и замечает закономерности, которые человек не может увидеть самостоятельно. Например, тот же банк может получить ответ на вопрос «что общего у заёмщиков, которые просрочили выплату по кредиту?»

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

Творчество

Что это. Программа выступает «соавтором» дизайнера. Человек задаёт условия задачи, алгоритм анализирует варианты решения и предлагает оптимальный. Это направление ещё называют генеративным дизайном.

Генеративный дизайн используют в архитектуре, промышленности, медицине. Задача, которую решает программа — уменьшить вес и увеличить прочность конструкции (например, детали самолёта или протеза). Маловероятно, что вы столкнётесь с таким проектом, но мало ли ツ

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

⌘ ⌘ ⌘

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

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

Эксперты в отрасли как-то странно понимают проектирование интерфейсов. Вот чему они учат на многочисленных курсах:

• сбор и анализ данных об аудитории;
• концепция, информационная архитектура и customer journey map;
• всякие разные прототипы и инструменты прототипирования;
• юзабилити-тестирование;
• service design, data driven design, design thinking and other bullshit-bingo techniques.

Это все важные и нужные вещи, спору нет. Но представьте:

У вас болит живот и пришли вы к врачу. Он внимателен, деликатен, эмпатия 100 lvl: выслушал вас, покивал, прощупал, получил исчерпывающее представление о проблеме. Написал три листа с описанием вашей сложной ситуации. Нарисовал пищевод, желудок и кишечник в разрезе. Изложил вкратце современные течения в гастроэнтерологии. А на рецепте написал: «выпейте яду, это поможет».

Этот «врач» — типичный выпускник UX-курсов. Он все умеет, он понимает пользователя и сервисно ориентирован до дрожи в коленках. Он нарисовал 9000 серых прямоугольников в акшуре и протестировал их. Но (пардон), интерфейс-то кто делать будет? Бирман?

Дизайн интерфейса (помимо UX-обвеса) включает:

• Поведение. Всё от валидации форм и анимации панелей до нюансов работы в офлайн-режиме.
• Текст. Включая «пустые» и ошибочные состояния.
• Онбординг и систему помощи в интерфейсе.
• Техническое: выбор реальных контролов вместо серых прямоугольников. Компоновка экранов. Типографика, вёрстка и цветовое оформление. Адаптация под разные форматы экрана.
• И ещё вагон всего.

А учат вместо этого сервисному дизайн-мышлению и флэт-иллюстрациям. Ну ОК.

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

Вот что уменьшает моё доверие:

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

Вот что увеличивает моё доверие:

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

А как у вас? Поделитесь, интересно. Пишите в фейсбук или телеграм

Такие, знаете, немодные и слегка неказистые, которых давно не касалась рука дизайнера и разработчика.

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

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

В старом интерфейсе меньше багов. Большую часть давно починили, а новых не добавили, потому что дизайнер интерфейс не трогает. Да, мне может не хватать новых фич, но зато не придется через раз получать «что-то пошло не так». Слышите меня, Яндекс.Деньги?

Спасибо, очень помогли. 10% покупок вываливается в «техническую ошибку», зато выглядит стильненько.

Люблю старые интерфейсы.