Pull to refresh
551.22
Rating
Яндекс
Как мы делаем Яндекс

Большие изменения на Яндексе — платформа «Острова»: интерактивные ответы в результатах поиска

Яндекс corporate blog Web design *
Сегодня на конференции YaC/m мы объявили о том, что Яндекс планирует радикальное обновление вида результатов поиска. Во-первых, они меняются идеологически: теперь пользователь будет не просто находить ответы на свои запросы, но и сможет прямо на странице с выдачей решать свои задачи. А во-вторых, поисковые результаты обновятся визуально — дизайн станет частью нашего нового подхода в поиске. 


Текст ниже написал Данила Ковчий, один из авторов платформы «Острова», о которой пойдёт речь дальше. Прямо сейчас он находится на сцене и не может запостить его сам. Дальше повествование пойдёт от его имени.

Презентация Островов на Yet another Conference

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

К делу


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

Изменения в поиске делятся на два направления:
— блочная выдача;
— контекстно-зависимый интерфейс.

Предпосылки


Поиск Яндекса все время пытается объять необъятное в стремлении отвечать всем и каждому на любой запрос. Требования людей к ответам поисковой системы постоянно растут — алгоритмы становятся все сложнее и хитрее, ответы на поисковой выдаче распухают, вбирая в себя цены, рейтинги, фотографии, время работы, адреса и телефоны. Покрытие выдачи расширенными ответами неуклонно растет, а по некоторым запросам на человека может вывалиться чуть ли не всё наше многообразие: yandex.ru/yandsearch?text=мадонна

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

http://yandex.ru/yandsearch?text=люблю грозу в начале мая
http://yandex.ru/yandsearch?text=james blake retrograde
http://yandex.ru/yandsearch?text=красный
http://yandex.ru/yandsearch?text=2+3

Колдунщики имеют огромную популярность, и для многих сервисов являются основными точками входа. Если раньше Яндекс находил лишь документы, в которых встречается запрашиваемая фраза, то сейчас, если я спрашиваю [как добраться тверская 23], это вовсе не значит, что мне нужен сайт, где эта фраза встречается чаще всего; я тем самым сообщаю системе о своем желании выяснить маршрут и посмотреть на карту. И колдунщики в таких ситуациях до сих пор приходят на
помощь:

image

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

Врезка свежих результатов

Или врезка Твиттера:

Врезка твиттера по запросу [сегалович]

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

Врезка поиска по приложениям

Это тоже ситуацию не исправило: исполосованная выдача не вносила дополнительной ясности для людей.

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

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

Остров


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

Пример острова со страницы результатов поиска

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

Так теперь выглядят ответы поиска Яндекса

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

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

Группировка схожих ответов

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

Тепловые карты с исследований интерфейсов

Всяческие эксперименты также подтверждали, что правый край выдачи — слепая зона.

Но исследования нового поиска на живых прототипах показали то, что мы и ожидали увидеть: люди смотрят не в левый верхний угол экрана, а туда, где им что-то показывают:

Тепловые карты с исследований интерфейсов — вниманием людей управляют акценты

Оставалась последняя проблема с блочной структурой — она выглядит избыточной на бедной выдаче, когда Яндексу кроме списка ссылок предложить нечего. Например, ответ по запросу [телепрограмма] в новом Яндексе проигрывает старому.

Было:



Стало:



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



В целом, среднестатистический ответ нового Яндекса теперь выглядит так:

Новый дизайн страницы результатов поиска на Яндексе

Релевантный интерфейс


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



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

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

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

Лояльные ребята должны быть в курсе, что в прошлом году Яндекс выпустил поисковое приложение для iPad.

Поисковое приложение Яндекса для iPad

Кстати, и здесь уже появляются блоки, но в упрощенном виде. Но интересно тут другое — способ переключения вертикалей. Это интерфейсное решение всем очень понравилось: оно было одновременно заметным, наглядным и не отвлекало от главного, того, что справа. Если поисковое приложение ищет только по трем-четырем вертикалям, оно может себе позволить иметь такой размашистый список. В основном поиске вертикалей гораздо больше, правда, далеко каждая из них отвечает текущему запросу. Поэтому мы решили очевидным образом развить эту идею: левая колонка должна содержать в себе только те вертикали, которые соответствуют заданному контексту. А контекст задается запросом пользователя.

Поиск Яндекса понимает, чем лучше ответить человеку на его запрос

Теперь все логично складывается: есть шапка с поисковой стрелкой — это область ввода, а все что ниже — область вывода. И область вывода полностью подчинена запросу, какие бы ответы мы в ней ни размещали. А список вертикалей тоже является своеобразным типом ответа. Кроме того, он ещё служит оглавлением основной выдачи.

Единый поиск


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

Так раньше кодировались поисковые стрелки разных вертикалей

Но люди, найдя пылесос на маркете, совершенно спокойно продолжали там же искать [одноклассники.ру]. И, надо признать, имели на это полное право: написано Яндекс, рядом знакомая поисковая стрелка и кнопка «Найти». Так что на данном этапе своего развития мы осознали, что никто не хочет и не должен изучать всю инфраструктуру Яндекса, что и где лучше искать, какими коридорами туда следует ходить. Теперь у Яндекса стрелка одна единственная, и спрашивать у нее можно что угодно и где угодно.

Единая поисковая стрелка Яндекса

Что дальше


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

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

kovchiy, ведущий дизайнер
Tags: островостроваяндексдизайндизайн интерфейсовяндекс.поиск
Hubs: Яндекс corporate blog Web design
Total votes 177: ↑165 and ↓12 +153
Comments 161
Comments Comments 161

Information

Founded
Location
Россия
Website
www.yandex.ru
Employees
over 10,000 employees
Registered

Habr blog