Алгоритмічний дизайн

Я давно цікавлюся темою алгоритмічного дизайну і збираю матеріали і приклади на тему, але тема спливала від випадку до випадку. За 4 роки скупчився пара десятків прикладів і півдюжини статей у прив'язці до продуктового дизайну, але до цієї весни все це були скоріше окремі сплески без усякої системи.

Алгоритмічна дизайн

Роботи замінять дизайнерів?
Інтерес до теми виник у 2012 році, коли для одного з наших продуктів ми описували автоматизовану роботу журнальної верстки. Існуючий контент мав погану семантичну структуру, так що переверстати архів публікацій у сучасний вигляд було б витратним. Та й у цілому не кожен редактор володіє хорошими навичками дизайну. Для цього спеціальний скрипт робив парсинг статті і виходячи з її вмісту (кількість абзаців і слів у кожному з них, кількість фотографій і їх формати, врізки з цитатами і таблицями тощо) вибирав типової патерн для подання шматка статті в ефектному журнальному вигляді. Скрипт також стежив за тим, щоб патерни чергувалися і матеріал виглядав досить різноманітно. Таким чином редакція економить сили на переробці старого контенту в новий вид, а дизайнер просто регулярно додає нові модулі подання. Схожу модель нещодавно реалізував Flipboard.

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

The Grid

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

Творче партнерство
Але якщо вести мову про творче партнерство, коли дизайнер в парі з алгоритмами вирішує продуктові завдання — тут повно перспектив і хороших прикладів. Два роки тому нашумів інструмент для промислових дизайнерів Autodesk Dreamcatcher, який породив кілька публікацій на тему. А цієї весни майже одночасно вийшли дві епічні визначають статті, глибоко аналізують тренд, його передумови та майбутнє ролі дизайнера і інструментів. Це великий обсяг тексту, але його варто подолати, щоб залишатися релевантними в найближчі роки.

Creative AI

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

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


Автори проводять хорошу аналогію з генеративних мистецтвом — дизайнер визначає алгоритми, за якими формується твір, а далі вручну вибирає найбільш вдалі похідні. Якщо ж перебір буде не зовсім ручним, а комп'ютер допоможе ще і в фільтрування отриманого потоку — робота стане ще більш продуктивною і креативною. Вони запустили сайт Artificial Experience, напевно там з'явиться багато цікавого.

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

Taking The Robots To Design School

У другій частині Jon анонсує свій експериментальний інструмент Rene, який побудований на цих принципах. Він наводить у приклад імперативний і декларативний підходи до програмування і каже, що сучасний інструмент повинен рухатися по другу сторону — не покроковий опис алгоритму, а набір вхідної інформації і образ результату. Він на прикладі формул показує, як це працює в дизайні і вже підготував пару демонстрацій низького рівня для показу ідеї. Інструмент вже можна спробувати самому. Це зовсім ранній показ ідеї, але хід думок передає добре.



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

Екзо-кістяк для дизайнера
Перша з цитованих статей починає з історії використання комп'ютера як способу розширення людських можливостей. Алгоритмічний дизайн повинен стати таким собі «екзо-скелетом» для продуктового дизайнера, значно збільшуючи кількість і глибину пророблення рішень. Як можуть взаємодіяти продуктовий дизайнер і комп'ютер в такій зв'язці? Можна подивитися на загальний процес продуктової роботи:

  1. Вивчити простір проблем і взяти для вирішення ті, що дадуть максимальну цінність бізнесу і користувачам.
  2. Досліджувати простір рішень і вибрати ті, що найкраще закривають проблему.
  3. Зробити, запустити і поширити продукт, вирішальний обрану проблему.
  4. Оцінити ефективність обраного рішення на практиці і оптимізувати його.


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

Побудова інтерфейсу
Прості інструменти паблишинга начебто 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/). А приклад з автоматичним складанням сторінки статті я описував на початку.

Algorithmic design: How Vox picks winning a layout out of thousands

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

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


Підготовка графіки та вмісту
Створення однотипної графіки в різних варіаціях — одна із самих сумних частин роботи дизайнера. Це забирає багато часу і демотивує, при тому що ці сили можна було б витратити на більш осмислену продуктову роботу.

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

Дуже простий алгоритм підбору кольору, який працює

Інша справа, коли алгоритм готує всю композицію. Яндекс використовує генератор зображень для збірок на Маркеті. Маркетолог заповнює нескладну форму з назвою та ілюстрацією, а далі генератор пропонує нескінченна кількість варіацій, які відповідають гайдлайнам. Ще далі пішли в Netflix   їх скрипт вирізає персонажів для постерів, накладає тексти і робить автоматичні експерименти з усім цим. Справжня магія!

Extracting image metadata at scale

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

Prisma AI

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



Нові інструменти
Самі програми для дизайнерів також продовжують стрімко розвиватися і автоматизувати все більшу частину роботи. Це тема для окремої статті, але ось кілька свіжих прикладів:




Частина дизайн-системи
Мені здається, що оптимальним шляхом буде інтеграція таких алгоритмів в загальну дизайн-систему компанії. У своєму основному посиланні вона знімає з дизайнера основну частину навантаження з підтримки лінійки продуктів, забезпечуючи та гарантуючи уніфікований інтерфейс, а також спрощуючи запуск нових продуктів та підтримку існуючих. Сучасні дизайн-системи починалися з живих гайдлайнов, але все це перший крок — впровадження правил дизайну типових компонентів в код, з якого далі розробники все одно збирають сторінки руками. Другим повинна стати напівавтоматична зборка і тестування сторінок за певними правилами.



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

  1. За допомогою заздалегідь заданих правил і патернів генерується безліч варіантів дизайну.
  2. Результати фільтруються за якістю візуальних рішень та близькість до вирішення завдання.
  3. Дизайнер і менеджер продукту вибирають з них найбільш цікаві та адекватні, після чого доопрацьовують їх при необхідності.
  4. Один або кілька варіантів запускаються в спліт-тестування, за результатами залишається найбільш ефективний.


За такої моделі працює інструмент Autodesk Dreamcatcher для промислових дизайнерів, але і веб додатка більш динамічні, ніж статичні об'єкти. Як саме ми зможемо фільтрувати потік концептів у продуктовому дизайні, де сценарії використання так різноманітні — питання відкрите. Але ми займаємося генеративних дизайном на брейнштормах, коли малюються десятки ідей; або по ходу рішення задачі, коли макет багато разів допрацьовується. Так чому не віддати частину цієї роботи алгоритмів? Інструмент Rene від Jon Gold показує приклад реалізації такого підходу.

Autodesk Dreamcatcher

Висновки
Історія красива, але треба розуміти, що алгоритми будуються за чітко описаним правилам, нехай навіть здорово прокачавшимся з допомогою машинного навчання. Сила дизайнера саме в тому, що він може зламати ці правила і задати нові, так що через рік красивим буде вважатися щось зовсім інше. Звичайно, не всі в нашій професії сильні і алгоритмам нескладно буде замінити ледачих. Але тим, хто вміє і дотримуватись, і порушувати правила, відкривається зовсім новий інструментарій і можливості.

Більш того, самі продукти стають все складніше — нам потрібно підтримувати безліч платформ, підлаштовувати інтерфейси під все більшу кількість сегментів користувачів, перевіряти все більше гіпотез. І замість того, щоб закидати проблему великою кількістю дизайнерів, краще відвантажити частина рутини комп'ютера. Нехай краще він пограє зі шрифтами.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.