Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(901) 370-1796
Юзабилити в навигации, юзабилити в контенте, а вот если Юзабилити комментариев, как вам такое часть.1




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


    Полный список статей
/ Юзабилити комментариев, ч.1 / Версия для печати / 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

Через неделю я окончательно сдам дела в этом обрыдшем офисе, чтобы найти какую-нибудь интересную работенку. А пока я скучаю скучал, запивая скуку черным кофе с круассаном со вторым круассаном (т.к. внесение окончательных штрихов растянулось на следующий день), расскажу о своем взгляде на простые вещи.
Я как-то уже пытался сформулировать, отчего я пишу о мелочах, не знаю, получилось или нет, но приведу еще один аргумент. О некоторых банальностях и простые штуки, которые может наваять любой, кто хоть раз открывал книжку по 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- undefined undefined" href="#comment- undefined undefined">#</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=" undefined undefined" 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'); ?> undefined 
    
    undefined

    Для вывода русифицированных дат в постах используют обычно плагин 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?(.+?)(?:ns*n*|z)/s', "<p>$1</p>n", $comm); echo $comm; ?>

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

    $comm=preg_replace('/n?(.+?)(?:ns*n*|z)(?!-)/s', "<p>$1</p>n", $comm); $comm=preg_replace('/n?(.+?)(?:ns*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 для кликабельной панели над полем ввода.
  • iskariot.ru/development/comments-usability/#smiles


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

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

    Полная карта сайта Display Pagerank  
    CMS version 3.6.3 | PTG 0,0248 s.