company_banner

Яндекс.Картинки: путь интерфейсного решения от идеи до реализации

    Картинки — один из самых высоконагруженных сервисов Яндекса. Его ежедневная аудитория приближается к 6 миллионам человек, а количество просмотров изображений составляет почти 120 миллионов. Чтобы сделать его более быстрым и удобным, одновременно с полным редизайном в сентябре мы значительно обновили технологическую составляющую. Обновление интерфейса мы продолжаем и сейчас, для чего постоянно проводим новые эксперименты и тестируем родившиеся идеи.

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

    image

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

    image

    В разработке интерфейсов всегда отталкиваются от того, какие действия люди совершают на сервисе и с какой целью. Как известно, это и называется пользовательскими сценариями. Основной задачей сентябрьского обновления было улучшение сценария «быстро найти нужную картинку» и «составить представление о том как что-то выглядит». При этом человек должен был иметь возможность посмотреть понравившееся изображение быстро и не теряя контекста поисковой выдачи — т.е. окно просмотра не должно было её блокировать и изменять. В новом интерфейсе для того чтобы выбрать другую картинку, пользователю нужно всего лишь проскроллить страницу до следущего понравившегося превью. А поскольку бо́льшая часть изображений в интернете — горизонтальные и люди в основном пользуются широкофрматными экранами, мы выделили больше экранного пространства под горизонтальные картинки.

    В предыдущей версии интерфейса Яндекс.Картинок сетка тумбнейлов была сильно разрежена и миниатюры ресайзились по максимальной ширине в 150 пикселей. Для сентябрьского обновления мы по умолчанию спрятали подписи к тумбнейлам за ховер и сделали ресайз по максимальной высоте в 150 пикселей. Так на странице с результатами поиска экранное пространство стало использоваться оптимальнее и мы смогли показывать людям больше миниатюр найденных изображений.

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

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

    Было решено показывать один сниппет самой релевантной страницы с найденной картинкой и предлагать способ получить её в самом высоком разрешении. При этом предполагалось, что при включении фильтра «Обои», кнопка, клик по которой открывает изображение в самом большом размере, ведёт на картинку с разрешением экрана пользователя или картинки покрупнее, но с тем же соотношением сторон.

    image

    В таком макете кнопка, которая включает слайдшоу, получала намного меньше внимания, чем в текущем продакшн-интерфейсе. О том, куда поселить в нём полноэкранный режим, мы только начинали думать.

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

    image

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

    image

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

    image

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

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

    image

    В этой версии кнопки «Слайдшоу» и «Полный экран» получили слишком много внимания, если соотнести это с тем, как часто у людей появляется потребность в данной функциональности.

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

    image

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

    image

    Но во время тестирования проявился один неприятный недостаток: люди воспринимали строку «3000х2400 Самая большая картинка» как описание того её варианта, который показан в предпросмотре, и думали, что нажимая правой кнопкой на изображение, сохраняют его в самом высоком разрешении. Нужно было придумать, как явно обозначить, что для этого необходимо перейти по URL на большую картинку. Для решения этой проблемы мы решили использовать значительно более заметный контрол для перехода на URL самой большой картинки.

    Дальше мы вернули кнопку «Слайдшоу» и добавили заголовок страницы, на которой расположена просматриваемая картинка. Так мы получили финальный макет, который в течение месяца будет раскатан на всех пользователей Яндекс.Картинок. А пока на сервисе продолжается эксперимент, который мы начали в конце 2012 года.

    image

    Мы не единственные, кто пришёл к такому решению. Недавно и Google начал применять в своём поиске по изображениям похожую реализацию. Как многие из вас могли видеть, Apple также использует «распашонку» для отображения списка песен в iTunes 11.

    image

    P.S. В нашем окне просмотра можно листать картинки клавишами a и d.

    Яндекс

    758,39

    Как мы делаем Яндекс

    Поделиться публикацией
    Комментарии 44
    • НЛО прилетело и опубликовало эту надпись здесь
        +5
        «3000х2400» выделяется цветом аналогично как и «Перейти на страницу с картинкой». По результатам тестирования мы поняли, что у пользователей нет проблемы с пониманием того, что это ссылка, просто они не считали необходимым на неё нажимать, поскольку картинка уже есть перед ними. Всё что нужно было сделать — дать им значительно более явный и понятный контрол получения большой картинки, одновременно отнимая у него роль подписи к картинке слева.
        • НЛО прилетело и опубликовало эту надпись здесь
        0
        Кстати, может быть немного не в тему, но лучшим сохранятором обойных картинок я считаю goodfon.ru Мне там нравится что во первых он сам просекает разрешение пользователя и предлагает картинку в нужном разрешении, делая обрезку если надо. Ну и можно сразу скачать в нужном разрешении, не делая манипуляций с файлом на компе. Может где заюзаете идеи.
          0
          Мы не можем для всех картинок, которые показывает пользователь предлагать в первую очередь скачивать картинки с разрешением монитора пользователя, потому что скачивание обоев это только одна из задач, связанных с общим сценарием «получить изображение в большом размере».
          Перед нами стоит задача угадывать когда пользователю нужны картинки обойного разрешения.
            0
            В чем проблема сделать это одной из фич сервиса?
              0
              мы работаем над этим :)
              0
              для подходящих размеров, можно и сделать :)
          • НЛО прилетело и опубликовало эту надпись здесь
              +2
              почти все картинки — макеты и скриншоты прототипов, а не то, что видят пользователи :)
                +1
                в чем макетируете, если не секрет?
                  0
                  Photoshop. Всё как обычно
              0
              MacOS X Lion, странные проблемы со скролингом — точнее он просто не рабоатет.
                0
                Воспроизвел:
                Сначала смотрю картинки в полноэкранном режиме, когда заканчивается блок картинок — полноэкранный режим закрывается и скролл перестает работать.
                  0
                  Какой браузер?
                    0
                    Chrome Версия 24.0.1312.56
                  0
                  вероятно, это баг экспериментальной вёрстки, можете написать письмо с чуть более подробным описанием проблемы на support@yandex.ru? Было бы здорово, если бы вы написали версию браузера и приложили скриншот консоли браузера с ошибкой.
                  0
                  Захотелось «потыкать», и заметил что переход в полноэкранный режим осуществляется не как в описании (non-Windows like):
                  postimage.org/image/wdrgh4cl9/
                  Это вы описывали концепт, который ожидет интеграции или я что-то упустил?
                    0
                    эксперимент сейчас работает на небольшую часть аудиторию, вы в него, к сожалению, не попали
                      +1
                      сейчас в эксперименте работает вот эта версия

                      image

                      а интеграции ждёт та версия, что стоит в самом начале поста
                      +2
                      «сновной задачей сентябрьского обновления было улучшение сценария «быстро найти нужную картинку» и «составить представление о том как что-то выглядит». При этом человек должен был иметь возможность посмотреть понравившееся изображение быстро и не теряя контекста поисковой выдачи — т.е. окно просмотра не должно было её блокировать и изменять.»
                      — Интерфейс поменяли в лучшую сторону, но для чего обрезали функционал поиска? А имено фильтрацию по размерам и расширениям.

                      Верните старый функционал поиска!
                        0
                        одновременно с запуском обновлённого окна просмотра (в течение месяца) мы запустим фильтр точного размера
                          0
                          Фильтр точного размера специалисты Яндекса обещали мне в сентябре, затем в октябре и затем в декабре.

                          Я понимаю, когда долго водят новый функционал, но совсем не понимаю, почему не могут вернуть назад старый.
                            0
                            Это правда, вернуть этот фильтр мы планировали ещё раньше. Мы переработали бекэнд поиска изображений под новое окно просмотра и этот фильтр уже практически готов
                              0
                              Прошу любить и жаловать фильтр точного размера :)
                                0
                                Действительно хорошая новость — я уже потерял всякую надежду.
                          +3
                          Не знаю — то ли во мне дело, то ли в самом способе показа изображения, но я до сих пор все новые картинки открываю в новых вкладках. Так гораздо удобнее, чем смотреть по одной, пусть и при этом загрузка происходит на текущей странице.

                          Открыв 20 картинок в новых вкладках, я за 10 секунд их просмотрю и быстренько закрою то, что не интересно.
                          Открывая же все эти 20 изображений в разъезжающемся интерфейсе, я потрачу уж пару минут точно.

                            0
                            Мы знаем про этот кейс и работаем над тем, чтобы он обрабатывался в Картинках правильнее.

                            Спасибо за фидбек
                            +4
                            Раньше лучший поиск картинок был однозначно у Бинга. У Яндекса вышло даже лучше. Молодцы!
                              0
                              Когда научитесь распознавать образы на изображениях? И сделать поиск по объектам в картинках?
                              Хотя вижу, что вакансия ещё не закрыта по computer vison.

                              Интерфейс у Я.Картинок ещё ничего но вот ищет он какойто бред… у меня как минимум есть личные счёты из-за anime-pictures.net/?lang=ru самый крупный из российских ресурсов по этой тематике и 0 представления в яндексе в отличии от гугла. :(
                                  0
                                  А вы по кликайте по картинкам и по ссылкам, у вас всё перепутано.
                                  К примеру картинка которая якобы на моём сайте: fentazy2.narod.ru/20933.jpg (хотя она явно не на моём)
                                  А ссылка рядом с картинкой ведёт на anime-pictures.net/pictures/view_post/69795?lang=ru (где сооовсем другая картинка)

                                  Что это за бред? Могу скриншот прислать если не верите.

                                  UPD он нашёл preview размером до 150ч150 где то с низу страницы при этом проигнорировал большое preview собственно как и основной размер. Бред.
                                0
                                Мне всегда больше нравился старый вариант, получаешь ленту картинок — открываешь понравившиеся в новых вкладках и работаешь. А теперь в новых вкладках, вместо аскетичной страницы картинки, открывается вся лента картинок с распашенкой и кучей эффектов, в итоге браузер жрет море оперативки и процессора на всякие js няшки в каждой вкладке.

                                Я раньше из-за обилия эффектов и надстроек не использовал Гугл, теперь вот думаю что есть легкое для поиска картинок.
                                  +2
                                  Мы знаем, что обработка такого кейса в текущем интерфейсе у нас реализована неоптимально, мы работаем над тем, чтобы упростить открытие большого количества картинок в соседних вкладках.
                                    0
                                    Спасибо!=)
                                  0
                                  Вот чего я не понял, так это зачем в распашонке сжимать и показывать пользователю самое большое изображение, когда из списка можно выбрать картинку и поменьше? Она и меньше искажений даст и ресурсы сэкономит, ведь далеко не каждому смотревшему его в распашонке понадобится максимальный размер…
                                  images.yandex.ru/yandsearch?text=x5&pos=3&rpt=simage&img_url=http%3A%2F%2Fwww.carfolio.com%2Fimages%2Fdbimages%2Fzgas%2Fmodels%2Fid%2F10305%2F2003_x5_4.4i.jpg
                                  Тут в примере отображается сжатая картинка с разрешением 2048×1536, хотя есть и например 1280×800…

                                    +1
                                    Окно просмотра, которое сейчас работает в эксперименте и то, которое мы в течение месяца запустим на всю аудиторию избавлено от этого недостатка. В 99% случаев мы будем грузить изображение оптимального размера и веса.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Когда появится API для получения поисковой выдачи?
                                        0
                                        API давно есть api.yandex.ru/xml/
                                          0
                                          Я про картинки спрашивал. Там нет.
                                            0
                                            действительно, прошу прощения, ввёл вас в заблуждение.

                                            подскажите, как бы вы хотели использовать API получения картиночной выдачи?
                                        0
                                        Ах это у вас гугель идею спёр?
                                        Передайте этим гуглоидам, что после белого сайта серый фон очень неприятен для глаз.
                                          0
                                          Подскажите пожалуйста, куда делся внезапно этот прекрасный интерфейс, и как теперь посмотреть слайдшоу?

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

                                          Уже все перерыл, не нашел ответа.

                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                          Самое читаемое