Дзен-режим работы с деревом комментариев

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

    Для удобства работы со сложными обсуждениями в теме предлагается несколько реализованных на CSS техник обработки.
    1) изображение ветвящихся узлов;
    2) режим скрытия всей метаинформации, кроме имени (и бледного аватара с текстом сообщений);
    3) режим скрытия всего, кроме бледных аватаров и текста (дзен-режим);
    4) режим показа корневой ветви обсуждения с метаинформацией (оценки, ссылки);
    5) показ одной ветви с полной метаинформацией (дата, автор, кнопка ответа).

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


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

    Предлагается способ (и не один) отображения только необходимых линий только средствами CSS (v.1-2) по простому правилу: если ветвей у узла больше 1, рисуется вертикальная линия, связывающая начала комментариев. Как можно убедиться на работающем примере, вертикальных линий, символизирующих ветвящиеся узлы, часто не очень много, поэтому ориентироваться на форуме становится удобно (бывает и частое ветвление, где предложенной техники будет не хватать). Для большего удобства, линия не обрывается, а заканчивается уголком в конце последнего сообщения узла.

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

    Посмотреть работу отображения сложных деревьев комментариев удобнее всего на живых комментариях, присутствующих на Хабре — через юзерстиль под названием Zen-Comment для любого из основных браузеров. Совместимость проверена с Firefox(3.6-7), Chrome(13, 15), Opera (11.50), Safari(5.1), IE(8-9) (восьмой в ограниченном режиме). Для Firefox и Chrome понадобятся плагины Stylish; для Оперы, Safari, IE стиль устанавливается в настройки. Для всех, кроме FF, нужно скопировать содержимое первого, большого блока @-moz-document domain(«habrahabr.ru»){...} и проигнорировать малый аналогичный блок в конце. (Таким образом, Firefox имеет несколько специальных, написанных для него правил. Остальные совместимости правил для разных браузеров выполнены в виде нескольких хаков. Система зыбкая, но она работает и позволяет смотреть форум в более качественном виде и даже не задумываться, из какого браузера посмотреть.)

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

    Вот что приблизительно мы увидим. Приведу лишь 4 примера, соответствующих основным режимам, потому что лучше один раз установить (займёт вместе со Stylish минут 10), чем рассказывать слайдами. Или делать фильм, как уже делал раньше, презентуя отдалённого предка нынешней системы: (8 минут скринкастов годичной давности).

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

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

    Режим «Одиночная ветвь». При наведении мыши на корень (область в 20 пикселей шириной слева) показывается ветвь обсуждения с подробной информацией, но без дат и имён — чтобы посмотреть и оценить.

    Просмотр нити — при наведении на сообщение подсвечиваются даты, авторы и кнопки ответа всех сообщений-предшественников.

    Теперь допустим, что читатель установил стиль. После этого можно смело рассматривать почти все самые длинные обсуждения, измеряемые сотнями сообщений. Если браузер современный (FF3.6 работает, но медленно), а интернет быстрый, то просмотр топиков на 0.5-3 мегабайта объёмом не представляет трудностей. Из сообщений убран воздух (вертикальные пробелы уменьшены), а вертикальные линии помогают ориентироваться. Далее требуется только практика и желание пользоваться, после чего сможем далее пообсуждать юзабилити представленного механизма.

    Переходим к практике и смотрим примеры сложных и запутанных обсуждений:
    * Почему гику стоит переходить на Linux (870 комм., новых CSS хватает, чтобы разобраться в узлах, где-то на пределе возможностей)
    * Обновление версий Android: печальная статистика (250 комм., много ветвлений)
    * Node.js — раковая опухоль (340 комм., хорошее ветвление и дискуссии)
    * Неправда о компьютерщиках: что там сочиняют про нас? (200 комм, 400 К текстов)
    * Взлом журнала Vogue или видео плеер за 119 руб (900 комм., мало ветвлений) — хорошая иллюстрация помощи дополненных CSS из юзерстилей — пока узлов на ветке — не более 3 и длятся не более, чем на несколько экранов, всё отлично отслеживается вертикальными полосками.
    * Ещё более современный C++ (160 комм., есть хорошо разветвлённая и глубоко вложенная ветка)
    * Были получены исходники 3300 глобальных интернет-проектов (900 комм., самый высокооценённый топик, текста — на 1.5 МБайт)
    * Наступление на свободный интернет на Украине: Закон Украины «О защите общественной морали» (4 ветки, 200 комм., порядочно ветвлений)
    * Признаки плохого программиста (250 комм., ветвлений немного, веток 5-6)

    Примеры вроде бы многочисленного обсуждения, но с малым числом ветвлений:
    * Как я собрал первый аналоговый клиент для твиттера (150 комм., есть ветки, но простые)
    * Трансляция с Let's Talk iPhone (очень много фото, всего траффика — на 6 МБайт; ветвлений относительно немного; 430 комм.)

    Наконец, слишком сложные деревья даже для сделанных костылей на CSS:
    * Чего вам не хватает для полного перехода с windows на linux? (1400 комм., 2.5 МБ одного текста), но с ними лучше, чем без них.
    * Против анонимного пользователя Хабрахабра будет возбуждено уголовное дело (900 комм., тоже трудно читаемо даже в улучшенных CSS)
    * Почему ты используешь Линукс? (700 комм., в начале — сложновато следить за узлами, потому что листать до следующей подветки — 12-15 экранов.)

    Развитие стилей вовсе не закончено — оно дошло до некоторой рабочей точки, когда они могут быть предметом обсуждения и полезны. Есть целый ряд планов по доработкам. Если появятся конструктивные предложения по развитию или есть амбициозный юзабилический проект, где нужно развитие фронтенда, можно будет подумать о развитии.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 31

      +18
      В итоге, получаем кашу текста. Где же тут юзабилити и удобство для пользователя?
        –6
        Вот и я про то. Бывает партия консерваторов. Привычка — большая сила, и такие комментарии от тех, кто не пробовал ставить и не хочет ничего менять — всегда есть и будут в большом количестве. Такие комментарии находят поддержку среди тех, кто ничего не хочет менять, поэтому выигрышны. «Хотим по-старому!» — пользуйтесь старым, смотрите по-старому, подписывайтесь под мнением лидера, но это мнение не имеет отношение к теме.
          +5
          Называйте меня как хотите, но если сравнивать то, что вы сделали, с тем, что есть на Хабре: обе версии одинаково ущербны. Только вот та, что на хабре, хотя бы не сливает все комментарии в одно сплошное полотно текста.
            +1
            Ну так отлично — значит, есть над чем поработать. Если ничего не делать, ничего не изменится.
            (Тексты книг — это тоже каша текста. От комментариев мне лично тоже ничего больше не надо — текст и текст. Читать, а не скроллить.)
              +1
              С таким же успехом можно сравнивать книги и ракеты: ведь обе сделаны человеком.
                0
                Почему Вы обратили внимание на «сделаны человеком», а не на «сделаны для улучшения юзабилити»? Вы уходите от темы. Речь об улучшении юзабилити.
                  0
                  Я вам про целесообразность и корректность сравнения, а вы мне про пельмени.
                    –2
                    И что же некорректного в сравнении ленты комментариев и текста книги?
              +2
                0
                Отличный пример, спасибо :) Под 500 комментариев, занимает 1600 пикселей в ширину. Хороший полигон для дальнейшей отработки юзабилити (например, уменьшать шаг отступа для глубоко вложенных уровней).
                  0
                  Там после определенной степени вложенности отступы перестают проставляться :(
                    0
                    Да, потому что упирается в ограничение ширины ленты. Уменьшение отступа немного отодвинет этот конец ;)
                    +1
                    Вообще, как вы можете заметить, на Хабре отступ по вложенности на уровень вниз равен ширине аватарки. Визуально — это вин. А вот насколько целесообразно — непонятно, потому что по хорошему надо учитывать неограниченную степень. И вот тут начинаются косяки…
                      0
                      Я пробовал когда-то малый отступ для узких экранов, на 10 пикс после 6-го уровня — ничего, нормально. Здесь можно выбрать шаг на пол-аватара или на полуширину вертикальной кнопки.
                        0
                        «после 6-го уровня» этим вы теряете единость интерфейса, что не есть гуд.
                          0
                          Для ширины экрана в 1000 пикселей выбирать не приходится. А смотрится и читается нормально и решение для пользователя интуитивно понятно: пока есть место — отступы посвободнее, потом уплотняются. Это можно сейчас сделать одной строчкой стилей и посмотреть на результат.

                          Вот только консерваторы привели к тому, что статью больше никто не прочитает… И с какого же боку эту статью, наконец, оформить, где её читатели? Уже 2-я попытка вывести на обсуждение на Хабре это дело.
                            +1
                            У меня сейчас как раз 1000px. И вполне устраивает стандартный вид.
                            На счет изменения отступа — очень спорный момент…
                            Хотя придумывать этот блекджек для подобного сайта мне еще предстоит.
                              0
                              Я обычно смотрю в окне на 900 шириной. Стандартный размер отступов (точнее, 20, как здесь) тоже вполне устраивает. Вопрос возник о том, что делать с деревьями типа этого: habrahabr.ru/blogs/development/128279/#comments (30-40 — глубина вложенности), которое привёл автор выше.
                                +1
                                Сейчас еще кто-нибудь вылезет, и скажет, что смотрит хабр в окне шириной 640px. ))) Ну и чего дальше? Всем никогда не угодишь.

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

                                Хотя если ветка обсуждения не перерастает во флуд, то даже при очень сильной вложенности читать не составляет труда. В крайнем случае, можно обойтись малой кровью и использовать в качестве обращения конструкцию вида — "2 spmbt:", по аналогии с тем, как это выглядит на форумах классического вида.
                                  0
                                  Обращения «2 ХХХХ» (в смысле «to username») — то, что приходится делать в одноранговых обсуждениях типа гостевой. Там вообще концов не найдёшь, когда страниц становится больше 20. При этом модераторы ещё имеют обыкновение требовать прочитать всё, чтобы не задавали повторяющихся вопросов :) (ну это их проблемы).

                                  Индикацию иерархии точечками мы видим здесь на Хабре. Она помогает просчитать уровень до 6-7, потом просто взгляд не может различить, 20 точечек там или 21.

                                  Индикация числом — просто число, указывающее уровень вложенности — было здесь в стилизаторе Habr Prettifier. Он сейчас не работает, т.к. после октября не обновлялся. Я тогда перенял у него такую нумерацию, помогало, но после введения вертикальных полос необходимость в числах отпала.

                                  Про 640 — я, вообще-то, рассчитывал и на такое, и на 320 пикс., и это работает :). Только отступы в нынешнем рабочем варианте фиксированы, форумы, соответственно, на ширине 320 не почитаешь. Но если ввести отступы на 10 пикс, то и на 320 можно будет читать вложенности примерно до 10, как, например, в этой ветке, а потом просто их игнорировать или писать числа.
                                    0
                                    Ну на форумах также спасает цитирование, поэтому я бы не сказал, что концы совсем уж теряются.

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

                                    А вот дизайнер из тебя, по правде говоря — хреновый. Возможно ты и победил горизонталь, но при этом полностью запорол вертикаль. Нежнее надо, нежнее :D

                                    640 и 320, это вообще мрак :))) При таких разрешениях не надо городить огород, нужно просто сделать какую-то облегченную мобильную версию. Проблему иерархии это конечно не отменяет, но подход к мобильной версии уже будет совершенно другой.
                                      0
                                      Да в рамках Хабра я не могу развернуться с дизайном — есть жёсткая структура HTML и стили. Дизайн — только в рамках их и юзерстилей. Появилась мысль делать независимую либу для отображения структур на фронтенде.

                                      Мобильная версия — если браузер позволяет (Opera Mini, Fx Mini), то делать другой мобильный сайт нет необходимости. Всё ужимается, функциональность сохраняется с минимальными трудозатратами. Как это выглядит в настоящей адаптированной версии на 420 пикселей, которая была год назад для старого Хабра — смотрите видео из статьи. Там ещё отступы по краям — не 20, а около 6 и всё прочее такое. Поэтому всё максимально прилично.
                                        0
                                        Да, конечно. Я рассматриваю более абстрактный вариант, т.к. на нескольких своих сайтах мы используем аналогичную подачу комментариев и соответственно есть возможность производить практически любые манипуляции. А в рамках хабра, разумеется, особо не развернуться.

                                        Вот мне что-то такое сейчас привидилось:

                    +1
                    Покрутил. Авторское решение ничем не лучше.
                      0
                      лично мне тоже не нравится. Но хоть кто-то об этом думает, это уже плюс.
              +3
              У вас нет принципиальных изменений. Только косметические улучшения, которые не могут решить главную проблему дерева комментариев: быстрый уход ветки вправо. Смелое решение, которое помогает — выделение диалогов: когда при беседе двух человек сдвиг вправо происходит только в самом начале, когда «присоединился» новый собеседник. Дополнительно все это может заливаться цветом (не очень ярким, конечно же, возможно сгенерированным как среднее от цветов аватара), чтобы цвет начинающего «охватывал» весь диалог. Конечно визуальная эстетика может пострадать, но тогда можно попробовать выбрать несколько оттенков и использовать их без привязки к конкретному комменатору. Да и цвет этот нужен далеко не всегда. Тут скорее дело вкуса, и, возможно, на городском форуме интереснее быстро находить комментарии конкретного пользователя, а на хабре читать все подряд.
              Есть подозрение, что «анимация» только ухудшит ситуацию, потому что будет отвлекать, когда этого не требуется. Да и излишнее количество дополнительных деталей (линии, «ответ») не улучшает восприятие.
                0
                > когда при беседе двух человек сдвиг вправо происходит только в самом начале, когда «присоединился» новый собеседник
                ---спасибо за свежую мысль, никогда в этом плане не думал. Это надо будет делать на JS. Движок уже есть, его надо только починить в связи с теми же переделками Хабра, которые сломали стили.

                Генерация палитры цветов в зависимости от активности автора в ветке тоже сделана; как она выглядит, можно чуть-чуть увидеть на habrahabr.ru/blogs/google_chrome/124402/#comment_4091531 (скопирую рисунок)
                image
                Здесь же, в стилях, в отличие от этих разноцветных оформленных картинок, работает только CSS, поэтому я сильно ограничен в решениях, поэтому только косметические изменения.

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

                Анимация серого фона — да, несколько ухудшает ситуацию. Но выглядит неожиданно и свежо, поэтому для демонстрации оставил. В реальном форуме нужно подходить строже и не пичкать 4 метода просмотра на движение мыши; достаточно двух, а остальное — на переключатель по клику.
                +2
                Вам не приходило в голову, почему комменты на хабре и на дёти выглядят примерно одинаково? Различаясь лишь визуальным оформлением, основа фактически одинакова.
                Мне кажется, это выверенный путем проб и ошибок лучший вариант, заключается он по большей части в отступах, которые позволяют как оценивать картину в целом, так и удобно парсить комменты глазами.
                Это при том, что тут разработчики вполне в силах наворотить что угодно из стилей и аякса, а дёти выглядят фактически технодаунами со своим html4 и ограничениями на картинки.

                Если есть желание поразмыслить о том, как улучшить комменты, то думать нужно не над оформлением, потому что все ваши примеры выглядят довольно жутко для глаз, попросту кашей ) И дело не в консерватизме.

                Как заметили выше, копать нужно в первую очередь вопросы многократной вложенности.
                Например, если вложенность превышает какой-то порог, можно сделать какую0то функцию выравнивания для любого коммента. Т.е. просто кликая на коммент 10й вложенности мы делаем его как бы родительским, все что было перед ним сдвигается за вьюпорт, а комменты дальше ориентируются уже на нашего родителя.
                В конце ветки нужно будет лишь сделать стрелочку как бы для перехода на уровень выше.
                Конечно это один из возможных вариантов и нуждается в обдумывании и тестировании, но потенциал у него явно больше, чем пытаться испортить разметку всевозможными иконками и фолдами веток.
                  0
                  invidia: спасибо за наставление, буду помнить и чтить мудрость разработчиков Хабра и Дёрти :). Пробельные пространства — хороший способ логического разграничения блоков. По дизайну — приму свежий взгляд дизайнеров, но чтобы он был, надо, чтобы дизайнеры прониклись идеей. Идею не могу изобразить иначе, чем в виде существующей вёрстки + своих стилей, а это довольно трудно реализовывать, если не с нуля, а с вёрстки Хабра. Поэтому сделано как есть, чтобы показать и покрутить рабочий макет.

                  Идеи побеждения вложенности — очень хорошая тема, если мы тут ей время от времени будем заниматься. Сейчас у меня представлен только CSS — основа, но есть и наработки на JS, b реализовать кое-какие идеи будет несложно.

                  А ещё есть мысль о транспонировании веток — превращать горизонтальную в вертикальную там, где надо. И отмечать это каким-то образом. Спасёт от длинных наклонных ветвей
                  +1
                  Древовидные обсуждения появились ещё во время Usenet, стоит глянуть на то, как с удобным показом дерева комментариев справлялись тогда: The lost art of threaded discussions.
                    0
                    Подам мысль — когда вложенность достигает уровня более 6, давать возможность раскрывать в модальном блоке поверх всей писанины всю основную ветвь. Это точно сработает, если дальнейший хвост почти не разветвляется. При этом использовать идею про диалоги и превращение их в ленту, но для всей раскрытой ветви.
                    Мысль вторая — когда открывается новая ветка, оформлять следующим образом — узловой комментарий, весь первый блок лентой внутрях с отступом, разделитель с отступом, следующий блок лентой с отступом. Применять к каждому ветвеобразующему узлу.

                    Only users with full accounts can post comments. Log in, please.