Некоторое время назад в Facebook появились новые кнопки, позволяющие оставлять различные отклики на пост в ленте. Если ранее вы могли только поставить значок «нравится» или вообще ничего не ставить, если этот пост вам не понравился, то теперь можно выражать эмоции более разнообразно.
И хотя разговоры о том, что Facebook планировал добавить новые кнопки для выражения эмоций велись давно, тем не менее, нововведение появилось довольно внезапно. Это создало ложное впечатление, что на добавление новых кнопок понадобилось совсем немного времени. На самом деле разработчики потратили на данный процесс более года.
Основные проблемы были связаны с дизайном новых реакций, а не с программной разработкой. Дизайнерам требовалось придумать интернациональный интерфейс, понятный пользователю в любой стране мира. И прежде, чем значки отклика приобрели привычный сегодня вид, разработчики совершили множество проб и ошибок. О том, как протекал процесс внутри Facebook, рассказывает один из его участников, Джеоф Тихан (Geoff Teehan):
«Мы заходим в Facebook чтобы делиться разной информацией с близкими людьми — от веселых историй и анекдотов до каких-либо печальных событий. Иногда мы оставляем комментарии под сообщением о том, что нам действительно нравится или выражаем сочувствие, когда в жизни случается что-то горькое.
В 2009 Facebook представила кнопку, которая позволяет людям оставить отзыв на посты своих друзей. Мы назвали её Like («Нравится»), и пользователям она пришлась под душе. Вы просто нажимаете на кнопку с изображением большого пальца руки, поднятого вверх, чтобы поблагодарить вашего друга за пост. Порой бывает трудно выразить свое мнение словами; или может быть, вам нечего сказать, и вы хотите просто подать знак, что услышали другого человека. Кнопка Like прекрасно справляется с этой задачей. Просто и ненавязчиво. Но не всё в жизни можно «залайкать».
Пришло время выйти за рамки Like
Многие пользователи настаивали, что хотели бы иметь больше способов выражать своё отношение к информации на Facebook. Около года назад Марк Цукерберг собрал команду, перед которой поставил задачу обдумать, как сделать кнопку Like более выразительной. Мы с радостью взялись за работу — не каждый день выпадает возможность участвовать в разработке такой важной части продукта компании.
С самого начала мы понимали, что реализация подобного замысла потребует значительных усилий. Нужно было решить такие вопросы, как работа на различных платформах и устройствах, старых и новых. Мы потратили много времени на отладку кнопок Like, Comment, Share, чтобы они стали лёгкими в использовании и понимании. Это интерфейс, который взаимодействует со множеством вещей, поэтому любое изменение будет влиять на понятность и практичность действий миллионов людей. Надо внимательно отслеживать любое изменение, чтобы оно ощущалось, как естественное развитие; быть осторожными, чтобы люди не почувствовали агрессии или неприязни в нашей системе.
Были и другие важные задачи: какие эмоции нужно добавить? Как их будут понимать в различных странах? Каким должен быть интерфейс с кнопками, позволяющим оставить отклик? Все эти вопросы необходимо было решить в комплексе, при этом сохранить простоту механики кнопки Like.
Важнейшая задача — придумать понятную во всем мире терминологию, с помощью которой каждый сможет лучше и богаче выразить свои эмоции. Вот почему мы делали так много итераций и потратили на это много времени.
Мы разбили проблему на две отдельные части и начали работать над ними параллельно:
- Какие реакции мы будем публиковать, помимо Like.
- Как люди будут вводить и использовать эти реакции.
Реакции
Наша команда руководствовалась следующими принципами при определении набора реакций, которые сегодня служат для выражения эмоций в Facebook:
- Реакции должны быть понятны во всем мире, чтобы как можно больше людей могли объединяться и общаться вместе.
- Реакции должны быть широко распространёнными и выразительными. Иными словами, они должны позволять людям оставлять отзыв в выразительной форме, чтобы они были похожи на то, как мы реагируем на события в реальной жизни.
Сначала нам нужно было определить, сколько новых типов откликов мы намерены добавить. Это может показаться простой задачей: например, добавить кнопку и изображением большого пальца руки, указывающего вниз (то есть, «Dislike»), рядом с кнопкой Like. Но всё не так просто. Людям необходим более широкий выбор реакций для коммуникаций. Бинарные кнопки «Like» и «Dislike» не отображают корректным образом то, как мы реагируем на множество событий в реальной жизни.
Если простого двоичного отклика «нравится/не нравится» недостаточно, то как много типов реакций необходимо предоставить пользователю? Может быть, сотни? Наверное, нет. Возможность выбирать из сотни реакций означает, что каждый пост может иметь свыше десятка разных типов откликов, что усложнит оценку записи в ленте. Кроме того, чем больше типов реакций предложить, тем меньше шансов, что все они будут одинаково понятны во всем мире.
Мы потратили больше года на опрос, который позволил понять, какие типы реакций люди сочтут наиболее привлекательными. И вот что мы выяснили.
Первоначально были изучены верхние стикеры и эмодзи, чтобы понять, какие типы реакций уже используют в Facebook чаще всего.
Мы также пытались оценить термины, которые люди искали при использовании стикеров:
Мы собрали статистику по использованию наиболее распространённых кратких комментариев и в результате получили специфический язык, который люди применяют для выражения своих мыслей. Кроме того, мы провели несколько опросов в самых разных странах, общались с людьми и работали с нашей командой по интернационализации. С этого момента мы сократили набор отобранных слов:
Нравится Восхищён Ха-ха Вау Печаль Злость Смущён Улёт
Возможно, вы заметили, что в этом списке есть две новых реакции: «Смущён» и «Улёт». Однако анализ показал, что слово «Смущён» использовалось крайне редко, а выражение «Улёт» было довольно вульгарным, кроме того, по смыслу оно часто напоминало «Haha» или даже «Like». То есть, в целом система была лучше без этих двух слов.
Оставался ещё один важный вопрос – как должны выглядеть графически кнопки откликов. Мы намеревались создать иллюстрации, уникальные для Facebook, но также нам хотелось, чтобы они изящно выглядели в данной экосистеме и легко воспринимались во всём мире. Первоначальный вариант был таковым:
Варианты начертания кнопок откликов
Проблема заключалась в определении наиболее подходящего стиля для каждой реакции. Кроме того, мы столкнулись с тем, что даже минимальное изменение начертания эмодзи могло сделать её слишком похожей на другую. «Вау» могло быть похоже на «Улёт», а «Улёт» мог выглядеть как «Ха-ха» при лёгком изменении изгиба улыбки или прищуривании глаза.
Мы также исследовали систему с метками и без них. Метки помогали определить реакции и, в свою очередь, содействовали интернационализации. Они должны быть понятными во всём мире, чтобы пользователь из Японии, например, корректно реагировал на пост, написанный в Африке, и они оба хорошо понимали, что означает такая реакция. Чтобы достичь этого мы сотрудничали с командами и профессионалами по интернационализации в области несловесного общения.
Поиск наиболее подходящего стиля для каждой реакции
Первые варианты были статичными и мы осознавали, что анимация могла бы сделать их намного выразительнее. Мы работали с аниматором чтобы оживить статичные эмодзи, а дизайнеры и инженеры определяли, как заставить их играть театральным образом. Дизайнеры использовали псевдокод для программирования анимации для каждой реакции. Затем эта работа переходила к инженерам, которые должны были воспроизвести разработанную анимацию с высокой точностью в окончательном варианте.
Мы исходили из того, что синхронные анимации могут давить на глаза. Поэтому вначале у нас была только одна динамичная кнопка (Like — палец вверх), а остальные оставались статичными. Тем не менее, потом появилась идея сделать «живыми» все значки при наведении на них курсора мыши.
Новая панель откликов
Мы построили модернизированную всплывающую панель откликов, которая расширялась именно так, как нужно было. Вот несколько принципов, которыми мы руководствовались:
- Панель с кнопками реакций должна стать расширением кнопки Like. Кнопки Like, Comment и Share повсеместно используются в Facebook, и добавление четвёртой опции в этом пункте могло увеличить сложность применения.
- Новые реакции не должны усложнить процесс эмоциональной оценки статьи. Мы вводили эту функцию так, чтобы не нарушать привычку общения миллионов людей, уже использующих этот продукт. Другими словами, мы хотели сохранить простоту и лёгкость — если вы нажимаете на кнопку Like, это означает, что вам нравится пост.
Процесс выбора реакции
Когда мы начинали исследовать механизм ввода, то не знали, какие будут реакции, или как много их будет. Некоторые ранние исследования указывали, что их, возможно, будет от пяти до десяти. В качестве стресс-теста мы начали разрабатывать прототип панели, которая могла вместить до пятнадцати разных реакций, поскольку их число легче уменьшить, нежели увеличить.
Цель этого прототипа состояла в понимании путей использования различных реакций в системе. Мы не знали, какие будут реакции на самом деле, поэтому примеры в этом видео вымышленные
Ранние концепции и первоначальные попытки являются только учебными, они учат нас, что работает, но более важно — что не работает. Они показывают пробелы, неизвестности и многое другое.
Мы ощутили, что данный подход был результативным, но открылись другие проблемы. Например, пользовательский интерфейс в верхней части экрана мог быть закрыт. Несмотря на большой размер всплываемой области, пользователи зачастую могли случайно скользить пальцем по верхним меткам. Синтаксический разбор текстовых меток казался сложным и усложнял интернационализацию. Штриховой рисунок иллюстраций выглядел отменно в крупных масштабах, но оказался сложным при рассмотрении на маленьких экранах. Кроме того, большее количество типов реакций могло привести к избыточности в наборе.
Мы продолжали работу. Первые прототипы содержали единственную иллюстрацию, которая могла менять положение вашего пальца на слове выражения. Возникало желание предварительно просмотреть каждую реакцию перед принятием решения вместо возможности увидеть одновременно все опции. Это было слишком обременительно и отнимало время.
Первый прототип показывает только одну реакцию за раз
В итоге мы отвергли концепцию одной иллюстрации в пользу всплывающей док-панели. Этот подход позволял людям быстро увидеть все реакции одновременно. Просмотр выражения «эмодзи» вместо чтения текста создавал намного более дружелюбную и распознаваемую во всем мире систему. Также мы смогли решить и другие проблемы, которые имелись в ранних концепциях. Например, эта новая система была адаптирована к своему положению на экране и больше не располагалась вне поля зрения. Мы сдвинули метки реакций таким образом, чтобы ваш палец никогда не загораживал их. Наконец, после того как панель выбора типа отклика была готова, появилась возможность или провести над ней мышью, или сразу нажимать на нужную кнопку.
Потребительские реакции
В мире, где мы имели дело только с Likes, пользоваться ими было достаточно просто. Facebook лишь сообщал вам, сколько их поставлено (например, «17 Likes») в строке текста, расположенной прямо над кнопками Like, Comment и Share. Эта строка требовала полного пересмотра, поскольку статус «10 Reactions» не мог сообщить о том, каким люди находят этот пост: забавным, грустным или удивительным? Нужно было разработать решение, которое позволило бы фиксировать каждую реакцию отдельно.
Наш первый метод был банальный. Мы хотели разработать панель, которая бы показывала отдельно тип и число оставленных откликов. Но такой подход хорошо работает там, где есть только 1-2 типа реакций и совершенно не подходит, когда имеется множество откликов. Ведь тогда сложно понять итоговую реакцию.
Наш первый вариант привёл к тому, что окно было перегружено визуальной информацией
Некоторые из многочисленных пробных вариантов, которые не работали
Финальный вариант панели Bling String
Окончательный дизайн соединил три наиболее часто оставляемые реакции вместе с общим числом откликов. Благодаря этому можно оценить, как люди отреагировали на данный пост, а также узнать общий отклик. Кроме того, появилась возможность выяснить, кто именно из ваших друзей отреагировал на пост.
Итоги работы
Примерно после года напряженной разработки и нескольких месяцев тестирования Facebook таки запустил новые типы реакций. Сейчас мы хотим больше узнать о том, как они используются по всему миру. Любая разработка ПО — это бесконечный процесс, и новые кнопки откликов не исключение. Мы будем продолжать изучать и улучшать их и верим, что это шаг к более динамичному и приятному опыту использования Facebook.»