Привет, Хабр! Меня зовут Дмитрий Браженко. Разработка продуктов и сервисов регулярно сталкивает нас с необходимостью выбрать лучший вариант: какая иконка красивее? Какая кнопка удобнее? Краудсорсинг – отличный способ учесть мнение потенциальных пользователей, проведя несложные UX-тесты.
Делюсь готовым решением – пайплайном для ранжирования данных. Код на гитхабе прилагается! Под катом расскажу, как запустить, на что обратить внимание, покажу несколько примеров использования.
Выбрать метод ранжирования
Существует три основных подхода к обучению и оцениванию моделей ранжирования:
- поточечный (pointwise): на вход для сравнения подаются пары «запрос-документ», каждой из которых соответствует оценка краудсорсеров. Качество модели = точность оценки, полученной для пары «запрос-документ»;
- попарный (pairwise): документы, соответствующие одному запросу, сравниваются между собой парами. Задача ранжирования – уменьшать число инверсий для пар документов, т.е. чтобы то, что было оценено хуже, не оказывалось в топе ранжирования;
- списочный (listwise): асессор составляет список – «идеальную выдачу» – сравнение идёт с ней.
Подробнее про подходы к ранжированию можно прочитать, например, в презентации или в статье. Для пайплайна выбрал самый популярный – попарные сравнения. Всё-таки ответить на вопрос «Что хочется больше: яблоко или апельсин?» респондентам оказывается проще, чем оценить по шкале от 1 до 10, насколько хочется именно яблоко.
Подготовить шаблон к работе с данными
Перед тем как приступить к запуску пайплайна, понадобится:
- Зарегистрироваться в Толоке как заказчик.
- Получить OAuth-токен по ссылке (подробнее – в документации).
- Выбрать способ хранения файлов, задействованных в задании.
На последнем пункте на всякий случай остановлюсь поподробнее:
- Если планируете размечать большой объём данных, удобно использовать произвольное постоянное S3-хранилище файлов. Например, Yandex.Cloud.Object.Storage.
- Подойдёт и любое другое хранилище, которое позволяет получить URL на картинку (графический объект) вида https://sbs.s3.yandex.net/39a307e3f4859c96f37161b3ab00aa5daa99858fbd6df1b70f53fa9a649ea467.png
Полный флоу расчётов с пояснениями – на гитхабе. Весь приведённый код должен воспроизвестись, если указать свой токен заказчика (тем не менее, что-то может устареть и потребовать доработок). В статье я постараюсь сосредоточиться на содержательной стороне вопроса.
Ранжировать объекты
Что бы вы ни сравнивали – поисковые выдачи, интерфейсные решения, иконки, картинки и даже видео – суть метода не меняется: для наглядности покажу, как он работает, на конкретном примере.
Часто встречающаяся задача – выбрать вариант дизайна чего-либо. В таком случае есть хотя бы два варианта: новый и старый. Чтобы выбрать самый удачный, можно провести опрос, какой вариант лучше и почему. Вот так мы выбирали карточку для приложения Яндекса:
Чтобы взаимное расположение картинок не влияло на выбор, половине опрашиваемых покажем их в порядке (A|B), другой – (B|A).
После запуска эксперимента получим результаты в полусыром виде. В моём коде прописано как оформить их в виде таблички:
| Группа людей | Число проголосовавших “лево” | Число проголосовавших “право” |
|---|---|---|
| Слева красная кнопка (A|B) | 18 | 8 |
| Слева белая кнопка (B|A) | 7 | 17 |
Выполним несложные математические преобразования, чтобы понять, за какой цвет кнопки именно проголосовало больше людей.
Число выбравших красную кнопку: 18 + 17 = 35
Число выбравших белую кнопку: 7 + 8 = 15
Теперь представим результаты красивой табличкой, заодно подтянем примеры комментариев, которые оставляли наши респонденты (тоже есть в коде):
| Красная кнопка | Белая кнопка | |
|---|---|---|
| Результат (pvalue=0.007) | 70% (35/50) | 30% (15/50) |
| Примеры комментариев под каждым из вариантов | На красном фоне белыми буквами более заметно и больше обращает на себя внимание чем красными буквами на белом фоне у объявления. | красный цвет забирает на себя все внимание а белый нет |
На что стоит обратить внимание:
- Для оценки статистической значимости результатов подойдёт классический биномиальный тест. Сравниваем две картинки: если они одинаковые, score каждой из них будет близок к 0.5 (смутило слово «score»? – не переживайте, в следующем разделе покажу, как его считать). Если картинки разные, мы должны с помощью статистического теста проверить, не случайный ли у нас у результат.
- Ещё раз напомню: одной половине респондентов выдаём картинки в виде (A|B), другой – (B|A).
- Не следует использовать такой подход как «серебряную пулю» и принимать решения исходя исключительно из полученных цифр. Причиной выбора может являться не сделанное изменение, а, например, дефект одного из макетов.
- «Garbage in – garbage out»: не стоит сравнивать заведомо плохие варианты, которые вы не стали бы отправлять в продакшн.
Ещё больше о том, как корректно поставить эксперименты Side-By-Side – на видео с Я.Субботника: подводные камни, границы применимости методики.
Теперь пример посложнее: увеличим количество ранжируемых объектов. Допустим, требуется отсортировать несколько картинок и выбрать лучшие из них для галереи фонов.
Вернёмся к идее pairwise подхода: проведём попарное сравнение картинок. Получится 6 ⋅ 5/2 сравнений. Каждой картинке присвоим простую метрику:
где 
– число раз, когда картинка победила соперника, 
– проиграла ему. Интерпретировать полученный score можно как "вероятность выигрыша против случайно взятого соперника из набора".
Дальше можно сортировать картинки по этому скору. В моем случае получилась такая сортировка:
 |
 |
|---|---|
|
 |
 |
 |
Совпало с вашим ожиданием?
На что стоит обратить внимание:
- Если вариантов очень много, то сравнивать каждый с каждым будет дороговато, можно попробовать придумать «опорные точки».
- В качестве сортировки можно использовать более умные скоры, например ELO-score.
Другие задачи, с которыми справится этот пайплайн
Используя Яндекс.Толоку, можно проводить куда более сложные тесты, чем парные сравнения картинок.
Таргетирование
Иногда для качественного ранжирования данных бывает важно учесть какие-то дополнительные факторы, влияющие на предпочтения – возрастные, социальные, территориальные. Попробуем запусить вот такой эксперимент сначала для респондентов из Москвы, а потом – из Санкт-Петербурга. Оформление одинаковое, отличаются только названия продукта:
Готовим два пула, проверяем в интерфейсе, что в настройках не случилось ошибок, запускаем.
Результаты предсказуемы:
- в Москве предпочтительнее «шаурма»: её выбрали 78% респондентов;
- в Санкт-Петербурге, хотя отрыв и меньше, лидирует «шаверма»: 54% против 46%.
Парные сравнения видео
Сравнивать можно не только картинки, но и видео. Например, чтобы понять, что люди думают про ваш рекламный ролик. Или просто собрать фидбек.
Есть два видео об Алисе:
| Видео 1 (Алиса-Мечта) | Видео 2 (Алиса-Планка) |
|---|---|
Какое видео вам понравилось больше? Почему?
| Видео 1 (Алиса-Мечта) |
Видео 2 (Алиса-Планка) |
|
|---|---|---|
| score | 72% | 28% |
| Пример комментария за каждый вариант | Ребёнок вызывает больше приятных эмоций, чем слабак из 2-го варианта, который отжаться не может. В варианте 1 показана возможная практическая польза от алисы для развития ребёнка | Более позитивный, в первом ребенок как мне кажется, не понял шутки |
Более сложные тесты
Как видите, всё ограничивается только вашей фантазией, нужно лишь подправить шаблон в Толоке: опросники по картинке, 5-секундный UX-тест (подробнее – тут), тест на 1-й клик, Card Sorting – продолжить вдохновляться можно здесь.
Для таких тестов часто бывает полезно сделать скринкаст – запись того, как пользователь взаимодействовал со страницей. В этом нам поможет инструмент, входящий в Яндекс.Метрику, а именно Вебвизор. Его можно встроить в шаблон и смотреть, как пользователи работают с заданием. Для наглядности приведу видео:
Чтобы сделать вебвизорную запись, замените в коде с Гитхаба мой счётчик Яндекс.Метрики на ваш.
Вместо заключения
Спасибо, что дочитали до конца! Собрал основные тезисы и ссылки:
- Многие дизайны Яндекса проходят подобное тестирование. У нас существует автоматический пайплайн, который получает картинки, загружает их в Толоку, ждёт оценок и считает метрики.
- Толока – гибкий инструмент для выполнения краудсорсных задач – область применения ограничена только вашей фантазией. Вот тут рассказывали как обучать беспилотники и оценивать качество сервисов. А здесь коллеги из ODS создают датасет для распознавания счётчиков.
- Если у вас есть регулярный процесс с необходимостью «механической», монотонной работы, его несложно автоматизировать через API Толоки.
- Конфигурация и настройка заданий могут вызывать трудности – в тексте постарался подсказать, на что стоит обратить внимание. Для сбора результатов достаточно небольшого упорства и знания азов HTML/CSS/Js.
- Используйте код на Github. Можете контрибьютить – сделаем библиотеку шаблонов для Толоки.
- Есть продукты, которые тестировать в Толоке всё же не стоит: что-то нестандартное, не подразумевающее массового использования – неспециалистам будет очень сложно дать качественный фидбек, например, об утилите для управления космическим кораблём.
