Решение задачи про дизайн ленты материалов от ITTUM'а

09.10.2008

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

Дизайн ленты от ITTUM'а

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

Заголовок — призван привлечь внимание читателя. В изначальном варианте хорошо выполняет свои функции.

Дата, время — время добавления сообщения никто не осмелился тронуть и я в том числе, т. к. считаю, что с ним всё отлично оно на 100% выполняет свои функции.

Tags — а вот с тегами игрались все, в том числе и я. Задумайтесь, какие именно функции выполняют теги.

1. Показать пользователю основные вопросы, освещаемые в сообщении (я очень часто пробегаю сначала только по тегам и уже, если интересно, начинаю читать сообщение).

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

3. Набрать плюсов с точки зрения сео, иногда благодаря точному вхождению фраз.

Итак, 3-ий вопрос решается при любом расположении тегов, т.к. поисковикам вообще все равно.

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

Отвечать на 1-ый вопрос логичнее всего после того, как пользователя заинтересовали, т.е. показали заголовок. Связано это с тем, что человек проходит сайт следующим образом: глянул на рейтинг* — пробежал глазами — зацепился на заголовке — глянул на рейтинг* — пробежал по тексту или тегам — идентифицировал основную тематику текста — глянул на рейтинг*  — начал читать подробно или вернулся к началу.

* объяснение действия «глянул на рейтинг» будет дано в пункте «оценка сообщения».

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

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

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

Тело сообщения — тело сообщения неприкосновенно.

Оценка сообщения — а вот тут для меня была самая большая думка. Для чего служит голосование? 1. Чтобы на него отвечали 2. Чтобы по нему ориентировались.

Если мы отвечаем на 1-ый вопрос, то тогда голосование уместно делать в самом конце, когда человек вроде бы уже прочитал. Если же отвечать на 2-ой вопрос, то уместнее делать голосование в самом начале на уровне заголовка, тогда каждому пользователю будет ясно качество материала.

Взгляд на рейтинг зависит от отношения человека к нему. Если он считает, что рейтинг является определяющим фактором в его выборе материала, то он может смотреть на рейтинг в первую очередь. Я, к примеру, так делаю при поиске роликов на youtube или rutube когда мне неважно, о чем он, главное чтобы было интересно. Если на нем стоит отметка 4 из 5, значит это действительно интересно, и я, лишь потом начинаю читать заголовок.

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

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

Более того, элемент голосования после тела сообщения служит ещё и визуальным разделителем, отделяя его от ссылок «читать дальше» и «комментарии».

Читать дальше — не стал трогать, т. к. считаю, что и так все просто и лаконично.

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

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

Комментарии

Дмитрий Сергеев, 09.10.2008 16:48

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

1. Не нравится, что ссылка «читать дальше» отгорожена от тизера громоздким виджетом. Не логично: я еще не читал дальше, а мне предлагают оценить.

2. Странно, что дублируется рейтинг записи: сверху звездочки без пояснений, а снизу средний балл и количество голосов. Либо рядом всё это располагать, либо нижнее убрать, либо придумать более легковесный вариант индикации (например, как на ньюс2ру).

3. Виджет для голосования слишком тяжелый. Не нужно одновременно писать «оценить» и «проголосовать». Возможно, стоит укоротить ряд радиобатонов и оставить только кнопку с надписью «оценить».

Александр Кучеренко, 09.10.2008 21:20

Посмотрел варианты решения данной задачи и ужаснулся.

Предлагаю свой вариант:
http://www.site-planner.ru/temp/deadland-site-planner_ru.gif

Дмитрий Сергеев, 09.10.2008 21:38

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

И еще не учтен случай поста без ката. Как добавить комментарий? Как оценить материал? Выльется в то, что посты без ката будут набирать меньше голосов и комментариев

А вообще довольно смело, возможно, если развить, выйдет хорошо.

Александр Кучеренко, 09.10.2008 22:29

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

По-поводу оставления комментариев и оценки. Эти функции должны быть уже после перехода на страницу с полным текстом сообщения (статьи). А то получается мы толком не дали посетителям прочитать сообщение, а при этом даем возможность сразу оставить отзыв и комментарий. Не порядок =)

P.S. Не понял, что значит слово "ката".

Дмитрий Сергеев, 09.10.2008 22:46

>> Люди будут пользоваться служебной информацией... При этом в визуальном дизайне ей отведено второстепенное место.

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

>> Эти функции должны быть уже после перехода на страницу с полным текстом сообщения (статьи)… Не понял, что значит слово "ката".

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

Александр Кучеренко, 09.10.2008 23:16

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

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

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

~xXx~, 09.10.2008 23:31

по макету в теме статьи:
- не понравились тэги. информационно, но не кликабельно. во всяк случае визуально (может и подсвечиваются, но не просятся ткнуть - может в ленте это, правда, и плюс)
- удручила голосовалка - а нафига она вообще в ленте?! голосовалке место внутри материала....
- ЖЖ-шная тема про "далее" и кол-во каментов... стремно. "далее" убиваем и делаем кликабельный заголовок.
- понравились звездочки... PS читаем блог Степана Резникова, как он их делал для Евросети - просто гениально.

PSS
я бы вообще число каментов впендюрил аппером справа от заголовка... гораздо сильнее бы привлекало внимание к контенту.

Дмитрий Сергеев, 09.10.2008 23:51

Кому интересно, вот про звездочки у Степана Резникова.

>> Удручила голосовалка -- а нафига она вообще в ленте?!

Ай, просмотрел :) Хотя на самом деле если посты без ката, то нормально -- не прятать же ее внутрь.

>> Я бы вообще число каментов впендюрил аппером справа от заголовка... гораздо сильнее бы привлекало внимание к контенту.

Можно бы сделать как на дигге, только с количеством комментариев. Хотя кто-то будет путать число голосов и комментариев наверное.

~xXx~, 10.10.2008 00:03

про каты - конечно момент избирательный. в том смысле, что зависит от проекта. меня периодически вообще к автокату склоняет - 300-400 символов и обрез с тремя точками в виде ссылки. такое решение больше склоняет к прочтению....
ИМХО, голосовалка в контексте ленты - графический мусор...

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

Дмитрий Сергеев, 14.10.2008 21:12

Про гэлапа интересно. Но можно ли приравнивать скачивание программы к загрузке страницы?

Для меня счетчик просмотров, количество комментариев и "звездочки" очень местечково работают. На ютьюбе ориентируюсь по количеству просмотров, и потом по "звездочкам". На форумах по количеству ответов. В основном же по заголовкам и тизерам, не нуждаясь в дополнениях. Блоги тяготеют к основному варианту: что на главной, то и просматривается.

~xXx~, 10.10.2008 00:09

>> Можно бы сделать как на дигге, только с количеством комментариев. Хотя кто-то будет путать число голосов и комментариев наверное.

решаемо пиктограммами:
поднятый палец руки - голос
орущая морда - камент

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

но в любом случае, я бы считал ещё и просмотры...

Дмитрий Сергеев, 14.10.2008 21:35

Может быть, что больше посетителям импонирует, то и стоит использовать. Например, на некоторых сайтах ни в какую не идет голосование. А в других случаях много комментариев не там где интересный материал, а там где кто-то кому-то резко ответил. Количество просмотров -- хорошо, но его сложновато считать объективно. И если в первые дни еще туда-сюда, то потом, когда на внутренние пойдет непредсказуемый трафик с поисковиков…

Александр Кучеренко, 10.10.2008 00:09

Вариант с поправками на приоритеты информационных единиц:
http://www.site-planner.ru/temp/deadland-site-planner_ru2.gif

~xXx~, 10.10.2008 00:26

прикольно. но не нравится механичность контента... "автор" и всё такое...

живее был бы вариант:
написал Гуманист - 29 мая в 5:00.

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

я бы вообще вынес календарь листком в замену юзерпика в ленте.
лень рисовать - как то так

29 мая Гуманист (ссылка на профайл в виде ико - чтоб ссылками не забивать)
5:00 А зори здесь тихие (подчеркнутая ссылка)

Александр Кучеренко, 10.10.2008 00:42

Конечно, зачем "механичность". Пусть лучше служебный блок выглядит как шифровка Штирлица =)

~xXx~, 10.10.2008 01:18

см. ниже - очеловечить можно и штирлица ;)

~xXx~, 10.10.2008 01:15

хз как пишутся тут ссылки на картинки - вобщем так...

что кликАбельно, то подчеркнуто.
блок с рейтингом провис... но он именно на месте - после анонса.

~xXx~, 10.10.2008 01:26

PS
если там этому гуру юзабилити в топике (Дим, не про тебя, а про автора "конкурса" или что там) надо показать, как смотрится мой вариант на его текста'з - пусть скинет текст - набирать влом )

Александр Кучеренко, 10.10.2008 10:53

Мне верстка такая не нравится. В глаза лезет все что угодно кроме заголовка и краткого описания поста. Приоритеты инфо-единиц очень плохо расставлены. Конечно, все зависит от того, что мы хотели получить.

"от Владимир Соловьев" - это точно робот написал =) По-человечески это звучит так: "от Владимира Соловьева".

~xXx~, 12.10.2008 14:57

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

в результате в компактной форме видно и кол-во комментариев и популярность тегов. дата вынесена крупно для случая, когда посты достаточно редки - если кол-во постов превышает 10-15 в день, то имеет смысл сменить её на текст.

по робот написал - просто попытка избавиться от повторяемого мусора типа "автор". можно просто убить "от" и автора заводить например курсивом.

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

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

ну и конечно убрано тошнотворное "далее"...

Дмитрий Сергеев, 14.10.2008 21:57

Мне одно время нравилась идея писать числа таким образом (будто степени). В данном случае число у заголовка -- количество комментариев, а у тегов -- количество постов в ленте. Не будет ли в неокрепшем сознании пользователя коллизии? Хотя у тегов без проблем числа можно убрать, а у заголовка дописать слово «комментариев».

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

~xXx~, 05.01.2009 18:23

мои пример предусматривает разумное отношение числа сообщений в день (5-10), с подсветкой "чисельника" при наличии камента.

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

~xXx~, 05.01.2009 19:49

>> Не будет ли в неокрепшем сознании пользователя коллизии?

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

PS
слово "КОММЕНТАРИИ" отвратительно так же как "ПОДРОБНЕЕ" или "ЧИТАТЬ ДАЛЕЕ"... информационный мусор