Сайты, которые дизайнят себя сами: как работает технология алгоритмического редизайна
Разбираем на юзкейсах, гифках и видео.
Адаптированный перевод публикации Websites Redesign Fully Automated из коллективного Medium-блога о дизайне Prototypr.
Часть 1: зачем нам это?
Ничто не стоит на месте, и время от времени возникает необходимость покопаться в оформлении или коде сайта, чтобы он выглядел актуально. Например, подобрать шрифты и цвета получше или заменить уже таки этот чертов Flash на HTML5. Как правило, у вас есть целый ряд поводов для хирургического вмешательства в дизайн сайта.
При этом тенденции сайтостроения подчинены своеобразному “закону Мура”: требования к технологиям и дизайн-тренды меняются все чаще.
В мире, где роботы прокладывают нам марштуры и делают за нас покупки на Amazon, было бы неплохо заиметь и “помощника”, на которого можно спихнуть рутину этих обновлений.
Даже если вы разбираетесь в своем движке и можете сделать всё сами (или знаете того, кто может), такой робот позволит вам ускорить процесс, сэкономить время и сосредоточиться на более важных, творческих моментах редизайна сайта.
Уровень современных технологий позволяет создать такого робота.
Генеративные алгоритмы, способные предлагать множество дизайн-концептов за минуты, уже применяются как в софте для профессионалов, так и в массовых сервисах вроде генераторов логотипов. Добавьте к этому прогресс в сфере компьютерного зрения и глубокого обучения нейроcетей, которые за последние годы доказали свою эффективность во многих сферах — в том числе, в сфере веб-дизайна. И идея не покажется вам такой уж невыполнимой.
Как именно мы можем автоматизировать процесс редизайна сайтов? Вот один из путей:
1. Импорт. Мы должны добиться быстрой загрузки и адаптации страницы под мобильные устройства, а также избавить сайт от старых технологий (если они были). Для этого мы можем распознать структуру и контент старой версии, а затем завернуть эти данные в более современный код.
2. Генеративный дизайн. Контенту на сайте нужна упаковка. Алгоритм поможет нам найти и быстро оформить несколько вариантов оформления, опираясь на:
- базовые правила: например, правило "если на сайте есть номер телефона, следует поставить его в шапку и сделать кликабельным",
- примеры различных компоновок, на которых он обучен,
- и контент старого сайта: набор текстовых блоков, картинок, файлов и т.д.
3. Выбор. Получив несколько новых вариантов компоновки контента и статических элементов дизайна, мы должны построить гипотезу о том, какой из них сработает лучше. Если речь идет о типовом сайте-визитке небольшого бизнеса, мы можем смоделировать “типичного посетителя” — и модель машинного обучения предскажет, какой дизайн скорее задержит посетителя на сайте.
Итак, первое, что нам нужно, это новая кодовая оболочка для контента, учитывающая требования к современному фронтенд-стэку и автоматически адаптрующаяся под смартфону. Такую оболочку могут предоставить конструкторы сайтов. Вы скажете, что конструкторы обычно используют для быстрого создания сайта с нуля. Но!
Основой для сайта служит контент, и его нужно брать из какого-то источника. Существующая в интернете страница о том же бизнесе - превосходный источник контента.
Это доказывают проекты вроде Pagevamp и uKit Alt, помогающие создать сайт из контента в соцсети: страница о вас в Facebook служит источником данных, конструктор дает оболочку для ее контент-копии, а алгоритм предлагает новое оформление. В общем, будущее где-то рядом. Просто в случае с веб-сайтами, ваш набор технологий несколько усложнится.
Часть 2: технологии для пересборки сайтов
Если в случае со страницей в соцсети мы постоянно сталкиваемся с похожими данными, взятыми из описанного разработчиками окружения, то подходы к верстке и дизайну сайтов менялись неоднократно. Да и сам контент, которые мы получим, может сильно разниться по количеству и качеству.
Алгоритму предстоит работать “в условиях неопределенности”. Для этого он должен быть обучаем.
При этом у нас есть три понятных шага: забрать контент, перекомпоновать его и выбрать версию для показа. Для этих 3 шагов нам нужны 3 системы, которые будут включаться в процесс последовательно. Наша команда уже разработала прототипы этих систем.
2.1. Компьютерное зрение: распознаем контент
Нередко при просмотре сайтов можно почувствовать себя настоящим археологом, раскапывающим "культуры" разных периодов сайтостроения.
Подходы к верстке и дизайну в девяностые и двухтысячные менялись, а исполнение могло быть разным по качеству. Из-за этого похожие по смыслу и функционалу элементы на разных сайтах могут быть выполнены по-разному. Человек поймет это за секунду.
Машина должна стать “чуточку” верстальщиком, который разберется, и как страница устроена внешне, и что написано в ее коде.
Сегодня эта система проходит закрытое тестирование: сейчас наш робот помогает экономить время фрилансерам, которые делают новые версии старых сайтов, импортируя их контент в кодовую оболочку конструктора uKit. Эти тесты помогают нам улучшить систему, получая обратную связь от людей.
2.2. Генеративный алгоритм: создаем новое на основе пользовательского контента
Многие сайтовладельцы проигрывают конкуренцию в вебе просто потому, что их сайты анешне застряли в 2000-х: сам контент может быть и превосходный, вот разбираться в нагромождении неудобной навигации и нулевого форматирования современный посетитель не готов, - ему проще закрыть вкладку и уйти на другой сайт.
Конверсия - пожалуй, главное ожидание любого бизнеса от собственного сайта.
Осовремененный дизайн - это логичный шаг к ее улучшению. Алгоритмы могут значительно ускорить этот процесс.
Это ключевая миссия всего проекта — не только переложить сайт на новую платформу, но и обновить его оформление в соответствии с базовыми правилами дизайна информации и текущими стандартами. Сегодня модуль пересборки сайтов существует в прототипе.
2.3. Скоринг: насколько красотивые страницы получилось создать у алгоритма?
Что ж, если до этого мы в чем-то повторяли работу специалистов, то на этом шаге пришло время проверять и оценивать результат этой работы.
Чтобы исключить менее удачные варианты и выбрать версию для показа, мы можем показать страницы эмулятору “мнения толпы” и узнать, что ей понравится.
Наша модель машинного обучения, которая оценивает различные сайты так, как это делают реальные люди, доступна в виде сервиса WebScore AI.
Модель обучена на оценках интернет-пользователей, собранных для 12 тысяч сайтов. Вы можете стать следующим её учителем, а также использовать, чтобы просто взглянуть на лендинг или магазин глазами типичного посетителя.
Часть 3: заглядывая в будущее
Давайте посмотрим, как может выглядеть весь цикл автоматической пересборки сайта:
Надеемся, вы найдете время присоединиться к тестированию проекта после запуска публичной беты.
У вас на сайте в презентации сайт моей мамы )
Мир тесен) Этот сайт мы увидели, когда готовили uKit Alt, ту штуку, которая собирает автоматом сайт из контента о компании в FB или VK - и он нам как-то запомнился и запал в душу. Насколько знаем, мама сайт обновила, да?
Да, она начинает осваивать ворд пресс.
Оценка 6,62
Этот сайт настолько хорош, что стоит незамедлительно рассказать об этом миру.Приятно!
Алиса, вы молодцы, получается. Также можно посравнивать сайты конкурентов своих или в какой-то нише: весьма занятно получается, бывает.
vc.ru
Оценено сегодня в 17:54
Оценка — 5.88
vc.ru хуже моего сайта? Ого!
немножечко не так)... ваш сайт лучше vc.ru)
Ну весьма неплохо, учитывая, что система натренирована на оценку магазинов, сайты-визиток и леднингов услуг/товаров, а не медиа)
4.33 только :( Ждем релиз софта тогда :)
Владимир, на сайте основного проекта есть подписка на бету - https://ukit.ai/ - а пока мы готовимся, то периодически шлем всякие интересные сервисы для дизайна с помощью ИИ, ну и рассказываем, как это устроено в деталях.
http://podhod.ru
Оценка — 8.31. Нейросеть пока не отнимет мое рабочее место дизайнера? )
Если серьезно — а есть сайт который выдаёт 10 баллов? Хотел бы посмотреть какой критерий «идеального» сайта.
Владимир, ну вот главная сайта Apple одно время оценивалась нами на 10-ку - а потом они внесли изменения, оценка подупала)
Система реагирует на изменения в оформлении сайта, а критерии, которыми она пользуется - их сейчас более тысячи, причем часть алгоритмичны, а часть вывела нейросеть (и мы о них не до конца все сами знаем).
И нейросети не отнимают работу у верстальщиков и дизайнеров) Это и недавнее исследование Bloomberg об автоматизации труда показывало, например. Наоборот, мы надеемся, что дизайнеры подружатся с ИИ.
И не только мы так думаем - вот целая подборка кейсов от разных проектов и компаний https://spark.ru/startup/ukit-ai/blog/31532/kak-nejroseti-podruzhat-zakazchikov-i-dizajnerov-razbiraem-zhiznennie-situatsii
У нас 8.48 ))))
Круче чем сам webscore.ai )))
Комментарий удален модератором
Он задизайнил себя сам, сам нагнал себе траффик, сам вышел на монетизацию, сам привлек инвестиции, сам себя продал Гуглу, перевел деньги Васе Пупкину и сам закрылся. Потому это был очень умный алгоритмический дизайн (с) баян про хорошего продавца.
Сергей, летом на VC была занятная статья о том, как автоматизация и такие вот цифровые помощники тихой сапой уже помогают людям на каждом из описанных вами этапов, и как эти сервисы можно комбинировать https://vc.ru/26778-ai-site-assistant
Мехман, здравствуйте: в проекте используется нейросеть, мы предварительно идем и проверям, есть ли что-то по предложенной ссылке, чтобы не нагружать сервер лишний раз - домен разделегирован, опечатка в адресе, случаи могут быть разные.
Если проблема была не в этом, надеюсь, вы не против - постучусь в личку за деталями.
p.s. И это вы еще сайты из списка РКН не пробовали проверять ;)
Если такой то набор виджетов в определенном порядке даёт значимый статистический результат на одном сайте, это же не значит, что это будет полезно для другого?
Средний сайт имеет небольшую посещаемость. Хватает ли таких данных для значимых результатов в АБТ?
Дмитрий, клевый вопрос. Смотрите, да, планируем создавать несколько компоновок одного сайта под разные сегменты и помогать тестировать их на реальном трафике, подстраиваясь под общие знания о сегменте. При этом нам нужны данные об аудиториях - их можно покупать у DMP, плюс сама компания работает с 3,8 млн сайтовладельцев непостредственно. Это концепт продукта в версии 2.0.
Но для начала многие сайты банально не мешало бы привести к общему знаменателю в плане находимости информации и свежести технологий. Тут все же есть базовые человеческие требования к компоновке - выполнив их, мы уже можем улучшить ситуацию: показать это в т.ч. через триал новой версии - старая же никуда не исчезнет, человек сможет понять в сравнении.
Спасибо.
Честно потратил несколько минут, изучая блог и сайт, но так не нашёл примеров таких сайтов. Могли бы сюда скинуть ссылки?
Дмитрий, спасибо, что почитали наш блог. Пока проект в закрытом режиме, мы как в детской песенке с "и помажем, и покажем" - а ссылки не спалим) Но вот в сравнении скриншоты:
Скажем так, это не про дизайн, а про оформиловку и структуру…
Виталий, привет, рад видеть в нашем посте знакомых по фб)
Думаю, мы рискуем углубиться в дебри философии, но - а что есть дизайн сайта как не структурирование, а затем и оформление некоего набора информации? Интересно будет услышать твое определение.
Дизайн сайта это совокупность разных аспектов. В точности — дизайн это «как это работает».
Т.е. это и текст и маркетинг и редактура и размещение блоков и фотки, видео и доверительная информация о компании и визуальная составляющая.
При чем — если один из аспектов не проработан — всё может не работать.
Как ИИ может сделать доверие, не общаясь с клиентом?) Разве что«делегировать» ему часть работ по графике, но тогда ИИ надо обучать по графичекому дизайну)
В ином случае это будет лишь «качественное» случайно оформление. Лишь небольшой элемент.
Спасибо за статью.
А на основе каких данных и критериев определяется удачность полученного дизайна?
Как видно на примере https://webscore.ai/ - мы обучаем модели, которые эмулируют реакцию будущих посетителей. В планах также использовать прогноз распределения внимания - т.е. строить прогнозную тепловую карту (тут недавно на пощупать свой проект выложили MIT - visimportance называется, например).
У меня на сайте 6.2 балла оценка вашим сервисом, это хорошо? Что это вообще значит
Иван, там есть маленькая приписочка в оценках на этот счёт)
Базово оценка значит следующее: если бы мы запустили на вашу страницу пару десятков человек, а потом попросили их увиденное оценить по шкале от 1 до 10, то средняя оценка была бы на уровне 6,2. То есть, люди бы не стали уходить с сайта сразу вероятнее всего, походили бы - но вам есть куда расти. Сейчас модель калибруется на предмет аномалий в оценках, дальше начнет давать рекомендации, куда именно и как расти) То есть, к коллективному мнению толпы добавятся уже практические рекомендации, что можно улучшить на вашем сайте.
На мобильной версии приписок не заметил, интересно, держите в курсе обновлений :)
Иван, спасибо за фидбек, - ну и на сайте основного проекта (https://ukit.ai/) можно подписаться на обновления проекта: а заодно мы пишем в рассылках о технологиях и инструментах генеративного дизайна.
Интересный проект, но насколько сгенерированный код остается поддерживаемым? Будет ли он понятен разработчику который хочет что то новое прикрутить? И вполне вероятно сгенерированные вашим продуктом сайты будут очень похоже выглядеть.
Никита, спасибо за вопросы. Отвечу по очереди.
Про код - в данном случае, мы оборачиваем контент и данные в соответствующие виджеты конструктора uKit, т.е. в кодовое окружение, оптимизируемое и поддерживаемое командой разработчиков. И написанное людьми) Собственно, сам код уже можно посмотреть.
Ребята серьезно занимаются оптимизацией контента и кода сайтов в параллель с разработкой новых фич - от авто-оптимизации тяжелого контента вроде картинок до сокращения объема JS и CSS кода на странице в принципе.
Например, сейчас в среднем странички получают 80 из 100 от Google Pagespeed Insights, а вы знаете, система требовательна к коду.
А что касается второго вопроса - все хорошие сайты в чем-то похожи: на них удобно считывать информацию благодаря подобранным комбинациям цветов, шрифтов, контрастнсти и пр, на них понятно, что сделать, чтобы получить результат, ради которого мы на них и пришли.
По сути, я описал правила "хорошего тона" - и нужно системе преподать их. А уж она сама будет искать, как применять их к разным ситуациям - и разным объемам и комбинациям контента. В этом и прелесть технологии генеративного дизайна - вот на wiki хорошо описано https://ru.wikipedia.org/wiki/%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD
Ну или наглядно - вот генеративный алгоритм от Autodesk подбирает дизайны корпуса для дрона в их софтинке для инженеров-проектировщиков: вроде бы все предложенные формы в чем-то похожи, их можно описать некими правилами. А в то же время - какждая выглядит отлично от других в деталях.
не очень понял, что же является хороших сайтом для системы. но бету буду ждать, любопытно весьма
Если речь про сам WebScore AI, то у него есть как набор из 125 предзаданных параметров оценки в 15 категориях (начиная с верного отображения на популярных экранах, микроразметки и заканчивая оценкой контрастности фона, форматирования и пр), так и набор из порядка тысячи высокоуровневых признаков, выявленных нейросетью и используемых алгоритмом для доуточнения оценки. Детали можно найти здесь: https://ukit.ai/ai-evaluates-websites
Описать хорошую страницу сайта по мнению алгоритма - сложно, да проще увидеть: вот гифка, надеюсь, отобразится верно.
На сайте проекта есть примеры сайтов с оценками от 9+ до 1 с копейками, по версии системы. Причем в разных языковых версиях примеры разные. Ну и они хорошие или плохие на момент времени - система реагирует на изменения на сайте. Например, в один момент она котировала "морду" Apple на 10, а сейчас они сменили часть графики - и оценка снизилась где-то до 8.
Благодаря читателям с VC обнаружили одно занятное свойство сервиса - мы еще и непреднамеренно умеем проверять, не истекли у вас SSL-сертификат)
Комментарий удален модератором