Несколько недель назад Adobe презентовал первый публичный превью продукта, который сейчас называют Adobe XD, их главная новинка для UX/UI-дизайна и прототипирования. Вы можете скачать его здесь. В этой ранней версии не хватает нескольких важных функций, и впереди еще долгий путь до запуска полноценной версии 1.0. Тем не менее, превью-версия вполне пригодна для тестирования профессиональными дизайнерами. По этой версии можно понять, несет ли продукт в себе обещанную инновационность. На этом этапе мне показалось очень уместным взять интервью у Тома Крча, ключевого представителя команды создателей Adobe XD, который стоял у самых истоков его развития, еще до того, как проект начал называться Project Comet. Я попросил его рассказать, как Adobe XD из идеи превратился в живой продукт, чего стоил первый релиз, и каково его личное и командное видение развития проекта в долгосрочной перспективе.

Полная открытость информации: С августа прошлого года я являюсь сотрудником Adobe. Как и все другие мои посты, это интервью не подавалось руководству на утверждение.

Том Крча

Хой Вин: Давайте начнем с истоков. Как впервые появился Adobe XD?

Том Крча: Это началось в середине 2014 года. Я работал с командой Behance над новыми приложениями, и мы постоянно прототипировали новые идеи, используя разные инструменты. И ни один из них не был идеальным. Всем не хватало целостности; возможности быстро переключаться с идеи на дизайн, а потом быстро набросать прототип, которым можно было бы легко поделиться с другими. Все эти задачи казались такими логичными, и они были настолько далеки от реальных возможностей. Я хотел ускорить процесс итерации и проработки наших идей.

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

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

Хотелось бы услышать подробнее об этом процессе, но сначала уточним: к середине 2014 Sketch уже приобрел довольно широкую популярность, и рынок дизайн-инструментов серьезно продвинулся. Я так понимаю, что вы вместе с коллегами наблюдали за рынком в то время?

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

Тем не менее, мы знали, что разработка нового инструмента займет немало времени. Такое за ночь не придумать. Я думаю, происходящее тогда мало беспокоило нас, и мы больше думали наперед. Целью было перепрыгнуть тогдашнее поколение инструментов и разработать продукт будущего. Одним словом, построить электрокар, только в дизайн-инструментах.

То есть, по-вашему, большинство инструментов для UX/UI, которые дебютировали за последние пару-тройку лет, слишком сфокусированы на “сегодняшнем дне”, и недостаточно смотрят в будущее?

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

Реализация подобных продуктов требует поиска компромисса между простотой использования и качеством — WYSIWYG-интерфейс против высоконагруженного кодом, каким путем пойти? Как выработать правильный баланс для Adobe XD?

Все верно: высокое качество и простота использования всегда соперничают друг с другом. Когда мы только начали работу над Adobe XD, мы знали свою цель — создать инструмент для любого дизайнера, чтобы каждый мог взять и сразу начать творить на нем, ежедневно использовать его в своей работе. Мы решили точно сфокусироваться на дизайне, а не на разработке, а также оставаться независимыми от платформы. Мы общались со множеством дизайнеров — многие из них настоящие асы своего дела, но также нам были интересны и начинающие специалисты, которые еще не освоили никакие решения, а только осматриваются по сторонам в поиске возможностей. Этот свежий взгляд очень ценен, так как не привязан к конкретным решениям. Мы узнали, что уровень навыков дизайнеров не сильно важен, все они хотят быстро стартовать и быстро двигаться вперед. Один из ключевых принципов — “комфорт превыше всего” — означает, что инструмент никогда не должен вам мешать, становиться преградой на пути к реализации идей; он должен быть очень простым и понятным. Он должен казаться почти невидимым, как и его работа.

Можете привести примеры ваших решений по принципу “комфорт превыше всего”?

Таких много. Контекстуальный инспектор параметров показывает вам только то, что вам нужно, и когда это нужно. На приветственном экране у нас недавно используемые файлы и UI kits, их можно сразу же использовать без мучительных поисков нужного элемента. Один из моих любимчиков — “раздвоение” (ghosting). Когда есть какой-то объект, скажем, фото, которое обрезано артбордом, мы отображаем отрезанную часть прозрачной, чтобы дизайнерам было проще работать с контекстом всего объекта. Это также применяется к булевым операторам, и скоро будет реализовано для масок. Другой пример — отображение расстояний, где мы сочетаем вспомогательные линии с замерами расстояний. Некоторые из подобных решений малозаметны, но когда их обнаруживаешь, все кажется таким очевидно необходимым.

Если я — новый пользователь, чего ожидать от первого раза (или первых нескольких раз) в Adobe XD? Будет ли весь этот комфорт доступен сразу, или же нужно пройти по какой-то кривой обучения?

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

У нас получается набор эвристических правил, по типу вышеописанного, который полезен и понятен всем. Например, нужно дублировать объект несколько раз — мы знаем, что можем показать контекстную подсказку, “[⌘R] Turn into Repeat Grid”, (превратить в повторяющуюся сетку), которая возьмет уже продублированные объекты и быстро сгенерирует для вас сетку повторов. Еще очень удобно реализовано редактирование кривых. Поскольку можно сделать массу операций с точками с помощью разных клавиш и жестов.

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

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

Даа! Есть одно такое предубеждение, с которым я постоянно борюсь: масштаб. Наш зум выполнен в родном духе Mac или iOS. Можно сжимать или разжимать область двумя пальцами на трек-паде или option+скролл мышкой для изменения размера отображения. Зум работает очень плавно, и я уверен — пользователям он понравится.

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

А в целом, насколько вы открыты к изменениям, запрашиваемым бета-пользователями?

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

Интересно, что вы создали инструмент для макетирования одновременно с инструментом для прототипирования. Они во многом отличаются, но помогла ли параллельная разработка понять то, что невозможно было бы узнать, разрабатывая их по отдельности?

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

Тут возникает и другой вопрос: насколько комплексным будет XD, и насколько это решение будет сочетаться с уже существующими приложениями? Мог бы я, например, взять макет интерфейса из XD и загрузить его в InVision, или же взять макет UI из Illustrator и импортировать его в XD? Как вы сформулируете философию продукта в этом ключе?

XD очень гибкий, и вы можете все это сделать: импортировать векторные и растровые исходники в приложение, экспортировать их и использовать в другом инструменте. Мы работаем над более тесной интеграцией с Photoshop и Illustrator, и мы предоставим возможности интеграции с любым инструментом.

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

Это серьезный вызов, поскольку продвинутый функционал потребует значительного усложнения и самого XD, и тут неизбежен конфликт наших принципов. Примерами может быть добавление редактора кода или опций для ретуширования фотографий. Мы думаем, что существует некий баланс, при котором Adobe XD покрывает как раз нужный объем работ по UX-дизайну, а затем вовлекает в процесс другие инструменты вроде Photoshop или Framer Studio и прочие инструменты для прототипирования.

Я рад слышать такие вещи от вас, потому что я склонен верить, что в обозримом будущем дизайнеры будут использовать довольно эклектичный набор инструментов — и нам всегда до определенной степени придется сочетать и комбинировать. Есть ли возможности взаимозаменяемости между продуктом и большим количеством других инструментов, как от Adobe, так и от других? Будет ли какой-то стандартный формат для файлов прототипа, как, например, SVG в графике или даже PSD в определенной мере?

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

Давайте тогда поговорим о воплощении XD в жизнь. Чем вы прототипировали то, что разрабатывали?

Мы создали полностью функциональный прототип средствами HTML и JavaScript, и обернули его внутри родного приложения для chrome, так что выглядело все как настоящий дизайн-редактор. Там были полноценные возможности для рисования и все эти новые, амбициозные штучки, которые мы тестировали. Многие из них еще не включены в представленный продукт. Сегодня мы можем уже прототипировать некоторые вещи для XD в самом XD, но для более сложных взаимодействий мы все еще прототипируем в коде.
И с чего вы начали разработку? Что было самым первым?

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

В рамках своих исследований как вы взаимодействовали с практикующими дизайнерами?

Изначально мы пригласили множество дизайнеров со всеми возможными наборами навыков и опыта в Adobe и дали им поиграться с прототипом. Это помогло нам изучить потребности и определиться с объемом работ на будущее. Когда ты прототипируешь, мир кажется безграничным. А когда начинаешь разрабатывать реальные вещи, то понимаешь, насколько осторожным нужно быть. Мы поняли, что есть огромная разница между “крутым” и “полезным на каждый день”.

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

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

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

Как вы организовали поддержку проекта? UX и UI дизайн — та ниша, к которой Adobe был практически равнодушен в прошлом.

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

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

Мы также наблюдали, как рынок инструментов для прототипирования пополнялся новыми решениями. На самом деле, даже учитывая все эти новинки, мы обнаружили, что дизайнеры все равно пользовались PowerPoint и Keynote — инструментами, которые совершенно не предназначены для прототипирования — чтобы продемонстрировать свои UX-дизайны. Так что мы убедились, что в нашей нише по-прежнему место свободно, и при этом мы не видели никого, кто бы пытался соединить прототипирование и визуальный дизайн в одном продукте.

Хорошо, превью уже вышел. Чего вы ожидаете между нынешним моментом и официальным релизом версии 1.0?

У нас очень много работы. В то время, как горизонтальный рабочий процесс налажен (дизайн, прототип, коллаборация), мы углубляемся во все эти вертикали. Мы улучшим функционал для дизайна, добавим новые эффекты, такие как размытие, возможность добавки прокручиваемого контента и микровзаимодействий, представим версии под iOS и Android для превью в реальном времени, поможем дизайнерам управляться с большими документами, наполненными символами, стилями и библиотеками Creative Cloud, добавим API для расширения кастомными плагинами и интеграции с другими инструментами, создадим версию для Windows 10. По мере работы мы будем шлифовать продукт в ответ на получаемый фидбек. Мы также прорабатываем планы на будущие релизы.

Заглядывая наперед, каково ваше видение Adobe XD, скажем, на ближайшие 3, 5 или 10 лет?

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

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

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