Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(98I) 7608865
Юзабилити комментариев, ч.2




ПОИСК по сайту


    Полный список статей
/ Юзабилити комментариев, ч.2 / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo

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

Как было сказано, комментарии - основа фидбека автору блога от его читателей. Естественно, они должны быть удобными до крайности, но не до безумия. Что соблюдаем здесь? Более или менее легкость “интерфейса” элементов с максимальной пользой. Любое сомнение означает, что этот элемент здесь попросту лишний.

Ожидаемое содержание:

  • “Зебра” и прочие усложнятели чтения
  • Выделение авторских комментариев
  • Навигация по комментариям
  • Взаимодействие между комментаторами
    • Реплаи
    • Ответ с анкором
    • Цитирование комментариев
  • Рейтингование
  • Спасибочки
  • Определение подписки на комментарии
  • Подписка без комментирования
  • Завязка на френдфид

“Зебра” и прочие усложнятели чтения

“Зебра” - это способ раскраски повторяющихся элементов, идущих подряд (обычно строк в таблице), при которой цвета чередуются. Повтор обычно идет через строчку (белая, серая, белая и т.д.), или через несколько. В комментариях многих тем такая штука применяется достаточно часто, вне зависимости от объемов комментирования.

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

Еще один способ выделения комментариев - выделение цветом комментария под курсором. Можно обойтись даже без javascript, если прописать в CSS псевдо-атрибут :hover и меняя в нем background.

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

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

Зато вот выделить авторские комментарии в обсуждении не только можно, а даже нужно.

Что есть у ваятелей плагинов на эту тему?

Есть унылый Comment Highlighter с обращениями к базе и куче кода. Впрочем, он зато умеет подсвечивать комментарии не только автора.

Есть AuthorHighlight. Он достаточно простенький, так что можно использовать и его - сверяя одновременно e-mail и имя автора комментария с авторскими, он при правильном исходе присываивает ему класс highlighted. В обратном - ничего (впрочем, это поправимо).

Есть вариант использования этого плагина от некоего Эпического Алекса, который, видимо и проник на территорию нашей глубинки. Его, видимо, кто-то перевел, сделал простенький гайд с проверкой только по e-mail’у и в этом виде его обнаружил Блогомоб (правда, смысла в использовании класса oddcomment я не вижу, т.к. он даже не определен в CSS).

Если же мы хотим сделать это вручную, то нам нужно к чему-то привязаться. Забавно, но в таблице комментариев сохраняется не только ваш IP-адрес, но и user-agent браузера зачем-то. Но, конечно же, самая приятная привязка - по user_id. В общем, все просто - по условию подставляем текст в класс, а в CSS его определяем.

В случае, если на блоге закрыта регистрация новых пользователей и вы - единственный автор (у анонимов id=0), то достаточно просто конструкции:

<?php if($comment->user_id!=0) echo " authortext";?>

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

<?php if(1==$comment->user_id) echo " author_vasya";
elseif(2==$comment->user_id) echo " author_petya"; ?>

Здесь есть небольшая трудность - если вы любите писать комментарии, не логинясь (Вордпресс постоянно сбрасывает авторизацию, или с разных компьютеров), то проще будет идентифицировать автора как раз по e-mail, или имени:

<php if( $comment->comment_author_email==get_the_author_email())
	echo " authortext"; ?>

или

<php if (strstr(get_comment_author(),'admin'))
	echo " authortext"; ?>

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

< if ( $comment->comment_author_email == get_the_author_email() ||
	strstr(get_comment_author(),'admin')) echo " authortext";?>

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

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

<div class="comment<?php if($comment->user_id!=0)
	echo " authortext"; ?>"

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

.authortext {
background: #CCC !important;
}

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

Навигация по комментариям

Продолжаем наше веселье самым монструозным наворотом на комментарии, что можно придумать - это Comment Toolbar Plugin (обзор от AlexNote). Если другой найденный плагин для видеокомментирования (существует аналог Riffly Webcam Video Comments) еще потенциально интересен, то это - настоящий кошмар здравомыслящего человека.

Нет, скрипты на цитирование и ответ вполне неплохи (рассмотрим чуть ниже), но стрелочки перемещения абсолютно бесполезны. Во-первых, их нужно кликать мышкой (скролл или PageDown/End куда удобней и быстрее). А во-вторых, они (даже если их для приличия сделать стрелочками) загромождают много места.

Смысла в них немного - комментарии обычно слишком малы по размерам, чтобы была хоть какая-то необходимость в навигации по ним.

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

Взаимодействие между комментаторами

Быстро подставлять имя автора, которому хочешь ответить, в свой комментарий - дело полезное. на подобные дела js работает прекрасно.

<азы джаваскриптинга>

Вообще, можно вставить скрипт прямо в тело HTML, вставив до </head>header.php) объявление:

<script type="text/javascript">
<!--//
	... js-код ...
//-->

Если же вы используете много функциональности на javascript’е, лучше если она будет в отдельном приаттаченном файле (в посте об оптимизации я обязательно упомяну, что он должен быть один, да). Он отлично закешируется и не будет грузиться каждый раз. В хеде же мы пропишем всего одну строку:

<script type="text/javascript" src="путь_до_скрипта">
</script>

</азы джаваскриптинга>

Для скриптов нам понадобится id тега textarea, который служит нам блоком для комментариев. Если вы последовали (практически) моему совету по защите блога от автоматического спама (месяц без спама), то называться ваш текстареа будет по-другому. Вот и присваиваем переменной это значение.

var name_textarea = "text";

Реплаи

Возьмем добавление реплаев от уже упомянутого Comments Toolbar - с небольшими изменениями (не забывая избавиться и от этих клевых <b>, и от забивающего места закомментаренного копирайта). И встроим код собственноручно, чтобы не забивать базу лишними и ненужными настройками.

Функцией js, которая будет делать нужное нам действо, будет вот это чудо:

function comReply(oauthor) {
var txtarea = document.getElementById(name_textarea);
txtarea.value += '@' + oauthor + ": ";
txtarea.setSelectionRange(txtarea.value.length,
	txtarea.value.length);
txtarea.focus();
}

Отличие от оригинальной версии в том, что добавлена принудительная установка курсора, т.к. Opera с этой частью может глючить.

Несмотря на то, что использован тви-стиль реплаев, хотя никто вам не мешает подставить и стандартное

txtarea.value += "<strong>" + oauthor + "</strong>, ";

и что угодно. Хотя лучше стронг оставить на долю поста, а для этого создать span с увеличенным font-weight.

После этого нам нужен вызов функции на ссылке, расположенной в самом комментарии. Думаю, ясно, что это будет в comments.php внутри <div class="comment":

<a onclick="comReply('<?php comment_author() ?>');
	return false" href="#text">Ответить</a>

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

Оформляете этот элемент в див или просто размещаете его CSS, и все.

Ответ с анкором

У меня глупое, но непроходящее ощущение, Даниил Гридин в своем блоге о продакт-плейсменте вставляет ответы комментаторам в виде имя-ссылка вручную. Сделать такую функцию доступной каждому можно с помощью все того же скрипта, слегка модифицированного.

function comReply(oauthor,olink) {
var txtarea = document.getElementById(name_textarea);
txtarea.value += '<a href="#comment-' + olink + '">'
			+ oauthor + "</a>:n";
txtarea.setSelectionRange(txtarea.value.length,
	txtarea.value.length);
txtarea.focus();
}

и добавить в шаблон комментариев

<a onclick="comReply(
	'<?php comment_author() ?>','<?php comment_ID(); ?>');
return false" href="#text">Ответить</a>

Вот теперь на имени будут ставиться еще и ссылки (анкоры) на сам комментарий.

Цитирование комментариев

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

Но делают это неправильно. Например, “динамично развивающийся” блог человека на пределе делает явную ошибку, потому что цитирование в его блоге сделано также на пределе. Текст вставляемого комментария записан прямо в javascript’е и дублирует основной текст комментария (увеличивая место комментариев в HTML в два раза).

Quoter также какой-то мутный, с громоздким кодом, множеством настроек и пр. Впрочем, многим именно это и по душе (не взирая на жесткие нагрузки).

Если же брать за основу все тот же плагин, найденный AlexNote, то нормальный краткий вариант прицепить к уже выше описанному скрипту даже проще. Хотя лучще все-таки выбрать все-таки между просто вставкой имени автора или цитированием, чтобы все-таки не загромождать лишними элементами комментарии. То есть или реплаи, или цитаты.

Начнем с шаблона комментариев. Первоначально нам надо заключить основной текст комментария в спан, чтобы исключить мета-информацию. Т.е. что-то вроде:

<span id="com-<?php comment_ID(); ?>">
	<?php comment_text(); ?>
</span>

Ссылка на цитирование будет:

<a onclick="comQuote(
	'com-<?php comment_ID(); ?>',
	'<?php comment_author() ?>');return false"
href="#text">Цитировать</a>

В js-файле (или куске скрипта в HTML) не забываем о том, что первая строчка - определение переменной с id текстареа у нас то же самое. А вот функция помощнее выйдет (зато один раз для всех комментариев, а с кешированием - даже меньше):

function comQuote(oquotation, oauthor) {
  var otext = document.getElementById(oquotation);
  var txtarea =
	document.getElementById(name_textarea);
  if (window.getSelection)
	 var sel = window.getSelection();
  else if (document.getSelection)
	 var sel = document.getSelection();
  else if (document.selection) {
	 var sel = document.selection.createRange().text; }
  if (otext.innerText){
	  if (sel != "") txtarea.value +=
		oauthor + " написал:n<blockquote>"
		+ sel + "</blockquote>nn";
	  else txtarea.value +=
		oauthor + " написал:n<blockquote>"
		+ otext.innerText + "</blockquote>nn";
  }
  else {
	  if (sel != "") txtarea.value +=
		oauthor + " написал:n<blockquote>"
		+ sel + "</blockquote>n";
	  else txtarea.value +=
		oauthor + " написал:n<blockquote>"
		+ otext.textContent + "</blockquote>nn";
  }
  txtarea.setSelectionRange(txtarea.value.length,
	txtarea.value.length);
  txtarea.focus();
}

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

Полноценные авторские ответы и древовидные комментарии рассмотрим позже, ладненько?

Рейтингование

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

Спасибочки

А вот плагин, который реализовал следующую вещь, мог бы иметь успех. Не так давно Алтайский блоггер в своем “подкасте” затронул тему “спасибо”-гокнокомментаторов, с которыми сливаются и обычные посетители, которым нечего сказать, кроме спасибо.

Решение проблемы может в простом плагине наподобие сольной подписки, описанной ниже - автор оставляет только ссылку на себя (закрытую в javascript’ах или нет, неважно), как бы говоря “спасибо”. Как система рейтингования предназначена, чтобы избавиться от всевозможных “LOL” и “баян”, так и подобный плагин бы решил проблему отделения спамеров от как бы нормальных комментаторов.

Определение подписки на комментарии

Благодарю Блогомоба, который все-таки ткнул меня носом в функцию для определения подписки на комментарии конкретного комментатора (и найденое dimox’ом). Такая фича позволяет сразу видеть, надо ли отвечать человеку, или он не подписался на комментарии (хотя некоторые и используют RSS для этого).

Действительно, в плагине Subscribe to Comments есть такая функция (проверка на ее существование стоит, чтобы не возникало ошибки при выключенном плагине). Поправлю только две вещи. Если верстка используется не HTML4, а XHTML, то нужно закрыть одинарный тег img. Плюс дополнительно к alt надо использовать title, чтобы был не только альтернативный текст, но и подсказка при наведении курсора. Т.е. конструкция превращается в:

<?php
  if (function_exists('comment_subscription_status')) {
    if (comment_subscription_status()) {
      echo '<img src="http://.../subscribe.jpg"
		alt="(подписан)" title="(подписан)" />';
    }
  }
?>

В проверку еще стоит добавить условие из главки про авторское выделение

&& $comment->comment_author_email ==get_the_author_email()

Ведь и так понятно, что автор подписан на комментарии в своем блоге?

Подписка без комментирования

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

<?php
global $id, $sg_subscribe, $user_email;
if ( !$sg_subscribe->current_viewer_subscription_status() ) :
	get_currentuserinfo(); ?>
<form action="" method="post">
	<input type="hidden" name="solo-comment-subscribe"
		value="solo-comment-subscribe" />
	<input type="hidden" name="postid"
		value="<?php echo $id; ?>" />
	<input type="hidden" name="ref"
		value="<?php the_permalink() ?>" />
	<div>Подписаться, не комментируя</div>
	<input type="text" name="email" id="solo-subscribe-email"
		value="<?php echo $user_email; ?>" />
	<input type="submit" name="submit" value="Подписаться!" />
</form>
<?php endif ?>

Если размещается форма до формы комментариев, то, наверное, стоит еще вставить вызов sg_subscribe_start() прямо после объявления глобальных переменных.

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

Завязка на френдфид

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

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

Проблема здесь только одна - вас вообще комментируют на френдфиде?


 

На этой весьма оптимистичной ноте и закончим разбор некоторых из многих возможностей, которые облегчают комментаторам жизнь.

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

3
Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(98I) 7608865

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2024 romver.ru

Полная карта сайта Display Pagerank