Дискуссионный раздрай|Юзабилити комментариев, ч.1

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

Я как-то уже пытался сформулировать, отчего я пишу о мелочах, не знаю, получилось или нет, но приведу еще один аргумент. О некоторых банальностях и простые штуки, которые может наваять любой, кто хоть раз открывал книжку по PHP, CSS или HTML, не знаете вы, мои дорогие читатели. Или забыли. Или вам плевать. да и есть определенная вероятность, что о таких вещах вы просто забыли.

Вот, скажем, комментарии. Ясно же, что это самое главное в блогах. Нет, конечно, бывают блоги и без них (но 90% из них уже можно считать за простые сайты с прикрученными RSS). Но ведь мы пишем всякую чушь именно для того, чтобы другие прочитали, высказали свое мнение или покритиковали (хотя большинство предпочитают лесть).

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

От этого и будем танцевать.

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

Это первая. Ну а для удобства небольшое содержание:

• Комментарии на глагне
• Общее оформление комментариев
• Верстка блока комментариев
• Семантика
• Мета-информация
  • Якорь
  • Имя и ссылка комментатора
  • rel="nofollow"
  • Дата
  • Аватары
  • Редактирование комментариев
• Вывод комментариев
• Форма комментирования
• Смайлики

Первая часть о самых скучнейших вещах.

Комментарии на глагне

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

В таких случаях, ссылка на обсуждение должна стоять в самом внизу. Соответствующая функция в home.php, если кто-нибудь забыл, выглядит так:

<a href="<?php comments_link() ?>">
	<?php comments_number(); ?>
</a>

Опять банальность (интересное еще впереди) — хороший русифицированный «попап» со склонениями, можно получить, использовав простой плагин Russify Comments Number.

Но у него есть маленькая проблемка — в нем не определена русификация в случае, если комментарии отключены. Ведь некоторые темы используют такой вывод (типа, более простой):

<?php comments_popup_link(); ?>

И появляется текст на буржуйском «Comments off». Поэтому пользуйте исправленную версию плагина Russify Comments Number от вашего покорного слуги. Да и не забывайте — всегда можно его изменить, чтобы сделать собственную необычную надпись.

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

Общее оформление комментариев

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

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

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

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

Естественно, ссылки в тексте комментария должны быть подчеркнуты, хотя ссылка на имени автора — необязательно (как и ссылки в навигации).

Верстка блока комментариев

Про семантику — в следующей главке, а здесб всего одна фраза (большая, как всегда).

Во всех темах, которые я видел, комментарии <div id="comments">...</div> внесены в <div id="content">...</div>. Смысла в этом ноль, лучше вынести его за пределы основного контента поста, хотя, скорее всего, это приведет к тому, что придется прописывать дополнительные CSS-атрибуты. Таким образом мы отделим комментарии от текста.

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

<?php get_sidebar(); ?>
<?php comments_template(); ?>

Семантика

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

• Самый простой вариант — обычными дивами. Вполне себе вариант, пока нет альтернатив.
• Списком. На некоторых блогах комментарии нумеруются в порядке появления, так что вполне логичный вариант. Хотя иногда это делают средствами php в цикле (даже в таком случае стоит использовать упорядоченный <ol>, а не <ul>, с CSS-свойством list-style-type:none), можно попробовать сделать вывод цифр правильно и с оформлением (картинкой фона или expressions).
• Списком определений dl-dt-dd. Тоже так себе вариант, который использовался на прошлом Хабре. Внутри <dl> лежал один <dt>, определявший имя комментатора, и два <dd> — для даты и самого комментария. Хорош этот способ гибким использованием CSS-свойств, но за семантичность ручаться не могу.
• Интересный, но не семантичный способ — с использованием цитаты <blockquote> для текста комментария и <cite> для авторской ссылки. Однако, несмотря на приятность такого способа, комментарий не является цитатой.

Собственно, все что приходит в ум на данный момент. В пост призывается Дин!

Мета-информация

Под мета я понимаю всю сопровождющую комментарий информацию об авторе, ссылке на его блог, времени появления и т.п.

Еще одним из классов мета можно назвать последние посты автора комментария, появляющиеся с помощью, например, commentluv. Практику эту не поддерживаю и не одобряю. То же самое о всплывающем окошке с подробной информацией о комментаторе от Comment Info Tip — такое решение подходит большим и серьезным проектам, но не блогам.

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

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

Идеал — имя автора и дата. Возможно использовать «написал:» или краткие предлоги, но не более.

Якорь

Якорь. Якорь — это ссылка со специального элемента в комментарии на сам этот комментарий. Надо сказать, элемент это важный и им не стоит пренебрегать. Даже если ваш блог мало комментируют и вам жалко размера HTML, подумайте о том, что именно этот якорь позволяет делать две вещи. Во-первых, на него могут ссылаться (да и вы в ответе можете указать, что отвечаете именно на этот комментарий). А во-вторых — именно такая ссылка должна приходить по почте подписанным, а не простой #comments.

В качестве управляющего (видимого) элемента выбирается что-то простое и логичное. Часто используется дата, но меня этот способ не особо впечатляет, т.к. лишен подоплеки. Лучше использовать простую решетку (как созданный стандарт) или самый настоящий якорь в стиле ярушечки.

Языком Wordpress+PHP это будет представлено так:

<a id="comment-" href="#comment-">#</a>

Что, соответственно, выведет такой HTML:

<a id="comment-196" href="#comment-196">#</a>

Имя и ссылка комментатора

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

Опять же, этот пункт может вызывать определенные проблемы. Бывают кривые темы, в которых, если человек не оставил свой урл, будет отображаться ссылка на http:/// или, что не лучше, на сам пост.

Решение простое и зависит от структуры вашего кода.

Обычно это:

<?php if(get_comment_author_url()!="") : ?>
	<a href="<?php comment_author_url() ?>" rel="external">
		<?php comment_author() ?>
	</a>
<?php else : ?>
	<?php comment_author() ?>
<?php endif ?>

или

<?php if(get_comment_author_url()!="") : ?>
	<a href="" rel="external">
<?php endif ?>
	<php comment_author() ?>
<?php if(get_comment_author_url()!="") : ?>
	</a>
<?php endif ?>

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

rel="nofollow"

Здесь небольшое отступление о глупости оптимизаторов (которые SEO, да). Это тех самых, которые советуют пихать rel="nofollow" куда не следует. Про любителей <noindex> я, пожалуй, промолчу.

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

Но всего хуже — совет закрывать «повторяющиеся» ссылки на пост — с катом #more и на комментарии #comments, анкоры на комментарии и т.п. Ведь поисковики прекрасно склеивают подобные ссылки и знают, что это всего лишь анкор на странице.

Дата

По привязке комментов ко времени кратко — она должна быть записана по правилам русской типографики (28.10.08 или 28/X/08; время — 22:21, через точку редко). Смысл иметь дату в комментариях есть точно — чтобы было по чему ориентироваться тем, кто хочет откомментировать. Про время тоже самое.

<?php comment_date('d.m.y'); ?>

Для вывода русифицированных дат в постах используют обычно плагин Russian Date, но в комментариях это избыточно. Впрочем, если нужно использовать какой-то необычный шаблон, то эта функция использует стандартные PHP-шные символы-"маски":

j

День месяца без ведущих нулей

d

День месяца, 2 цифры с ведущими нулями

z

Порядковый номер дня в году (нумерация с 0)

w

Порядковый номер дня недели

D

Сокращенное наименование дня недели, 3 символа

l

Полное наименование дня недели

n

Порядковый номер месяца без ведущих нулей

m

Порядковый номер месяца с ведущими нулями

M

Сокращенное наименование месяца, 3 символа

F

Полное наименование месяца

Y

Порядковый номер года, 4 цифры

y

Номер года, 2 цифры

g

Часы в 12-часовом формате без ведущих нулей

h

Часы в 12-часовом формате с ведущими нулями

a

am или pm

A

AM или PM

G

Часы в 24-часовом формате без ведущих нулей

H

Часы в 24-часовом формате с ведущими нулями

O

Разница с временем по Гринвичу в часах

i

Минуты с ведущими нулями

s

Секунды с ведущими нулями

Размещать же саму дату можно как угодно, помня о «чистоте» пространства и думая о читаемости мета-информации — автор комментария должен быть наиболее видим. Поэтому предпочтительно либо выделить имя комментатора, либо убрать дату вправо по float:right.

Еще одна фишка, немного связанная с датой — закрытие возможности комментировать к старым постам. Стоит делать только тогда, когда смысл обсуждения со временем исчезает (новостная тема). Делает это плагин Comment Timeout.

Аватары

Про то, как установить граватары в комментарии писали уже все, кому не лень. Аватара служит дополнительной идентификацией автора, наряду с его именем, и позволяет по одному взгляду понять, кто написал комментарий. Однако, в большинстве блогов ее применение просто неоправданно и занимает много места.

Есть неплохой вариант с подставлением фавиконки блога комментатора в качестве авы — Favatars. Вот эта идея даже более интересная.

Редактирование комментариев

Ну и совсем кратко. Этой функции в некоторых темах нет вовсе.

Это практически тот же аналог функции, выдающей ссылку на редактрирование поста:

<?php edit_post_link('edit', '[', ']'); ?>

Ссылка на редактирование видна только залогиненному админу и позволяет переходить к редактированию в один клик.

<?php edit_comment_link('edit', '{', '}'); ?>

Соответственно, в аргументах — текст ссылки, текст до и после.

Вывод комментариев

Мне не особо нравится то, как в Вордпрессе парсится и типографится текст комментария (нет, все практически нормально). Но т.к. этому надо посвятить отдельную публикацию, да еще дописать плагин, то тут просто перечислю пару хитростей.

<php comment_text() ?>

Если же воспользоваться выводом get_comment_text(), то фильтры не будут применяться.

Что же нам надо?

• Во-первых, чтобы все абзацы был в параграфах p. Причем, вне зависимости от количества нажатий Enter (по умолчанию, один раз — это перенос <br />, что полный отстой, выражаясь языком забытого детства). Ну не нравятся мне <br />.
• Выделение ссылок с http:// или просто www (к сожалению, что без них, пока будут обрезаться), причем надо учитывать многие косяки, например, отсутствие захвата точки в конце. При этом сам из анкора такой «живой» ссылки будем вырезать начальное «http://».

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

Суть — в использовании временной переменной и регулярных выражений.

<?php
$comm=get_comment_text();
$comm=preg_replace("#(https?)://(\S+)([^\s.,>)\];'\"!?])#",
	'<a href="\\0">\\2\\3\\4</a>',$comm);
$comm=preg_replace(
	"#^(?!(https?)://)www.(\S+)([^\s.,>)\];'\"!?])#",
	'<a href="http://\\0">www.\\1\\2\\3-</a>',$comm);
$comm=str_replace(" - ",' — ',$comm);
$comm=preg_replace('/\n?(.+?)(?:\n\s*\n*|\z)/s',
	"<p>$1</p>\n", $comm);
echo $comm;
?>

В случае же, если нам нужно все-таки поддерживать <br />, но в особых случаях (например, в списках, вручную отбиваемых дефисами с новой строки), можно сделать такой опыт. Заменяем пред-пред-последнюю строку на:

$comm=preg_replace('/\n?(.+?)(?:\n\s*\n*|\z)(?!-)/s',
	"<p>$1</p>\n", $comm);
$comm=preg_replace('/\n?(.+?)(?:\n\s*\n*|\z)-/s',
	"\\1<br />\n-", $comm);

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

Форма комментирования

Форма комментария должна быть. Рассусоливать о «вписывании» в стиль и прочем я уже не буду. Преимущество сжатой формы с подписью внизу перед обычной также мало, как и в случае «зебры». Я, например, на автомате заполняю поля автор-мыло-ссылка первыми всегда, и галочки сразу ставлю.

Тут главное, чтобы эти три поля имели правильное наименование, чтобы браузер знал, где автоподстановку выполнить и что подставлять. Комментаторы — ленивые люди.

И помним, что

<?php do_action('comment_form', $post->ID); ?>

надо ставить до кнопки <input type="submit"..., чтобы галочка подписки, капча и все другое, что к этому действию привязано, не уплывало вниз от комментатора.

Предварительный просмотр (например, с помощью Ajax Comment Preview, или Live Comments Preview или Filosofo Comments Preview) — не нужен совершенно.

Редактирование комментариев самим пользователем (например, при помощи Edit Comments XT) также вещь лишняя(обоснование by Смирнов).

Смайлики

Фтопку.

Уродливые (эй, их можно менять), рвущие междустрочник (эй, CSS поможет) и несерьезные с той точки зрения, что хорошая шутка остается шуткой и без смайлика. Кому нравится — есть плагин Custom Smileys для кликабельной панели над полем ввода.

---

Вторая часть статьи — о различных занятных и не очень финтах в комментариях ?