Подведем итоги недавнего конкурса юзабилистов. Задание было «улучшить страницу форума».
Исходный вариант страницы форума
Что не так?
В комментариях к заданию конкурса я высказался о зашумленности страницы. Там же stschurik четко указал на несколько недостатков: «Неоправданно высокий блок информации о пользователе… Номера страниц идут не рядом с заголовком, а в линию рядом с путём и ссылкой «Начать новую тему»… Не выделены заголовки таблицы… В списке тем не выделены четные и нечетные…»
Присланные варианты редизайна я выкладываю в комментариях к этой заметке — так будет удобнее критиковать и хвалить.
Комментарии
Дмитрий Сергеев, 09.09.2007 22:07
Редизайн Владимира Твердохлебова

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

Дмитрий Сергеев, 09.09.2007 22:33
Предложенный вариант хлебных крошек, в котором отсутствует текущая страница (чтобы не дублировать заголовок), -- это рационально. При этом идея вложенности страниц читается хуже, а посыл «вы находитесь здесь» совсем исчезает.
Номера страниц под заголовком -- это логично.
Даты постов и количества сообщений в дискуссиях важны не всегда, но в большинстве случаев они всё-таки нужны.
Дмитрий Сергеев, 09.09.2007 22:11
Читерский вариант от Александра Сергеева (скриншот 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

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

Дмитрий Сергеев, 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
Мне кажется в этом топике все узнали для себя что-то новое, и я не исключение.