Лого vc.ru

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

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

Дизайнер продукта в 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 собеседника «зацепились языками» в самом начале обсуждения материала, то их диалог не достоин огромной части страницы и должен быть как-то сокращен с возможностью прочтений при желании = отведем этих спорящих парней в сторону, пусть не мешают остальным. Тогда как если в том же начале обсуждения материала началась ветка с участием большого числа участников, это заслуживает большого внимания, и принцип сокращения отображения такой ветки должен быть другой.

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

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

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

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

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Еще один вариант az2.snega.ru/sutra/143007. Правда конечно все застыло и застыло оно не в том виде, в котором мне представлялось (автор не я, но мы обсуждали то что делалось). Мне кажется нужно добавить новый элемент (навигация по комментариям), чтобы читатель мог до чтения 500 комментариев определить важные и интересные сообщения, тематический ход обсуждения (основная тема, косвенная, вообще вне темы и так далее). Все это по идее, должны отфильтровать оценить те, кто начал читать, когда было 20 комментов или 100 и каждый новый читатель помогает в оценке комментариев и определении тематик. Саму навигацию я представляю в виде 3Д структуры, где каждое обсуждение узел-тематика, о которой идут тематические связи-обсуждения, которые их темы про велосипеды могут идти к теме металлов, а у темы металлы появится связь с темой про велосипеды. Размер узла, цвет линий, их форма и размер могут нести разные подсказки для пользователя. А сами комментарии могут быть вполне линейными с подсказкой по навигации в каком месте обсуждения сейчас находится читатель.

Тот момент когда vc знает как

Тот момент, когда у соседнего проекта (TJournal) всё очень хуёво с этими самыми древовидными обсуждениями.

0

Единственное отличие комментов TJ от VC - отсутствие там текстового указания кому был дан ответ. В остальном они идентичны

0

Что именно хуёво?

0

Как на Хабре или как в Disqus. Чесслово, не вижу, что тут обсуждать.

Имхо, самый лучший вариант реализован у Livejournal'a - все ответы к комменту, за исключением первого, скрываются, что избавляет от избытка неинтересной тебе информации. Раскрыть ветку ответов к интересному тебе комменту легче, чем крутить полотна флейма, как это бывает на Реддите и Пикабу.

Самый лучший вариант еще не реализован и за его реализацию никто не брался.

Так как монетизировать коментарии или пользовательскую массу коментирующих (вне зависимости от контента и темы) пока не удалось.

Как только самим коментирующим можно будет что то "впарить".
Появятся сервисы по сравнению с которыми Реддит - отстой из прошлого века.

0

Мы на rupor.sampo.ru/ остановились на несворачиваемых древовидных, но со ссылками прямого перехода между "ответами на" и обратно по всей ветке.

0

А у нас на Фан-буке еще (кроме скрытого дерева) мы постоянно поднимаем тот комментарий в ветке которого есть последний пост. То есть интересные для обсуждения всегда вверху. Рост количества комментариев после введения такой системы за неделю составил +30%.
На Лит-эре повторили эксперимент. Многим непривычно, но статистика показывает, что вовлечённость "общительных" становится выше.
Для примера раздел Блоги - там самые жаркие дискуссии. Кстати, в ленте (и виджете) Блоги тоже поднимаем записи с последним комментарием (кроме комментария автора) lit-era.com/blogs

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Актуальная Птица

у соседа на заборе тоже написано :)
исполнятся одни желания, появятся другие
а если желаний нет то вы уже почти святой.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Kirill Nikolaev

Да тут та же самая проблема, как на фрилансе. Смотрим портфель, смотрим квалификацию.
Заплатили за шлак - пишем в ТП.

Bramio — поиск экспертов и решение задач с помощью видеозвонков
0
Kirill Nikolaev

Короче, вот:
1. Я зарегистрировался. Почему-то смутило, что в блоке "номер телефона", на вкладке "верификация" номер телефона отображался, как верифицированный. Хотя я его только лишь ввёл.
2. Ребята, пожалуйста, UX, UX, UX в личном кабинете.
3. А где работа-то? Одна заявка двухмесячной давности. Или я не вовремя зашёл?
4. Деньги через пейр. Только пейр. Вы серьёзно? В 2016м? А что не онли догекоины? Я честно создал второй акк, чтобы потестить, как происходит сам "процесс", но, к сожалению, после составления контакта баланс я так и не смог пополнить, хотя в пейре я всё-таки зарегистрировался (ну за что)
5. Опять же, классификаторы и рубрикаторы очень надо адекватные делать. Очень. Надо.

Резюмирую (очень субъективно):
Очень сыро, но задатки хорошие.
Самая боль - это ux и биллинг. Я понимаю, что вы можете заставлять пройти 9 кругов ада, чтобы вывести деньги. Но дайте мне, чёрт возьми, возможность их туда завести так, как мне удобно.

Bramio — поиск экспертов и решение задач с помощью видеозвонков
0
Andre Vlasov

Эцсамое. Во первых Amy Tunick это женщина, а во вторых ник fuck Jerry - это не "переспать с Джерри", а "ну его Джерри ***** (на половой член)". Причём там Под Джерри имеется в виду комик Джерри Сайнфелд. Ну и ещё, beigeCardigan это вроде его девушка. А в остальном все верно. Спасибо, пожалуйста.

«Брендам должно быть комфортно»: как американский блогер под псевдонимом FuckJerry завоевал популярность рекламодателей
0
Слава Діонісьєв

К роскомдозору стоит очередь

Роскомнадзор заявил об отсутствии претензий к Netflix из-за «непопулярности сервиса» в России
0
Показать еще