Сайт-попрошайка как пример реализации генетического алгоритма для самопроизвольного улучшения дизайна сайта

Сегодня я поделюсь своей старой и довольно странной идеей, которая позволит веб-сайтам самостоятельно улучшать свой дизайн (без программиста или дизайнера), используя генетический алгоритм. Как компьютер определит, что один дизайн лучше (красивее) второго? Очень просто: ему достаточно руководствоваться принципом "Один дизайн лучше (красивее) второго, если его конверсия выше". Конверсия в данном случае - это процент тех, кто выполнил определенную цель (например, нажал кнопку "Купить") относительно всех пользователей, которые посетили данную страницу. Конверсию компьютер посчитать может.

Как компьютер (бездушная машина) может определить, насколько хорош дизайн?Скорее всего, БЭВМ (бездушной электронной вычислительной машине) чужды понятия "эстетика" или "красота", поэтому мы заставим эту машину считать одну веб-страницу более красивой, чем другая, если такая страница имеет более высокую конверсию, то есть такая страница более эффективно выполняет поставленные перед ней задачи.

Должен заметить, что такой принцип (в рамках разумного) следует применять и при разработке вообще любого дизайна. Это мое глубокое убеждение: дизайн чего бы то ни было должен максимально эффективно выполнять поставленные перед ним задачи, например, привлекать пользователей, заставлять их купить что-либо и т.д. Просто быть красивым с эстетической точки зрения дизайну абсолютно не достаточно. "Красивый дизайн" значит "эффективный дизайн", а "эффективный дизайн" - это не субъективная категория (как "эстетичный дизайн"), а объективная (не зависящая от чьего бы то ни было мнения, и четко измеримая).

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

 

Часть 1. Что такое генетический алгоритм

Не пугайтесь слова "алгоритм". Алгоритм - это набор команд, которые должны быть выполнены в определенной последовательности. Но что значит "генетический алгоритм"? Генетический алгоритм - это алгоритм, основывающийся на следующих биологических принципах:

  1. Естественный отбор
  2. Скрещивание особей
  3. Мутация

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

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

Популяция - набор особей (объектов). Определятся количеством содержащихся в ней особей, а также поколением.

Поколение - порядковый номер популяции. Например, если после скрещивания особей первой популяции (популяции первого поколения) возникли новые особи, то набор этих новых особей назовем популяцией второго поколения и т.д.

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

Ген - минимальная единица наследственной информации, которая определяет одно определенной свойство особи. 

Геном - набор всех генов одной особи.

Мутация - случайное изменение генома особи. Мутации позволяют улучшать популяцию и не дают им выродиться (то есть не дают им достичь предела, когда любое скрещивание создают новое поколение популяции ни чем не отличающееся от предыдущего).

Естественный отбор - процесс отбора особей из популяции, наиболее приспособленных к внешним условиям. При таком процессе более приспособленные особи выживают с большей вероятностью, чем менее приспособленные. Благодаря естественному отбору и будут появляться новые популяции, все более и более приспособленные к внешним условиям. Рассмотрим этот принцип на примере. В снежной местности есть 10 медведей: 5 бурых и 5 белых. Пусть эти медведи определяют первое поколение своей популяции. Можно предположить, что белым медведям охотиться проще, чем бурым, потому что их жертвам трудно распознать белого хищника на белом фоне. Отсюда ясно, что белые медведи более приспособлены к данным условиям и, скорее всего, они будут жить дольше и соответственно размножаться дольше. Будем считать, что при скрещивании особей разных цветов возникает 2 особи: одна белая и одна бурая (в данном примере не будем обращать внимание на существование доминантных и рецессивных генов). Несложно понять, что популяция определенного поколения будет содержать в себе намного больше белых особей, чем бурых. За все это отвечает естественный отбор. Но как осуществить программно такой процесс? 

Для осуществления программной реализации естественного отбора вводят так называемую фитнес-функцию. Правильный выбор такой функции - залог успешной работы генетического алгоритма. Немного усложним пример с медведями. Теперь будем считать, что при скрещивании двух медведей будут рождаться медведи, цвет которых определяется как среднее цветов родителей, например, если цвет одного родителя - rgb(0,0,0), а второго - rgb(255,255,255), то родятся дети с цветом rgb(127,127,127). В данном примере три составляющие - это три компонента цвета: красный, зеленый и синий.

Скрещивание в генетических алгоритмах

Так как действуют также и мутации (мы тоже их программируем, просто добавляя случайное изменение цвета), то финальный цвет детей будет примерно таким: rgb (127, 125, 132). Очевидно, что фитнес-функция должна "чаще убивать" особей, цвет которых сильнее отличаются от цвета "фона", чем у других особей. Так будем поступать и мы. Кстати, в примере с цветом медведей можно сказать, что набор из трех составляющих цвета - это геном нашего медведя, а каждая составляющая - это ген. 

Итак, разберем еще раз на примере медведей упрощенный генетический алгоритм:

  1. Задаем цвет среды, в которой обитают медведи.
  2. Создаем N медведей первой популяции. Каждому медведю случайным образом задаем геном, определяющий цвет медведя.
  3. Проводим естественный отбор: уничтожаем по какому-то нами придуманному закону больше тех медведей, цвет которых сильнее отличается от цвета среды и меньше тех, - цвет которых ближе к цвету среды
  4. Скрещиваем оставшихся медведей, получая новое поколение медведей (алгоритм скрещивания мы придумываем сами и наряду с фитнес-функцией он является очень важным для успешной реализации генетического алгоритма в целом). Примем, что дочерние особи будут получать 2 гена от одного родителя и 1 ген от второго. То есть, если было 2 родителя с геномами rgb(250, 120, 180) и rgb (230, 0, 255) соответственно, могут получиться дочерние особи, например, такие: rgb(250, 120, 255) или rgb(230, 120, 255) или какие-нибудь другие.
  5. Случайным образом произведем мутацию некоторых генов некоторых медведей.
  6. Возвращаемся к пункту 3 и повторяем цикл пока медведи не достигнут самого благоприятного цвета. Эволюция, товарищи!

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

 

Часть 2. Реализация сайта-попрошайки на основе генетического алгоритма

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

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

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

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

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

 

Часть 3. Выводы

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

При A/B-тестировании часто сравнивают влияние цвета и размера кнопок на конверсию (или другие конкретные параметры), а это достаточно узкая задача, с которой под силу справится моей попрошайке моему алгоритму. Я думаю он вполне способен повысить конверсию на несколько процентов. Да и вообще будет, наверное, забавно отвечать на вопрос клиента "Что, черт возьми делает огромная красная кнопка "Купить" на моем сайте?" такой фразой: "Все в порядке, кнопка просто немного мутировала".

До скорого!