Школа дизайнаИнтерфейсные решения «Яндекс.Поиска», которые вы не замечаете
Данила Ковчий о работе дизайнера в поисковике
Look At Me продолжает рассказывать о Школе дизайна «Яндекса» — преподавателях, занятиях и знаниях для будущих дизайнеров продукта. В этом материале арт-директор «Яндекс.Поиска» Данила Ковчий рассказывает о том, как мельчайшие интерфейсные правки меняют жизнь людей.
На что это похоже
Данила Ковчий
арт-директор «Яндекс.Поиска»
О многом, конечно, хочется рассказать — не каждый день люди извне интересуются работой дизайнера в Поиске. Но непонятно, с чего начать и на чём остановиться: вряд ли у вас есть время и желание погружаться в нашу предметную область, но рассказ получится вялым, если говорить совсем уж в общих чертах.
Основное отличие интерфейса поисковой выдачи от остальных — людям некогда всматриваться в него и оценивать внешний вид. Поведение человека здесь можно сравнить с поведением в аэропорту или на вокзале: нужно найти свой гейт или платформу, и взгляд сам находит указатель, сканирует его, выхватывает полезную информацию — и вот вы уже идёте по длинному коридору и даже не помните, какого цвета был тот самый указатель. В интерфейсе поиска все люди вне зависимости от профессии, возраста и политических убеждений ведут себя примерно одинаково: не вполне осознанно, действия рассеянны, но цель ясна. Дизайнеру в таких условиях приходится больше учитывать инстинкты человека, чем сознательный выбор.
Линия взгляда человека, снятая айтрекером:
Как видите, текст не читают, а действительно прыгают от одного выделенного слова к другому — это и есть сканирование. Мы проводили эксперимент со случайной прокраской слов, не связанной с текстом запроса, — взгляд человека продолжает вести себя так же (другое дело, что начинаются жалобы на качество результатов).
Когда манипулируешь вниманием, а не сознанием, с одной стороны, можешь позволить себе решения в духе «некогда объяснять, просто нажми», а с другой — делая, казалось бы, разумные вещи, портишь людям жизнь. Спотыкаясь об эти противоречия, пытаешься не только рутину успевать, но и в будущее смотреть. Дальше я начну разбирать конкретные примеры. А из этих частностей, я надеюсь, вы сможете сделать общие выводы сами.
НКГ-коэффициент
Интерфейсы поисковых систем очень похожи друг на друга. Как и навигация в общественных местах или дорожные знаки, это не место для самовыражения и авангардистских выходок — наоборот, они должны быть понятны каждому. Какие-то решения диктует индустрия и рынок, до каких-то мы с конкурентами доходим синхронно путём экспериментов. Можно до посинения рисовать поиск будущего с журнальной вёрсткой и прочей нестандартной подачей, но, когда отбираешь у людей привычную штуку и предлагаешь что-то другое, с чем ещё предстоит разобраться, — им некогда, им надо «mp3 скачать без регистрации и СМС». И люди уходят к более консервативному конкуренту.
Меняться, конечно, нужно. И отличаться тоже. Иначе как же людям объяснять, почему именно ты лучше. Но делать это приходится постепенно и аккуратно, а поэтому никто этого не замечает.
Макет поисковой выдачи в 2011 и в 2015:
Мой коллега Антон Шеин придумал НКГ-коэффициент — читается «не как у гугла». Так мы в шутку замеряем похожесть интерфейсов, а когда доходит до красной отметки, красим всё в жёлтый. Я снова шучу. Но какая-то доля правды в этом есть.
Реклама
90% прибыли Яндекса — контекстная реклама. Большая её часть крутится на поисковой выдаче. Благодаря рекламе компания зарабатывает и развивается, а у людей есть бесплатный мгновенный доступ к любой информации. В противном случае за поиск платили бы как за интернет или кабельное телевидение.
Отмечу также, что реклама для Яндекса — не только источник дохода, но и способ улучшить качество ответов. В основе лежит простой механизм: чем меньше отношение переходов к показам, тем больше снимают денег за переход. Так несоответствующие запросу объявления естественным образом уходят с выдачи. А те, что остаются, стараются быть еще более полезными за счет дополнительной информации от рекламодателей, которой нет у обычных ответов.
Но особенность рекламных результатов в том, что по некоммерческим запросам (поиск информации, а не услуги) их релевантность (соответствие запросу) чаще всего ниже, чем у обычных результатов. К примеру, по запросу «пушкин» вам могут показать рекламу ресторана или кондитерской, если эти организации повесят себя на это ключевое слово. Конечно, рекламодателям невыгодно показываться по несоответствующим запросам. Но часто стреляют шрапнелью, чтобы на больших числах выйти в плюс.
Несмотря на все усилия Яндекса, стопроцентной полноты сигнала о релевантности рекламы не достичь. Поэтому если объявление попадает на выдачу, оформляется оно всегда одинаково. Что будет, если рекламные объявления вообще не выделять? Вообще-то есть закон, запрещающий так делать. Но можно поступить как-то так и не нарушить закон:
На рекламу начнут чаще нажимать, и на коммерческих запросах все только выиграют. И пользователи, потому что получат релевантные результаты на первых позициях, и рекламодатели, потому что получат больше клиентов.
Вернёмся к запросу «пушкин». Если на первой позиции окажется рекламный результат — люди будут туда нажимать и получать не то, что ожидали: не биографию, а меню ресторана. Качество ответов поиска упадёт, и со временем люди заменят «Яндекс» на что-нибудь другое.
На ум приходит противоположное решение — явно отделить рекламу от остальных результатов:
Тогда у людей быстро вырабатывается так называемая «баннерная слепота» — взгляд просто перестаёт сканировать жёлтые области. Качество ответов поиска вроде бы не меняется, но переходы по рекламе падают, в том числе и на коммерческих запросах. Компания теряет деньги, увольняет людей, перестаёт развиваться — значит, со временем упадёт и качество поиска.
Поэтому нужно подобрать внешний вид и расположение маркера рекламы так, чтобы он не сразу бросался в глаза, но и не вводил человека в заблуждение своей незаметностью. А потом ещё выясняется, что, даже если найти эту золотую середину, со временем она выгорает — люди привыкают к виду рекламного маркера и на всякий случай игнорируют такие результаты. И проблему снова надо устранять.
Лучшим решением был бы алгоритм, который бы точно понимал, нужна ли по запросу реклама или нет — но всегда будет какая-то доля уверенности и неуверенности. Так уж устроен мир.
Цвет денег
Есть два способа управлять вниманием человека на выдаче: акценты и порядок следования. Порядок следования почти всегда остаётся на совести алгоритма, влиять на который дизайнеры не могут (хотя и тут могут быть оговорки). Остаются акценты.
Одно время у нас была такая мантра: «Важное видно сразу». Но алгоритму поиска, как и мне сейчас, так много хочется сказать, что важного становится ну слишком много: синий заголовок, адрес сайта, пара строк текста со словами запроса, метаданные с телефоном, адресом, временем работы, информацией о скидках и кнопка «Забронировать». И таких ответов штук семь на экране. Не показать нельзя, но и отвлекает жутко.
Новому дизайнеру хочется этот зоопарк успокоить, и если не сократить количество информации, то хотя бы сделать её более однородной. Но вот беда: однородную информацию удобно читать, но неудобно сканировать. Ты со всей своей любовью к типографике и портретом Чихольда на стене верстаешь аккуратнейшие результаты с правильной разрядкой, ограниченным набором цветов и размеров. Это проверяют на 2% аудитории, и все важные показатели падают. Потому что меньше результатов уместилось в первом экране, нет телефона на привычном месте, яркая графика перетянула на себя всё внимание с рекламы — и ещё куча причин.
А параллельно смеха ради запускают «кровавую» комбинаторику: 1024 сочетания цветов и размеров текста в ответах поиска. С большим отрывом лидирует что-то вроде: кислотно-синий заголовок 18px, 14px зелёный адрес источника, 13px серый текст очень плотными строчками.
Мне, да и вам, думаю, невыносимо больно видеть этот синий:
Но именно такой цвет с кодом #00C на больших числах даёт максимальное количество количество полезных переходов по результатам, в том числе и рекламным. Мы зовём его цветом денег.
Со временем ты, конечно, начинаешь понимать, что только такой яркий синий позволяет отделить слой заголовков от прочей информации и быстро по нему пройтись, яркие заголовки служат хорошими логическими разделителями в перенасыщенном смыслами списке. А иначе надо либо смыслы сокращать, либо расстояние между ответами увеличивать (но тогда их меньше в экран влезет), либо какие-то дополнительные разделители рисовать (что лишь добавит визуального шума).
Уборщик-архитектор
Казалось бы, зачем тогда в Поиске нужен дизайнер, если можно написать алгоритм, который перебором найдёт лучший вариант? К сожалению или к счастью, такой алгоритм пока не написали, и система то и дело даёт сбой.
Результат бета-версии поиска по запросу «дворец Топкапы» в Турции:
Никакой перебор не укажет, как разгрести это болото из текста и картинок. Тут приходит дизайнер, начинает разматывать клубок причин и следствий, а затем вместе с менеджерами и программистами выстраивает что-то более логичное:
Но мы выполняем роль не только уборщиков. Сначала на тебя валятся десятки вариантов ответов, у каждого варианта по несколько состояний. И вроде ты дал каждому форму, но прилетает что-то новое, ломает всю картину, и надо начинать с чистого листа.
Но со временем за деревьями начинаешь видеть лес. Прорабатываешь сценарии использования, которые важно не потерять. Расставляешь акценты, помогая человеку выбрать нужное. И алгоритмы поисковой системы, пускай и медленно, но всё-таки подстраиваются под то, что ты проектируешь.
We need to go deeper
Когда работаешь над такой сложной системой, нельзя долго оставаться дизайнером лишь того, что на поверхности. Ты не просто картинки с текстом по линейке выстраиваешь так, чтобы денежки не упали, а придаёшь структурам данных внешний вид, удобный для потребления в рамках некоторого сценария. И чтобы не допускать меню из одного пункта, непредвиденных переносов строк и логических тупиков в навигации, приходится выходить за рамки работы дизайнера в привычном понимании. Погружаешься в технологии, собираешь на коленках прототипы интерфейсных решений, тестируешь работу на разных людях, в разных устройствах и контекстах использования.
Например, есть ненулевая доля телефонов без JavaScript и с очень маленьким экраном — их обладатели тоже имеют право на поиск. Есть мобильные устройства, которые в горизонтальной ориентации ведут себя как планшеты, а в вертикальной — как телефоны. Всё это должен учитывать интерфейс, то есть дизайнер.
Кроме сложности интерфейсных задач возникает проблема взаимодействия с другими дизайнерами — нас в Поиске около 10 человек (смотря где проводить границу), и все каждый день что-то делают. Для внешнего человека поисковая система должна быть единой и консистентной. Поэтому работа каждого дизайнера разбирается на кусочки, подробно описывается и версионируется, чтобы коллеги могли использовать его решения в своих прототипах.
У нас, дизайнеров, есть даже своя внутренняя версия «Яндекс.Поиска», с которой мы живём как с настоящей: задаём запросы, решаем какие-то бытовые задачи. Если что-то «натирает», стараемся исправить до того момента, как это увидят все. А может, и не увидят вовсе.
Что впереди
Больше интеракции на выдаче, больше медиа, меньше лишних переходов, меньше кнопок и шестерёнок. Хочется успеть удивить вас хоть чем-то, пока это не стало санитарной нормой.
В детстве мне часто дарили конструкторы, а мне всё было мало, хотелось ещё деталей. Доигрался. На самом деле я и не знаю другого способа общаться с такой огромной аудиторией, кроме как принимать участие в проектах такого масштаба. Я доволен, это даже честь для меня.
Мы с ребятами тратим много времени и сил, чтобы ваши «еще статусы вконтакте», «кино на выходных» и «js split string» работали и смотрелись одинаково хорошо на всех устройствах и в любую погоду.
Комментарии
Подписаться