В чем заключается алгоритмический дизайн и проектирование объектов в built environment

Генерация интерфейсов, лиц и городов: новости алгоритмического дизайна

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

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

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

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

Ещё один плагин генерирует правдоподобные лица несуществующих людей. Отдельный сайт от тех же авторов (есть похожие про котов и жильё).

Как обычно, генераторов чего угодно выше крыши.

1. Интересное сообщество Ganbreeder, где участники ремикшируют работы друг друга до бесконечности с помощью алгоритмического дизайна.

2. Симулятор вождения от Nvidia, в котором вполне реалистичный город сгенерирован с помощью алгоритмического дизайна.

3. Ещё один генератор правдоподобных лиц может работать на основе вашей фотографии — можно менять выражение лица и другие характеристики.

И просто материалы для расширения кругозора и изучения предметной области.

Издательство Harvard Business Review Press выпустило в марте 2018 года книгу Пауля Догерти и Джеймса Вильсона “Human + Machine” о влиянии технологий искусственного интеллекта на рабочий процесс. Пабини Габриэль-Пети сделала неплохой обзор для UXmatters.

Толковая презентация Джоша Кларка о роли алгоритмического дизайна и том, какие работы заменят роботы, а где лучше справляется человек.

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

Источник

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

Я давно интересуюсь темой алгоритмического дизайна и собираю материалы и примеры на тему, но тема всплывала от случая к случаю. За 4 года скопилась пара десятков примеров и полдюжины статей в привязке к продуктовому дизайну, но до этой весны всё это были скорее отдельные всплески безо всякой системы.

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

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

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

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

Творческое партнёрство

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

Первая публикация от Roelof Pieters и Samim Winiger во всех деталях изучает историю компьютеров, как помощников дизайнеров. Они выделяют три уровня развития инструментов:

Авторы проводят хорошую аналогию с генеративным искусством — дизайнер определяет алгоритмы, по которым формируется произведение, а дальше вручную выбирает наиболее удачные производные. Если же перебор будет не совсем ручным, а компьютер поможет ещё и в фильтрации получившегося потока — работа станет ещё более продуктивной и креативной. Они запустили сайт Artificial Experience, наверняка там появится много интересного.

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

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

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

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

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

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

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

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

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

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

Vox Media сделала в своей CMS Chorus механизм сборки главной страницы по схожей модели. Из большой коллекции паттернов представления статей, видео, сюжетов и других материалов алгоритм сначала собирает в принципе гармоничные варианты, а затем оценивает их потенциальную эффективность и выбирает оптимальный. Это оказывается гибче и эффективнее, чем ручная работа редактора, что доказывает и опыт рекомендательных систем вроде Relap.io (https://relap.io/). А пример с автоматической сборкой страницы статьи я описывал в начале.

Отдельная тема — получение данных о том, как строить интерфейс. Красивые вещи рассказывают те, кто работает с большими данными и умеет кластеризовать их в инсайты. Например, Airbnb научились прогнозировать цену в определённом городе в определённый сезон, так что пользователям проще задать конкурентоспособный тариф. А про рекомендательные механизмы Netflix ходят легенды.

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

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

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

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

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

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

Новые инструменты

Часть дизайн-системы

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

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

По такой модели работает инструмент Autodesk Dreamcatcher для промышленных дизайнеров, но веб и приложения более динамичны, чем статические объекты. Как именно мы сможем отфильтровать поток концептов в продуктовом дизайне, где сценарии использования так разнообразны — вопрос открытый. Но мы и так занимаемся генеративным дизайном на брейнштормах, когда рисуются десятки идей; или по ходу решения задачи, когда макет много раз дорабатывается. Так почему не отдать часть этой работы алгоритмам? Инструмент Rene от Jon Gold показывает пример реализации такого подхода.

Выводы

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

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

Источник

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

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

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

Одним из самых ярких и заметных примеров алгоритмического дизайна стала нашумевшая 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.

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

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

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

Алгоритм может взять на себя простые вещи вроде подбора цвета. Например, в 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 во всех деталях изучают историю компьютеров, как помощников дизайнеров. Они выделяют три уровня развития инструментов:

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

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

Анализ

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

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

В таком сценарии специалист выступает куратором алгоритма и может добавлять или снимать ограничения. А получившиеся решения компьютер может проверить в ходе экспериментов с реальными пользователями — получается цикл постоянной обратной связи. Хотя сложность этой работы предполагает, что ей занимается скорее аналитик, дизайнеры должны быть в курсе основных принципов машинного обучения. Хорошую мини-книгу на эту тему недавно выпустили O’Reilly.

Синтез

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

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

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

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

Эксперименты 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, автор понятия «искусственный интеллект», «Как только сложная технология начинает просто работать, никто больше не называет её ИИ». Многие вещи, которые раньше казались технологическими прорывами в ИИ, теперь — само собой разумеющееся. Можно посмотреть на экспериментальные решения, более-менее близкие для дизайнеров веб-сервисов и мобильных приложений, и представить их частью повседневных продуктов:

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

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

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

Польза

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

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

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

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

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

Выводы

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

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

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

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

Источник