[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Лена Очкова", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438","\u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442_\u0438\u0437\u0434\u0430\u043d\u0438\u0435"], "comments": 20, "likes": 12, "favorites": 15, "is_advertisement": false, "section_name": "default", "id": "12288" }
Лена Очкова
4 005

Как отображать древовидные обсуждения в вебе

Примеры и мнения российских экспертов

Поделиться

В избранное

В избранном

Дизайнер продукта в JiveSoftware Риан ван дер Мерве подготовил материал об особенностях разных вариантов отображения древовидных комментариев.

Директор студии Samplar Антон Григорьев перевел для vc.ru заметку дизайнера и узнал мнение основателя «Проектората» Егора Каменева, арт-директора «Дизайн-бюро Артема Горбунова» Ильи Бирмана, директора по развитию Astra Media Group Ярослава Табакова и креативного директора UX-студии Aidem Александра Куценко об этой проблеме.

Когда я работал над древовидными обсуждениями и комментариями в своем приложении для веба и мобильных, то пытался понять, что делать с бесконечным ветвлением, которое можно встретить на Hacker News и Reddit. И решил, что рассказ о моих изысканиях будет полезен.

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

У каждого из них есть свои преимущества и недостатки.

Полностью плоские

Встречаются на многих новостных сайтах. Пример: New York Times.

Преимущества:

  • Простота навигации. Просто прокручивайте страницу вниз.
  • Содержимое не «выдавливается» с экрана.

Недостатки:

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

Бесконечно ветвящиеся

Пример: Reddit, Disqus, «Пикабу». С определенного момента Reddit скрывает ответы в ветках, но все равно это отличный пример с дискуссиями, которые могут идти бесконечно.

Преимущества:

  • Контекст всегда понятен.
  • Можно вести продолжительные обсуждения.

Недостатки:

  • Сложность навигации.
  • Тяжело искать новые ответы в ветке обсуждения.
  • Содержимое занимает на экране все меньше места. Ширина каждого нового ответа в ветке становится всё меньше и меньше.
  • Не позволяет выбрать какую-то конкретную ветку для ознакомления. Джефф Этвуд написал об этом в статье Web Discussions: Flat by Design.

Ограниченно ветвящиеся

Пример: Stack Exchange.

Преимущества:

  • Намекает пользователям, что дискуссии не могут идти бесконечно.
  • Контекст понятен (до определенного момента).
  • Содержимое не выдавливается с экрана.

Недостатки:

Недоступны более глубокие уровни ответов.

Скрываемые бесконечно ветвящиеся

Пример: Quora, Livejournal.

Преимущества:

  • Контекст доступен по запросу.
  • Легко прокрутить страницу и выбрать ветку для углубления.
  • Меньше когнитивная нагрузка при просмотре комментариев.

Недостатки:

Требуются дополнительные действия для просмотра контента.

Ограниченно ветвящиеся с тезисами

Пример — Facebook.

Преимущества:

  • Контекст доступен по запросу.
  • Легко прокрутить страницу и выбрать ветку для углубления.
  • Меньше когнитивная нагрузка при просмотре комментариев.
  • Обращает внимание пользователя на подходящее содержимое.

Недостатки:

Новые комментарии в ветке могут сбить с толку, если вы не знаете контекст.

Мой вариант

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

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

Важный вопрос: надо ли показывать обсуждения на мобильном как-то иначе? Если да, то как? Некоторые приложения (например, Quora и Facebook) на одной странице показывают пост и первый уровень комментариев, а на другой — ответы в выбранной ветке. Скорее всего, это необходимо для повышения производительности приложения.


С другой стороны, YouTube показывает все на одной странице:

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

Предполагаю, хорошим решением будет:

  • Показывать комментарии и ветки ответов на одной странице, чтобы упростить их просмотр и углубление в конкретное обсуждение.
  • В мобильной версии показывать первые пять строк комментария, предоставив возможность прочесть его полностью.
  • Отображать первый ответ на комментарий и дать возможность загрузить еще пять («Загрузить еще» на мобильных).
  • Показывать первые десять комментариев к статье, с возможностью загрузить еще десять («Загрузить еще» на мобильных).

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

Мнения российских экспертов

Егор Камелевоснователь «Проектората»

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

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

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

Пользовательская: нам важно, чтобы люди общались друг с другом или чтобы они просто оставляли свои мнения к материалу? Нам важно, чтобы они рейтинговали друг друга? Нам важно придумать систему, которая не позволит искусственно манипулировать положением комментария в треде? Нам важно сделать такую систему оценок комментариев, которая не будет провоцировать стадный эффект (это когда мы на некоторое время прячем рейтинг комментов)? Нам важно ограничить сообщество от негатива? И еще 100500 вопросов в зависимости от проекта.

Ярослав Табаковдиректор по развитию Astra Media Group

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

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

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

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

В любом случае, ключевой вопрос при выборе того или иного подхода звучит так: «Зачем это пользователям?» Выяснив их задачи, можно совершить осмысленный выбор. Не ответив — невозможно.

Илья Бирманарт-директор «Дизайн-бюро Артема Горбунова»

Мой ответ на вопрос «В каких случаях лучше использовать древовидные комментарии» таков: идеальной системы комментариев нет.

Линейная система:

  • помогает комментаторам держаться темы;
  • мешает вести одновременно несколько бесед;
  • помогает читателям следить за беседой;
  • хорошо воспринимается зрительно;
  • проста в технической реализации.

Древовидная система:

  • помогает комментаторам развивать в ветках разные темы;
  • провоцирует комментаторов на ведение споров;
  • крайне затрудняет последовательное чтение комментариев;
  • вследствие всего этого повышает количество комментариев и время на сайте;
  • плохо выглядит;
  • сложна в технической реализации.

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

Александр Куценкокреативный директор UX-студии Aidem

Это зависит от того, с какой стороны смотреть.

Если со стороны читателя статьи, то модель комментариев как на roem.ru оптимальна — показаны лучшие комментарии, и по ним многое ясно. При желании можно прочитать остальные, но предположу, что это нужно 10–20% пользователей.

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

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

Мне кажется, дело не в выборе между линейной и древовидной системой, а в отсутствии системы, управляющей рангами внимания пользователя к разным веткам дискуссии. Например, если 2 собеседника «зацепились языками» в самом начале обсуждения материала, то их диалог не достоин огромной части страницы и должен быть как-то сокращен с возможностью прочтений при желании = отведем этих спорящих парней в сторону, пусть не мешают остальным. Тогда как если в том же начале обсуждения материала началась ветка с участием большого числа участников, это заслуживает большого внимания, и принцип сокращения отображения такой ветки должен быть другой.

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

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

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

Это большая и интересная тема. Думаю, нас ждут новые модели отображения комментариев.

Кстати, «Медуза» обещала сделать какие-то новые (умные) комментарии на своем сайте. Учитывая все сложности вопроса комментариев под статьями СМИ, очень интересно посмотреть, что они придумали.

#Интерфейсы #комментарии #интернет_издание

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления