{"id":14271,"url":"\/distributions\/14271\/click?bit=1&hash=51917511656265921c5b13ff3eb9d4e048e0aaeb67fc3977400bb43652cdbd32","title":"\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043d\u0430\u0442\u0438\u0432\u043e\u043a \u0438 \u0441\u043f\u0435\u0446\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432 vc.ru \u2014 \u043d\u0430\u0439\u0434\u0438\u0441\u044c!","buttonText":"","imageUuid":""}

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

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

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

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

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

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

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

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

0
48 комментариев
Написать комментарий...
Игорь Мыслинский

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

Ответить
Развернуть ветку
Фёдор Серяков

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Фёдор Серяков

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Kirill Pankin

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

Ответить
Развернуть ветку

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

Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Kirill Pankin

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Kirill Pankin

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

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

Ответить
Развернуть ветку
Kirill Pankin

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

Ответить
Развернуть ветку
Tony

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Kirill Pankin

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

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Kirill Pankin

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

Ответить
Развернуть ветку
Miha Vasilenko

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

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

Ответить
Развернуть ветку

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

Развернуть ветку
Miha Vasilenko

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

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

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

Ответить
Развернуть ветку

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

Развернуть ветку
Сорочан Владимир

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

Ответить
Развернуть ветку
Dmitry Rasakhatsky

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Delov Dmitriy

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

Ответить
Развернуть ветку
Miha Vasilenko

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

Ответить
Развернуть ветку
Delov Dmitriy

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

Ответить
Развернуть ветку
Arseny Kravchenko

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

Ответить
Развернуть ветку
Arseny Kravchenko
Ответить
Развернуть ветку
Dmitry Rasakhatsky

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

Ответить
Развернуть ветку
Maxim Justick

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Олег Холодков

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

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

Ответить
Развернуть ветку
Diana Korotina

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

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

Ответить
Развернуть ветку
Олег Холодков

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

Ответить
Развернуть ветку
Diana Korotina

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

Ответить
Развернуть ветку
Олег Холодков

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Олег Холодков

Подождём.

Ответить
Развернуть ветку
Delov Dmitriy

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

Ответить
Развернуть ветку
Александр Клинуев

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

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Олег Холодков

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Олег Холодков

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Олег Холодков

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

Ответить
Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку

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

Развернуть ветку
45 комментариев
Раскрывать всегда