Проектирование страницы форума: итоги конкурса

09.09.2007

Подведем итоги недавнего конкурса юзабилистов. Задание было «улучшить страницу форума».

Исходный вариант страницы форума

Исходный вариант страницы форума

Что не так?

В комментариях к заданию конкурса я высказался о зашумленности страницы. Там же stschurik четко указал на несколько недостатков: «Неоправданно высокий блок информации о пользователе… Номера страниц идут не рядом с заголовком, а в линию рядом с путём и ссылкой «Начать новую тему»… Не выделены заголовки таблицы… В списке тем не выделены четные и нечетные…»

Присланные варианты редизайна я выкладываю в комментариях к этой заметке — так будет удобнее критиковать и хвалить.

 

Комментарии

Дмитрий Сергеев, 09.09.2007 22:07

Редизайн Владимира Твердохлебова
Редизайн форума от Владимира Твердохлебова

Исходный вариант
Исходный вариант страницы форума

Дмитрий Сергеев, 09.09.2007 22:33

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

Номера страниц под заголовком -- это логично.

Даты постов и количества сообщений в дискуссиях важны не всегда, но в большинстве случаев они всё-таки нужны.

Дмитрий Сергеев, 09.09.2007 22:11

Читерский вариант от Александра Сергеева (скриншот Basecamp)
Скриншот Basecamp от Александра Сергеева

Исходный вариант
Исходный вариант страницы форума

Дмитрий Сергеев, 09.09.2007 22:50

В продукте 37signals нет страниц третьего уровня вложенности, поэтому хлебные крошки не нужны.

Блок с личной информацией не нужен, поскольку функции форума в Basecamp’е вторичны. Либо ты заходишь на такой форум из своей учетной записи, либо вообще не знаешь о его существовании.

Количество ответов в теме расположено удачно, поскольку Basecamp’ом пользуются совсем не случайные люди. Рано или поздно они догадаются, что значит это «число слева от заголовков тем».

В каждой строке таблицы писать «last comment by» я не считаю хорошим ходом.

Кнопка «Post a new message» заметная -- это плюс.

Где появятся номера страниц, не понятно.

Александр Сергеев, 10.09.2007 17:48

Дима, сорри, что не сопроводил скриншот basecamp'a комментариями - не было времени.

Да, форум и messages в basecamp немного для разных задач и я не буду их сейчас сравнивать.

Однако заметь, как здорово там преподносится информация:
1) число комментариев, название топика, кто и когда его стартанул - все рядом, глаз не бегает
2) если кто-то ответил на твой комментарий или твое сообщение, то иконка call-out меняет цвет на зеленый
3) контраст серого с синим позволяет тебе легко и непринужденно "считывать" названия сообщений (собтсвенно это первое, что делает пользователь)
4) контраст зеленого call-out с серым и синим позволяет тебе мгновенно определить сообщения, где от тебя ждут ответ
5) последний комментарий - очень полезная информация в том случае, если ты общаешься с небольшим числом знакомых тебе людей.

Дмитрий Сергеев, 11.09.2007 17:49

Да, всё достаточно удобно. Читается хорошо, ключевая информация выделена визуально, цвета не сбивают с толка. В разбираемом форуме «квадратики» тоже меняют цвет, если есть новые сообщения. Просто я как-то не упомянул об этом. Но в Basecamp’е иконка круче, конечно.

Дмитрий Сергеев, 09.09.2007 22:12

Редизайн от Kengry
Дизайн страницы форума от Kengry

Исходный вариант
Исходный вариант страницы форума

Дмитрий Сергеев, 09.09.2007 23:01

Про хлебные крошки без текущей страницы уже сказано выше. Про номера страниц под заголовком тоже.

В целом, это продуманный вариант.

Kengry обратил внимание на формат даты, подходящий форумам (начинать с года -- плохое решение).

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

Авторы тем вынесены в отдельную колонку. Это позволяет без лишних трудностей читать список тем.

Шапка таблицы заметно выделена, но не бросается в глаза.

Ссылка «Начать новую тему» хорошо заметна.

Ну и пчелка, конечно :)

Дмитрий Сергеев, 09.09.2007 23:14

Кстати, это вариант лучше остальных читается сверху вниз:
Заголовок раздела форума
Страницы 1, 2
Темы:
Тема 1
Тема 2
Тема 3

Дмитрий Сергеев, 09.09.2007 22:15

Вариант Валдера
Редизайн страницы форума от Валдера

Исходный вариант
Исходный вариант страницы форума

Дмитрий Сергеев, 09.09.2007 23:10

Если из хлебных крошек убрать стрелку, теряется подчиненность одной страницы другой.

Ссылку «Выйти» не стоит выделять красным. Пользуются ей не часто, а взгляд очень здорово притягивает. Позаметнее заголовка будет.

Блок с личной информацией сокращен и припрятан -- это хорошо. Только не уверен, что на каждой странице нужно здороваться с пользователем.

Чтобы номера страниц не шумели -- Валдер их убрал вправо. Может это и правильно.

Мне нравится расположение ссылки «Начать новую тему». Любой посетитель прочитает и прокрутит в голове. Думаю, что прирост новых тем может увеличиться процентов на 5.

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

Дмитрий Сергеев, 09.09.2007 23:29

Да, еще Валдер и Kengry убрали повторяющееся слово "оставил".

Дмитрий Сергеев, 09.09.2007 23:37

Моя версия редизайна
Редизайн форума от Дмитрия Сергеева

Исходный вариант

Исходный вариант страницы форума

Дмитрий Сергеев, 09.09.2007 23:42

Когда в таблице много строк, раскраска под зебру -- это хорошо.

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

Ссылка «Начать новую тему» достаточно заметна, однако, она находится на одном уровне с заголовком. Универсальность дизайна от этого страдает (не понятно что будет при длинном заголовке). Надо ссылку пониже сместить.

Блок с личной информацией максимально сжат, но не всем будет ясно, что скрывается за ссылкой «Ваня».

Валдер, 10.09.2007 15:53

А как будет работать стрелочка от хлебных крошек, если вложенность будет тройная, она так же будет отходить от слова Главная?

Дмитрий Сергеев, 10.09.2007 15:58

Я ждал этого :)

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

Валдер, 10.09.2007 16:09

Вообще, здесь 2 варианта:

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

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

Дмитрий Сергеев, 10.09.2007 16:23

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

А вообще дублирование заголовка в хлебных крошках -- это не очень страшно по-моему.

Валдер, 10.09.2007 16:30

Конечно не страшно, я не знаю почему это вас так взволновало:).

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

Дмитрий Сергеев, 09.09.2007 23:52

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

Алексей Новиков, 10.09.2007 00:32

Надо считать количество просмотревших. При помощи cookies.

Дмитрий Сергеев, 10.09.2007 00:34

Надо, но широко распространенные форумы так не делают. Да и настолько ли важна эта информация?

Алексей Новиков, 10.09.2007 00:40

Иногда важна. Особенно когда занимаешься скрытым маркетингом :-)

Да и просто когда поднимаешь себе авторитет. Многие просто-таки д#0$@т на такие показатели.

Дмитрий Сергеев, 10.09.2007 00:51

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

Young Skipper, 02.10.2007 14:53

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

Дмитрий Сергеев, 02.10.2007 15:26

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

Я не знаю, что Алексей Новиков имел в виду ;)

Алексей Новиков, 10.09.2007 00:38

Как много пчеловодов поймут, что ссылка со слова «Ваня» — это настройки?

Лучше написать что-то вроде
«Здравствуйте, Ваня [ Настройки | Выйти

Не так красиво, зато понятно тем, кто еще не очень опытен.

Дмитрий Сергеев, 10.09.2007 00:49

Да, я уже где-то там наверху об этом написал :)

Тоже склоняюсь к ссылке не по имени, а по конструкции вроде «Изменить личную информацию». Чтобы было созвучно с «Выйти». Глаголы, так глаголы.

Валдер, 10.09.2007 16:04

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

Дмитрий Сергеев, 10.09.2007 16:25

Сложно сказать, что лучше. Наверное на аудиторию нужно смотреть, на оформительскую концепцию, еще на что-то.

grimskin, 10.09.2007 00:22

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

Дмитрий Сергеев, 10.09.2007 00:27

Да, согласен. Только нужно аккуратно, а то цветов станет слишком много :)

Валдер, 10.09.2007 16:23

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

Дмитрий Сергеев, 10.09.2007 16:29

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

Я однажды сделал форум без «зебры», так заказчик четко сказал, что ему легче разбираться, когда фон чередуется.

Тормоз, 10.09.2007 00:52

Дашь код для зебровой раскраски строк в PunBB? В него встроена зебра для сообщений в конкретном топике, но в списках, к сожалению, обломс.
Надо менять, как минимум, следующие файлы:
viewforum.php
search.php

Кстати, какие еще изменения планируешь внести в PunBB? Если будешь добавлять description и keywords, а также нормальный полный RSS в том числе и для каждого топика, то было бы просто супер :)
Меня здесь что-то не поняли...

Дмитрий Сергеев, 10.09.2007 01:03

Решение раз -- JavaScript zebra tables (там во второй части статьи).

Решение два -- твое. Я уже проделывал это, занимает пару минут и совсем не страшно.

PunBB пока кручу в сторону умных title, отличных от h1. Думаю над улучшением внутренней перелинковки. Сделал блок «Похожие темы». RSS тоже нужен нормальный, конечно.

Как-нибудь и я блестну в разделе «Выставка сайтов» на punbb.ru :)

Дмитрий Сергеев, 10.09.2007 01:09

Да, еще у меня ЧПУ. Вот, например, с твоего форума кто-то приходит, а в статистике ливинтернета только viewforum.php. Переменные-то отсекаются.

Кстати, прочитал тему на punbb.ru, вспомнил еще, что нужна легкая html-карта сайта. Спасибо тому парню-антиоптимизатору :)

Дескрипшены тоже нужны, хотя у меня острых проблем со сниппетами нет.

Нет ничего идеального...

Тормоз, 10.09.2007 01:19

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

"Похожие темы" - классно! На PunBB.ru выложишь?

ЧПУ надо, конечно, в статистике, действительно, неприятные вещи :( Но, честно говоря, просто побаиваюсь уже влезать в это, сколько времени потрачу? Да и что делать с уже созданными темами? На каждую делать редирект? Тем уже под сотню.

Насчет дескрипшенов: я думаю, на главной он должен быть из описания, на списке тем подфорумов из описания подфорума, а вот в каждой теме, например, первые 20-30 слов из первого сообщения. На страницах - добавлять еще "страница-1", "страница-2" и т. д., потому что гугл быстренько в supplimental засовывает странички с одинаковым описанием (это мной уже проверено).

Дмитрий Сергеев, 10.09.2007 01:27

Выложить сложно. Там и БД меняется, и PHP, и HTML, и CSS. И пока что кеширование не работает. Подумаю, что можно сделать. Повторить это можно минут за 15--20, а вот оформить в виде нормального плагина непросто :(

ЧПУ на самом деле кривое, и на работающий форум я бы побоялся его ставить :)

В дескрипшены на средних страницах можно писать названия нескольких первых тем. Так всё будет уникально и правдоподобно.

Тормоз, 10.09.2007 01:25

Кстати, посмотри форум этого антиоптимизатора. У него тоже ЧПУ, да и RSS есть кое какой.

Дмитрий Сергеев, 10.09.2007 01:33

У него, кстати, хорошее ЧПУ. Мне плохое досталось. А RSS всё равно без текста.

Тормоз, 10.09.2007 01:31

Повторить это можно минут за 15--20, а вот оформить в виде нормального плагина непросто :(
Да я это очень хорошо понимаю :) Сам уже, кажется, все перековырял, нереально даже вспомнить, где что.

В дескрипшены на средних страницах можно писать названия нескольких первых тем. Так всё будет уникально и правдоподобно.
Да, так даже лучше! Будет постоянно изменяться. Хотя ХЗ, надо ли, чтобы description менялся...
Кстати, ты выше писал, что title тоже планируешь менять, как именно?
Я решил сделать как обычно, просто h1 и все.

Дмитрий Сергеев, 10.09.2007 01:36

Да, не прописаны. Как-нибудь сделаю. Ты пока первый, кому понадобилось :)

Про title как-нибудь расскажу, соберусь с мыслями только. title=h1 -- не очень хорошо вроде бы.

Тормоз, 10.09.2007 01:31

А у тебя стили для blockquote не прописаны 8-р
P.S. А форум твой что-то не смог отыскать...

Дмитрий Сергеев, 10.09.2007 01:37

Форум пока на стадии становления, да и шаблон не доделан. Покажу потом.

Тормоз, 10.09.2007 01:43

Как это "досталось"? Где брал ты, и где взять мне хорошее? :)

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

А что плохого в title=h1? Наоборот, на мой взгляд, самое логичное применение.

Дмитрий Сергеев, 10.09.2007 01:52

Спроси у того парня, где он взял. Я когда выбирал на punres.org расширение, там было штуки четыре. Выбрал и ошибся, но менять не стал.

RSS посмотрю, спасибо.

Я не настолько компетентен, чтобы аргументировать недостатки title=h1. Просто бывают случаи, когда в h1 не напишешь всех ключей, каких хочется. А в title можно. title ведь только в выдаче заметен...

Валдер, 10.09.2007 16:32

Дмитрий, я что-то не нашел ваш вариант апгрейда этого форума, или я был не внимателен?

Валдер, 10.09.2007 16:35

Пардон, вижу:).

Дмитрий Сергеев, 09.09.2007 23:37
Моя версия редизайна.

Дмитрий Сергеев, 10.09.2007 16:46

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

Спасибо вам за поддержку. И всем участникам тоже спасибо.

Валдер, 10.09.2007 17:27

Мне кажется в этом топике все узнали для себя что-то новое, и я не исключение.