- Вамсри Кришна С, Сатья Кришнан Суреш
Мысли о статье: sat_articles
Аннотация:
дизайн большинства веб-сайтов, который мы используем сегодня, статичен и одинаков для всех пользователей. В процессе принятия решения о дизайне проводится значительный объем анализа, но дизайн не обязательно должен охватывать всю пользовательскую базу веб-сайта. Дизайн веб-сайта может выглядеть хорошо для одного пользователя, в то время как для другого пользователя может быть трудно найти важную информацию на веб-сайте из-за его дизайна. Мы хотели найти решение с использованием машинного обучения, чтобы сделать дизайн веб-сайтов динамичным, чтобы дизайн веб-сайта настраивался для конкретного пользователя, и он / она мог легко использовать веб-сайт.
Идея:
Чтобы настроить дизайн веб-сайта для каждого пользователя, веб-сайт должен внести небольшие изменения (например, изменить размер шрифта, стиль шрифта, положение важной информации, цвет и т. д.) для первый раз, когда пользователь входит в систему. Веб-сайт отслеживает время, затрачиваемое пользователем на получение информации, которую он/она ищет. Используя время отклика вместе с некоторой другой информацией, которую пользователь мог предоставить при создании учетной записи, такой как возраст и т. д., веб-сайт должен иметь возможность найти дизайн из уже доступных дизайнов, который удобен пользователю.
Чтобы реализовать вышеуказанную идею, мы разработали целевую страницу веб-сайта, который, как вы ожидаете, будет посещать много людей — веб-сайт больницы. Затем мы внесли изменения в цвет и расположение некоторой информации в дизайне, чтобы следить за временем отклика. Всего было использовано 25 различных дизайнов. Ознакомиться с дизайнами можно нажав здесь.
Процесс сбора данных.
Мы встретились с каждым из авторов данных и по очереди показали им фотографии 25 разработанных веб-сайтов. Их целью было добраться до кнопки «Просмотреть результаты теста». Кнопка была размещена случайным образом, и цвет веб-сайтов также был изменен случайным образом. Мы рассчитали время, которое потребовалось каждому из них, чтобы достичь цели. Другие характеристики, такие как пол, возраст, положение, используемое устройство, также были отмечены.
Описание собранных данных:
Используемые здесь данные были получены от наших друзей и членов семьи. Посмотрим на собранные данные.
Набор данных состоит из 32 признаков. Первые три функции являются стандартными функциями, которые вы всегда хотели бы иметь при разработке веб-сайта: возраст, расстояние и устройство. Следующие 25 столбцов содержат время, затраченное пользователем на достижение целевого столбца для каждого дизайна. Следующие четыре столбца сообщают нам, носит ли пользователь очки, положение устройства, когда пользователь использовал веб-сайт, пол и среднее время всех показаний.
Проделанная работа над набором данных:
Хотя объем собранных данных невелик, мы все же смогли извлечь из них некоторую полезную информацию. Распределение времени отклика — это то, что позволило бы нам взглянуть на уровень комфорта, который каждый пользователь имеет для конкретного дизайна. Взгляните на следующий сюжет.
На приведенном выше графике показано распределение времени отклика для различных конструкций. Сначала давайте проанализируем изменение времени отклика в зависимости от используемых цветов. Для этого посмотрите на участок построчно. Большинство из них имеют нормальное распределение, указывающее на то, что некоторые конструкции имеют один и тот же «коэффициент простоты» или «коэффициент удобства», не зависящий от других характеристик. Одно интересное наблюдение — время отклика для розового цвета. Распределение не нормализовано и оно повсюду. Хотя у других цветов есть один или два графика, на которых распределение не нормализовано, но это более очевидно для «розового» цвета.
Теперь давайте проанализируем сюжет относительно используемых позиций. Для этого посмотрите на график по столбцам. Графики распределения времени отклика, когда кнопка находится в центре и в верхнем правом положении, распределяются нормально, и кажется, что почти все могут быстро идентифицировать кнопку. . А вот при сюжете остальные позиции распределяются хаотично. Это очень важно для данного исследования, потому что оно нацелено на предпочтительный дизайн каждого отдельного пользователя.
Взяв среднее время отклика для каждого цвета и положения для каждого пользователя, мы нашли их предпочтительный цвет и положение. На следующем графике показано количество для каждого цвета и позиции.
Из приведенного выше графика мы можем сделать вывод, что «темно-синий» — это цвет, который предпочитает большинство пользователей. Низкое значение для «розового» цвета соответствует выводу, который мы получили из предыдущего графика. Мы можем подтвердить это, взглянув на график распределения «DB_TL». График приведен ниже, и вы можете ясно видеть, что распределение смещено влево, что указывает на то, что для этой комбинации люди смогли достичь целевого местоположения раньше. Некоторые из них даже сказали нам, что им понравился темно-синий цвет.
Изучив полученную информацию, мы хотели узнать количество образцов, которые предпочли эти два сочетания, но мы нашли только два, и их характеристики очень похожи. Оба они мужчины, не носят очков и одного возраста. Это интересно, потому что это еще раз говорит нам о том, что каждому пользователю нужен дизайн, настроенный только для него.
Выводы, полученные до сих пор, были основаны на сочетании цвета и положения, поэтому давайте рассмотрим их по отдельности. Первый график соответствует полученным нами выводам, но на втором графике время отклика для TR (вверху справа) меньше, чем для TL (вверху слева) и 'BR' (внизу справа) даже нет на картинке. Это говорит о том, что время отклика для «TL» мало только при использовании с «DB» (темно-синий). Из этого сюжета можно сделать много выводов, но мы оставляем это читателю.
Сложность разработки хорошей модели:
Здесь мы использовали библиотеку scikit-learn для использования различных доступных моделей классификации. Здесь есть два целевых столбца — цвет и позиция. Базовые модели классификации, такие как логистическая регрессия, SVC, RandomForest, DecisionTree, KNeighborsClassifier. Точность различных моделей показана ниже.
Оценка точности каждой модели действительно плохая. Но не стоит пугаться этого факта. Это ожидаемый результат. На это есть две причины. Во-первых, объем собираемых данных очень мал. Вторая причина заключается в том, что вы не можете ожидать, что простая модель без настройки гиперпараметров сможет понять сложную структуру этого небольшого набора данных. Время отклика в большинстве случаев различается на 0,01 секунды, а в некоторых образцах оно имеет одинаковое значение, но отличается предпочтительным цветом и дизайном. Чтобы получить хорошие показатели точности, должно быть как минимум миллион образцов, и, безусловно, нужно использовать нейронные сети, возможно, с двумя или более слоями активации, чтобы понять сложность лежащего в основе паттерна. Полный код можно посмотреть здесь 15 февраля.
Модель решения.
Прочитав предыдущий раздел, вы можете подумать, что найти решение будет очень сложно, и да, выполнение микросегментации для настройки дизайна для каждого пользователя — это сложная работа, но мы придумали одну идею, которая может быть осуществима для групп пользователей. Во-первых, мы пытаемся сгруппировать доступные тестовые образцы. Причина этого в том, чтобы разделить огромный набор данных на отдельные похожие сегменты, которые будет легче анализировать и тестировать на них разные модели. Как только мы получим достаточно информации о каждом сегменте. мы попытаемся соединить сегменты, как мы делаем в агломеративной кластеризации. А затем мы пробуем разные модели, которые мы уже разработали для небольших сегментов, которые мы ранее проанализировали. Если модели работают хорошо на комбинированных сегментах, то мы можем объединить два двухсегментных и продолжить тестирование. Если это не работает хорошо, мы распространяемся назад. Это чем-то похоже на концепции «прямой связи» и «обратного распространения» в нейронных сетях, и поэтому ранее мы рекомендовали модель нейронной сети.
Будущее этой идеи.
Мы тщательно искали веб-сайт, на котором уже реализована эта идея, но ничего не нашли. Мы нашли только пару небольших статей. Есть много компаний, которые используют AI и ML для разработки новых цветов и шрифтов. Эту идею могут реализовать только веб-сайты с миллионами пользователей, такие как Instagram, Twitter. Потому что у них есть рабочая сила для сбора данных и их тщательного анализа. После того, как цвет и позиции были автоматизированы, можно автоматизировать стиль шрифта, размер шрифта и все остальное. Настройка веб-сайта для отдельных пользователей увеличит их использование веб-сайта, и вы можете ожидать много новых пользователей.
Заключение.
В этой статье мы много говорили и немного реализовали, но мы постараемся провести дополнительный анализ в будущем по мере роста размера собираемых нами данных. Мы надеемся, что вы получили такое же удовольствие, как и мы, работая над этой статьей. Если вы нашли эту статью полезной, хлопайте, оставляйте комментарии и подписывайтесь.
Отзыв доктора К.Индиры, директора группы учреждений ES, Виллупурам:
Оптимизация веб-дизайна с помощью машинного обучения — очень новаторская работа, посвященная перспективам динамического веб-дизайна. Выбранные функции набора данных оптимальны и близки к выбранной работе. Хотя показатель точности не соответствует требованиям, как указано авторами, улучшения можно добиться за счет увеличения размера набора данных и тщательного анализа выбранных параметров. Срок и время входа пользователей в систему требуют большей ясности, а возможности для будущих улучшений очень обширны.
🟠 Станьте писателем на MLearning.ai
