Комментарии 31
В итоге, получаем кашу текста. Где же тут юзабилити и удобство для пользователя?
Вот и я про то. Бывает партия консерваторов. Привычка — большая сила, и такие комментарии от тех, кто не пробовал ставить и не хочет ничего менять — всегда есть и будут в большом количестве. Такие комментарии находят поддержку среди тех, кто ничего не хочет менять, поэтому выигрышны. «Хотим по-старому!» — пользуйтесь старым, смотрите по-старому, подписывайтесь под мнением лидера, но это мнение не имеет отношение к теме.
Называйте меня как хотите, но если сравнивать то, что вы сделали, с тем, что есть на Хабре: обе версии одинаково ущербны. Только вот та, что на хабре, хотя бы не сливает все комментарии в одно сплошное полотно текста.
Ну так отлично — значит, есть над чем поработать. Если ничего не делать, ничего не изменится.
(Тексты книг — это тоже каша текста. От комментариев мне лично тоже ничего больше не надо — текст и текст. Читать, а не скроллить.)
(Тексты книг — это тоже каша текста. От комментариев мне лично тоже ничего больше не надо — текст и текст. Читать, а не скроллить.)
Покрутите :)
Отличный пример, спасибо :) Под 500 комментариев, занимает 1600 пикселей в ширину. Хороший полигон для дальнейшей отработки юзабилити (например, уменьшать шаг отступа для глубоко вложенных уровней).
Там после определенной степени вложенности отступы перестают проставляться :(
Вообще, как вы можете заметить, на Хабре отступ по вложенности на уровень вниз равен ширине аватарки. Визуально — это вин. А вот насколько целесообразно — непонятно, потому что по хорошему надо учитывать неограниченную степень. И вот тут начинаются косяки…
Я пробовал когда-то малый отступ для узких экранов, на 10 пикс после 6-го уровня — ничего, нормально. Здесь можно выбрать шаг на пол-аватара или на полуширину вертикальной кнопки.
«после 6-го уровня» этим вы теряете единость интерфейса, что не есть гуд.
Для ширины экрана в 1000 пикселей выбирать не приходится. А смотрится и читается нормально и решение для пользователя интуитивно понятно: пока есть место — отступы посвободнее, потом уплотняются. Это можно сейчас сделать одной строчкой стилей и посмотреть на результат.
Вот только консерваторы привели к тому, что статью больше никто не прочитает… И с какого же боку эту статью, наконец, оформить, где её читатели? Уже 2-я попытка вывести на обсуждение на Хабре это дело.
Вот только консерваторы привели к тому, что статью больше никто не прочитает… И с какого же боку эту статью, наконец, оформить, где её читатели? Уже 2-я попытка вывести на обсуждение на Хабре это дело.
У меня сейчас как раз 1000px. И вполне устраивает стандартный вид.
На счет изменения отступа — очень спорный момент…
Хотя придумывать этот блекджек для подобного сайта мне еще предстоит.
На счет изменения отступа — очень спорный момент…
Хотя придумывать этот блекджек для подобного сайта мне еще предстоит.
Я обычно смотрю в окне на 900 шириной. Стандартный размер отступов (точнее, 20, как здесь) тоже вполне устраивает. Вопрос возник о том, что делать с деревьями типа этого: habrahabr.ru/blogs/development/128279/#comments (30-40 — глубина вложенности), которое привёл автор выше.
Сейчас еще кто-нибудь вылезет, и скажет, что смотрит хабр в окне шириной 640px. ))) Ну и чего дальше? Всем никогда не угодишь.
На счет борьбы с вложенностью, первое что приходит в голову, это некая удобная индикация иерархии. Имею ввиду, как-то прокачать точечки слева от комментария.
Хотя если ветка обсуждения не перерастает во флуд, то даже при очень сильной вложенности читать не составляет труда. В крайнем случае, можно обойтись малой кровью и использовать в качестве обращения конструкцию вида — "2 spmbt:", по аналогии с тем, как это выглядит на форумах классического вида.
На счет борьбы с вложенностью, первое что приходит в голову, это некая удобная индикация иерархии. Имею ввиду, как-то прокачать точечки слева от комментария.
Хотя если ветка обсуждения не перерастает во флуд, то даже при очень сильной вложенности читать не составляет труда. В крайнем случае, можно обойтись малой кровью и использовать в качестве обращения конструкцию вида — "2 spmbt:", по аналогии с тем, как это выглядит на форумах классического вида.
Обращения «2 ХХХХ» (в смысле «to username») — то, что приходится делать в одноранговых обсуждениях типа гостевой. Там вообще концов не найдёшь, когда страниц становится больше 20. При этом модераторы ещё имеют обыкновение требовать прочитать всё, чтобы не задавали повторяющихся вопросов :) (ну это их проблемы).
Индикацию иерархии точечками мы видим здесь на Хабре. Она помогает просчитать уровень до 6-7, потом просто взгляд не может различить, 20 точечек там или 21.
Индикация числом — просто число, указывающее уровень вложенности — было здесь в стилизаторе Habr Prettifier. Он сейчас не работает, т.к. после октября не обновлялся. Я тогда перенял у него такую нумерацию, помогало, но после введения вертикальных полос необходимость в числах отпала.
Про 640 — я, вообще-то, рассчитывал и на такое, и на 320 пикс., и это работает :). Только отступы в нынешнем рабочем варианте фиксированы, форумы, соответственно, на ширине 320 не почитаешь. Но если ввести отступы на 10 пикс, то и на 320 можно будет читать вложенности примерно до 10, как, например, в этой ветке, а потом просто их игнорировать или писать числа.
Индикацию иерархии точечками мы видим здесь на Хабре. Она помогает просчитать уровень до 6-7, потом просто взгляд не может различить, 20 точечек там или 21.
Индикация числом — просто число, указывающее уровень вложенности — было здесь в стилизаторе Habr Prettifier. Он сейчас не работает, т.к. после октября не обновлялся. Я тогда перенял у него такую нумерацию, помогало, но после введения вертикальных полос необходимость в числах отпала.
Про 640 — я, вообще-то, рассчитывал и на такое, и на 320 пикс., и это работает :). Только отступы в нынешнем рабочем варианте фиксированы, форумы, соответственно, на ширине 320 не почитаешь. Но если ввести отступы на 10 пикс, то и на 320 можно будет читать вложенности примерно до 10, как, например, в этой ветке, а потом просто их игнорировать или писать числа.
Ну на форумах также спасает цитирование, поэтому я бы не сказал, что концы совсем уж теряются.
Точечки и цифры не претендуют на идеальный вариант. Хотя с ними тоже может получиться что-то более интересное, чем есть сейчас. Идея с линиями, как на скриншотах в начале, тоже, имхо, вполне жизнеспособна и приходила мне в голову.
А вот дизайнер из тебя, по правде говоря — хреновый. Возможно ты и победил горизонталь, но при этом полностью запорол вертикаль. Нежнее надо, нежнее :D
640 и 320, это вообще мрак :))) При таких разрешениях не надо городить огород, нужно просто сделать какую-то облегченную мобильную версию. Проблему иерархии это конечно не отменяет, но подход к мобильной версии уже будет совершенно другой.
Точечки и цифры не претендуют на идеальный вариант. Хотя с ними тоже может получиться что-то более интересное, чем есть сейчас. Идея с линиями, как на скриншотах в начале, тоже, имхо, вполне жизнеспособна и приходила мне в голову.
А вот дизайнер из тебя, по правде говоря — хреновый. Возможно ты и победил горизонталь, но при этом полностью запорол вертикаль. Нежнее надо, нежнее :D
640 и 320, это вообще мрак :))) При таких разрешениях не надо городить огород, нужно просто сделать какую-то облегченную мобильную версию. Проблему иерархии это конечно не отменяет, но подход к мобильной версии уже будет совершенно другой.
Да в рамках Хабра я не могу развернуться с дизайном — есть жёсткая структура HTML и стили. Дизайн — только в рамках их и юзерстилей. Появилась мысль делать независимую либу для отображения структур на фронтенде.
Мобильная версия — если браузер позволяет (Opera Mini, Fx Mini), то делать другой мобильный сайт нет необходимости. Всё ужимается, функциональность сохраняется с минимальными трудозатратами. Как это выглядит в настоящей адаптированной версии на 420 пикселей, которая была год назад для старого Хабра — смотрите видео из статьи. Там ещё отступы по краям — не 20, а около 6 и всё прочее такое. Поэтому всё максимально прилично.
Мобильная версия — если браузер позволяет (Opera Mini, Fx Mini), то делать другой мобильный сайт нет необходимости. Всё ужимается, функциональность сохраняется с минимальными трудозатратами. Как это выглядит в настоящей адаптированной версии на 420 пикселей, которая была год назад для старого Хабра — смотрите видео из статьи. Там ещё отступы по краям — не 20, а около 6 и всё прочее такое. Поэтому всё максимально прилично.
Да, конечно. Я рассматриваю более абстрактный вариант, т.к. на нескольких своих сайтах мы используем аналогичную подачу комментариев и соответственно есть возможность производить практически любые манипуляции. А в рамках хабра, разумеется, особо не развернуться.
Вот мне что-то такое сейчас привидилось:
Вот мне что-то такое сейчас привидилось:
Покрутил. Авторское решение ничем не лучше.
У вас нет принципиальных изменений. Только косметические улучшения, которые не могут решить главную проблему дерева комментариев: быстрый уход ветки вправо. Смелое решение, которое помогает — выделение диалогов: когда при беседе двух человек сдвиг вправо происходит только в самом начале, когда «присоединился» новый собеседник. Дополнительно все это может заливаться цветом (не очень ярким, конечно же, возможно сгенерированным как среднее от цветов аватара), чтобы цвет начинающего «охватывал» весь диалог. Конечно визуальная эстетика может пострадать, но тогда можно попробовать выбрать несколько оттенков и использовать их без привязки к конкретному комменатору. Да и цвет этот нужен далеко не всегда. Тут скорее дело вкуса, и, возможно, на городском форуме интереснее быстро находить комментарии конкретного пользователя, а на хабре читать все подряд.
Есть подозрение, что «анимация» только ухудшит ситуацию, потому что будет отвлекать, когда этого не требуется. Да и излишнее количество дополнительных деталей (линии, «ответ») не улучшает восприятие.
Есть подозрение, что «анимация» только ухудшит ситуацию, потому что будет отвлекать, когда этого не требуется. Да и излишнее количество дополнительных деталей (линии, «ответ») не улучшает восприятие.
> когда при беседе двух человек сдвиг вправо происходит только в самом начале, когда «присоединился» новый собеседник
---спасибо за свежую мысль, никогда в этом плане не думал. Это надо будет делать на JS. Движок уже есть, его надо только починить в связи с теми же переделками Хабра, которые сломали стили.
Генерация палитры цветов в зависимости от активности автора в ветке тоже сделана; как она выглядит, можно чуть-чуть увидеть на habrahabr.ru/blogs/google_chrome/124402/#comment_4091531 (скопирую рисунок)
Здесь же, в стилях, в отличие от этих разноцветных оформленных картинок, работает только CSS, поэтому я сильно ограничен в решениях, поэтому только косметические изменения.
Мысль про средний цвет аватара сильно усложняет задачу, хотя и это в принципе решаемо (читать через канвас). Главная проблема встаёт там дальше в том, чтобы выбрать различные цвета (или геом.фигуры) для различения авторов.
Анимация серого фона — да, несколько ухудшает ситуацию. Но выглядит неожиданно и свежо, поэтому для демонстрации оставил. В реальном форуме нужно подходить строже и не пичкать 4 метода просмотра на движение мыши; достаточно двух, а остальное — на переключатель по клику.
---спасибо за свежую мысль, никогда в этом плане не думал. Это надо будет делать на JS. Движок уже есть, его надо только починить в связи с теми же переделками Хабра, которые сломали стили.
Генерация палитры цветов в зависимости от активности автора в ветке тоже сделана; как она выглядит, можно чуть-чуть увидеть на habrahabr.ru/blogs/google_chrome/124402/#comment_4091531 (скопирую рисунок)
Здесь же, в стилях, в отличие от этих разноцветных оформленных картинок, работает только CSS, поэтому я сильно ограничен в решениях, поэтому только косметические изменения.
Мысль про средний цвет аватара сильно усложняет задачу, хотя и это в принципе решаемо (читать через канвас). Главная проблема встаёт там дальше в том, чтобы выбрать различные цвета (или геом.фигуры) для различения авторов.
Анимация серого фона — да, несколько ухудшает ситуацию. Но выглядит неожиданно и свежо, поэтому для демонстрации оставил. В реальном форуме нужно подходить строже и не пичкать 4 метода просмотра на движение мыши; достаточно двух, а остальное — на переключатель по клику.
Вам не приходило в голову, почему комменты на хабре и на дёти выглядят примерно одинаково? Различаясь лишь визуальным оформлением, основа фактически одинакова.
Мне кажется, это выверенный путем проб и ошибок лучший вариант, заключается он по большей части в отступах, которые позволяют как оценивать картину в целом, так и удобно парсить комменты глазами.
Это при том, что тут разработчики вполне в силах наворотить что угодно из стилей и аякса, а дёти выглядят фактически технодаунами со своим html4 и ограничениями на картинки.
Если есть желание поразмыслить о том, как улучшить комменты, то думать нужно не над оформлением, потому что все ваши примеры выглядят довольно жутко для глаз, попросту кашей ) И дело не в консерватизме.
Как заметили выше, копать нужно в первую очередь вопросы многократной вложенности.
Например, если вложенность превышает какой-то порог, можно сделать какую0то функцию выравнивания для любого коммента. Т.е. просто кликая на коммент 10й вложенности мы делаем его как бы родительским, все что было перед ним сдвигается за вьюпорт, а комменты дальше ориентируются уже на нашего родителя.
В конце ветки нужно будет лишь сделать стрелочку как бы для перехода на уровень выше.
Конечно это один из возможных вариантов и нуждается в обдумывании и тестировании, но потенциал у него явно больше, чем пытаться испортить разметку всевозможными иконками и фолдами веток.
Мне кажется, это выверенный путем проб и ошибок лучший вариант, заключается он по большей части в отступах, которые позволяют как оценивать картину в целом, так и удобно парсить комменты глазами.
Это при том, что тут разработчики вполне в силах наворотить что угодно из стилей и аякса, а дёти выглядят фактически технодаунами со своим html4 и ограничениями на картинки.
Если есть желание поразмыслить о том, как улучшить комменты, то думать нужно не над оформлением, потому что все ваши примеры выглядят довольно жутко для глаз, попросту кашей ) И дело не в консерватизме.
Как заметили выше, копать нужно в первую очередь вопросы многократной вложенности.
Например, если вложенность превышает какой-то порог, можно сделать какую0то функцию выравнивания для любого коммента. Т.е. просто кликая на коммент 10й вложенности мы делаем его как бы родительским, все что было перед ним сдвигается за вьюпорт, а комменты дальше ориентируются уже на нашего родителя.
В конце ветки нужно будет лишь сделать стрелочку как бы для перехода на уровень выше.
Конечно это один из возможных вариантов и нуждается в обдумывании и тестировании, но потенциал у него явно больше, чем пытаться испортить разметку всевозможными иконками и фолдами веток.
invidia: спасибо за наставление, буду помнить и чтить мудрость разработчиков Хабра и Дёрти :). Пробельные пространства — хороший способ логического разграничения блоков. По дизайну — приму свежий взгляд дизайнеров, но чтобы он был, надо, чтобы дизайнеры прониклись идеей. Идею не могу изобразить иначе, чем в виде существующей вёрстки + своих стилей, а это довольно трудно реализовывать, если не с нуля, а с вёрстки Хабра. Поэтому сделано как есть, чтобы показать и покрутить рабочий макет.
Идеи побеждения вложенности — очень хорошая тема, если мы тут ей время от времени будем заниматься. Сейчас у меня представлен только CSS — основа, но есть и наработки на JS, b реализовать кое-какие идеи будет несложно.
А ещё есть мысль о транспонировании веток — превращать горизонтальную в вертикальную там, где надо. И отмечать это каким-то образом. Спасёт от длинных наклонных ветвей
Идеи побеждения вложенности — очень хорошая тема, если мы тут ей время от времени будем заниматься. Сейчас у меня представлен только CSS — основа, но есть и наработки на JS, b реализовать кое-какие идеи будет несложно.
А ещё есть мысль о транспонировании веток — превращать горизонтальную в вертикальную там, где надо. И отмечать это каким-то образом. Спасёт от длинных наклонных ветвей
Древовидные обсуждения появились ещё во время Usenet, стоит глянуть на то, как с удобным показом дерева комментариев справлялись тогда: The lost art of threaded discussions.
Подам мысль — когда вложенность достигает уровня более 6, давать возможность раскрывать в модальном блоке поверх всей писанины всю основную ветвь. Это точно сработает, если дальнейший хвост почти не разветвляется. При этом использовать идею про диалоги и превращение их в ленту, но для всей раскрытой ветви.
Мысль вторая — когда открывается новая ветка, оформлять следующим образом — узловой комментарий, весь первый блок лентой внутрях с отступом, разделитель с отступом, следующий блок лентой с отступом. Применять к каждому ветвеобразующему узлу.
Мысль вторая — когда открывается новая ветка, оформлять следующим образом — узловой комментарий, весь первый блок лентой внутрях с отступом, разделитель с отступом, следующий блок лентой с отступом. Применять к каждому ветвеобразующему узлу.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Дзен-режим работы с деревом комментариев