Яндекс.Картинки сегодня сделали важный шаг в своём развитии и в развитии поиска по картинкам. Результаты поиска теперь не будут просто набором картинок по заданным вами словами. Теперь в результатах некоторые изображения могут быть объединены вместе. Мы называем это «сериями».
«Серии» — это изображения, которые встречаются в интернете вместе и визуально похожи. За подбор картинок отвечает алгоритм иерархической кластеризации. Он берёт все изображения с той или иной страницы и выделяет группу похожих — тех, которые обладают общим цветом, формой, деталями и так далее. Если на странице есть хотя бы четыре похожих (но не одинаковых) картинки, то они образуют Серию.
Читайте под катом, почему у нас возникла идея делать Серии, как мы придумывали их дизайн и реализовывали алгоритм.
Привычное для всех представление картиночных результатов поиска — это страница, заполненная сеткой тумбнейлов. Прокручивая её вниз, вы обычно видите новые автоматически подгружающиеся миниатюры изображений. Но иногда для ответа на вопрос не достаточно одной или даже двух картинок — нужно больше изображений. И было бы хорошо, если бы они были связаны между собой.
Для чего это нужно? Например, чтобы научиться складывать оригами дракончика, вам наверняка захочется посмотреть картинку с каждым шагом. Нужно несколько изображений и в том случае, если вы хотите рассмотреть автомобиль с разных сторон. И, наверное, будет отлично, если это картинки из одного обзора.
Чтобы понять, какие ещё могут быть сценарии у серий, мы проводили глубинные интервью. Одна девушка рассказала, что серии ей бы помогли быстрее найти три картинки для фоторамки на кухню. Ей было важно, чтобы все они были со специями и в одном стиле, потому что у неё специальная рамка для трёх изображений.
Была также студентка, которая рассказывала, что инструкции в картинках ей помогут изучить фотошоп. Видеоинструкции слишком сложны для новичка, а картинки с пояснениями — самое то. Мы говорили и с мужчиной, рассказывавшим, что совсем недавно он искал инструкцию с картинками о том, как починить потекший кран. По нашим данным, чтобы решить такие задачи, примерно 13% пользователей через картинку ищет страницу, на которой есть подробная информация.
Благодаря количественным опросам, мы знаем, что 70% пользователей периодически нужно найти инструкцию, у которой должны быть иллюстрации, а у 20% такая потребность возникает каждую неделю. Эта статистика подтверждается и запросами — 9% всех запросов к поиску по изображениям Яндекса связаны с поиском инструкций. И они бывают на абсолютно разные темы.
В процессе обсуждения этой проблемы у нас родился проект «Серии». Мы стали думать, как отбирать изображения, чтобы получить не только релевантный, но и красивый ответ, который бы дополнил выдачу картинок.
Благодаря интервью с приглашёнными пользователями, UX-тестированию, множеству обсуждений внутри команды и данных беты во внутренней сети Яндекса, мы выстроили у себя более стройное понимание такой возможности и сформулировали некоторые требования.
Например, изображения должны быть с одной страницы, чтобы пользователь мог перейти на неё и узнать больше, — увидеть весь репортаж, почитать пояснения, пойти по другим разделам сайта. Это улучшает навигационный сценарий, в котором пользователь ищет сайт через картинку.
Серия особенно полезна, когда выделяет один объект, шаги одного мастер-класса или фотографии, сделанные в одном стиле (конкретная фотосессия, одежда из одной коллекции и т.п.). Но алгоритм делает это только для страниц без агрессивной рекламы и вирусов. На глубинных интервью и UX-тестировании мы столкнулись с тем, что пользователи очень негативно реагируют на избыточную рекламу и выпрыгивающие попапы. Поэтому решили исключить такие страницы из кандидатов на серийные.
Сгруппируем картинки в серии похожих в рамках страниц, на которых они встречаются вместе. То есть, если на странице www.example.com встретились картинки
www.example.com/1.jpg,
www.example.com/2.jpg,
www.example.com/3.jpg,
www.example.com/4.jpg,
попробуем объединить их в серию.Серия — это группа картинок, которые попарно визуально похожи друг на друга.
Мы хотим кластеризовать эти картинки по визульной схожести. То есть найти подгруппу картинок, которые достаточно похожи между собой. Кластеризовать будем с помощью жадного алгоритма иерархической кластеризации. По-английски этот алгоритм называется complete linkage clustering using nn-chain algorithm. Чтобы прийти к успеху, нам понадобится метрика похожести картинок, кластеризация с помощью которой давала бы кластера-группы с нужными нам свойствами.
Что это за свойства?
Для того чтобы что-то похожее получилось, мы выбрали три вида дескрипторов:
Описания можно найти, например, в стандарте mpeg-7. У нас свои быстрые и эффективные реализации.
На основе этих дескрипторов вычисляется визуальная похожесть, как максимум по визуальной похожести по отдельным дескрипторам. Это позволяет удовлетворить первые три хотелки. Чтобы учесть размеры, мы вычитаем из визуальной похожести отношение площадей картинок (max/min). На основе этой метрики мы и осуществляем кластеризацию.
В процессе работы мы поняли, что серийные картинки на выдаче должны выглядеть единым блоком — это новое представление ответа Яндекса. Самым важным в дизайне было сделать так, чтобы серии картинок были заметны.
С момента начала работы над проектом мы перепробовали около десятка разных вариантов дизайна. Три из них прошли тестирование как на внешних пользователях, так и на наших коллегах.
Мы увидели, что внешне пользователям нравится больше один дизайн.
Но понятнее им другое представление, и с ним они больше взаимодействуют.
В итогом варианте мы учли лучшее из обоих вариантов.
Ещё мы заметили, что важно показать людям, когда открылась серия и когда закончилась. Так появился финальный вариант с информацией и блоком шаринга.
Серии будут очень удобны тем людям, которые ищут пошаговые инструкции, в которых картинки важнее текста: как сделать оригами дракона, как нарисовать кошку, мастер-класс по декупажу, как сменить или найти упражнения для трапеции.
С ними легче искать похожие по стилю изображения — картины одного художника или подборки фотографий из одной фотосессии. Ещё они помогут рассмотреть с разных сторон автомобиль, товар или достопримечательность.
«Серии» — это изображения, которые встречаются в интернете вместе и визуально похожи. За подбор картинок отвечает алгоритм иерархической кластеризации. Он берёт все изображения с той или иной страницы и выделяет группу похожих — тех, которые обладают общим цветом, формой, деталями и так далее. Если на странице есть хотя бы четыре похожих (но не одинаковых) картинки, то они образуют Серию.
Читайте под катом, почему у нас возникла идея делать Серии, как мы придумывали их дизайн и реализовывали алгоритм.
Привычное для всех представление картиночных результатов поиска — это страница, заполненная сеткой тумбнейлов. Прокручивая её вниз, вы обычно видите новые автоматически подгружающиеся миниатюры изображений. Но иногда для ответа на вопрос не достаточно одной или даже двух картинок — нужно больше изображений. И было бы хорошо, если бы они были связаны между собой.
Для чего это нужно? Например, чтобы научиться складывать оригами дракончика, вам наверняка захочется посмотреть картинку с каждым шагом. Нужно несколько изображений и в том случае, если вы хотите рассмотреть автомобиль с разных сторон. И, наверное, будет отлично, если это картинки из одного обзора.
Чтобы понять, какие ещё могут быть сценарии у серий, мы проводили глубинные интервью. Одна девушка рассказала, что серии ей бы помогли быстрее найти три картинки для фоторамки на кухню. Ей было важно, чтобы все они были со специями и в одном стиле, потому что у неё специальная рамка для трёх изображений.
Была также студентка, которая рассказывала, что инструкции в картинках ей помогут изучить фотошоп. Видеоинструкции слишком сложны для новичка, а картинки с пояснениями — самое то. Мы говорили и с мужчиной, рассказывавшим, что совсем недавно он искал инструкцию с картинками о том, как починить потекший кран. По нашим данным, чтобы решить такие задачи, примерно 13% пользователей через картинку ищет страницу, на которой есть подробная информация.
Благодаря количественным опросам, мы знаем, что 70% пользователей периодически нужно найти инструкцию, у которой должны быть иллюстрации, а у 20% такая потребность возникает каждую неделю. Эта статистика подтверждается и запросами — 9% всех запросов к поиску по изображениям Яндекса связаны с поиском инструкций. И они бывают на абсолютно разные темы.
В процессе обсуждения этой проблемы у нас родился проект «Серии». Мы стали думать, как отбирать изображения, чтобы получить не только релевантный, но и красивый ответ, который бы дополнил выдачу картинок.
Благодаря интервью с приглашёнными пользователями, UX-тестированию, множеству обсуждений внутри команды и данных беты во внутренней сети Яндекса, мы выстроили у себя более стройное понимание такой возможности и сформулировали некоторые требования.
Например, изображения должны быть с одной страницы, чтобы пользователь мог перейти на неё и узнать больше, — увидеть весь репортаж, почитать пояснения, пойти по другим разделам сайта. Это улучшает навигационный сценарий, в котором пользователь ищет сайт через картинку.
Серия особенно полезна, когда выделяет один объект, шаги одного мастер-класса или фотографии, сделанные в одном стиле (конкретная фотосессия, одежда из одной коллекции и т.п.). Но алгоритм делает это только для страниц без агрессивной рекламы и вирусов. На глубинных интервью и UX-тестировании мы столкнулись с тем, что пользователи очень негативно реагируют на избыточную рекламу и выпрыгивающие попапы. Поэтому решили исключить такие страницы из кандидатов на серийные.
Как Серии устроены технически
Сгруппируем картинки в серии похожих в рамках страниц, на которых они встречаются вместе. То есть, если на странице www.example.com встретились картинки
www.example.com/1.jpg,
www.example.com/2.jpg,
www.example.com/3.jpg,
www.example.com/4.jpg,
попробуем объединить их в серию.
Мы хотим кластеризовать эти картинки по визульной схожести. То есть найти подгруппу картинок, которые достаточно похожи между собой. Кластеризовать будем с помощью жадного алгоритма иерархической кластеризации. По-английски этот алгоритм называется complete linkage clustering using nn-chain algorithm. Чтобы прийти к успеху, нам понадобится метрика похожести картинок, кластеризация с помощью которой давала бы кластера-группы с нужными нам свойствами.
Что это за свойства?
- Одни и те же предметы или сцены, снятые с разных ракурсов, должны быть в одном кластере;
- Одни и те же предметы или сцены, выполненные в разных цветах на изображении, должны быть в одном кластере;
- Фотографии из одной фотосессии, в которых достаточно общих цветов и деталей, должны быть в одном кластере.
- В кластере должны быть картинки примерно одного размера и т.д.
Для того чтобы что-то похожее получилось, мы выбрали три вида дескрипторов:
- дескриптор на основе color layout descriptor;
- mpeg dominant color descriptor;
- mpeg-7 edge histogram descriptor.
Описания можно найти, например, в стандарте mpeg-7. У нас свои быстрые и эффективные реализации.
На основе этих дескрипторов вычисляется визуальная похожесть, как максимум по визуальной похожести по отдельным дескрипторам. Это позволяет удовлетворить первые три хотелки. Чтобы учесть размеры, мы вычитаем из визуальной похожести отношение площадей картинок (max/min). На основе этой метрики мы и осуществляем кластеризацию.
Дизайн
В процессе работы мы поняли, что серийные картинки на выдаче должны выглядеть единым блоком — это новое представление ответа Яндекса. Самым важным в дизайне было сделать так, чтобы серии картинок были заметны.
С момента начала работы над проектом мы перепробовали около десятка разных вариантов дизайна. Три из них прошли тестирование как на внешних пользователях, так и на наших коллегах.
Мы увидели, что внешне пользователям нравится больше один дизайн.
Но понятнее им другое представление, и с ним они больше взаимодействуют.
В итогом варианте мы учли лучшее из обоих вариантов.
Ещё мы заметили, что важно показать людям, когда открылась серия и когда закончилась. Так появился финальный вариант с информацией и блоком шаринга.
Где серии вам помогут
Серии будут очень удобны тем людям, которые ищут пошаговые инструкции, в которых картинки важнее текста: как сделать оригами дракона, как нарисовать кошку, мастер-класс по декупажу, как сменить или найти упражнения для трапеции.
С ними легче искать похожие по стилю изображения — картины одного художника или подборки фотографий из одной фотосессии. Ещё они помогут рассмотреть с разных сторон автомобиль, товар или достопримечательность.