Оффтоп Denis Shiryaev
13 980

Нейронная сеть дня: карта внимания пользователей для дизайнеров

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

В закладки

Давно хожу с мыслью, что компания вроде «Яндекса» просто обязана разработать алгоритм для веб-дизайнеров и облегчения их нелегкого труда. У компании есть гигабайты данных о пользователях: об их восприятии контента, о том, как человек буквально водит мышкой по экрану (Upd. тут я имел ввиду, что аналитика знает, что именно находится на экране, то есть алгоритмы которые существуют сейчас могут отличить кнопку от текста, и сделать определенные выводы, не обязательно следить куда пользователь мышкой повел, чтобы сделать вывод).

Представьте, что у вас есть аналитика миллиона сайтов, вы знаете, где какая категория сайта (магазин, СМИ, сервис и тому подобное), какие сценарии эти сайты покрывают, какие пути проделывают пользователи для достижения результата, с какими сложностями пользователь сталкивается. Всех этих данных должно хватить, чтобы алгоритм смог подсказать, как лучше расположить кнопки, сверстать текст и какие цвета подходят в это время года. В общем, найти «философский камень» среди UX/UI.

На Product Hunt я видел громкие заявления от проектов, которые пытаются разработать подобный сервис, но я в них не очень верю, так как в алгоритмах машинного обучения в нынешнем виде очень важны данные — датасет. Получить эти данные непросто: никто ими не делится, я об этом уже как-то писал у себя на канале в Telegram.

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

Попробуйте сами.

Ниже пара примеров от меня.

Исходный код доступен по ссылке.

#нейросетьдня

{ "author_name": "Denis Shiryaev", "author_type": "editor", "tags": ["\u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c\u0434\u043d\u044f"], "comments": 48, "likes": 31, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 29427, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 29427, "author_id": 34154, "diff_limit": 1000, "urls": {"diff":"\/comments\/29427\/get","add":"\/comments\/29427\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/29427"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

48 комментариев 48 комм.

Популярные

По порядку

Написать комментарий...
11

Кажется, что-то пошло не так.

Ответить
9

Внимание надо отслеживать по направлению взгляда.
Положение и динамика мыши - вообще не о том.

Ответить
0

Ну, скажем так, данные о направлении взгляда можно вшить в датасет — но можно учитывать и то и то, это так, нет проблем с этим

Ответить
4

Пример: для скролла текста колесом держу мышь в пустом месте, чтобы не возникали всплывающие подсказки. Значит ли это, что внимание читателя сосредоточено на полях?

Ответить
3

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

Ответить
2

Только будучи натренированной именно по такому датасету описанная нейросеть может быть реально полезной. А так это изящный случай GIGO (garbge in garbage out), в который хочется верить.
А для того, чтобы понять, что яркие элементы интерфейса привлекают внимание, нейросеть не нужна. Для этого вообще ничего не нужно, это просто факт.

Ответить

Комментарий удален

0

Так в вашем же примере есть клик, это и стоит учитывать в весах?

Ответить
1

То есть вы считаете, что R&D стоит прекратить и ребята из MIT зря опубликовали документ на arxiv.org?

Ответить
4

Я Вас умоляю, Вы что, в ВУЗе не учились? Исследовательские коллективы публикуют мегатонны в принципе занятной, но практически бесполезной информации о своей деятельности. Постоянно изобретаются велосипеды, а чаще просто делается любопытная чепуха. Это нормально. Это часть научного процесса (ну, в каких-то разумных пределах). Но далеко не каждое исследование достойно внимания.

Ответить
0

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

Ответить
3

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

Ответить
–1

Ну, является это или нет я тоже не знаю, для меня является, я даже пробовал какие-то макеты с работы прогонять, довольно наглядно — я работаю менеджером по продукту и мне интересна эта область, и какие-то решения на основе этого я тоже могу делать :)

То есть заголовок все же ближе к тому, что авторы сами о себе заявили

Ответить
5

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

Ответить
1

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

Ответить
0

Я могу дописать после этого этого пункта "условно" — но я имел ввиду, что аналитика знает что именно находится на экране, то несть алгоритмы которые есть сейчас могут отличить кнопку от текста, и сделать определенные выводы

Ответить
0

Выше написал. Яркие заметные элементы страницы привлекают внимание. Если для выявления таких элементов разработчику необходима аналитическая нейросеть, то ему стоит начать переживать за свои умственные способности.

Подобные инструменты нужны для выявления неочевидных моментов. А вот такового здесь не наблюдается, увы.

Ответить
0

Там в описании проекта сказано как это работает — с чего вы взяли про яркие элементы? Это на основе данных, мне кажется как первая версия имеет право на существование, учитывая тенденции ML в целом.

Ответить
0

Со скриншотов и с комментариев тех, кто потестировал.

Ответить
1

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

Ну вы уже поняли. Всё внимание на себя забрал советник, который в яндекс.браузере не отключается даже соответствующими скриптами на стороне сайта.

Ответить

Комментарий удален

5

Вы так спокойны, потому что видимо не в курсе, как активно яндекс выжимает с рынка онлайн магазины, которые тому же самому яндексу платят через директ и маркет.
А проблема советника в том, что качественные магазины работающие в долгую, на высококонкурентных рынках не демпингуют, потому что соблюдают условия работы с поставщиками. Слабые игроки, которые не справились с работой и избавляются от того, что не смогли продать, плюют на все договоренности и ломают рынок. Именно краткосрочным успехам слабых игроков яндекс и помогает.
Это ломает высококонкурентные рынки, снижая прибыль у качественных магазинов с долгосрочными планами, стимулируя к быстрой наживе "закупил, обманул, слил, ушел в другой сегмент, повторил".

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

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

Ответить

Комментарий удален

0

Браво, наконец-то это начали понимать.

Ответить
0

"Именно краткосрочным успехам слабых игроков яндекс и помогает." - ничего, скоро начнет помогать долгосрочным успехам сильных игроков, ну как только для Алиэкспресс переводчик команда их доделает...))

Ответить
0

Может статью напишите в «Блоги»? А то звучит так, будто проблема правда есть, а мало кто понимает ее масштаб — у нас редактор для всех доступен https://vc.ru/writing

Ответить
0

Ставьте блокирующие его скрипты на сайт
Через GTM обновлять их не проблема

Ответить
–1

Это только частичное решение. На разных сайтах используем 3 разных скрипта, полностью вопрос не решает ни один. Буду рад узнать, что какой-то упустили.

Ответить
–1

В прошлом использовал этот сервис - https://stopsovetnik.ru/, когда он еще был бесплатным.
Результаты были ощутимыми.
Тестировали с разных устройств, браузеров - везде был заблочен яндекс.советник.

Ответить
2

Я как-то за выходные уже сделал телеграм-бота с похожей идеей.
http://t.me/deepuxbot

Ответить
1

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

Ответить
0

Как по мне, есть значительная разница между тем на что пользователь фактически обращает внимание (глазами) и тем куда двигается курсор...порой это не синхронные вещи! Есть стартапы которые показывают более эффективную аналитику и собирают её с ЦА (вы высылаете портрет ЦА, они делают таргетирование объявление о проводящемся опросе в соц. медиа, к примеру и потом тестируют их с помощью инструментов отслеживающих движение зрачка на карте интерфейса). В Украине был такой, точно не помню название. Но в интернете есть куча бюджетны ай-трекеров, а так же - более продвинутых.

Ответить
1

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

Ответить
0

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

Ответить
0

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

Я уж не говорю о том, что классный сайт — супер субъективная вещь.

Ответить
1

"почему вы отвечаете не в ветку комментариев"

видя это, хочется напомнить, что говорить об адекватности многих здешних не приходится. Пусть где хотят, там и пишут)))

Ответить
0

И что хотят пишут )))

Ответить
0

та прям не говорите)))

Ответить
0

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

Ответить
0

Это я про машины слышал, про логистику, про пилотирование — мне кажется всему свое время, постепенно дойдем до этого.

Ответить
0

Подождём.

Ответить
0

Загрузил штук 20 различных изображений и скриншотов интерфейсов в сервис.
Получить какой-то необычный инсайт у меня не вышло.
Все стандартно по алгоритму - наиболее выраженные детали, и внимание от левого верхнего угла к правому нижнему.
Если у кого-то вышло получить что-то необычное, поделитесь, пожалуйста.

Ответить
0

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

У меня в вебвизоре был пример, где на совершенно неадаптированном сайте клиент 15 минут заказывал накидку с подогревом с iPhone 5S. У него что-то там слетало, перегружалось, не мог попасть в поля формы пальцем, но он её заказал, так как цена была реально лучше, чем у конкурентов. Что мне даст нейросеть в этом случае? Скажет снижать цены?)

Ответить
0

Хороший вопрос, если бы я нашел денег и команду для ML исследования этого вопроса, я бы на него ответил :) Могу предположить — что все эти баги можно алгоритмами обойти, то есть получился бы именно идеальный продукт работающий для всех, но это не значит, что это так и должно было бы быть в идеале.

Ответить
0

Короче что-бы понять что человек обращает внимание на текст, меню, картинки и кнопки, а не смотрит в пустоту, нужны научные исследования.

Ответить
0

Олег, мне кажется вы не понимаете как научные исследования работают и зачем их делают публичными.

Ответить
0

А что тут научного, горячие зоны вокруг текста, картинок, менюшек и т.д..

Ответить
0

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

Ответить
0

Юзабилити, интуитивно понятный интерфейс= качество, а эти исследования только с толку сбивать будут, если на то пошло я бы заинтересовался исследованиями когда 10 000 пользователям (100 не катит, это для британских учёных) показали 100 вариантов расположения кнопки купить (заказать, бронировать и т.д.) и посмотреть на результат, что они выбрали, это ещё может заинтересовать и всё равно вернётся к Юзабилити, интуитивно понятный интерфейс. Как-то так.

Ответить
0

Дело в том, что вы и я не знаем, что такое интуитивно понятный интерфейс в его истинном смысле — исходный кол проекта открыт, можно его натренировать на 10 000, вопрос желания

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления