Алгоритмический дизайн

Я давно интересуюсь темой алгоритмического дизайна — это инструменты, которые помогут упростить построение интерфейса, подготовку графики и контента, а также персонализацию продукта. За 4 года скопилась пара десятков примеров и полдюжины статей в привязке к дизайну цифровых продуктов, хотя это были скорее отдельные всплески безо всякой системы. Но в 2016 году технологическая основа для таких инструментов стала доступнее — в дизайн-сообществе тоже начали присматриваться к алгоритмам, нейронным сетям, искусственному интеллекту. Так что самое время переосмыслить современную роль дизайнера.
Статья опубликована в Smashing Magazine. К ней запущен сайт-коллекция.

Роботы заменят дизайнеров?

Одним из самых ярких и заметных примеров алгоритмического дизайна стала нашумевшая CMS The Grid, которая самостоятельно подбирает шаблоны, оформление контента, обрабатывает фотографии. Причём ещё и проводит A/B-тесты разных подходов для выбора лучшего решения. Правда, продукт уже пару лет в закрытой бете и судить о нём можно было только по рекламным материалам и статьям. А недавно на Designer News откопали примеры созданных с помощью The Grid сайтов и реакция сообщества неоднозначная — критикуют слабые с дизайнерской точки результаты и мусорный код. В общем, скептики открыли шампанское.

Идея полной замены дизайнера алгоритмом, о которой говорил The Grid и некоторые технологи, звучит красиво и современно, но она неправильная и слабоперспективная. Продуктовый дизайнер помогает команде превратить сырую идею в целостный интерфейс с хорошей логикой работы, информационной архитектурой и визуальным стилем, которые решают бизнес-задачи и усиливают бренд. По ходу работы он принимает огромное количество решений, причём многие из них невозможно описать чёткими процедурами; кроме того, входящие требования бывают ошибочны и противоречивы в отдельных деталях, так что дизайнер помогает менеджеру решить эти коллизии — это делает продукт лучше. Всё это сильно больше чем подбор правильного шаблона и раскраска его современной стилистикой.
Но если вести речь о творческом партнёрстве, когда дизайнер в паре с алгоритмами решает продуктовые задачи — здесь полно перспектив и хороших примеров. Особенно интересно, как это применимо прямо сейчас при создании веб-сервисов и мобильных приложений.

Творческое партнёрство с алгоритмами

Дизайнеры здорово научились жонглировать кучей инструментов и навыков, так что на смену классическим приставкам несколько лет назад пришёл термин «продуктовый дизайнер». Это активные участники продуктовой команды, которые понимают, как работают пользовательские исследования, могут спроектировать интерфейс, предложить интересный визуальный стиль, оживить его анимацией и даже заверстать несложный код. Такие специалисты ценны для любой продуктовой команды.
Правда, такое распыление навыков не всегда позволяет посвятить достаточное количество времени каждому из аспектов продуктовой работы. Да, за последние годы бум новых инструментов для дизайнеров сильно сократил время создания проектных артефактов и расширил возможности. Но этого недостаточно — рутины всё ещё много, а новые зоны ответственности съедают сэкономленное время. В общем, нужно упрощать и автоматизировать дальше. Я вижу тут три основных направления — построение интерфейса, подготовка графики и контента, а также персонализация продукта. Чтобы раскрыть мысль лучше, я остановлюсь на примерах, а после этого опишу формат работы дизайнера в новую эпоху.

Построение интерфейса

Простые инструменты паблишинга вроде Medium, Readymag и Tilda уже сократили количество ручной работы — в них полно добротных шаблонов, с помощью которых можно и без дизайнера собрать неплохой результат. Улучшение шаблонов сделает порог входа ещё ниже. Например, пока The Grid запрягал, тематикой алгоритмического дизайна заинтересовался Wix, мастодонт среди конструкторов сайтов. Они анонсировали Advanced Design Intelligence, похожий по смыслу на The Grid полу-автоматизированный способ создания сайтов для непрофессионалов. Они обучают алгоритм, скармливая ему множество примеров хороших современных сайтов. Кроме того, он старается учитывать тематику создаваемого сайта, чтобы лучше попадать в стиль. Ведь непрофессионалу сложно выбрать подходящий шаблон из всего многообразия и продукты вроде Wix и The Grid выступают тут дизайнером-экспертом.

Конечно, как и в случае с The Grid, полный отказ от дизайнера приведёт к штампованным и не всегда хорошим результатам (хотя в любом случае поднимет общий уровень качества). Но если рассматривать эту работу как своего рода «парный дизайн» с компьютером, можно сгрузить часть рутины. Например, дизайнер собирает мудборд на Dribbble или Pinterest, а алгоритм быстро примеряет эти стили на макет, а дальше подбирает наиболее близкий шаблон из имеющихся. По сути — дизайнер становится арт-директором своего подмастерья, компьютера.
Да, таким путём не создать революционный продукт. Но можно освободить себе время для этого. Да и надо признать, что огромная часть повседневных задач более чем утилитарная и не требует революций. А если компания зрелая и имеет дизайн-систему, то подключение к ней алгоритмов позволит делать больше меньшими средствами. Например, дизайнер и разработчик описывают логику обработки входящих сигналов — контента, контекста, информации о пользователе и его действиях, а дальше алгоритм сам формирует экраны на основе готовых паттернов и принципов. Это позволяет добиться тонкой подстройки под конкретную узкую ситуацию или сценарий без необходимости вручную прорисовывать и разрабатывать десятки состояний экрана. Florian Schulz показывает пример интерполяции промежуточных состояний интерфейса на основе краевых значений.

Мой интерес к алгоритмическому дизайну возник в 2012 году, когда для одного из наших продуктов мы описывали автоматизированную работу журнальной верстки. Существующий контент имел плохую семантическую структуру, так что переверстать архив публикаций в современный вид было бы затратным. Да и в целом не каждый редактор обладает хорошими навыками дизайна. Для этого специальный скрипт делал парсинг статьи и исходя из её контента (количество абзацев и слов в каждом из них, количество фотографий и их форматы, врезки с цитатами и таблицами и т.п.) выбирал типовой паттерн для представления куска статьи в эффектном журнальном виде. Скрипт также следил за тем, чтобы паттерны чередовались и материал выглядел достаточно разнообразно. Таким образом редакция экономит силы на переработке старого контента в новый вид, а дизайнер просто регулярно добавляет новые модули представления. Похожую модель реализовал Flipboard.
Vox Media сделала в своей CMS Chorus механизм сборки главной страницы по схожему принципу. Из большой коллекции паттернов представления статей, видео, сюжетов и других материалов алгоритм сначала собирает в принципе гармоничные варианты, а затем оценивает их потенциальную эффективность и выбирает оптимальный. Это оказывается гибче и продуктивнее, чем ручная работа редактора, что доказывает и опыт рекомендательных систем вроде Relap.io.

Ещё парочка примеров:

• Small Victories собирает сайт из кусков контента и графики в Dropbox.
• Система автоматической книжной вёрстки Ridero максимально упрощает процесс создания книги.

Подготовка графики и контента

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

Другое дело, когда алгоритм готовит всю композицию. Яндекс использует генератор изображений для подборок на Маркете. Маркетолог заполняет несложную форму с названием и иллюстрацией, а дальше генератор предлагает бесконечное количество вариаций, которые соответствуют гайдлайнам. Ещё дальше пошли в Netflix — их скрипт вырезает персонажей для постеров, накладывает тексты и делает автоматические эксперименты со всем этим. Настоящая магия! Ну а Engadget воспитал робота-подмастерье для написания простых новостных заметок о новых гаджетах. Уф-ф-ф!

И уж совсем чёрная магия происходит в направлении нейросетей. Один из свежих примеров, приложение Prisma, стилизует фотографии под работы известных художников. А продукт Artisto научился обрабатывать таким способом видео (причём даже потоковое). Это пока всё ещё ранняя стадия — хотя приложения можно скачать на телефон и получить результат за пару секунд, вместо того чтобы самому разбираться с технологией, как это было в прошлом году; но загрузить и применить свой стиль сходу нельзя — без самостоятельного обучения нейросети получается так себе. Но если это получится — отберёт ли это работу у иллюстраторов? У тех, кто имеет хороший стиль — вряд ли. Но это, опять же, снизит порог входа на получение добротных иллюстраций для статьи или сайта там, где совсем уникальный подход не требуется. Прощайте, унылые стоковые фото!


А для сложных стилистик это поможет получать быстрый набросок в духе «а что если мы попробуем нарисовать здание или кота в нашем стиле». Например, при работе над мультфильмом «Рататуй» художники Pixar пробовали сразу несколько стилей; что если бы эти наброски делались нейросетью? Можно делать сториборды и описывать сценарии в виде комиксов (фото легко превращается в скетч). Думаю, скоро этот список применений сильно расширится.
Ну и напоследок — живая айдентика. Анимация в последние несколько лет стала популярной в брендинге, но некоторые идут ещё дальше. Например, Wolff Olins представили полностью живую айдентику бразильского сотового оператора Oi, которая реагирует на звук. Такое точно невозможно сделать без творческого партнёрства с алгоритмами.

Персонализация интерфейса

Одна из самых понятных и давно существующих вещей — это персонализация продукта для узкого сегмента аудитории или конкретного пользователя. Мы видим это каждый день в ленте Facebook, результатах поиска Google, рекомендательных системах Netflix и Spotify, да и многих других массовых продуктах. Помимо того, что это снимает с пользователя необходимость самому фильтровать потоки информации, такое проявление заботы со стороны продукта создаёт лучшую эмоциональную привязку.
Правда, главный вопрос — какова роль дизайнера в таких решениях? Ведь для создания подобных алгоритмов обработки пользовательских данных у нас мало необходимых навыков и эти задачи, как правило, решаются инженерами и аналитиками больших данных. Giles Colborne из CXPartners приводит хороший пример с функцией Spotify Discover Weekly — из привычного дизайна интерфейсов там только список треков, а вся основная работа касается самой рекомендательной системы, которая наполняет шаблон ценной для пользователя музыкой.

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

Сравнительно новый термин «anticipatory design» смотрит на персонализацию интерфейса и предугадывание желаний пользователя более широко. Google Now, автоматически предлагающий путь от работы к дому на основе данных о перемещении владельца телефона и Siri с похожими примерами — то, что уже есть в наших телефонах. Хотя для этого важно доверие пользователей. Чтобы такая персонализация работала, сервисы должны получить разрешение на сбор личной информации.
Я также приводил выше примеры автоматического тестирования вариаций дизайна от Netflix и Vox Media, заявляет такое и The Grid CMS. Это ещё один из аспектов персонализации, которую можно переложить на плечи алгоритмов. Интересную концепцию мутирующего дизайна развивает Liam Spradlin — это целая идеология интерфейсов, подстраивающихся под пользователя с учётом множества параметров.

Экзо-скелет для дизайнера

Я привёл несколько историй применения алгоритмического дизайна на практике. Но какие инструменты нужны современному дизайнеру для этого? Если заглянуть в середину прошлого века, то компьютер изначально должен был стать способом расширения человеческих возможностей. Roelof Pieters и Samim Winiger во всех деталях изучают историю компьютеров, как помощников дизайнеров. Они выделяют три уровня развития инструментов:

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

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

1. Изучить пространство проблем и взять для решения те, что дадут максимальную ценность бизнесу и пользователям (анализ).
2. Исследовать пространство решений и выбрать те, что лучше всего закрывают проблему (анализ).
3. Произвести, запустить и распространить продукт, решающий выбранную проблему (синтез).
4. Оценить эффективность выбранного решения на практике и оптимизировать его (анализ + синтез).
5. Обеспечить связку решения с остальными продуктами и решениями компании, а также внешними сервисами (синтез).

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

Анализ

Анализ неявно выраженной информации о пользователях, которую можно узнать в ходе качественных исследований, вряд ли можно автоматизировать. А вот изучение поведения аудитории уже работающих продуктов — подходящая задача. Нам нужно выделить поведенческие паттерны и сегменты аудитории, для которых затем будет оптимизирован интерфейс. Это хорошо удаётся в таргетинге рекламы, когда по явным и неявным признакам поведения пользователя (в конкретном продукте или рекламной сети) его относят к той или иной группе.
Чтобы научить алгоритм оптимизировать интерфейс и контент для этих групп аудитории, дизайнерам пора копать в сторону машинного обучения. Jon Bruner описывает хороший пример: алгоритм получает базовое описание идеального результата — расписание авиаперелётов, которое оптимизировано под экономию топлива и комфорт для пассажиров. Постепенно добавляются новые ограничения — авиапарк, список аэропортов, количество мест в каждом самолёте. Алгоритму скармливаются примеры тысяч реальных рейсов, на которых он обучается и постепенно улучшает оптимальное расписание.
В таком сценарии специалист выступает куратором алгоритма и может добавлять или снимать ограничения. А получившиеся решения компьютер может проверить в ходе экспериментов с реальными пользователями — получается цикл постоянной обратной связи. Хотя сложность этой работы предполагает, что ей занимается скорее аналитик, дизайнеры должны быть в курсе основных принципов машинного обучения. Хорошую мини-книгу на эту тему недавно выпустили O’Reilly.

Синтез

Два года назад нашумел инструмент для промышленных дизайнеров Autodesk Dreamcatcher, который породил несколько публикаций на тему его применимости к дизайну цифровых продуктов. Он основан на идее генеративного дизайна, который давно используется в перфомансах, одежде, архитектуре. Все знают о бюро Zaha Hadid Architects — они называют этот подход «параметрическим дизайном».

Недавно появился сервис Logojoy, который заменяет недорогого фрилансера для создания логотипов. На основе предпочтений по стилю он предлагает множество вариантов, которые затем можно подкрутить и увидеть в контексте условного фирменного стиля. Кстати, тут же можно заказать печать визиток, футболок, наклеек и другой сувенирки с новым логотипом. Идеальный пример инструмента алгоритмического дизайна в реальной работе! Его автор Dawson Whitfield кратко описал принципы обучения алгоритма.

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

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

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

Эксперименты Jon Gold

Инструмент Rene от Jon Gold показывает пример реализации такого подхода. Он работал над той самой CMS The Grid и рассказывает, как он научил компьютер принимать осмысленные шрифтовые решения. Он посчитал, что это мало чем отличается от обучения дизайнеров, и разбил процесс на несколько этапов: сначала анализ символов в шрифтах для понимания сочетаемости, затем базовые правила совмещения шрифтов, после этого «скормил» модные примеры сочетаний для понимания трендов, а в конце приставил детально следить за работой опытных дизайнеров. Общий посыл у него аналогичен Roelof Pieters и Samim Winiger — инструменты должны стать творческими партнёрами дизайнера, а не тупыми исполнителями.

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

Хотя Jon и называет в шутку этот подход «дизайн-брутфорсом» или «multiplicative design», он подчёркивает важность профессионала «за рулём». Кстати, в начале года он ушёл из команды The Grid, который как раз ратовал за полностью автоматизированный подход.

Есть ли примеры на рынке?

К сожалению, на рынке особо не видно продуктов, которые помогают с анализом и синтезом на уровне того, что умеет тот же Autodesk Dreamcatcher. Хотя The Grid и Wix можно считать более-менее массовыми и понятными решениями. Да и та же Adobe регулярно добавляет функции, которые можно считать «умными» — например, последняя версия Photoshop может дорисовывать недостающую часть фотографии.

Ещё более интересный эксперимент с автоматическим созданием композиции Adobe сделали с Университетом Торонто. Приложение DesignScape помогает либо подкрутить макет по-мелочи, либо совсем перекомпоновать его.

За Adobe определённо стоит следить в этом плане — на недавней конференции MAX 2016 компания анонсировала внутреннюю платформу Sensei, которая использует машинное обучение и станет основой для будущих «умных» функций её продуктов. На старте говорится о распознавании и категоризации объектов на фото, определении шрифтов на изображении и подборе похожих, подборе близких по духу фотографий, сегментации аудитории и многом другом.
Хотя, как говорил John McCarthy, автор понятия «искусственный интеллект», «Как только сложная технология начинает просто работать, никто больше не называет её ИИ». Многие вещи, которые раньше казались технологическими прорывами в ИИ, теперь — само собой разумеющееся. Можно посмотреть на экспериментальные решения, более-менее близкие для дизайнеров веб-сервисов и мобильных приложений, и представить их частью повседневных продуктов:

• StyLit создаёт 3D-изображение из бумажного скетча.
• Microsoft научился дорисовывать часть иллюстраций и их анимации.

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

Польза и ограничения

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

Польза

Если смотреть на перспективу ближайших лет, а не далёкого будущего, то ценность более-менее понятна:

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

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

Проблемы и ограничения

Но все эти полезные вещи не так легко реализуемы или имеют свои ограничения:

• Речь пока идёт в основном про кастомные решения конкретных компаний под свои задачи. Их нужно не только создать, но также поддерживать и развивать — а всё это постоянные вложения времени и денег.
• Как показывает пример The Grid, сами по себе инструменты не могут сотворить чудес — без дизайнера «за рулём» они часто выдают посредственный результат. Впрочем, как и многие другие профессиональные инструменты.
• Сложнее выйти за пределы существующих стилей и решений — зачастую для этого нужно полностью отвязаться от существующих паттернов и правил, а алгоритмический дизайн основан на них.
• Упрощается клонирование чужого дизайна, если инструменту генеративного дизайна можно «скормить» ленту готовых работ на том же Dribbble.

И, конечно, встают этические вопросы — является ли такой дизайн ценным и самостоятельным? Не застрянет ли генерация вариантов в локальном максимуме? И кто вообще его автор? Но Oliver Roeder делает верное замечание о том, что алгоритмические инструменты создаются людьми на основе ими же придуманных теорий и концепций, с помощью правил и материалов, также созданных человеком; и этот список можно долго продолжать. Так что алгоритмический дизайн — такая же часть деятельности человека, только на новом уровне. Эта революция всё равно вовсю идёт, так что может быть стоит возглавить её?

Выводы

История красивая, но надо понимать, что алгоритмы строятся по чётко описанным правилам, пусть даже здорово прокачавшимся с помощью машинного обучения. Сила дизайнера именно в том, что он может сломать эти правила и задать новые, так что через год красивым будет считаться что-то совсем другое. Конечно, не все специалисты в нашей профессии сильны и алгоритмам будет несложно заменить ленивых. Но тем, кто умеет и соблюдать, и нарушать правила, открывается совершенно новый инструментарий и возможности.
Более того, сами продукты становятся всё сложнее — нам нужно поддерживать множество платформ, подстраивать интерфейсы под всё большее количество сегментов пользователей, проверять всё больше гипотез. Как говорит Harry West из frog, наша профессия прошла путь от дизайна объектов к дизайну experiences, а сейчас всё чаще занимается дизайном сложных систем. И вместо того, чтобы закидывать проблему всё большим количеством дизайнеров, лучше отгрузить часть рутины компьютеру. Пусть лучше он поиграет со шрифтами.

P.S. Сайт-коллекция

В дополнение к статье запустил сайт-коллекцию algorithms.design. Здесь собраны все примеры и материалы из статьи и презентации плюс то, что оставалось в заметках OneNote. Он будет пополняться регулярно (уже обогнал публикации по количеству ссылок), так что можно использовать как справочник. Кстати, он достаточно удачно разместился на Product Hunt.